★どんなウェブサイトを作るのか

制作前にイメージを固めておく

ウェブサイトの制作を始める前に考えなくてはならないのは、以下の二点です。

1. ページ構成…どのページにどんな情報を載せるのか
2. デザイン…どんな見栄えのウェブサイトにするのか

どのページにどんな情報を載せるのか

どのページにどんな情報を載せるのかというのは、ウェブサイト全体でどんな情報を伝えるのかということです。
伝えたい情報全体をどのように分割して何枚のウェブページで構成するのかまで、制作開始前に決めてしまいます。

手順としては、最初にウェブサイトに盛り込みたい情報をすべて書き出します。
この時点では、ワープロソフトなどで箇条書きにする程度で構いません。それらを整理しながら1ページ当たりの情報量が適切になるように分割してやります。

1枚のウェブページに情報を詰め込み過ぎても、反対に細かくページを分け過ぎても閲覧しづらいウェブサイトになってしまいます。
自分がユーザーになったつもりで、どのような単位で情報がまとまっていれば閲覧しやすいウェブサイトになるか、良く検討して適切にページ分割してやる必要があります。

このチュートリアルでは「ウェブサンプル株式会社」という名前の架空の企業サイトをサンプルとして作成していきます。
このサンプルサイトでは、以下のように4ページに分割しようと思います。

• トップページ　…　トップページらしいイメージ画像、新着情報
• 製品紹介　…　どのような製品を扱っているかの紹介
• 会社概要　…　企業情報、沿革、アクセス
• お問合せ　…　お問合せフォーム、電話でのお問合せ受付

ごくシンプルな構成ですが、簡単な企業サイトならこのくらいの情報が盛り込まれていればひとまず機能するでしょう。

「トップページ」「製品紹介」「会社概要」「お問合せ」の各ページに何を盛り込むのかについては、この段階で項目漏れの無いようによく確認します。
ウェブサイトを運営しながら、コンテンツを追加・変更できるのがウェブの長所ですが、その際にディレクトリ構成を大きく変更する必要の無いように、この段階で十分に検討してカテゴリ分けします。

後からディレクトリ構成を変えるということは、ウェブページのアドレスとなるURLを途中で変更するということです。
これは、せっかく検索エンジンに登録されてユーザーに覚えてもらったURLを捨ててしまうということですから極力避けるべきです。
ウェブページのURLは“育てていく”ものであることを、計画の初期段階から強く意識しておく必要があります。

どんな見栄えのウェブサイトにするのか

ウェブサイトのデザイン（主に見栄え）を検討する際、プロのウェブデザイナーの場合はPhotoShopやFireworksなどのグラフィックソフト上で最終的な完成画面を作成してしまうのが一般的です。
グラフィックソフトで完成画面を作成するメリットは、最終完成形を作成開始前にキッチリとパソコンの画面上で再現できる点にあります。
この時点で作成したロゴやアイコンなどを、そのまま使いまわせるというメリットもあります。

PhotoShopやFireworksのような高機能なグラフィックソフトを持っていなければ、手描きのスケッチでも構いません。
重要なのは、制作開始前にウェブサイトの最終完成形のイメージを固めるということです。

最終完成形のイメージが固まっていないまま作成を開始すると、徐々にウェブサイトの構成やレイアウトなどに矛盾が生じがちです。
そのような状態になれば、デザインの修正を繰り返したり、せっかく作ったウェブデザインを丸ごと廃案にすることにもなりかねません。

トライアンドエラーを繰り返しながらデザインの方向性が定まっていくこともあるので、そうした作り方が絶対にいけないということはありません。
しかし、今回のサンプルサイト作成においては、基本通り、先にデザインのイメージを固めてから制作を開始しようと思います。
今回作成するウェブサイトの完成形は以下のようなものとなります。

完成したサンプルサイトを確認する

架空の企業サイトということもあり、あまり奇抜にはせずに安心感のあるデザインにしました。
ちなみに、このサンプルサイトのデザイン作成では、ほとんど手描きのスケッチはしていません。
オーソドックスなグリッドレイアウトであるため、メニューボタンの配置などのごく簡単なレイアウト図を描いただけで、すぐにパソコン上でグラフィックを作成しています。

何らかの企画サイトのように、より自由な発想や遊び要素が求められる場合には、手描きのスケッチでパターンを出していくほうが、パソコン上の作業で無駄が出にくいでしょう。