アイコン + ラベルの組み合わせ：最適なレイアウトパターン

ナビゲーションにアイコンとテキストラベルを組み合わせることに決めましたね。良い判断です—データもそれを支持しています。ですが次の問題はより複雑で、同じくらい重要です。アイコンとラベルを相対的にどう配置するか。縦に積む？横に並べる？ホバー時にだけラベルを表示する？それぞれのパターンはコンテキストによって測定可能に異なる結果を生み出し、間違ったレイアウトを選ぶとラベルを追加する利点が完全に台無しになる可能性があります。

アイコン・ラベルのペアのレイアウトは3つのことに同時に影響を与えます。スキャン可能性（ユーザーが探しているものを見つけるスピード）、タップの正確性（正しいターゲットに当たる頻度）、そして視覚的な密度（限られたスペースに収められるナビゲーションの量）。ストアの特定のナビゲーションに合った適切なバランスを見つけるには、各パターンが何に優れていて、どこで機能しなくなるかを理解する必要があります。

パターン1：縦積み（アイコンの上、ラベルの下）

縦積みはモバイルインターフェースで最も一般的なアイコン・ラベルパターンです。アイコンが上に配置され、テキストラベルがその直下に配置され、2つが1つの視覚的ユニットを形成します。これはすべてのiOSタブバー、すべてのAndroid下部ナビゲーションバー、そしてほぼすべての主要なモバイルアプリで使用されているパターンです。

Appleのヒューマンインターフェースガイドラインはタブバーについてこのレイアウトを明確に指定しています：25×25ポイントのアイコンの下にシステムフォントのテキストラベルを配置します。Googleのマテリアルデザインガイドラインもこれを反映し、24×24dpのアイコンの下に12spのラベルを配置することを指定しています。両プラットフォームが独立して同じレイアウトに到達したのは、縦積みが根本的なモバイルの問題を解決するからです：水平方向のスペースの制限です。

モバイルで機能する理由：

ポートレートモードでのスマートフォンスクリーンは通常375～430ポイントの幅です。モバイルタブバーはその幅の中に4～5のナビゲーションアイテムを収める必要があります。アイコンの上にラベルを積むことで、各アイテムが水平配置に必要な120～150ポイントではなく、約70～80ポイントの幅を占めるため、より多くのアイテムを収められます。

縦積みはまた、アイコンまたはラベル単独よりも大きい自然なタップターゲットを生成します。ユーザーがアイコン・ラベルペアの一般的なエリアを狙うとき、大約48～56ポイントの幅と44～52ポイントの高さのターゲットを持ちます—Appleの44×44最小値とGoogleの48×48最小値をはるかに上回ります。これはアイコンのみのボタンの24～28ポイントと比べてだいたい30～40%より許容度が高いです。

eコマースモバイルサイトでのA/Bテストがこれをサポートしています。Blend CommerceがShopifyストアで行ったテストは縦積みレイアウト（iOSの慣例に合わせた）を使用し、アイコンのみのナビゲーションと比べて10.37%のコンバージョンリフトを測定しました。縦積みは最も一般的なパターンであるだけでなく、最もテストされているパターンでもあります。

使用する場合：

• モバイルタブバーまたは下部ナビゲーションバー（3～5アイテム）
• iOSおよびAndroidの慣例に合わせたいアプリスタイルのナビゲーション
• ページビュー全体に画面に留まる永続的なモバイルナビゲーション

機能しなくなる場合：

縦積みはスライドアウトメニューやナビゲーションドロワーには理想的ではありません。そのコンテキストでは、各メニューアイテムについてアイコンをその上に積むことは縦方向のスペースを無駄にし、珍しい視覚的リズムを作成します。スライドアウトメニューは代わりに横並びパターンを使用します。

パターン2：横並び（アイコン左、ラベル右）

横並びは同じ行の左側にアイコンを、テキストラベルの右側に配置します。これはスライドアウトメニュー、サイドバーナビゲーション、デスクトップナビゲーションバー、ナビゲーションリストの標準パターンです。

メニューとリストで機能する理由：

ナビゲーションアイテムが垂直にリストされる場合—ハンバーガーメニュー、サイドバー、またはドロップダウンなど—アイコンはユーザーがリストをより速くスキャンするのを助ける視覚的アンカーとして機能します。MIT AgeLabの視覚スキャンパターンの研究では、左寄せアイコンが自然なスキャン「ランドマーク」を作成し、テキストのみのリストと比べて特定のアイテムを見つけるのに必要な時間を18～25%削減することが明らかになりました。

横並びはまた自然な読み取りパターンにマップされます。左から右の言語では、ユーザーはアイコンを最初にスキャンし（即座に認識）、次にラベルをスキャンします（確認）。眼の動きは滑らかで直線的です。縦積みでは、多くのアイテムのリストをスキャンしている場合、眼はアイコンからラベルへ下に移動する必要があり、より遅くなります。

機能するサイズとスペーシング：

マテリアルデザインはナビゲーションドロワーの横並びアイコン・ラベルペアについて具体的なガイダンスを提供しています：24×24dpのアイコン、アイコンとラベルの間に16dpのスペース、14sp中程度の太さのフォントのラベル。各行の合計高さは56dpで、快適なタップターゲットを提供します。

リストスタイルナビゲーションに関するAppleのガイドラインも同様です：22～29ポイントのアイコン（アイコンの複雑さに応じて）、右側のシステムフォントのラベル。行の最小高さは44ポイントです。

使用する場合：

• スライドアウトまたはハンバーガーメニュー
• デスクトップ上のサイドバーナビゲーション
• ドロップダウンメニュー
• 設定画面
• アイテムが上から下に積み重なっている垂直にリストされたナビゲーション

機能しなくなる場合：

横並びはモバイルタブバーのような水平方向のスペースが限られている場合には機能しません。5つのアイテム、それぞれアイコンとラベルが横並びで、375ポイントの幅にはラベルを切り詰めるか、テキストを読めないほど小さくしない限り収まりません。

パターン3：ホバー時ラベル表示（アイコンのみ、テキストはホバーで表示）

ホバー時ラベルはデスクトップでますます一般的なパターンになっており、特にGmail、Slack、および様々なダッシュボードアプリケーションで使用されるサイドバーナビゲーションのようなものに見られます。ナビゲーションは狭い列にアイコンのみで表示され、アイコンをホバーするとテキストラベルを持つツールチップが表示されます。

なぜ魅力的に見えるか：

アピールは明らかです。最小限のスクリーンスペースを占める コンパクトなナビゲーション、さらにユーザーが必要なときにラベルを発見する能力が得られます。両方の長所のように感じます。

データが伝える異なるストーリー：

ホバー時ラベルには根本的な問題があります：ナビゲーションアイテムを識別する前にユーザーが操作する必要があります。これは常時表示ラベルからの後退であり、常時表示では識別が一目で起こります。

Nielsen Norman Groupのホバーベースのツールチップに関するテストでは、ナビゲーションアイテムをホバーしてラベルを表示することを意図的に試みるのはわずか15%のユーザーだけでした。 残りはすでにどこにあるかを知っている（パワーユーザー）か、あきらめて他を探しています。これは新規訪問者のための急な学習曲線を作成し、これはeコマースストアではほとんどの訪問者がファーストタイマーであるため、まさにあなたが望まないことです。

Baymard Instituteのeコマースナビゲーションパターンについてのリサーチでは、ツールチップに依存するナビゲーションが常時表示ラベルと比べて22%少ないナビゲーション完了成功率を生み出したことが明らかになりました。ユーザーはより遅く、ナビゲーションエラーを犯す可能性が高く、ブラウザの戻るボタンを使う可能性が高かった（間違った場所に終わったというシグナル）。

そしてその後、明白な問題があります：ホバーはモバイルに存在しません。 タッチスクリーンにはホバー状態がありません。アイコンのみのナビゲーション上でのタップはアクションを即座にトリガーするか、2番目のタップが必要なツールチップを開く—モバイルユーザーが予期しない、また容認しない追加のステップを追加します。

受け入れ可能な場合：

• ユーザーが訓練を受け、毎日インターフェースを使用する内部ダッシュボードまたは管理者ツール
• スクリーン領域が極度に制限されているデスクトップのみのアプリケーション
• 二次的なツールバー（フォーマッティングツールバーのような）アイコンが高度に標準化されている場合

避けるべき場合：

• 顧客対面のeコマースナビゲーション
• あらゆる種類のモバイルナビゲーション
• ファーストタイマーの訪問者が自分の道を見つける必要がある主要なナビゲーション

パターン4：アクティブ状態時にラベルを下に表示

現在のナビゲーションアイテムでのみラベルを表示するバリエーションが注目を集めています。これはマテリアルデザイン実装では一般的で、下部バーはすべてのアイテムのアイコンを表示しますが、選択されたタブのテキストラベルのみを表示します。

トレードオフ：

このパターンは水平方向のスペースを節約しながら、現在の位置のコンテキストを提供します。Googleのマテリアルデザインガイドラインは3つ以上のアイテムを持つ下部ナビゲーションのオプションとしてこれを提供しました。

ただし、テストではこのアプローチはすべてのアイテムでラベルを表示するのに劣ることが示されています。Booking.comのUXチームによって実施され、2019年のNNG会議で共有されたスタディーでは、常時表示ラベルがアクティブのみのラベルパターンと比べてナビゲーションエラーを15%削減することが明らかになりました。ユーザーはすでに選択したオプションだけでなく、すべてのオプションが何であるかを見る必要がありました。

マテリアルデザインはその後、すべての宛先でラベル付きナビゲーションを推奨するようにガイダンスを更新し、アクティブなもののみではなく。

ストアに適したパターンの選択

決定は2つの要因に帰着します：ナビゲーションコンテキストとデバイスです。

コンテキスト	最適なパターン	理由
モバイルタブバー（3～5アイテム）	縦積み	プラットフォーム慣例と一致、大きなタップターゲット、幅に収まる
モバイルタブバー（5+アイテム）	水平スクロール可能なタブバー付き縦積み	依然として縦積み、ただし水平スクロールを許可
スライドアウトメニュー	横並び	縦リストでの自然なスキャン
デスクトップヘッダー	横並びまたはテキストのみ	豊富な水平方向のスペース
デスクトップサイドバー	横並び（常時表示ラベル）	ユーザーがオプションを素早くスキャンする必要
フッターナビゲーション	テキストのみ	アイコンはここで価値を追加しない
フローティングアクションボタン	アイコンのみ（ツールチップ付き）	単一アクション、アイコンで十分

クイックテストスマートフォンでストアを開き、ラベルを読まずにすべてのナビゲーションアイテムを識別してみてください。たとえ1つのアイテムでも一瞬でも止まったら、そこにはラベルが必要です。モバイルタブバーが横並びを使用しており、アイテムが窮屈に感じられる場合は、縦積みに切り替えてください。Navi+ではメニュービルダーでレイアウトパターンを切り替えることができるため、異なる組み合わせをテストするのに数時間のテーマ編集ではなく数秒かかります。

ほとんどのShopifyストアにとって最も安全なデフォルトは、モバイルタブバーの縦積みとスライドアウトメニューの横並びです。これらのパターンはユーザーが毎日使用するアプリからすでに期待しているものに一致し、その背後にはテストデータが最も強力です。そこから始めて、ストア独自の分析に基づいて反復してください。

この記事は、より大きなガイド ナビゲーションのアイコンとテキスト：どちらを使うべきか（そして両方使うべき場合） の一部です。