ウェブサイトの設計

ウェブサイトを設計するためには画面のサイズの設定、画面の配置と分割の設定、具体的なナビゲーションの手法の決定、画面内での素材のレイアウトなどが必要になる。ここではそれぞれの設計す方について解説する。

ここではウェブサイト設計の重要な要素について解説していくが、これを自分で制作するウェブサイトに反映するためには1ー3ー2に示したようにウェブサイト全体の構造やナビゲーション手法などをフローチャートや絵コンテとしてまとめておくと良い。

1、画面サイズの設定

コンピュータのディスプレイモニタはVGA SVGA XGA SXGAUXGAなどの画面解像度で表示される。ウェブページのサイズは多くのユーザーが快適に見ることのできるように設定する。またウェブサイトの特性を考慮した画面サイズの検討も大切である。

一般には縦方向はスクロールによって閲覧してもらい、横方向のみのサイズを決める。ユーザーの画面サイズをSVGAに想定すれば、画面の横幅800ピクセルからスクロールバーの幅を差し引いて、760ピクセル程度の範囲内でレイアウトする。ユーザーの画面サイズをXGAと想定するのであれば、980ピクセル程度の範囲内でレイアウトする。

2画面の配置と分割

画面サイズを設定したら、そのスペースに情報をレイアウトするための基本フォーマットを決める。画面の基本的なレイアウトには左揃え、中央揃え、右揃えがある。

また、ウェブブラウザのウィンドウサイズの変化に伴ってレイアウトの横幅も変化sるレイアウトの方法をリキッドデザインと呼ぶ。

ウェブページではメインとなるコンテンツ表示領域とユーザーにアクセスルートを誘導するナビゲーション領域を分割表示する手法がよく利用される。色や罫線による分割、フレームによる分割方法などがあり、ナビゲーションは基本的にページの上部か左側に配置する。

3、ナビゲーション手法

ウェブページでは情報の全体像やアクセスルートを提示する効果的なナビゲーション配置が重要となる。主なナビゲーションの種類を示す。扱う上方の内容に合わせて適切なナビゲーションの種類を選択する必要がある。

①グローバルナビゲーション

グローバルナビゲーションとは基本的にすべてのウェブページ上で同じ位置にレイアウトされるナビゲーションのことでウェブサイト全体を自在に移動するためのメニューやトップページへのリンクが必要になる。

②ローカルナビゲーション

ローカルナビゲーションとは、ウェブサイト内の特定コンテンツ内で利用されるナビゲーションで、同一のコンテンツ感をユーザーが自在に移動するためのものである。そのコンテンツの閲覧中にはグローバルナビゲーション同様、ウェブページ内の同じ位置にレイアウトされる必要がある。

③直接ナビゲーション

直接ナビゲーションとはウェブサイトの階層構造とは関係なく関連性のある別のコンテンツへ直接移動できるリンクである。

④リモートナビゲーション

リモートナビゲーションとは、グローバルナビゲーションやローカルナビゲーションを補完する役割を果たすもので、サイトマップなどがこれにあたる。

⑤パンクズリストナビゲーション

閲覧中のページの上位階層を表示することで現在の位置情報を示す。パンクズリストもナビゲーションの一つであり、これを階層ナビゲーションとも呼ぶ。

⑥ウェブサイト内検索

ウェブサイト内検索機能もナビゲーションの一つと捉えることができる。ユーザーは任意のキーワードを入力し、検索結果から目的のコンテンツへ移動することができる。

4、画面内での素材のレイアウト

ウェブページの中にテキストや画像といった素材を配置したり背景に色をつけたりすることをページレイアウトと呼ぶ。ウェブページのレイアウト見おいて大切なことはy-ざーに情報の構造を明確に把握させることと、それを読み取らせる順序を視覚的に表現することである。

それぞれのウェブページの具体的なページレイアウトは絵コンテなどを利用して作成しておくと良い。次に基本的なページレイアウトの手法について解説する。

①グリッドシステムによるレイアウトの検討

ウェブページの素材である見出しや本文、写真やイラストなどの画像あるいはダイヤグラムなどの配置に関するフォーマットはグリッドシステムによって検討することができる。素材をグリッドのどこに合わせていくかによって、画面の印象や見易さが変わる。ウェブサイト全体に共通のフォーマットを適用することで、レイアウトを効率的に行うことができ、また、ウェブサイト全体に統一感を持たせることもできる。

②素材の配置を揃える

レイアウトの基本はウェブサイト全体にわたって統一されたフォーマットを適用することであり、どのウェブページでも共通する要素を同じ位置に配置する子tpである。これにより、ユーザーはどのページにおいても同一の視線の動きで提供されている情報を容易に読み取ることができる。

③構成要素の標準化

ウェブページを構成する要素が多くなってくると、画面構成が煩雑になってしまうことがある。このような事態を回避するためには画像や文字の大きさ、テキストの分量などについて同じレベルの情報は同じフォーマットで表現すと良い。これにより、ユーザーの視線は迷うことなく情報をたどっていけるようになる。

ただし、あまりにもフォーマットを細かく決めすぎると、画面が単調になり、アピールすべき部分が目立たなくなってしまう。決められたスペースに無理やり情報を押し込むのではなく、情報内容に合わせた柔軟なデザインが必要である。