§1 - レイアウト

1-4 ナビゲーション配置例

▼パターン毎の配置例とその派生型
ナビゲーションの位置は、サイトのコンテンツ量及び強調したい要素によって、向き不向きがあります。
また、見慣れた配置以外では、サイトを特徴付ける一方で訪問者が戸惑いやすくなるという欠点もあります。
特別な意図がない限りは、よく使われる配置の中からサイトに合ったものを採用しましょう。


-○上に配置
画面を開いた状態のままサイトの概要を把握出来ます。
最上部のタイトルとナビゲーション以外の部分を全てコンテンツに使用出来るのでレイアウトの自由度は高まります。
ただし、コンテンツが少ない場合は空白が多くなりレイアウトが困難です。ナビゲーションの横幅が画面幅で決定されてしまうため、ナビゲーションの項目が多い場合は不向きです。


画像j1-4-12


画像1-4-13は、ナビゲーションの下にサブ階層ナビゲーションを追加したものです。
ナビゲーションの項目が多い場合は階層化する事により1画面内に収める事が可能になります。
このパターンでは通常のナビゲーションバーだけでなく、サブ階層ナビゲーションの高さを大きく取り、メニューと一緒にイメージを表示する手法もよく使われます。


画像j1-4-13


-○下に配置
前述の上に配置とは対象で、下に配置するパターンです。
上に配置する場合と同様に、必要に応じてサブ階層ナビゲーションを追加出来ます。
画面上部をコンテンツエリアとして広く使用出来る一方、スクロール無しでナビゲーションが見えるようにしないと使い勝手が悪くなるため、高さに制限があります。
コンテンツエリア及びナビゲーションには、FLASHが用いられる場合が多いです。


画像j1-4-14


-○横に配置
多くのサイトでは左側にナビゲーションが配置されますが、右側の場合もあります。
ナビゲーションが横に配置された場合は、項目が増えても縦に伸びるだけなので項目数が自由になり、後で追加になっても柔軟に対応出来ます。サブ階層がある場合は、隣にサブ階層のブロックを増やすか、グローバルナビゲーション内でインデントを用いて表現します。
ナビゲーションの反対側にバナーや補足コンテンツなどのブロックを作成する事も出来ます。


画像j1-4-15


画像j1-4-16


画像j1-4-17


-○複合型
上下横の配置を組み合わせたパターンです。
上部にナビゲーション、横にサブ階層ナビゲーションを配置する事により、多くの情報を効率良くレイアウト出来る汎用性に優れたパターンです。情報量の多いサイトで用いられる場合が多いです。


画像j1-4-18


>>このページの上に戻る

スポンサードリンク

SponsoredLink

MENU

§1 - レイアウト
1-1 レイアウトの基本
1-2 コンテンツとは
1-3 ナビゲーション手法
1-4 ナビゲーション配置例

§2 - カラー
2-1 属性
2-2 連想作用
2-3 配色の掟
2-4 配色の掟2

§3 - WEB標準とユーザビリティ
3-1 WEB標準
3-2 アクセシビリティ
3-3 ユーザビリティ

§4 - WEB制作の流れ
4-1 ワークフロー1
4-2 ワークフロー2
4-3 ワークフロー3
4-4 ワークフロー4
4-5 ワークフロー5
4-6 ワークフロー6
4-7 ワークフロー7
4-8 ワークフロー8
4-9 ワークフロー9

about

将来WEB制作の職に就きたい、アフィリエイトを本格的にやってみたいという初心者向けのサイトです。
WEB制作を行う上で知っておくべき常識を、体系的に解説しています。
記事内容は初心者を想定しています。

当サイトのプライバシーポリシー及び運営者情報については、下記リンク先のページをご覧ください。
プライバシーポリシー
運営者情報

アクセスランキング

アクセスランキング