2.構成・ワイヤーフレーム

サイトの全体的な要件が決まったら、今度はサイトの設計図を書いていきます。これらのサイトの骨組みは構成図、ワイヤーフレームと呼ばれます。

詳細なディレクトリマップの作成

ディレクトリマップとは、サイトのディレクトリと各ページのつながりを示したサイトマップのようなものです。

要件定義の際に大まかに決めている場合もありますが、サイト制作において、実際なんのページを何ページ制作するのか、どのように遷移していくのかなどを示すマップを制作します。

ワイヤーフレーム制作

ワイヤーフレームでは、具体的なサイトの骨組みを決めていきます。ワイヤーフレームでは、具体的に各ページがどのようなレイアウトで、どのような要素が配置されるかなどを決めていきます。

この時点でページ全体のテキストなども決めてしまう場合もありますが、テキストを配置する場所だけ決めてダミーの文言を入れておくケースもあります。

制作に利用するソフト

ワイヤーフレームを作成するのに一般的なソフトはパワーポイントが利用されます。その他Excelを利用する場合もあれば、Adobe XDといったソフトもワイヤーフレームを制作するのに非常に便利な機能が揃っています。

以降の工程担当者の作業しやすさやファイルの互換性なども考慮し、選択してください。

3.デザイン

ワイヤーフレームが固まったら、続いてデザインのフェーズに入ります。サイトの骨組みをもとに、実際の見た目を決めていくフェーズです。

デザイナーとしっかりコミュニケーション

デザインの段階で実際のサイトの見た目（UI）の部分が決まってきます。ワイヤーフレームはあくまで骨組みなので、実際の見た目を決めるデザインの段階では大きく変わってくる可能性があります。

デザイナー側のアイデアで変えたいと思う場合も、ワイヤーの状態を忠実にしてほしい場合もどちらもあり得ます。ディレクターはデザイナーと密にコミュニケーションをとることが大切です。

手戻りに気をつける

Webのプロフェッショナルでもない限り、ワイヤーフレームの段階で全体の完成図を想像しきれる人は中々いません。クライアント側はデザインが完成して初めてイメージが湧きはじめるということも多いので、デザインを出した段階であれこれフィードバックが出てくる可能性が高いです。

ディレクターとしてデザインを提出する前には、一旦お客さん目線に立って、何か言われそうな部分を今一度チェックしてから提出するようにしましょう。

4.実装

デザインができたら、ついにWeb上で動くようにコードを書いていきます。

HTML化

できたデザインを画像の状態ではなく、実際にブラウザで動くHTMLに仕上げる必要があります。出来上がったデザインをHTMLに起こしいく作業になります。その際には、ハウスホバー時のアニメーションや見た目上の演出なども組み込んでいきます。

動的な機能の実装

静的サイトの場合は、出来上がったHTMLをサーバーにアップするだけで問題ありませんが、動的な実装する場合は、さらに色々なシステムの組み込みが必要になります。

その際にもフロントエンド側とバックエンド側での役割分担など、密にコミュニケーションをとっていく必要があります。その仲介役としてディレクターが的確な指示出しをして必要があります。

テスト、検証

実際に動くようになったWebサイトに不具合や間違いがないかを探すテスト、検証も非常に大切です。特に最近はスマホも数多く普及しているため、OSや画面幅の違いによって、表示不具合や機能が動作しないなどの場合もあるため、可能な限り実機で確認していきましょう。

またどのブラウザ、デバイス、どのバージョンまでを保証するかを要件定義で決めておくことも大切です。