Webサイトの作成開始から公開までの流れを知っておこう

Webサイトの制作は、パンフレットやチラシなどの印刷物やソフトウェアなどの開発とも工程が似ています。企画の提案からデザイン案、制作を経てサイトのオープンとなります。ただ、Webサイトの場合によく起こる問題が「コンテンツ」を考えずに「デザイン」からサイトの制作に入ってしまうケースです。

Web制作の流れは「コンテンツ」からはじめる

Webサイトの制作を「しくみ」や「外観」先行で進行するのは、良いこととはいえません。いわゆる「デザイン案」や「プレゼンテーション」段階のデザインがそのままコンテンツを決定してしまい、伝えたいことが言い足りない、肝心な部分が目立っていないなど、さまざまな不具合のあるサイトになるからです。せっかく作っても、メッセージが効果的に伝わらないサイトになってしまいます。

コンテンツにふさわしいデザインのWebサイトを作るには、基本的に、次のような工程でWeb制作を進めましょう。

1. まずサイト内容を決める

なにを目的とするサイトか、どんな内容を伝えたいかを決めます。この際、ヒアリングといって、発注者から希望の内容を聞き取りしてサイト制作者が方向性や企画を提案する場合と、オリエンテーションのように発注側が制作者に作って欲しいサイトの企画を説明する場合との大きく2種類のスタイルがあります。

2. サイトの構成、目次を決める

サイトマップにあたるような、全体の目次案を考えます。大規模になってくると「仕様の決定」「要件定義の決定」などということもあります。基本的には「どんな内容を」「どのような並び順」でサイトに載せるかを決めることです。

3. デザインの方向性・搭載する仕様を決める

コンテンツに合わせて、どんなデザインテイストにするか、どんな使い勝手にするかを決めます。仕様をデザインより前に決めるのは、プログラムの必要性などをあらかじめ検討するためです。

4. デザイン案（カンプ）の作成と検討

デザイン案を作成します。この際に「文字数は何文字くらい」などの検討を付けますが、実際に掲載したい原稿をいったん用意するほうが、より現実味のある検討ができます。デザインのみで進めて、のちのち内容がよく伝わらないという問題が発生するのを避けられます。

コンテンツが決まってからデザインを決める場合も、Webサイトのテイストやサイズ別に選べるBiNDクラウドの豊富なテンプレートを使えば、Web制作のスムーズに進められます。

BiNDクラウドの豊富なWebサイトテンプレートを見る

5. HTML制作、動的機能の実装

デザイン、材料をもとに、すべてのページをWeb化します。ある程度の日数がかかる工程なので、いくつかの「マイルストーン」を設定して、スケジュールに則って作業を進めることで、検証の遅れや後戻りが軽減できます。たとえば「1.トップページの制作とチェック」「2.製品紹介ページの制作とチェック」など段階を設けることで、スムーズに進行できます。

6. 仕上がりをチェック

HTML作成のために提出した原稿や内容が、正しくWeb化されたかを確認します。公開して問題ない状態かを再度確認します。また、指定どおりの内容になっているかも確認します。

デザインは動的・静的どちらの状態でチェックする？

Webデザインのテイストは、どの段階でチェックするべきでしょうか。通常WebサイトはいきなりHTMLのデータとして作成することは少なく、いったん平面的なグラフィックとしてデザインした上で、HTMLで表示するためのコーディング作業を行います。そのためグラフィックの段階でデザインを検討しておくのが、後工程に影響を与えずにすみ、理想的です。

ただし、動きの感覚は実際に使ってみないとわからないところも多く、グラフィックの止まった画像ではイメージを掴むことが難しいものについては、できれば「プロトタイプ」「モック」といった動くデータを見て、善し悪しを検討すべきでしょう。

ふんわり表示される画像や、スクロールのスピード、メニューの表示方法など、さまざまな部分で動的な要素が使われるので、グラフィックのデザイン段階でどう動くのかも議論しておくとよいでしょう。

なお、動的なデザインについて、希望をフィードバックするのも難しいものです。「時間（速度）」や「擬音」をはじめ、参考になるサイトやテレビ動画、YouTube動画などを素材などを使うと、要望を明確に伝えられるようになります。

間違っていないか「第三者の目」でチェック

原稿チェックの段階は、基本的に自分の指示した通りのものが指定の場所に入っているか、Webページを読みながら確認します。リンクも正しいかどうか確認します。

また、自分では当事者としての思い込みがありますから、チーム内の別のメンバーや、校正担当者などに依頼して、サイト内の原稿や画像に不明な点がないか、使い勝手に不備はないかなど、確認してもらえるとベストです。

たとえば、デザインの修正に夢中になっていて、該当箇所のスペルミスに気づかないなど、長時間制作に携わっている人ほど見つけづらいミスがあるものです。

なお、完成したWebサイトは、公開してからも修正できますし、反響をチェックする、更新するなど、公開後に育てて行くことも大切です。