効果的なナビゲーションメニューの作り方
ウェブサイトの使い勝手を大きく左右する要素のひとつに「メニュー」「パンくずリスト」「サイトマップ」等の「ナビゲーション」があります。
ナビゲーションの構成を考えることを「ナビゲーション設計」と言ったりしますが、今回はそのナビゲーション設計の考え方を「メニュー」を例にお話ししてみたいと思います。
前提: 情報デザインと装飾デザイン
お話の前提として、ウェブサイトにおける「デザイン」の分類の考え方があります。 ウェブサイトのデザインというのは、大きく分けて「情報デザイン」と「装飾デザイン」の 2 つに分けられます。
詳細は次の記事で説明しているので興味のある方は一度そちらをご覧ください。
装飾デザインの方は多くの方が直感的にイメージをつかめるものと思います。 ですので今回は、主に情報デザインの観点からナビゲーションメニューの作り方をお話ししてみます。
ナビゲーションメニューの作り方
よいナビゲーションメニューとは
ナビゲーションメニューの作り方を考える前に、そもそも「よいナビゲーションメニュー」とはどのようなものでしょうか。 このポイントを押さえておきましょう。
よいナビゲーションメニューとは...
よいナビゲーションメニューとは、それによってユーザーがサイトを快適に利用でき、サイト所有者のニーズも叶えるメニュー。
つまり、よいナビゲーションメニューとは、ユーザーとサイト所有者（もう少し広い言葉で言えば「ステークホルダー」）の双方の満足度を高めるものです。 ユーザーが心地よいだけでもサイト所有者のニーズを満たすだけでも不十分です。 これは、よい広告は「消費者と広告主の両方にメリットをもたらすもの」とする考え方と似ています。
この認識のもとでナビゲーションメニューの考え方について見ていきましょう。
ナビゲーションメニューを考える上で必要な視点
ナビゲーションメニューを考える上で必要な視点は 4 つあります。
- ターゲット
- サイト所有者のニーズ
- 理想形
- 現状
1. ターゲット
ひとつめは、どんな人がサイトのメインターゲットであるかという視点です。 具体的には次のようなポイントに注目します。
- どんな属性の人？
- ICT リテラシーは？
- どんな端末を使っている？
- よく使うサイトは？
2. サイト所有者のニーズ
ふたつめは、サイト所有者にはどのようなニーズがあるかという点です。具体的には次のようなポイントに注目します。
- サイトの目的・役割は？
- サイトでターゲットに伝えたいメッセージは？
- サイトを通してターゲットにどのような態度変容を望む？
3. 理想形
続いて、ターゲットとサイト所有者のニーズを踏まえて、サイト全体のあるべき姿はどのようなものかを考えます。 具体的には次のようなポイントに注目します。
- 理想の動線は？
- ターゲットに見てもらうべき情報の優先順位は？
4. 現状
理想形とあわせて現状がどのようになってるかということも考えます。これはすでにサイトがある場合やターゲットの動線が分かっている場合はそれらを分析します。
- 現状の動線は？
- 動線上のボトルネックは？
- もっと見てもらいたいページは？
まだサイトがない場合は既存の別のコミュニケーションチャネルでの状況を分析します。
そして、現状と理想を比べて問題点を洗い出します。
ナビゲーションメニューを考えるときに参考になる原則
ナビゲーションメニュー作りでは、認知工学の分野で得られた知見が役に立ちます。具体的には以下のような人間の認知特性が参考になります。
マジカルナンバー 7 : 人間が一度に認識しやすいモノの数は 7 (5-9) 個である。それ以上になると認知負荷が増え、認識するのに時間がかかったり使いづらくなったりする。
50 ビット/秒 : 人間の脳に備わった情報処理の速度は秒速 50 ビット前後である。それ以上の情報を一度に提供しても処理されない。（ここでは何が 1 ビットかという点はあまり重要ではなく、ともあれ瞬時に認識できる文字数や情報量にかぎりがあるという点がポイントです）
要素の類似性 : 人間は形や大きさ・色・柄が近いものを同類とみなす。
要素の配置 : 人間は距離が近いもの同士をグループ化して認識する。 また、要素の順序・上下の位置関係に意味を感じる。つまり、順序や位置関係が自然なもの・見慣れたものだと認識が容易になる。
よいナビゲーションメニューというのは、これらの視点と原則を組み合わせて 合理的・論理的に試行錯誤を繰り返すことで生み出せるものです。
……
というわけで効果的なナビゲーションメニューの作り方というお話でした。
ナビゲーションはサイトの脇役的な存在でとても地味ですが、サイトの使い勝手、そしてサイトやブランドの愛好度に大きく影響してきます。
今回はナビゲーションメニューのイメージで語りましたが、同じ考え方がその他のナビゲーションウィジェットーーパンくずリストや関連リンク等でも使えるので、ぜひ参考にしてみてください。