2014年12月中旬、エンタメ系企業A社より、ある旅行代理店と共同で運営する、北欧の1国の観光情報サイトを作成して欲しいとの依頼が入りました。

以下は、その依頼を受けてから実際に制作するまでの工程です。
WEBクリエーターを志望する人にとって、制作工程は知りたい情報のひとつでしょう。
どの制作会社も同様の制作プロセスを経るものと思います。
参考にして下さい。

-------------------------------------------------------
(1) A社代表と話し合う。サイトの目的や要望は下記の内容。
・北欧のある国への観光召致を目的とするサイトを、企画会社と旅行代理店が運営する。
・ターゲット層は30代から60代(やや高齢な層)。高級感と品格やセンスのある美しいサイトにして欲しい。
・グローバル・ナビゲーションは、「グルメ」「宿泊」「観光」「いいモノ」「ツアー情報」等。
・中心コンテンツは、プロ写真家の数千枚の写真と、ガイド役のサイト・オーナーのコメント。
・コンテンツは追加していく予定なので、更新しやすいページ構成にして欲しい。同様の理由で、メニューやタイトルはテキストにして欲しい。
・3クリック・ルール適用。
・パンくず導入。
・ヘッダー、フッターはブラウザ一杯のWidthで、モダンなサイトデザインを希望。
・メールフォーム。
・予算が合うならばスマホ/iPad対応(レシポンシブ・デザイン)。

※3クリック・ルール: 目的のコンテンツまで3回のクリックで辿り着くようにサイトの設計をすること。
※※パンくず: グローバル・ナビゲーションの下の「Home>観光>ホテル」のような、今自分がどこにいるかというオリエンテーション情報を示すリンクのこと。語源はヘンデルとグレーテルの童話。迷わないようにパンくずを道しるべにしたという話が元になっている。


(2)上記要望を勘案して企画書と見積書を作成。
企画書には、下記を追加。
・JQuery (ImageSlider, LightBox)。
・PHP (Mail Form)。
・競合サイト/類似サイトの調査。

見積もりは無事承認。

(3)プリ・プロダクション段階
・全体のサイトマップの作成(サイト・オーナーが作成)
・ワイヤー・フレームの作成(プロダクション・サイドであるこちらが作成)
　トップ、第二階層、第三階層で合計7パターンのレイアウト・テンプレートが必要であることが判明。

(4)マスター・プロダクション1 (WEBデザイン)
・Photoshopで、トップを含むレイアウト・パターン7種のデザインと配色を作成。
※Illustratorで、ロゴやバナーに使用するデザイン・オブジェクト、デザイン・パーツも作成。

(5)マスター・プロダクション2 (切り出し&コーディング)
・XHTML&CSSの標準コーディング　※Dreamweaverを使用。
・JQueryの実装(ImageSlider, LightBox)
・PHPの実装(Mail Form)
・スマホ/iPad対応(レスポンシブ・デザイン用コーディング)
・クロス・ブラウザ(IE, Firefox, Chrome, Safari)による検証。

(6)マスター・プロダクション3 (コンテンツの組み込み)
・トップ・ページ、及び、第二階層と第三階層の1ページずつにコンテンツを入れる。
・現在は写真と文章テキストを待っている段階。

--------------------------------------------------------

まだ本案件は完成はしていませんが、(1)から(6)までの段階で2週間程度です。
この後、コンテンツの組み込みを経て、検証・納品となります。

私のレッスンでWEBクリエーターを目指すという人には、上記の案件を制作の実際例としてお見せしたいと思っています。

※本記事が多少なりとも参考になれば幸いです。