はじめに

ウェブ制作の業務において、筆者のチームが制作する成果物の一覧と、それぞれで定義する項目を記載します。

チーム共有用として書くので、実践に近いものとなるよう書いていきます。

なお、制作からサイト公開までのフローに限定し、公開後の運用についてはこの記事では書きません。

成果物一覧

次に、それぞれで定義する項目について紹介します。

ウェブサイトの目的を明確にし、ドキュメントに書き起こします。

ウェブサイト企画書と同じような役割のドキュメントで、別の呼び方をする資料もあり、提案書・プロジェクト憲章などがそれにあたります。

いずれにしても、ウェブサイトの目的や目標を明文化し、参加メンバーがいつでも閲覧できる状態にしておくことが重要です。

ワイヤーフレームでは、どのコンテンツを、どれくらいの量、どの順番で置くかを定義します。また、可能な限りその理由についてもワイヤーフレームに記載します。

ワイヤーフレームは、次の工程のデザインカンプのインプットとなる資料です。

どのように見せるかはデザインカンプで定義する領域なので、このワイヤーフレームで見た目を決めすぎないよう注意が必要です。

たとえば、画像をカルーセルで表示するといったようなことはワイヤーフレームで定義するべきではありません。

ワイヤーフレームでは、その場所で見せたい画像の内容や枚数、他の要素との組み合わせ具合のみを定義します。それに対して、デザイナーが「カルーセルで表示するのがもっとも効果的だ」と考える場合に、はじめてカルーセルという打ち手を選択することになります。

デザインカンプでは、ワイヤーフレームで定義した内容を1枚の画像として起こします。

「あるひとつの状態における」というのは、現代のウェブサイトはさまざまな大きさのデバイスでの表示を前提とすることが普通となっているため、1枚の画像でしかないデザインカンプではウェブサイト見た目を再現することはできません。

たとえばアナリティクスタグなど、本番サイトでしか使ってはいけない情報がある場合を除き、納品する状態に限りなく近いものをここで作成し、お客様に最終確認をしてもらいます。

とくに本番で使えないものがない場合は、これがそのまま納品物になります。

サーバーやドメインの切り替えなど、本番サイトでできる作業を行って、制作のプロセスがすべて完了します。

当たり前のことしか書いていないような気がしますが、ウェブ制作の現場では意外とこのような決め事がなされないまま後工程に進むケースをよく目にします。

ウェブサイトの目的が曖昧、、ワイヤーフレームにダミーの文章と画像しか入っていないままカンプ作成が始まる、、等。

経験の長い人であれば、そこからでもそれらしいウェブサイトは作れるものですが、本当に価値のあるウェブサイトを作るなら、しっかりと上流工程から決めるべきことを決めていきたいですね。

最後までお読みいただきありがとうございました。