本文へ移動

メニュー

モバイルメニュー概要

スクリーンショット:モバイルメニューの2つのパターン。

モバイルデバイスなど、タッチスクリーンでのタップ操作を考慮したメニュー用コンポーネントで、ハンバーガーメニューボタン、ドロワーとともに使用されます。

仕様

モバイル画面では、コンテンツ中にサイト内移動のための関連リンクが省略されることも多く、モバイルメニューからのみ遷移できるページがある場合があります。そのため、非常に重要なコンポーネントであるといえます。

スタンダードタイプ L1

スクリーンショット:モバイルメニューのスタンダードタイプ L1の例。モバイルメニュー内に、ハンバーガーメニューボタンとメニューリストが配置されている。いくつかのメニュー項目のエンドアイコンとして右向きのシェブロン(矢印の先端部分のような形状)が配置されており、次のレイヤーに遷移することが示唆されている。

スタンダードタイプ L2

スクリーンショット:モバイルメニューのスタンダードタイプ L2の例。モバイルメニュー内に、ハンバーガーメニューボタンとL1に戻るボタン、およびメニューリストが配置されている。

アコーディオンタイプ

スクリーンショット:モバイルメニューのアコーディオンタイプの例。モバイルメニュー内に、ハンバーガーメニューボタンとメニューリストが配置されている。いくつかのメニュー項目はアコーディオンとなっており、エンドアイコンとして下向き(閉じている状態)または上向(開いている状態)のシェブロンが配置されている。

使い方

メニューのユーザビリティ

  • モバイルメニューの形式にはスライド型とアコーディオン型が多く使用されています。スライド型は第二階層を配置したい場合や、多くのメニュー項目がある場合に適しています。

  • スライド型とアコーディオン型を混在させることはユーザーに複雑な操作性を与えることになり、ユーザビリティ的には奨励できません。

  • メニューの階層構造は2段階以上のメニュー構成を作らないよう情報設計をしてください。

スタンダードタイプ L1

スクリーンショット:モバイルメニューのスタンダードタイプ L1の例。モバイルメニュー内に、ハンバーガーメニューボタンとメニューリストが配置されている。いくつかのメニュー項目のエンドアイコンとして右向きのシェブロン(矢印の先端部分のような形状)が配置されており、次のレイヤーに遷移することが示唆されている。

スタンダードタイプ L2

スクリーンショット:モバイルメニューのスタンダードタイプ L2の例。モバイルメニュー内に、ハンバーガーメニューボタンとL1に戻るボタン、およびメニューリストが配置されている。

アコーディオンタイプ

スクリーンショット:モバイルメニューのアコーディオンタイプの例。モバイルメニュー内に、ハンバーガーメニューボタンとメニューリストが配置されている。いくつかのメニュー項目はアコーディオンとなっており、エンドアイコンとして下向き(閉じている状態)または上向(開いている状態)のシェブロンが配置されている。

右タイプ L1

スクリーンショット:モバイルメニューの右タイプ L1の例。ビューポートの右側にオーバーレイで展開し、モバイルメニューを除く領域は半透明の黒色で覆われている。

右タイプ L2

スクリーンショット:モバイルメニューの右タイプ L2の例。L1に戻るボタンが配置されている。

左タイプ L1

スクリーンショット:モバイルメニューの左タイプ L1の例。ビューポートの左側にオーバーレイで展開し、モバイルメニューを除く領域は半透明の黒色で覆われている。

左タイプ L2

スクリーンショット:モバイルメニューの左タイプ L2の例。L1に戻るボタンが配置されている。

リンクの強調

  • 通常メニュー内のアイテムはそのほとんどがリンクやインタラクションのためのアイテムになりますが、リンクを強調し、視覚的に明確にしたい場合はエンドアイコンを使用します。

  • 通常のリンクを強調して示すエンドアイコンと、機能的に異なった第二階層リンク(スライド型)やアコーディオンを示すアイコンと混在させることは、視覚的、体験的に複雑さや認知負荷を与えるため、できる限り使用しないでください。

リンクを強調するためのエンドアイコンとして、シェブロン(矢印)を使用した例

スクリーンショット:リンクを強調するためのエンドアイコンとして、シェブロン(矢印)を使用した例

CTA(Call-to-action)の挙動表示を明確に

  • メニュー内のリンク(ページ遷移)とアコーディオン(サブメニューの開閉)など、ユーザーに異なった挙動を想定させる場合は、その表示を明確に違うものにする必要があります。

  • エンドアイコンをともなう強調リンクとサブメニューを開閉するアコーディオンをやむを得ず混在させる場合は、両者を明確に異なったアイコンを使用することが求められます。

  • ただし、サイト内でのアイコンの仕様は挙動別に一貫性を保ってください。

良い例

スクリーンショット:エンドアイコンの付いたメニューリストを含むモバイルメニューの例。リンクを示唆するために右向きシェブロンの付いた項目と、サブメニューの開閉を示すプラス/マイナスの付いた項目が混在している。

リンクとアコーディオンという異なった機能を、明確に異なるアイコンで示しているため、挙動が違うことを想定できる。

悪い例

スクリーンショット:エンドアイコンの付いたメニューリストを含むモバイルメニューの例。リンクを示唆するために右向きのシェブロン、サブメニューの開閉を示すために上下を向いたシェブロンが使われている。

リンクとアコーディオンという異なった機能を、シェブロン(矢印アイコン)の向きの違いで表現しているため、ふたつの機能の混在を一目で把握するには認知負荷が高い。

セクションの明確化

セクションをより明確にしたい場合は以下のUIを利用します。

ディバイダー
  • ディバイダーを使用してセクションを大きく分割することが可能です。
  • 特にコンテンツ内容や機能の性質が大きく異なったセクションを分割する場合に適しています。
セクションアイコン
  • セクションを視覚的により明確にしたい場合はセクションアイコンを補助的に使用します。

スタンダードなカテゴリータイトル

スクリーンショット:2つのセクションからなるメニューリストの例。各セクションはセクション名が太字で表現され、通常の項目と判別できるようになっている。セクション間にはホワイトスペースが設けられ、セクションのまとまりが認知できるようになっている。

ディバイダーを追加

スクリーンショット:2つのセクションからなるメニューリストの例。各セクションはセクション名が太字で表現され、通常の項目と判別できるようになっている。セクション間にはディバイダーが配置され、セクションの区切りが明確になっている。

ディバイダーとセクションアイコンを追加

スクリーンショット:2つのセクションからなるメニューリストの例。各セクションはセクション名が太字で表現され、緑色のセクションアイコンが付くことで、通常の項目と判別が容易になっている。セクション間にはディバイダーが配置され、セクションの区切りが明確になっている。