そのホームページの役割は何か?

実際に対象とされるユーザー層はどういった層なのか、そのホームページの役割は何かを知らなければ、デザインやインターフェイスには活かせません。
例えば、コーポレートサイトでしたら信用を見込み客に与えるためにあるのか、売上を上げたいがためにあるのか役割を明確にしましょう。
実店舗に来られない新規のお客様に商品やサービスを知ってもらいたいのか、それとも既存のお客様への信用を得たいのか、ブランドイメージを上げたいのかなど、まずはそのホームページの役割を明確にする必要があります。

コンテンツを作りましょう

ホームページの役割を明確にしたら、次にコンテンツを作りましょう。この段階は情報の洗い出しが目的なのでワード（MS Office word）で良いのでどんどん書き出しましょう。例えば会社紹介だけでなく見込み客の集客をしたいのであれば、ホームページに多くの情報を充実させてお客様に信頼してもらいましょう。

Webサイトの構成図

そのWebサイトに必要なページを全て書き出し、Webサイトのページ構成を階層化し、ツリー上に整理します。

 

Webページの設計図「ワイヤーフレーム」

ワイヤーフレームとは、デザインを可視化させる「サイトの設計図」になります。
サイト全体の設計が関係者全体で事前に共有できるようになり、ゴールがぶれなくなります。

まず、大枠の要素を書き出します。
ロゴ
ヘッダー
ナビゲーション
ボディ
フッター

次に実際にレイアウトしていきます。
トップページ、サブページそれぞれのレイアウトを何で書くかは人それぞれで、Illustrator、Excel、PowerPoint、手書きなどさまざまです。注意すべき点は、出来るだけ色を付けずに白黒で記載し、デザインや色、模様などに話が偏ってレイアウトの話から外れないようにしましょう。

 

サイトマップとの違い

サイトマップとは、サイト内のページリンクをまとめたページのことで、検索エンジンと検索ユーザー両方に、そのサイトにどのようなページがあるのかを伝えるためのものです。ワイヤーフレームはページ内で「何を」「どこに」「どのように」表示させるかをまとめたものです。これに対して、サイトマップはwebサイト全体の配置を表します。

デザインの方向性・仕様を決める

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

Webデザインの確認

通常WebサイトはいきなりHTMLのデータとして作成することは少なく、下記のようにヘッダー、フッターなど全て含めて１つのグラフィックとしてデザインした上で、 HTMLで表示するためのコーディング作業を行います。 そのためグラフィックの段階でデザインを検討しておくのが、後工程に影響を与えずにすみ、理想的です。