はじめに
第20章ではヘッダーを整えました。
その中でも重要なのが、
グローバルナビゲーション
です。
グローバルナビゲーションは、
サイトの主要なページへ移動するための共通メニューです。
ここで大切なのは、
サイトにあるページを全部並べること
ではありません。
利用者へ、
「このサイトでは、まずここを見るとよい」
という主要な選択肢を見せます。
グローバルナビゲーションとは
たとえば店舗サイトなら、
初めての方へ
メニュー・料金
店舗紹介
アクセス
ブログ
お問い合わせのようなメニューです。
ヘッダーに置くことが多いですが、Themeによって表示場所は異なります。
グローバルナビゲーションは、
サイトマップそのものではなく、主要な入口
です。
メニューの内容と構造を決める
メニューへ何を入れる？
判断基準は、
「ページが存在するか」
ではなく、
多くの利用者にとって主要な行き先か
です。
たとえば、
プライバシーポリシーは重要ですが、ヘッダーの最優先メニューでなくてもよい場合があります。
一方、
サービスやアクセスは、店舗サイトでは主要な入口になりやすいでしょう。
メニュー項目を増やしすぎない
メニュー項目が増えるほど、選択肢も増えます。
その結果、
「どれを選べばよい？」
となる場合があります。
「5個まで」「7個まで」のような絶対ルールで考える必要はありません。
- PCで見やすい？
- モバイルで扱いやすい？
- 主要な選択肢が埋もれていない？
で判断します。
メニュー ラベルは利用者の言葉で書く
社内では通じる名前でも、初めて来た人には分からない場合があります。
たとえば、
Our Solution
Concept
Contents
情報より、
メニュー・料金
初めての方へ
店舗紹介
アクセスの方が、何があるページか分かりやすい場合があります。
メニュー ラベルはデザイン用語ではなく、
行き先を伝える言葉
です。
親 / 子 メニュー
メニューには階層を作れる場合があります。
たとえば、
メニュー・料金
├─ 縮毛矯正
├─ カラー
└─ トリートメントです。
メイン項目を開くとサブメニューが出るデザインです。
ページが増えたときには便利です。
ただし、階層を深くしすぎると操作しにくくなります。
Drop-downを深くしすぎない
たとえば、
サービス
→ Hair
→ Straightening
→ ダメージヘア
→ Courseのような深いDrop-downは、マウス操作でもモバイルでも扱いにくくなる場合があります。
必要な分類は第38章でサイト構造として整理します。
グローバルナビゲーションでは、
主要な道を見せる
ことへ集中します。
メニューの順番を考える
順番にも意味があります。
たとえば、
初めての方へ
↓
サービス
↓
店舗
↓
アクセス
↓
問い合わせとすると、初回来店者の流れに近づけられます。
ただし全員が左から順番に読むわけではありません。
大切なのは、
重要な入口が見つけやすいことです。
問い合わせをメニューに入れる？ ボタンにする？
問い合わせや予約を、
通常メニュー項目として入れる方法もあります。
ボタンとして強調する方法もあります。
両方へ重複表示する場合もあります。
選び方は、
サイトで最も重要な行動か
で決めます。
すべてをボタンにすると、強弱がなくなります。
ナビゲーションと内部リンクは違う
ナビゲーションもサイト内リンクですが、第37章で扱う内部リンクとは役割が違います。
グローバルナビゲーションは、
サイト全体で共通する主要な入口
です。
第37章の内部リンクは、
今読んでいるコンテンツから次に必要な情報へつなぐリンク
です。
ナビゲーションとサイト構造も違う
サイト構造は、サイト内のページ全体がどう整理されているかです。
ナビゲーションは、その中から主要な道を見せるUIです。
サイトに100ページあっても、ナビゲーションへ100ページ並べるわけではありません。
詳しいサイト構造は第38章で扱います。
スマートフォンと操作しやすさを確認する
モバイル メニューを確認する
PCで横並びのナビゲーションは、モバイルではメニュー ボタンの中へ収納されることがあります。
確認したいのは、
- メニューを開きやすい？
- 閉じられる？
- サブメニューを開ける？
- ラベルが途中で切れない？
- CTAと競合しない？
です。
キーボードだけでもナビゲーションを確認する
ナビゲーションはマウスやTouchだけでなく、
キーボードでも利用できることが大切です。
公開前にタブキーを使って、
ロゴ
↓
メニュー項目
↓
サブメニュー
↓
CTAのように主要なナビゲーションへ移動できるか確認します。
W3CのWCAG 2.2では、
サイトの機能はキーボードからも操作でき、
キーボードフォーカスが見えることが求められています。
フォーカス位置が分かる？
タブキーで移動したとき、
今どのメニュー項目を選んでいるのか分からなければ操作しづらくなります。
Themeの標準フォーカス表示を、
見た目だけの理由で消さないようにします。
確認するのは、
- フォーカスの枠や変化が見える
- ヘッダーに隠れない
- サブメニューをキーボードで開閉できる
- 開いたメニューから抜けられる
- メニューを閉じられる
などです。
キーボードトラップを作らない
メニューやModalへ入った後、
キーボードだけでは外へ出られない状態を、
キーボードトラップと呼びます。
W3Cでは、フォーカスをキーボードで移動できる要素では、
キーボードだけでそこから離れられることも求められています。
Theme標準のナビゲーションを大きくカスタマイズした場合は、
特に確認します。
WordPressでナビゲーションを設定する
Block ThemeではNavigation Blockを使う
現在のWordPressでBlock Themeを利用している場合、ナビゲーション ブロックでメニューを作成・編集できます。
Site Editorでは保存済みナビゲーションを管理し、ヘッダーなどのTemplate PartへNavigation Blockを配置できます。
重要なのは、
メニューを作っただけではサイトに表示されない場合がある
ことです。
表示したいヘッダー等へNavigation Blockを配置し、使用するメニューを選びます。
Navigation Blockでできること
Navigation Blockでは、
- ページ
- カスタムリンク
- サブメニュー
- Search
- SNSなどの一部ブロック
などを組み合わせられます。
メニュー項目の順番変更やサブメニュー作成も可能です。
ただし、できることを全部使う必要はありません。
Classic Themeではメニュー管理方法が違う
Classic Themeでは、Themeによって、
- 外観 → メニュー
- カスタマイザー
- Theme独自設定
などからナビゲーションを管理します。
メニュー 場所も、
- 主要
- ヘッダー
- フッター
などThemeごとに名前や数が異なります。
そのため、
「必ずこの画面にある」
と覚えるより、
今のThemeがどのメニュー 場所を持っているか
を確認します。
ナビゲーション確認チェックリスト
□ 主要ページが入っている
□ 不要なページを詰め込んでいない
□ ラベルだけで行き先が分かる
□ 順番が自然
□ サブメニューが深すぎない
□ モバイルでも操作できる
□ キーボードでも主要メニューを操作できる
□ フォーカス位置が見える
□ サブメニューへ入り、キーボードで抜けられる
□ 問い合わせ / CTAの優先順位が分かる
□ 全ページから利用できる今回のポイント
- グローバルナビゲーションはサイトマップではなく主要な入口
- メニューへ全ページを入れる必要はない
- ラベルは利用者が理解できる言葉にする
- 項目数は固定ルールではなく使いやすさで決める
- 親 / 子やサブメニューは必要な範囲で使う
- モバイル メニューを必ず確認する
- Block ThemeではNavigation Blockを利用できる
- Classic ThemeではThemeごとにメニュー管理方法や場所が異なる
- ナビゲーションと内部リンクは役割が違う
- ナビゲーションとサイト構造も同じものではない
- キーボードでも主要ナビゲーションを操作できるか確認する
- フォーカス位置が見える状態を保つ
- サブメニューやメニュー内でキーボードトラップを作らない
今回の視点
メニューは、
「サイトの全ページ一覧」
ではありません。
利用者へ、
まずどの道を見せるか
を決めるものです。
選択肢を増やすことより、迷わず選べることを優先します。
Part 3｜ホームページの見た目と構造を作る