• サイトマップ

トップページのレイアウト

トップページのレイアウトをする時に気をつけなければならないのは ナビゲーションの位置と、要素の位置です。 これはトップページに限らず、ページデザインを行う上でポイントとなる点ですが、 あえてトップページのレイアウトで紹介するのは、 トップページではさらに重要なポイントとなるからです。 なぜならトップページはどのページよりも分かりやすく、 内容を適切に表現しなければならないからです。 そのあたりの詳しいことはトップページの役わりを参照してください。

ナビゲーションの位置を考える

ナビゲーションの位置には大きく分けて、ページ上部、ページ下部、左ソデ、 右ソデの４パターンあります。

ページ上部

ページ上部は左ソデと並んで最もスタンダードなナビゲーション位置です。 これはWebページは左上スミを基準にページの表示を行うため、 ブラウザの表示画面の大小によって画面外にはみ出す可能性が少ないからです。

ページ上部のナビゲーションはユーザの目につきやすく非常に使いやすい位置です。 しかし、スペースに限りがあるため、コンテンツが多い場合は使用を控えましょう。 無理にコンテンツを並べると感覚がせまくなってしまい、 窮屈な、重い印象を与えてしまいます。

ページ下部

ページ下部は特に横方向型フォーマットのサイトに多くみられます。 メインビジュアルを引き立たせるためビジュアル部分を上に持ってくるので ナビゲーションが下になります。

ページ下部のナビゲーションを採用する場合、 ページが縦に伸びないように注意しましょう。 スクロールさせなければならない位置にナビゲーションを置くべきではありません。

左ソデ

左ソデとはページの左部分のことです。この位置は上で紹介したように、 最もスタンダードなナビゲーション位置となっています。 フォームなどを使いこの部分にナビゲーションを表示させているのをよく目にしますね。

この位置はコンテンツの数が多くても柔軟に対応できる位置なので多様されます。 しかし、だからといってたくさん詰めすぎるのはNGです。 スクロールせずにすべてのコンテンツが表示できるように注意しましょう。

右ソデ

右ソデとはページの右部分のことです。 この位置はよくサブコンテンツのナビゲーション位置と使用されます。

この位置はブラウザの表示画面の大小によって画面外にはみ出しやすいという欠点があります。 ですからここにメインのナビゲーションを持ってくる場合には サイトのサイズに対する配慮が不可欠になるでしょう。 しかし、うまく工夫すれば印象的なナビゲーションとして活用できる可能性があります。

スタンダードにいくならこの位置は補足的に使いましょう。 重要なナビゲーションは上部・左ソデに、サブコンテンツへのナビゲーションは右ソデに、 というような形です。

マウスを持つ手は多くの場合右手になるので(左利きの人ゴメンナサイ) 右ソデのナビゲーションの方が使いやすい、という声をたまに聞きます。 しかし、個人的には関係ないと思います。実際に画面上のボタンを操作 (タッチパネルのような感じで)する場合にはこの説もうなずけますが、マウスの場合、 実際にはカーソルを使って操作するのでどこでマウスを使おうと関係ないのでは…と思います。

要素の位置を考える

要素の位置はトップページのレイアウトにおいて非常に重要なポイントになります。 この位置に気をつけるだけでサイト全体の構成やコンテンツなどの構成を 効果的にユーザに印象付けることができます。

要素の配置に際してポイントとなるのは以下の点です。

• 重要な要素はページ上部に配置する
• 重要な要素にはスペースをとる

重要な要素はページ上部に配置する

重要な要素はページ上部にもってきましょう。 これはスクロールしなくても要素を確認することができるからです。 また、 体感的にページ上部にある要素は重要、または有益なものであるとユーザは感じるからです。

このポイントをナビゲーションの場合で考えてみましょう。 例えば以下のようなナビゲーションがあるとします。 このナビゲーションはインテリアに関するWebサイトで、 主要コンテンツは「インテリア講座」と「自作インテリアのススメ」、 サブコンテンツが「コラム」と「おすすめインテリア」だとします。

＜例１＞

• コラム
• おすすめインテリア
• サイトについて
• インテリア講座
• 自作インテリアのススメ

どうですか？これではどのコンテンツがメインなのかわかりませんよね？ この並びではコラムがメインなのではないかとユーザは感じてしまうでしょう。 これを「重要な要素はページ上部に配置する」というポイントに従って配置しなおすと以下のようになります。

＜例２＞

• インテリア講座
• 自作インテリアのススメ
• コラム
• おすすめインテリア
• サイトについて

こちらの方がコンテンツ間の関係がつかみやすく、わかりやすいですよね？ これは無意識にみなさんやっていると思いますが、 色々な要素に対してこのポイントについて考えてみてください。 これはとっても重要なことですよ。

重要な要素にはスペースをとる

これは対比の原則を利用した考え方ですね。 要素間にスペースを用いてコントラストをつけることで重要な要素を強調することができます。

例としてトップページに「イメージ画像」「更新情報」「サイトの概要」 の三つの要素がある場合のレイアウトについて考えてみましょう。 （ナビゲーションは省略します）

fig.1は「イメージ画像」を中心に、fig.2は「更新情報とサイトの概要」 を中心にトップページをレイアウトした例です。 グレイの四角が画像、黒枠の四角が更新情報、線がサイトの概要を表しています。

fig.1 fig.2

どうでしょう。こうして強調したい要素に、他の要素に対して、 スペースを多くとることでユーザに印象付けることができるのです。