Webサイト制作の手順をまとめます。

あくまで一例ですので、あしからず。

Webサイト制作のワークフロー

Webサイト制作の受注から納品までのワークフローは以下のようになります。

実際にはもっと細かくなることもあり得ますし、反対に省略される過程もあると思います。
また、このワークフローは仕事であることを前提としているため、個人的にWebサイトを作りたいという人には必要のない項目がいくつもあります。

今回は、仕事ではなく、ごく一般の人がWebサイトを作る場合、どういう手順で制作すべきなのか、という点に着目していきたいと思います。
必要なことは仕事とそう変わらないですけどね。

さて、それをを踏まえた上で制作手順を示すと以下のようになります。

では、各項目を見ていきましょう。

1.サイトのターゲットユーザーと目的を明確にする

Webサイト制作のはじめに必ずやらなければいけないのが、このターゲットユーザーと目的を明確にすることです。

世界中に溢れる数々のWebサイトの中から、自分のWebサイトを見つけてもらうためには、まず目的をはっきりとしましょう。
ありがちですが、5W1Hを意識すると良いかもしれません。

何のWebサイトか？
なぜ制作（開設）するのか？
誰に、どこで、どんな時に見てもらいたいか？
どういう手段で制作（開設）するのか？

ユーザーと目的がはっきりすれば、おのずと方向性が見えてくると思います。

2.サイトマップの作成

ここでどのようなコンテンツを配置するかを決め、サイトマップを作成します。
グローバルメニューやローカルメニューの項目を決めるのもこの段階です。

3.ワイヤーフレーム作成

Webサイトの設計図を作成します。
これまで文字で起こしてきたアイディアを、実際のWebサイト上のどの位置に配置するかを決めます。

細かなデザインは次の段階で作りこんでいくので、ここでは配置がとても重要です。
あとあとのコーディングで楽をするなら、1px単位で幅や高さ、位置を決めておきましょう。
どこに何を置くのかさえわかれば、紙とペンで作成してもいいでしょう。
私の場合はIllustratorやFireworksで作成します。

4.グラフィックの作りこみ

ワイヤーフレームを基に、各パーツのデザインを作りこみ確定させます。
使用するソフトはIllustrator、Photoshop、Fireworks等のデザインソフトです。

作成したパーツは、パーツごとにスライスを切って保存しておきます。

5.HTML/CSSコーディング

テキストエディタやDreamweaver等のソフトを使用して、ワイヤーフレームを参考にしながらコーディングを行っていきます。

作成したパーツもその都度配置し、ここで静的なページを完成させます。

6．プログラムの組み込み

完成した静的ページに、動的要素となるプログラム（jQuery等）を組み込みます。

組み込んだ後は動作をテストし、問題がなければほぼ完成です。

7.サイトを公開する

完成したWebサイトをサーバーへアップロードします。

実際は、ここまでの制作途中にテストサーバーにアップロードするなどして、その都度ブラウザ上での表示を確認した方がいいです。
特にプログラムはローカル環境では正しく動作しないことが多いです。

8.サイトを運用する

公開したらそれっきり、というWebサイトは少ないと思います。
アクセス解析や、コンテンツの充実や更新など、やるべきことはたくさんあります。
よりよいWebサイトを目指して頑張りましょう。

Thanks for reading to the end!!