Own products

  • 新規事業のアイディア創造機

Material

2012
01/10

たった一人でwebサービスを作るための、6つの技術と4つの知識

この記事の読了時間:約1342

  • このエントリーをはてなブックマークに追加

ふとワクワクするようなアイディアが浮かんだ時、もし自分でwebサービスを作れたらなーって思う方も多いんじゃないでしょーか。

実際、twitterやfacebookを徘徊してても、結構頻繁に「webサービス作ってみたい☆」みたいな投稿をみかけますが、中には「何から手を付け始めれば良いか分からない!」的な迷える子羊達もちらほら。

そんなワケで、ささやかながら今まで当ブログでもいくつかの自作webサービスを公開してきて、企画からデザイン・コーディング・プログラミング・宣伝に至るまで、若輩ながら全て一人で担ってきた私の知見をご紹介したいと思います。

だいじょーぶ、やりゃーできる!

webサービスを作るための技術と知識

6つの技術

技術に関する最大のポイントは「全てを知る必要はあるが、全てに精通する必要は無い」、つまり「広く浅く」で良いというコト。

その中でどこかに自分の強みが持てると尚良しですが、手始めであればまずはまんべんなく触れていった方が、一人で制作するには合ってると思います。

HTML / CSS

切っても切り離せないので併記しましたが、webサービスを作る上でこの2つのスキルは絶対必要不可欠です。

最近ではHTML5 + CSS3の話題も良く見かけますが、実際はまだまだブラウザ間の差分が多いし、現状ではHTML4系 + CSS2でも十分。ただし、常に100%varidなHTMLを書かなきゃいけない訳では無いけど、100%varidなHTMLを「書けるけど書かないのか、ただ書けないのか」はかなり違うし、余りにアレなHTMLだとJavaScriptを使った時とかに挙動がおかしくなったりするので、「正しいHTML」は書けるようになっといて損は無いです。

んで、正しいHTMLを書くには、firefoxのアドオン「Html Validator」や、W3Cのチェックサービス「Markup Validation Service」を使って間違いを正すように心がけていけば、そんなに難しくも無いと思います。

CSSに関しても、各種ブラウザでしっかり確認しながら作業するようにして、問題が生じたら面倒くさがらずgoogle先生にお伺いを立てれば、きっと先人が答えを導き出してくれてるはず。

あとはもう「書き慣れ」に限ります!最初は自分用のホームページとかを題材にしたり、なんならフリーのテンプレートpsdファイルをHTML+CSSに書き換えてみたりして、いろんなコードを書いては構文チェックして、ってのが結果的には近道だったりします。

結局のところ、よく使うタグなんて限られてるし、よく使うレイアウトも限られてるし、よく遭遇するIEのCSSレンダリングバグも限られてるし。

それを身に染み込ませる最良の方法は、とにかく書くべし!書くべし!

Photoshop

第一線級の写真加工が出来るとか、超ハイクオリティーな合成画像が作れるとか、そういった飛び抜けた何かを持っている必要は無くて、むしろ大抵のコトがまんべんなく及第点で出来るって感じの方がwebサービスの作成には向いていると思います。

webサービスを作る際に必要となってくるデザインスキルとしては、ボタンやロゴをはじめとした各種デザインパーツの作成や、全体的なページレイアウトと配色設計、各コンテンツの枠線や背景デザインなどが主軸ですので、どちらかといえばIllustratorよりもPhotoshopの方が重要かなと。

自分の場合、Illustratorは文字の加工(例えばロゴとか)が必要な場合くらいでしか使わず、ほとんどPhotoshopかCSSでデザインしちゃいます。

もちろんwebサービスのジャンルや想定ターゲット次第では、Illustratorを駆使してデザインにかける労力を大幅に増やすべきケースもあるので一概に「Photoshopだけで良い!」とは言えませんが、一人でwebサービスを作る場合、デザインだけにリソースを割く訳にはいかないので、力を抜いても何とか格好が付くようなトコは敢えて深入りしないようにして、よりスピーディに完成形まで持って行くコトを心がけた方が良いと思います。

どこかで線引きしとかないと、「透明度を31%にするか33%にするか」「#fcfcfcにするか#fafafaにするか」みたいなトコを延々と行ったり来たりし始めちゃって、継続のモチベーションやリリースのタイミングを逸しちゃうので。

そーゆーのはちゃんと全部作りきった後だったり、運用を始めてからでも遅くないと言い聞かせて、前に進む勇気も大事。

jQuery(JavaScript)

非同期な画面遷移や動きのあるエフェクトなど、最近のwebサービスにおいてJavaScriptは「必須」といっても良いんじゃないでしょーか。

そして、webサービスでJavaScriptが必要となる場合、その大概のコトは「jQuery」で出来ます。

非同期な画面遷移なら .load() や .ajax() なんかで、動きのあるエフェクトなら各種プラグインを駆使するなど、使い方に関しては様々なチュートリアルや使用例がweb上のアチコチにありますので、調べてみて実際に手を動かして、使ってみるのが一番しっくり来ると思います。

PHP

絶対に PHP じゃなきゃダメってコトでは無いんですが、webサービスに限定するのであれば、サーバサイド言語は PHP か Perl か Ruby が良いと思います。

これらはどれもweb上での情報が豊富なので、どの言語を選ぶかはホントに人それぞれですが、もし初めてプログラミングを学ぶなら「近くに教えてくれる人がいる言語」を選ぶのが最良です!

そーゆーのに詳しい友人が少ないとか、そもそも友人が少ないってゆー私みたいな方は、使ってみたいCMSで使われてる言語だったり、良く読んでるブログで取り扱われている言語を選んでも良いかと。

んで、その言語の基本的な構文や関数の使い方などのお作法を学び終えたら、そっから先は作りたいWEBサービスに必要なモノをつまみ食いしていくのが良いのかな、と。

一つ気をつけなきゃいけないのは、おおよそ全てのwebサービスでは、何かしらの「ユーザーからの入力を受け付けるフォーム」が必要になってくると思うので、そこでのセキュリティ施策はしっかり身に付けておくこと。

悪意あるユーザーにイタズラされないように、「入力値をそのまま出力しない」「数値入力欄に文字を入力されるコト(またはその逆)を考慮する」「バリデートをJavaScriptだけに頼らない」などといった対処をしっかり施さないと、せっかく使ってくれる善良なユーザーにまで迷惑をかけてしまいます。

この辺は「PHP と Web アプリケーションのセキュリティについてのメモ」とか「ockeghem(徳丸浩)の日記」などを熟読して身に付けましょー。

MySQL

こちらも特に MySQL である必要はありませんが、十中八九 MySQL か PostgreSQL の2択になるかと。

んで、恐らくサーバサイド言語とほとんど同時進行で学んでいくコトになると思うので、サーバサイドプログラミングの永字八法とも言われる「BBS(掲示板)」を作ってみるのが激しくオススメ。

一般的な掲示板の機能を実現するためには「入力フォーム → 入力値のバリデート → データベースに保存 or 更新」「データベースから取得 → 整形 → 出力」「データベースからデータ削除」という、アプリケーションの基本形であるCRUD(Create[作成], Read[読み込み], Update[更新], Delete[削除])は必須になるし、ページネーション機能や画像アップロード機能を搭載させたりしちゃえば、かなり総合的・実践的に学べます。

4つの知識

一人で作る以上、どれだけ有効にリソースを裂くかが要になってきます。

下記の知識は、これらを知っているコトで、より効果的な宣伝や効率的な作業を行うことが出来るというモノです。

各種ライセンス

画像やイラストはもちろん、スニペットやモジュールやプラグインやライブラリなど、世の中にはたくさんのフリー素材が溢れていますが、中には「著作者名の表記が絶対に必要」とか「商用利用はダメ」みたいな感じで、素材の使用条件を課したモノもあります。

そーゆーライセンス周りを把握して、自分のwebサービスがどのライセンスであれば問題なく使えるか、ちゃんと理解してから使用しないと、あとでアクシデントに繋がる可能性があります。

とはいえライセンス周り(特にGPLに関して)は複雑で、しかも法律が関係する専門的な分野なので、自己判断・自己責任をお願いしたいトコですが、いちおー以前「GPLやMITやCCなど主要ライセンスの内容と意味のまとめ」という記事を書いていますので、そちらをご参考にしていただければ。

ちなみに私の場合、「GPL系とCC系はハナっから使わない!」とゆー大雑把な方針です。

フリー素材の見つけ方

もし具現化する技術と潤沢な時間があるなら、自分のイメージどおりの画像を自力で作成していく方がいいのかもですが、使えるようならフリー素材を使った方が圧倒的に早くて効率的です。

とはいえ、どんなトコに行けば欲しいモノが見つかるかを知らないと、素材探し自体に時間がかかってしょーがない。

ここで大サービス!参考までに私の企業秘密、厳選秘蔵コレクションをば。

logo design
  • Logopond – Identity Inspiration
  • Browsing Logos & Logotypes on deviantART
  • Dribbble – Explore / Tags / logo
  • Logos – Creattica
  • Logoed
  • Logo Of The Day – Logo Design Inspiration, Gallery & Award Scheme!
  • Object moved
  • GLaim | ゲームロゴのデザインギャラリー
  • web design gallery
  • Web Design Clip [WEBデザインのクリップ・リンク集]
  • Webデザインリンク集・ソーシャルブックマーク – straightline bookmark | Web Design Bookmarking
  • WordPress Gallery – Best WP Websites and Blog Designs
  • CSS Gallery | CSS Showcase | XHTML/CSS Website Gallery | CSS Impress
  • Webデザインのリンク集 | ズロック
  • WEBデザイン リンク集 : ikesai.com — いけてるサイト ドットコム(WEBデザインの参考にどうぞ)
  • あんじょうできてはる
  • WEBデザインリンク集・デザインサイト一覧(週刊ウェブデザイン)
  • web design inspiration
  • Browsing Web Interfaces on deviantART
  • Dribbble – Explore / Tags / website
  • HTML / CSS – Creattica
  • web parts design
  • Elements of Design: A Web Design Showcase
  • Pattern Tap : Organized Web Design Collection of User Interfaces for Inspiration and Ideas. The CSS Gallery Alternative – Pattern Tap
  • UI Patterns
  • Webデザインの“ブブン”を集めたブブンデザインアーカイブ 公式サイト
  • free pictures
  • stock.xchng – the leading free stock photography site
  • morgueFile free photos for creatives by creatives
  • パブリックドメインの写真 – フリー写真素材
  • 商用利用OK&無料の写真・フリー素材を集めました!総合素材サイト|ソザイング
  • 2000ピクセル以上のフリー写真素材集
  • 高解像度ホームページ写真素材「フリーフォトボックス」
  • 著作権フリー商用可!無料画像の写真素材♪ラブフリーフォト
  • free model pictures
  • PAKUTASO/ぱくたそ-WEB制作デザイン向けの無料写真素材/商用可能
  • 写真素材 足成【フリーフォト、無料写真素材サイト】
  • 【フリー写真素材】モデル・人物の写真素材はモデルピース
  • 女性モデルのフリー画像 無料人物写真素材のモデル・フォト
  • 無料人物写真フリー素材の【ビジトリーフォト】商用利用OK
  • free icons
  • Icon Search Engine | Iconfinder
  • Free Icons | Stock Icons | Icon Pot
  • Icons & Icon Packs – Download Free PNG Icons | IconsPedia
  • Free Icons Web – Icons, Free Icons, Stock Icons, Desktop Icon
  • Icon Fever | Showcase of the Best Free Icons and Premium Icons
  • フリーWEB素材サイト「DOTS DESIGN(ドッツ・デザイン)」
  • イラストやWeb制作に使えるフリー素材を紹介 | 9search
  • どはー、ちかれた☆

    jQueryプラグインの見つけ方

    こちらも前述の通り、使い回せそうなら使っちゃった方が早いし正確だったりします。

    この手の話題を多く取り扱っているブログ、例えばcolissさんやphpspot開発日誌さん、かちびと.netさん、海外でもDevSnippetstripwire magazineDesignFloatなどの記事をRSS購読しといて、気になるプラグインが紹介されてたら、すかさずブックマーク!自分なりのカテゴリに分けて保管しとけば、いざって時にそれを見返して使えます。

    ちなみに私のjQueryブックマークフォルダには、総計17カテゴリー270記事が火を噴いておりますw

    使えそうなwebサービス

    最近ではクチコミ用にtwitterやfacebookといった外部webサービスに即時投稿できるような施策はほぼ必須ですが、その他にも、公開前にプレスリリースを送ったりするならValuePress!なんかを使ってみるのもいいし、サイトデザインに自信があるなら各種ウェブデザインギャラリー系のサイトに投稿してみるのも一興。

    無事サービスを公開したらツクログに投稿したり、キャンペーンページやランディングページの用意があるならランディングページ集めました。などに登録申請を出してみたり。

    そーゆーのを上手に利用させてもらうことで、認知度の向上や外部リンクの獲得といった嬉しい効果が期待できます。

    もし良いバナーが出来たら、バナーデザインギャラリーにも、ぜひw

    こうやって箇条書きにすると覚えるコトが多すぎるような気がしちゃいますが、基本「広く浅く」でいいんです!

    実際、私が一番最初に公開したwebサービス「RSSまとめ&タブ化ジェネレーター」では、データベースの知識やイラレの技術は全く必要なかったし、PHPに関しても基本構文の他には htmlspecialchars 関数と explode/implode 関数くらいしか使ってません。

    もちろん今ならもっとスマート且つエレガント且つスピーディに、当時以上のクオリティで作ることが出来ますが、大事なのは「それでもwebサービスは作れた」という事実。

    作っていくうちに必ず不明点や壁にぶち当たりますし、それを乗り越えていく過程で半自動的に、新たな知識を得るコトが出来ます。

    まずは動かなきゃ始まらない!

    • このエントリーをはてなブックマークに追加

    コメント一覧

    9 Responses to [たった一人でwebサービスを作るための、6つの技術と4つの知識]

    まこと より:

    2012/01/10 3:22 PM

    サーバサイドの言語やDBは覚えなくても
    html/css/JavaScript(jquery含)さえ分かれば
    あとは検索技術があれば案外何とかなったりする事も…

    匿名 より:

    2012/01/10 8:44 PM

    varid -> valid

    にゅーでいず 匿名店 より:

    2012/01/11 7:47 AM

    raijsとherokuでええやん。

    TAOSY より:

    2012/01/11 11:16 AM

    webサービス作る参考になった。いつ作るかは未定だけど。

    yuki24 より:

    2012/01/11 6:42 PM

    PHPはこれから始める人に対して勧められる言語ではありません。
    余計な記法ばかりが存在していて言語自体へのバグも多く、エコシステムが機能していません。誰かの周囲にいる友人のほとんどはPHPのバッドノウハウしか蓄積しておらず、良いデザインパターンとは何かを考えていません。
    これからは少なくとも Ruby か Python を勧めるべきでしょう。

    なん より:

    2012/01/12 1:21 AM

    「WEBサービス」が何を指しているのか分かりませんが、印象としては、書かれているのは、弁当箱をつくる技術であって、弁当の中身の存在がないですよね。平たく言うと、「弁当の作り方」ではなく、「弁当箱の作り方」と感じました。中身がないと弁当は成立しませんよ?

    さら より:

    2012/01/12 3:53 AM

    書いてある内容は間違ってないと思うんですけど、タイトルが内容に則していないような。これだけでwebサービスは成立しないのでは?ある種釣り的な感が。

    いやいや より:

    2012/01/20 8:04 AM

    揚げ足取りなコメントが多いなぁ

    Meemo!管理人 より:

    2016/04/21 10:16 AM

    よくまとまっていて、良い記事だと思います
    2016年の現在でも通じる内容ですね

    上のコメントで

    > PHPはこれから始める人に対して勧められる言語ではありません。

    とありますが、PHPはwebアプリケーションを作るサーバー側言語として現在は主流となっています。文法がシンプルなので何から始めれば良いかわからない初心者にはとりあえずPHPから、とお勧めできます。かといって貧弱かといえば、そうでもなく、オブジェクト指向的な書き方もできるし、本格的なwebアプリケーションを作るのに何ら支障はありません。
    PHP7から実行速度も速くなっているし・・・
    ・・・って俺なんでPHPの宣伝してるんだろw

    RubyでもPythonでも良いし好きなほうでってことでw興味があればどうせ全部やります
    JSPをやりたい!って初心者の子がいたら「なんで?www」ってなりますけど

    あと、他の方で
    > 「弁当の作り方」ではなく、「弁当箱の作り方」と感じました。

    についてですが、確かにその通りです。
    が、良い弁当箱ができあがれば、良いおかず(コンテンツ)を入れたくなるというのもまた真実で、

    例えば、
    2chを代表する掲示板サイトやtwitter、facebookなどのSNS、googleなんかはまさに弁当箱作りを徹底的に極めたおかげで成功した例だと言えます。
    自分で書かなくてもコンテンツが勝手に集まってくるんですねー

    良記事♪ということで
    コメントを残しときましたー

    コメントを投稿する

    お名前

    ご連絡先メールアドレス※非公開

    コメント

    CAPTCHA


    • このブログのRSSを購読する
    • このブログをtwitterでつぶやく
    • このブログをFacebookで共有する
    • このブログをはてなブックマークで共有する

    Favorite feeds

      Contact

      お名前※必須

      ご連絡先メールアドレス

      お問い合わせ内容※必須

      CAPTCHA

      captcha

      Blog parts

      Affiliate