Shopifyストアをスマートフォンで開いてみてください。ナビゲーションはどこにありますか？おそらくハンバーガーアイコン（3本の横線）の背後にあります。左上、または右上の隅にあります。ほとんどのShopifyテーマは、カタログ全体をこの小さなアイコンの背後に、スクリーン上でもっとも届きにくい場所に配置しています。
では、あなたが毎日使っているアプリについて考えてみてください。Instagramの下部にはタブバーがあります。Amazonには下部ナビゲーションバーがあります。Uber、Spotify、Google Mapsもすべて、スクロール中に常に表示される下部ナビゲーションを使用しています。これらの企業は、このパターンに決定する前に、数百万ドルをかけてユーザビリティ研究を行いました。それなのに、ほとんどのShopifyテーマは、研究が一貫して最悪のパフォーマンスを示すモバイルナビゲーションパターンをデフォルトにしています：ハンバーガーメニューで上隅にすべてを隠す方法です。
- ほとんどのShopifyテーマは、モバイルナビゲーションパターンを1つだけ提供：上隅のハンバーガーメニュー。
- ハンバーガーメニューは、見える状態のナビゲーションと比較して、ナビゲーション使用率を約50％低下させます（Nielsen Norman Group）。
- 下部タブバーは自然な親指の操作範囲に位置し、eコマース研究では15～25％のモバイルコンバージョン改善をもたらします。
- ハイブリッド手法（見えるタブバー＋より深いカテゴリのためのスライドアウトメニュー）は、素早いアクセスと深さを組み合わせることで、ハンバーガーメニューのみを上回ります。
Shopifyテーマがハンバーガーメニューのみをデフォルトとする理由
ハンバーガーメニューがShopifyテーマで主流となっているのは、実用的な理由によるもので、コンバージョンにとって最適なパターンだからではありません。
画面スペースは限られています。 モバイル画面は約375ピクセル幅です。5つのカテゴリ名を表示する水平ナビゲーションバーには、各ラベルに最低でも50～70ピクセルが必要であり、最大でも5～6項目しか表示できません。ハンバーガーアイコンは、無制限のナビゲーションを44ピクセルのボタンに圧縮します。3～30のカテゴリを持つストアをサポートする必要があるテーマ開発者にとって、ハンバーガーは、カスタマイズなしに普遍的に機能する唯一のパターンです。
テーマは汎用である必要があります。 Shopify Theme Storeで販売されるテーマは、4つのカテゴリを持つジュエリーブティックと200のカテゴリを持つ自動車部品店の両方で機能する必要があります。ハンバーガーメニューは、両方のケースを同じ方法で処理します。一方、タブバーは、マーチャントがどの4～5つのカテゴリを永続ナビゲーションに表示するかを選択する必要があります。これはテーマ開発者が持たないカタログ知識の決定を必要とします。
実装の単純性。 ハンバーガーパターンは構築が簡単です。ボタンをクリックすると、メニューを含む全画面オーバーレイが表示されます。見えるラベルのレスポンシブブレークポイントを計算する必要はなく、テキストトランケーションについて心配する必要もなく、永続タブバーとページのスクロール動作の複雑なインタラクションも必要ありません。テーマ開発者は、数時間で確実に実装できます。
デザインの一貫性。 すべてのShopifyテーマがハンバーガーメニューを使用すると、ショッパーは学習動作を発展させます：「3本の線をタップしてメニューを見る。」テーマ開発者は、モバイルユーザーがこのパターンを知っており、それを探すことを合理的に想定できます。
これらは有効なエンジニアリングとビジネス上の理由です。問題は、テーマ開発者の制約に最適化し、ショッパーの体験には最適化していないことです。
ハンバーガーメニューのみのナビゲーションのコンバージョンコスト
ハンバーガーメニューに関する研究は、一貫して同じ結果を示しています：ナビゲーションをハンバーガーアイコンの背後に隠すと、使用法が減少し、タスク完了に悪影響を与えます。
ナビゲーション使用率は半分近く低下します。 Nielsen Norman Groupが実施したハンバーガーメニューに関する研究は、隠されたナビゲーションが発見性を著しく低下させることを明らかにしました。メニューが見える場合、人々はそれを使用します。アイコンの背後に隠されている場合、ユーザーの大きなパーセンテージがメニューを開かない傾向があります。彼らは、現在のページに表示されているリンク、検索、または離脱に頼ります。
親指の操作範囲の問題。 Steven Hoober氏の影響力のある人々がスマートフォンをどのように持ち、操作するかに関する研究は、スマートフォン画面の上隅が片手で到達するのが最も難しいことを示しています。ハンバーガーアイコンはちょうどこのデッドゾーンに配置されています。6インチ以上のスマートフォン（これで大部分のモデルが該当します）では、上隅に到達するには、握る位置の変更または2番目の手が必要です。下部タブバーは、親指が自然に静止する下部3分の1に位置しており、努力なしでアクセスできます。
eコマース固有の影響。 オンラインストアの場合、隠されたナビゲーションのコストはコンバージョン率で直接測定できます。LibauTechによって引用された研究は、下部タブバーは、ハンバーガーメニューのみと比較して15～25％のモバイルコンバージョン改善をもたらすことを示しています。メカニズムは簡単です。ショッパーが画面の下部にカテゴリリンクを永続的に見ることができる場合、彼らはより多くのカテゴリを閲覧し、より多くの製品を発見し、購入したい商品を見つける可能性が高くなります。
カート放棄への接続。 Baymard Instituteのモバイルユーザビリティに関する研究では、ナビゲーションの困難さはモバイルカート放棄の重要な要因であることを示しています。ショッパーがカテゴリ間を簡単にナビゲートできない場合、セッションあたりで表示する製品数が少ない傾向があります。表示される製品が少ないほど、購入価値のある製品を見つける可能性が低くなります。これはモバイルの直帰率が高く、コンバージョン率が低い傾向として現れます。
累積的な影響は実質的です。60％のモバイルトラフィックで月額$100,000の売上を上げるストアの場合、15％のモバイルコンバージョン改善は、月額約$9,000の追加収益に相当します。より良い選択肢が存在するのに、ハンバーガーメニューのみのパターンに固執する場合のコストです。
モバイルナビゲーションパターン：比較
すべてのモバイルナビゲーションパターンが同じようにパフォーマンスを発揮するわけではありません。最も一般的なアプローチの比較は次のとおりです：
| パターン | 可視性 | 親指の操作範囲 | カテゴリ容量 | 最適な用途 |
|---|---|---|---|---|
| ハンバーガーのみ | タップまで非表示 | 不適（上隅） | 無制限（すべて非表示） | 小規模カタログ、コンテンツサイト |
| 下部タブバー | 常に見える | 優秀（親指の操作範囲） | 4～5項目 | トップカテゴリがはっきりしているストア |
| スティッキーヘッダーバー | スクロールアップ時に見える | 中程度（画面上部） | 3～4項目 | 検索＋カートを優先するストア |
| フローティングアクションボタン | 常に見える | 良い（下隅） | 1つのアクション（展開してさらに表示） | シングルフォーカスストア（例：”ショッピング”) |
| ハイブリッド：タブバー＋スライドメニュー | タブバーは常に見える、全メニューは必要に応じて | 一般的なタスクには優秀、深いナビゲーションには良い | 4～5項目が見える＋スライド内に無制限 | 20以上のカテゴリを持つストア |
ハイブリッド手法（トップ4～5のカテゴリのための下部タブバーに加えて、スライドアウトメニューによる全ナビゲーション）は、他のパターンを一貫して上回ります。ショッパーに最も人気のある目的地への即座のアクセスを提供しながら、完全なカテゴリツリーへのアクセスを保持します。
人気のあるShopifyテーマが実際にモバイルで提供していることの比較
人気のあるテーマでのモバイルナビゲーションの外観は次のとおりです：
Dawn（無料、Shopify）： ヘッダー内のハンバーガーメニュー。タブバーなし。モバイルメニューはアコーディオンスタイルのドロップダウンを使用してネストされたカテゴリの全画面オーバーレイで開きます。実装は明確ですが、厳密にはハンバーガーのみです。モバイルナビゲーションパターンを変更する設定はありません。
Prestige（Clean Canvas）： ハンバーガーメニューと、より洗練されたスライドアウトパネル。モバイルメニュー内の画像をサポートするため、視覚的な関心が高まりますが、基本的なインタラクションは変わりません。それでも上隅をタップしてナビゲーションにアクセスする必要があります。
Impact（Maestrooo）： ハンバーガーメニューとサイドバースライドアウト。Impactには「スティッキーヘッダー」オプションが含まれており、ユーザーがスクロール時にハンバーガーアイコンを表示させることができます。小さな改善ですが、アイコンはまだ上隅にあります。タブバーオプションはありません。
Impulse（Archetype）： ドロワースタイルのパネルとハンバーガーメニュー。Impulseはモバイルメニュー内での画像のサポートとスムーズなアニメーションを備えた、比較的高度なモバイルメニューを持っています。しかし他と同様に、厳密にはハンバーガーが起動し、永続的な見える状態のナビゲーション層を提供していません。
Warehouse（Maestrooo）： カートとサーチアイコンを表示する下部バーを備えたハンバーガーメニュー。これは下部にいくつかのユーティリティアイコンを配置することで、ハイブリッド手法に最も近いものですが、ナビゲーション自体（カテゴリ閲覧）はまだ上隅のハンバーガーの背後にあります。
パターンは一貫しています：すべての主要なShopifyテーマでは、モバイルナビゲーションはヘッダー領域のハンバーガーアイコンを通じてのみアクセスされます。人気のあるテーマの中には、組み込みの下部タブバーまたはハイブリッドナビゲーションオプションを提供するものはありません。
テーマを変更せずにタブバーを追加する
テーマがタブバーを提供していない場合（人気のあるテーマはいずれも提供していない）、3つのオプションがあります：
オプション1：カスタムテーマコード。 Shopifyデベロッパーは、テーマのLiquidテンプレートとCSSを編集することで、下部タブバーを追加できます。これには以下が含まれます：
- タブバーHTMLで新しいスニペットを作成する
- 固定下部配置、アクティブ状態、レスポンシブサイジング用のCSSを追加する
theme.liquidレイアウトファイルに含める- アクティブ状態とモバイル固有の動作を処理するJavaScriptを記述する
開発コストは、Shopifyテーマに精通しているデベロッパーの場合、通常4～8時間です。結果は、テーマに完全に統合された軽量で高速なタブバーです。欠点：テーマの更新により変更が上書きされる可能性があり、タブバーアイテムを変更する必要があるたびにデベロッパーの協力が必要になります。
オプション2：Shopifyのスクリプトエディタまたはカスタムアプリブロック経由のJavaScript挿入。 アプリブロックまたはカスタムLiquidセクションを使用して、ページにHTML、CSS、JavaScriptを挿入することでタブバーを追加できます。テーマのコアファイルを変更しないため、テーマの更新では上書きされません。ただし、実装は脆弱です。テーマのDOM構造に依存し、テーマバージョン間で変更される可能性があります。
オプション3：タブバーサポート付きメニューアプリ。 Navi+などのアプリには、テーマファイルを変更せずにテーマと一緒にインストールできる事前構築されたタブバーコンポーネントが含まれています。アプリはテーマのナビゲーションとは独立して、画面の下部にオーバーレイとしてタブバーをレンダリングします。どのカテゴリがタブバーに表示されるかをアプリの管理画面で設定し、アプリはすべてのレスポンシブ動作、アクティブ状態、テーマの既存ヘッダーとのインタラクションを処理します。
アプリ手法には、テーマコードの変更がなく、ビジュアル設定インターフェイスという利点があります。トレードオフは、追加のJavaScriptペイロード（よく構築されたアプリの場合、通常30～50 KB）と月額サブスクリプションコストです。モバイルコンバージョン改善が控えめな投資を正当化するストアの場合、ROI計算は通常出ます。見える状態のモバイルナビゲーションからの収益改善は、アプリコストをはるかに上回ります。
ストアに効果的なタブバーを設計する
カスタムタブバーを構築するか、アプリを使用するかは関係なく、デザインの決定は重要です：
最大4～5項目を選択します。 各タブは信頼性の高いタップに十分な大きさである必要があります（AppleのHIGおよびGoogleのMaterial Designガイドラインあたり最小44x44ピクセル）。375ピクセル幅の画面では、5つのアイテムが各タブに約75ピクセルを与えます。アイコンとショートラベルに十分です。5つ以上のアイテムは、タップターゲットを使用可能なサイズ以下に縮小します。
最も訪問されたカテゴリをタブバーに配置します。 分析を確認して、トラフィックでトップ3～4のコレクションページを識別します。これらがタブバー候補です。残りのスロットは「メニュー」アイテム（完全なナビゲーションを開く）または「検索」アクションのいずれかである必要があります。
アイコンのみでなく、ラベル付きのアイコンを使用します。 Nielsen Norman Groupからの研究では、ラベルなしのアイコンはしばしば誤解されることを示しています。ショッピングバッグアイコンは、ユーザーの期待に応じて「カート」「ショップ」「ウィッシュリスト」を意味する可能性があります。常にアイコンを短いテキストラベル（1～2語）とペアにします。
「その他」または「メニュー」タブを含めます。 タブバーは上位のカテゴリを表示しますが、ショッパーは引き続き完全なナビゲーションにアクセスする必要があります。1つのタブを完全なメニューを開くために予約します（通常はスライドアウトパネル）。これにより、ハイブリッドパターンが得られます：人気のある目的地への素早いアクセスと、必要に応じた完全なナビゲーション深度。
タブバーのスタイルをテーマに合わせます。 タブバーはストアの自然な部分に見え、事後的ではなく見えるべきです。テーマの残り部分と同じフォントファミリ、色パレット、アイコンスタイルを使用します。テーマが丸角とソフトシャドウを使用する場合、タブバーも同様にする必要があります。
クイックウィン完全なタブバーを実装する前に、モバイルページの下部に可視状態の「ショップカテゴリ」ボタンを追加することで、見える状態のナビゲーションの影響をテストしてください。クリック率が高い場合、適切なタブバーへの投資を検証します。
ハイブリッドナビゲーションの影響を測定する
タブバーまたはハイブリッドナビゲーションを実装した後、4～6週間以上これらのメトリクスを追跡して影響を測定します：
モバイル直帰率。 ショッパーが見える状態のナビゲーションと関わり、すぐに必要なものが見つからないときに離脱するのではなく、減少するはずです。
モバイルセッションあたりのページ数。 ショッパーがタブバーを通じてより多くのカテゴリを閲覧するため、増加するはずです。永続ナビゲーションを追加した後、セッションあたり3.2から4.1ページへの改善は典型的です。
モバイルコンバージョン率。 主要なメトリクス。変更の前後の4週間平均を比較します。可能であれば、前年の同じ期間と比較することで季節性を考慮してください。
タブバータップ率。 実装がクリックを追跡する場合、ショッパーが各タブをタップする頻度を測定します。このデータは、バーに表示されるカテゴリの最適化に役立ちます。低タップアイテムを、ショッパーが実際に素早くアクセスしたいカテゴリに置き換えます。
サイト検索使用法。 カテゴリ関連のクエリについて、減少するはずです。以前はハンバーガーメニューで見つけられなかったため、「メンズシューズ」を検索したショッパーは、「メンズ」へのリンクがあるタブバーがあれば、その検索クエリの量を減らすはずです。
モバイルからセッションあたりのカート追加数。 ナビゲーション改善による製品発見の増加は、より多くのアイテムがカートに追加されることにつながるはずです。このメトリクスは、価格やチェックアウトフローのような他のコンバージョン要因からナビゲーション影響を分離します。
少なくとも4週間の比較を実行して、週ごとのばらつきを平滑化します。ストアに重要なトラフィック変動がある場合（休日シーズン、マーケティングキャンペーン）は、測定期間を拡張するか、統計的有意性計算機を使用して結果を検証してください。コンバージョンの改善は、戻ってきたビジターが新しいナビゲーションパターンを学ぶために、1～2週間かかる場合があります。
This article is part of the larger guide on Shopifyテーマのメニュー制限：メニューアプリを使うべき場面.