§1 - レイアウト

1-3 ナビゲーション手法

▼代表的な4つのナビゲーション手法
ナビゲーションは訪問者がストレス無く、直感的に移動出きる事を目的とします。
ナビゲーション手法の特徴を把握し、最適なものを採用します。


-○カテゴリ別ナビゲーション(画像ボタン)
画像で作成したリンクボタンを使用し、カテゴリ分けしたコンテンツを各々のボタンに割付けます。
ボタンなのでビジュアル面で主張する事が出来、サイトイメージを演出出来ます。

今居るカテゴリだけ色を変えて表示するなどすれば、現在地を把握し易くなります。

欠点としては、カテゴリ分けとボタンへの割付け方が悪いと、訪問者が混乱します。
また、カテゴリが増減した際には修正に手間がかかります。


画像j1-3-8
引用:newsing

-○カテゴリ別ナビゲーション(テキストリンク)
前述と同じで、リンクがボタンではなくテキストになっているタイプです。
画像を使わない分軽快なので、膨大なリンクがあるサイトで多用されます。
カテゴリが増減した際の修正も簡単です。

欠点としては、画像ボタンの時と同じ項目が挙げられます。
また、テキストなのでビジュアル的な主張が困難です。


画像j1-3-9
引用:YAHOO JAPAN

-○格納型ナビゲーション
マウスオーバー(カーソルをその箇所の上に持っていく)すると、そのカテゴリ内のリンク先が一覧になって表示されるタイプです。
表示された一覧の中から更に深い階層の一覧を表示させる事も可能です。
クリックせずにどんなリンク先があるか把握出来る点、リンク先を柔軟に設定出来る点が優れています。

欠点としては、この手法は通常、ジャバスクリプトやフラッシュが使用されるため、
訪問者の環境によっては機能しません。
そのため、そういった場合のフォローが必須です。


画像j1-3-10
引用:NISSAN


-○パンくず型ナビゲーション
最上位から見て今どの位置にいるかを表したものです。訪問者は今居る場所とサイト構造を把握し易くなります。
他のナビゲーションの補助として使用し、メインのナビゲーションの近くに配置します。(画像j1-1-10)


画像j1-3-11
引用:楽天市場


▼メインのナビゲーションに取り込むものと除外するもの
全てのリンクをメインのナビゲーションに取り込むと、情報が煩雑になり訪問者は混乱します。
通常は以下の用に分類します。

・メインのナビゲーション
サイト内コンテンツ
・フッター
メディア掲載やリンクなどの問い合わせ、利用規約、プライバシーポリシーなど
・サイドバー
外部リンク


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

スポンサードリンク

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制作を行う上で知っておくべき常識を、体系的に解説しています。
記事内容は初心者を想定しています。

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

アクセスランキング

アクセスランキング