タグ: ナビゲーション

[ コーディング ] ナビゲーション(グローバルナビゲーション)の作成法

19 3月 20
Kazu
,
No Comments

 

ナビゲーションは、グローバルナビゲーションに限らず、奇をてらわず、ユーザーが迷わず感覚的に使えるように、目につきやすい適切な位置に配置しよう。

ナビゲーションの役割

目的ページに誘導すること。

ナビゲーションの種類

  • グローバルナビゲーション
  • ローカルナビゲーション  より細部のメニュー。通常、サイドに配置する。
  • ページナビゲーション 記事の前後へのリンク。
  • フッターナビゲーション

グローバルナビゲーションは、ユーザーが迷わず利用できるよう、どのページにも同じ位置に配置された「トップの横並び」がおすすめである。

・サイト全体の統一感を持たせながら、ナビゲーションの存在をアピールしたい場合、上手に配色を用いましょう。
メニュー項目の配色を変えることによって、ページ内がブロック分けされ、一目で目に付きます。

・また、メニュー項目は、7個を限度に4〜5個に絞るのが理想的である。
また、ユーザーが一目で理解できるように、メニュー項目は、日本語の方がよい。

ユーザビリティに優れたサイトにするには。

  • ユーザーが選択したメニュー項目に下線もしくは上線を付ける。
  • 選択中のメニュー項目に背景色をつける。
  • メニュー項目に文字と共にイラスト、アイコンを用いる。
  • 「問い合わせ」「検索窓」など目立たせたいものは、一番右に配置するとユーザーの目を引く。
  • リスト項目が多量の場合は、優先順位をつけ、メリハリを付ける。

HTMLのul 要素でメニューの作成

Webサイトのナビゲーションメニューは、HTML文書にリスト要素である ul 要素で作成する。

主要なナビゲーションメニューである場合は、nav 要素で囲み、HTMLを作成する。

Read More…