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

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

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

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

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

６つの技術

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

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

HTML / CSS

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

最近では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 の２択になるかと。

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

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

４つの知識

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

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

各種ライセンス

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

そーゆーライセンス周りを把握して、自分の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

パブリックドメインの写真 - フリー写真素材

商用利用ＯＫ＆無料の写真・フリー素材を集めました！総合素材サイト｜ソザイング

2000ピクセル以上のフリー写真素材集

高解像度ホームページ写真素材「フリーフォトボックス」

著作権フリー商用可！無料画像の写真素材♪ラブフリーフォト

free model pictures

PAKUTASO/ぱくたそ-WEB制作デザイン向けの無料写真素材/商用可能

写真素材 足成【フリーフォト、無料写真素材サイト】

【フリー写真素材】モデル・人物の写真素材はモデルピース

女性モデルのフリー画像 無料人物写真素材のモデル・フォト

無料人物写真フリー素材の【ビジトリーフォト】商用利用ＯＫ

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さん、海外でもDevSnippetsやtripwire magazine、DesignFloatなどの記事をRSS購読しといて、気になるプラグインが紹介されてたら、すかさずブックマーク！自分なりのカテゴリに分けて保管しとけば、いざって時にそれを見返して使えます。

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

使えそうなwebサービス

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

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

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

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