Shopifyヘッダーナビゲーションの設計思想：レイアウトモデル、空間配分、ユーティリティ配置、ブレークポイント対策
デスクトップのヘッダーは固定された横幅の予算内で動作し、ブランドアイデンティティ、商品カテゴリー、ユーティリティツール、購入動線を適切に両立させる必要があります。
ヘッダーを無計画なFlexboxコンテナとして扱うと、リンクが検索窓と衝突したり、2行目に折り返されたり、不要にモバイルドロワーへ格納されたりします。安定したナビゲーションには、綿密なレイアウト選定、空間予算の配分、実機幅でのレスポンシブ検証が欠かせません。
クイックアンサー：あなたのストアに最適なShopifyヘッダーレイアウトは？
すべてのストアに共通する単一の最適なShopifyヘッダーレイアウトはありません。カタログ型ストアは、通常、左ロゴ＋インラインのカテゴリーリンクが最も適しています。小規模なブティックは中央ロゴ＋分割リンクを使えます。多部門を扱う大型ストアには、ユーティリティバーを別に設けた2段構成のヘッダーが必要です。PC表示でナビゲーションをハンバーガーの中に隠す構成は避けてください。
適切なデスクトップヘッダーの構成は、次の4つの基本レイアウトモデルから選びます：
- 左ロゴ ＋ インラインナビゲーション： 左端にロゴを置き、カテゴリーリンクを右方向へ並べます。カテゴリーのための横方向のスペースを最も広く確保でき、ユーティリティは右側にまとめられます。
- 中央ロゴ ＋ 分割ナビゲーション： ロゴを中央に置き、その両側にカテゴリーリンクを配置します。小規模なカタログに向いていますが、横幅が2つの短い区間に分かれます。
- 2段積み重ねナビゲーション： ナビゲーションを上下2本の横バーに分けます。細い上部の帯にユーティリティを収め、下のバーを商品カテゴリー専用にします。
- PC非表示ドロワー： リンクをハンバーガーアイコンの背後に隠します。見た目は最小限ですが、Nielsen Norman Groupはデスクトップのインターフェースで隠れたナビゲーションを使わないよう勧めています。
- ノートPC画面幅の盲点： 表示スケーリングにより、ノートPCの実効CSSビューポートはデスクトップモニターよりもかなり狭くなることがあります。自社ストアのアナリティクスを確認し、ノートPCの画面幅でナビゲーションをテストしてください。
- 分割ナビゲーションの仮説： ロゴを中央に置くのはレイアウト上のアイデアであり、実証されたパターンではありません。これを検証した公開研究も見つかりませんでした。クリックマップやヒートマップで、自社のエンゲージメントを確認してください。
- ユーティリティをカテゴリーから分離する： ユーティリティリンクは補助的な操作やツールです。カテゴリーの行から外しておくことで、メインバーを商品カテゴリーのために使えます。
ノートPCの画面でヘッダーの表示領域が不足する理由
デザイナーは、広いモニターでテンプレートを確認することが多いものです。一方、一部の顧客はノートPCで閲覧しており、OSの表示スケーリングによってページが使えるCSSピクセル数が減ります。
あくまで例示です（統計ではなく計算）：幅1920pxの画面にWindowsの150%スケーリングを適用すると、実効CSS幅は1280pxになります（1920 / 1.5 = 1280）。自社の顧客が実際に使っているビューポートサイズは、ストアのアナリティクスで確認してください。
ヘッダー要素が横幅を超えると、ナビゲーションは次の3つの形で破綻することがあります：
+-------------------------------------------------------------------------------+
| Wide Viewport - Illustration |
| [Brand Logo] Women Men Accessories Footwear Sale [Search] [Cart] |
+-------------------------------------------------------------------------------+
+-------------------------------------------------------------------------------+
| Laptop-Width Viewport - Unplanned Wrapping Illustration |
| [Brand Logo] Women Men Accessories Footwear |
| Sale [Search] [Cart] <-- Wraps onto second line, shifting content downward|
+-------------------------------------------------------------------------------+
- 意図しないFlexboxの折り返し： Flexコンテナが末尾のカテゴリーや検索入力欄を2行目へ押し出し、ヘッダーの高さが増えて、ヒーロー領域の商品訴求を押し下げます。
- 水平方向のオーバーフローとユーティリティの欠損： nowrapのFlexコンテナがユーティリティをビューポートの端の外へ押し出し、カートのボタンが画面外に隠れたり、横スクロールバーが出たりします。
- 早すぎるPCドロワーへの縮退： 横幅が管理されていないと、テーマのメディアクエリがノートPC幅のデスクトップビューポートでモバイルのハンバーガーメニューに切り替わることがあります。
web.devのCumulative Layout Shift (CLS) ガイドラインによれば、「レイアウトシフトとは、表示されている要素の位置が、あるレンダリングフレームから次のフレームへと変化したときに常に発生する」ものです。最初の描画ですでに折り返しているヘッダーはレイアウト上の問題ですが、それだけではレイアウトシフトではありません。シフトが起きるのは、表示後にヘッダーが変化したとき、たとえば遅れて読み込まれたフォントやスクリプトが高さを変えたときです。ユーザー入力から500ミリ秒以内のレイアウトシフトは、CLSから除外されます。
視線走査、検索機能、ユーティリティ配置に関するユーザビリティ調査の知見
公開されているユーザビリティ調査は、ECサイトのヘッダー設計についていくつかの基本的な期待値を示しています。ただしすべてのレイアウト上の疑問に決着をつけるものではないため、筆者自身の推論にあたる箇所はその旨を明記します。
デスクトップにおける表示型ナビゲーションと非表示型ナビゲーション
Nielsen Norman Groupの研究Pernice & Budiu (2016)では、「デスクトップでは、隠れたメニューが使われたのはわずか27%のケースだった」一方、可視型とコンボ型のナビゲーションはそれぞれ48%と50%のケースで使われました。NN/gの指針は明快です：「デスクトップのユーザーインターフェースでは、隠れたナビゲーション（ハンバーガーアイコンなど）を使わないこと。」
左上視線走査と中央分割型ナビゲーションの仮説
NN/gのF字型パターンに関する記事（Pernice, 2017）は、「ページの上部と左側に集中した多くの注視点」を述べています。左寄せのロゴとカテゴリーリンクは、この領域に収まります。
中央ロゴの分割ナビゲーションは、あくまで仮説です。これを検証した公開研究は見つかりませんでした。視線が左上から始まるのであれば、左翼をスキャンする買い物客は、右翼のカテゴリーに到達するために中央のロゴを飛び越える必要があり、それらのリンクへの注目度が下がる可能性があります。分割型ヘッダーを使う事業者は、クリックマップやヒートマップでエンゲージメントを確認してください。
検索ボックスの配置とサイズ設計
NN/gの検索に関する指針（Nielsen, 2001）は、「ホームページでは、検索はリンクではなく入力欄であるべき」で、ページ上部、通常は右上の隅に置き、「典型的なクエリが収まる十分な幅」を持たせるというものです。小規模なブティックがスペースを節約するために、展開式の検索アイコンを好むこともあります。ただしそれは、調査で裏付けられたベストプラクティスではなく、テストすべきトレードオフとして扱ってください。
最上位階層に配置すべき商品カテゴリー
Baymard Institute (2023)は、「モバイルサイトの33%が、商品カテゴリーを最上位の項目にしていない」ことを明らかにし、「デスクトップサイトで商品カテゴリーを最上位の項目にすることは、理想的なモバイル実装と一致する」と述べています。筆者の推論：「会社概要」「FAQ」「注文追跡」がカテゴリーと同じ行に並ぶと、限られたスペースと注目度をカテゴリーと奪い合うことになります。これは設計上の判断であり、測定された結果ではありません。
4つのヘッダーレイアウトモデルの徹底比較
適切なヘッダー構成を選ぶには、事業者は各モデルを、カタログの幅、検索の要件、ユーティリティの運用負荷に照らして評価する必要があります。
| Header Layout Model | Fits Which Store Type | Search Implementation | Utility Links | Main Risk |
|---|---|---|---|---|
| 左ロゴ ＋ インラインナビ | 単一部門のカタログ型小売 | 小型の入力欄、またはクリックで展開するアイコン | 右側のユーティリティ群にまとめる | ラベルが利用可能な幅を超えると折り返す |
| 中央ロゴ ＋ 分割ナビ | 小規模なブティックやラグジュアリー系ライフスタイルブランド | ミニマルなモーダル表示のアイコン | 左右の両翼に分散 | 未検証：右翼のカテゴリーは注目度が下がる可能性 |
| 2段積み重ねナビ | 多部門のカタログ型ストアや国際展開のストア | 常時表示される、幅の広い目立つ入力欄 | 上部の専用ユーティリティバーに分離 | ファーストビューの上部で縦幅が増える |
| PC非表示ドロワー | 記事主体、または非カタログ型のポートフォリオ系ブランド | オフキャンバスパネルの内側に格納 | オフキャンバスパネルの内側に格納 | NN/gはデスクトップで隠れたナビゲーションを使わないよう勧めている |
注記：この比較はアーキテクチャのパターンを要約したものであり、特定のストアを実測した監査ではありません。
左寄せのインラインナビゲーションは、ECでよく使われる出発点です。ロゴを左に置いてリンクを右へ並べると、商品カテゴリーに途切れのない横方向のスペースを確保できます。
中央ロゴの分割ナビゲーションは、リンクが少ないブランドに、編集的なシンメトリーをもたらします。ただし、スペースが二分されるため、カテゴリーやローカライズ用セレクターを追加すると、すぐに衝突が起こりえます。
2段積み重ねナビゲーションは、役割を縦方向に分けることでスペースの競合を解消します。大量の商品を扱う事業者は、上部のバーにブランド、常時表示の検索、ユーティリティを置き、下のバーをカテゴリー用に確保できます。カテゴリーの深さはメガメニューに移せます。Baymardは、メインナビゲーションのベンチマークで、「ホバー式のドロップダウンメニュー（いわゆる「メガメニュー」）は、現在、米国の主要ECサイトの88%でメインナビゲーションとして使われている」と報告しています。この事例は、344のECサイトを対象としたUXベンチマークに基づいています。パネル設計そのものについては、Shopifyメガメニューのベストプラクティスの解説をご覧ください。
アクセシビリティの観点では、W3C WAI ARIA Authoring Practices Guideに、「視覚的に常時表示されているメニューはメニューバーである」と記されています。
ユーティリティメニューと商品カテゴリーナビゲーションの分離設計
Webサイトの設計において、ユーティリティナビゲーションとは、商品カタログには属さないものの顧客の作業を助けるツール、たとえばアカウントログイン、注文追跡、通貨切り替え、店舗検索、カスタマーサポートなどを指します。NN/gはこう表現しています：「ユーティリティナビゲーションは、補助的な操作とツールで構成される」。
図1：Concept illustration（コンセプトイラスト）— ユーティリティリンクがメインメニューに混在したヘッダーと、ユーティリティバーに分離したヘッダーの比較。
Nielsen Norman Group (Farrell, 2015)によれば、ユーティリティリンクは主要ナビゲーションに比べて「補助的な（目立ちにくい）視覚的配置」にできます。
Shopifyのストアフロントでは、通常、ユーティリティリンクをメインの行から外す方法が3つあります。どれが使えるかは、お使いのテーマによって異なります：
- テーマのHeaderセクションにある第2メニューまたはユーティリティ領域： テーマによっては、第2のメニュー設定や、メインバーの上に細い帯を表示する機能があります。お使いのテーマのHeader設定で、何が提供されているか確認してください。
- 最上部のユーティリティバー： テーマがメインヘッダーの上の帯をサポートしていれば、通貨ピッカー、顧客アカウント、注文追跡などの項目を収め、メインバーを商品リンクに充てられます。
- フッターへの再配置： 「会社概要」「プレス」「FAQ」などの企業情報リンクをフッターに移すと、アクセスしやすさを保ったままヘッダーをすっきりさせられます。
チェックアウトの流れでナビゲーションを簡素化する方法については、チェックアウト画面のヘッダー設計の分析をご覧ください。
ブレークポイント設計：ノートPCの画面幅でヘッダーを検証する
ワイドモニターでの目視確認に頼るのではなく、明示的な横幅のピクセル予算に基づいてヘッダーを計画しましょう。
図2：Concept illustration（コンセプトイラスト）— ワイドモニターの幅と、メニューに対策が必要な狭いノートPCの幅でテストしたShopifyヘッダー。
有効幅（Available Width）の計算式
主要カテゴリーリンクに使える横幅のピクセル予算は、次の実用的な計算式で見積もれます：
Available Width = Viewport Width - (Logo Width + Utility Cluster Width + Container Padding & Margins)
Max Width Per Item = Available Width / Number of Primary Links
仮定の構造です（実測値ではありません）：自社ストアのロゴ、ユーティリティ群、余白を測り、ビューポート幅から引いてAvailable Widthを求め、カテゴリーリンクの数で割ってリンクごとの予算を出します。その予算を、自社ストアで実測した最も幅の広いラベルと比べてください。
DevToolsによる実際のラベル幅の計測
ナビゲーションが折り返さずに収まるかを確認するには、ブラウザの開発者ツールでラベルの幅を直接調べます：
- Chrome DevToolsを開き（
Cmd+Option+IまたはF12）、デバイスモードに切り替えます。 - レスポンシブのビューポート幅を、上のスケーリング例から得られる実効ノートPC幅、または自社アナリティクスから得た幅に設定します。
- Computedタブで最も長いナビゲーションラベルを調べ、パディングとマージンを含むレンダリング後のピクセル幅を控えます。
- 保守的な確認として、最も長いラベルの幅にリンク数を掛けます。合計がAvailable Widthを超える場合、メニューは折り返すか欠損する可能性が高くなります。
アーキテクチャの経験則
以下は設計上の判断であり、実測に基づくしきい値ではありません。必ず上記の幅チェックで確認してください。
- 小規模カタログのストア： 主要カテゴリーが少なければ、左ロゴのインライン配置か中央ロゴの分割配置のほうが、通常、ノートPCのビューポートに収まりやすくなります。
- 中規模カタログのストア： ユーティリティリンクをコンパクトなアイコンにし、ラベルが短ければ、左ロゴのインライン配置でも成立します。
- 大規模な多部門ストア： 主要カテゴリーが多いと、インライン配置はノートPCの画面で衝突しやすくなります。2段積み重ねレイアウトや、バーから階層の深さを移せるメガメニューを検討してください。
- 国際展開・多通貨のストア： ローカライズ用セレクターは、ユーティリティ用の横幅を消費します。セレクターを上部のユーティリティバーかフッターへ移すことを検討してください。
ナビゲーションが有効な幅を超えるときの対処は3つあります：第1階層リンクの絞り込み、ラベル文字の短縮、2段構成への移行です。デスクトップのナビゲーションを、早々にオフキャンバスドロワーへ畳むことは避けてください。
Shopify固有の落とし穴：Marketsセレクター、ヘッダーDOMサイズ、大文字表記
Shopify上でナビゲーションを構築すると、プラットフォーム固有の課題が生じます。
Shopify Marketsの通貨および言語セレクター
複数の国で販売するストアでは、ヘッダーに通貨、国、言語のセレクターを追加することがよくあります。テーマによっては、通貨コードや国旗付きの、かなり幅の広いボタンとして表示されます。1行のインラインヘッダーでは、幅の広いセレクターがカテゴリーのスペースを奪い、ノートPCで折り返しを引き起こすことがあります。Marketsのセレクターは、上部のユーティリティ帯かフッターに置くことを検討してください。
ヘッダーのDOMノード数とLiquid処理負荷
多階層のドロップダウンをLiquidで直接レンダリングすると、そのマークアップがすべてのページレスポンスに加わり、ページのDOMサイズとしてカウントされます。Google Chrome LighthouseのDOMサイズに関する指針によれば、Lighthouseは「body要素のノード数が約800を超えると警告し」、「約1,400を超えるとエラーとする」とされています。重いヘッダーは、ページコンテンツが描画される前に、この予算の一部を使ってしまいます。詳しくは、ナビゲーションとCore Web Vitalsのガイドをご覧ください。
大文字タイポグラフィと文字間隔（レタースペーシング）
ブランドのスタイルガイドでは、ナビゲーションリンクに大文字表記と広めの文字間隔を指定することがよくあります。テキストを大文字にする（text-transform: uppercase）と、一般に文頭のみ大文字の表記より幅が広がり、letter-spacingは1文字ごとにスペースを加えます。ストアフロントのタイポグラフィを変更するたびに、レンダリング後のラベル幅を測り直してください。
Shopify標準のメニュー階層深度の上限
Shopifyヘルプセンターのドロップダウンメニューに関する資料によれば、「最上位の項目には、最大2階層の入れ子のドロップダウンメニューを設定できる」ため、プラットフォームの上限はナビゲーション3階層となります。これらのメニューはShopify管理画面で設定し、Horizonなど、Shopifyテーマハブで取り上げているテーマに接続します。
トレードオフ：各ヘッダーモデルを採用すべきでないケース
すべてのヘッダーレイアウトは、見た目、スペース効率、カタログの発見しやすさの間でトレードオフを伴います。
| Header Layout Model | Do Not Use When | Better Alternative |
|---|---|---|
| 左ロゴ ＋ インラインナビ | リンクが非常に少ない単一商品ブランド | 中央のブランドロゴと最小限のナビゲーション |
| 中央ロゴ ＋ 分割ナビ | カテゴリー、コレクション、セレクターが増え続けるカタログ | 2段積み重ねレイアウトまたは左寄せインラインナビ |
| 2段積み重ねナビ | デスクトップの流入が少ないモバイルファーストのストア | すっきりした1行のインラインナビ |
| PC非表示ドロワー | 商品の閲覧に依存するカタログ型ストア | 可視のインラインナビまたは2段構成のバー |
インライン型ヘッダーを使う単一商品ストアでは、ブランドマークとカートアイコンの間に不自然な空白ができることがあります。逆に、中央分割レイアウトは、ブランドが季節コレクションや国際通貨セレクターを加えると、左右それぞれの余地が足りなくなる可能性があります。
2段積み重ねヘッダーは縦の高さを増やし、ヒーローコンテンツをページの下へ押し下げます。お知らせバー、ユーティリティバー、メインナビゲーションを合わせた高さを測ってください。モバイルの買い物客が圧倒的多数を占めるストアでは、デスクトップのこの追加の高さに見合う価値はないかもしれません。
最後に、PC非表示ドロワーはNN/gの指針に反しており、デスクトップユーザーが隠れたメニューを可視のメニューよりはるかに使わなかったという調査結果（27%対48%のケース）とも矛盾します。オフキャンバスドロワーはモバイル画面では標準ですが、デスクトップのビューポートには通常、可視リンクを置く余裕があります。モバイルのドロワー設計については、モバイルドロワーメニュー設計のガイドをお読みください。
アクションチェックリスト：Shopifyヘッダーの総合監査
次の6ステップのチェックリストで、Shopifyストアのヘッダーを監査しましょう：
- ステップ1：ノートPC表示幅の検証を行う — Chrome DevToolsを開き、スケーリング例の実効ノートPC幅と、自社アナリティクスにあるノートPC幅でストアをテストする。カテゴリーリンクが折り返さないこと、横スクロールバーが出ないこと、テーマがハンバーガーメニューに縮退しないことを確認する。
- ステップ2：商品以外のユーティリティリンクをカテゴリー行から外す — 「注文追跡」「会社概要」「FAQ」を主要カテゴリーメニューから削除する。上部のユーティリティバー、アカウントのドロップダウン、フッターメニューへ移す。
- ステップ3：ヘッダーの高さの予算を設定する — お知らせバー、ユーティリティバー、メインナビゲーションを合わせた高さを測る。ノートPCで、それらが最初の画面のどれだけを占めるかを確認する。
- ステップ4：ナビゲーションのタイポグラフィとラベルの言い回しを見直す — 最も長いカテゴリーラベルを調べる。冗長な表現を短くする（たとえば「Men’s Outerwear and Jackets」を「Men’s Jackets」に）。大文字表記や文字間隔がラベル幅を押し広げていないかを確認する。
- ステップ5：クリックとタッチのターゲットサイズを確認する — ヘッダーのアイコンとリンクが、W3C WCAG 2.2 達成基準 2.5.8 ターゲットのサイズ（最小）を満たしていることを確認する。ポインターのターゲットは少なくとも24×24 CSSピクセル、または小さなターゲットの周囲に十分な間隔が必要です。
- ステップ6：キーボードナビゲーションとフォーカス管理を検証する — 買い物客がTabキーとShift+Tabキーでヘッダー内を移動できることを確認する。W3C WAI ARIA Menubarパターンのように、Escapeキーで開いているドロップダウンが閉じ、フォーカスが開いた要素に戻ることを確認する。
Navi+の役割と適用領域
成長するカタログがテーマのヘッダーに収まらなくなったとき、対処の一つはLiquidのカスタム開発です。Navi+は、テーマのヘッダーコードを編集せずに、独立したメニューを構築できるShopifyアプリです。
- PCとスマホのメニューを分離： デスクトップ利用者向けにDesktop Mega Menuを構築し、スマートフォン向けにはMobile Menu（ドロワー）、Tab Bar（モバイルタブバーの設計思想を参照）、Icon Menu、Floating Buttonを個別に設定できます。
- 最大3階層： Shopify標準のメニューと同様に、Navi+のメニューも最大3階層までです。Desktop Mega Menuなら、カテゴリーの深さをヘッダーバーではなくパネルに持たせられます。
- Theme App Embedによる組み込み： Navi+はShopify標準のTheme App Embedを通じて有効化されます。メニューは設定データとして保持され、アプリのスクリプトによってブラウザ上で描画されるため、テーマのLiquidファイルを編集する必要はありません。
ここではスピードに関する主張は行いません。効果は、Google PageSpeed Insightsで自社ストアにおいて測定してください。
Navi+を使わないほうがよいケース： 単一商品のブランドや、カタログが非常に小さいストアでは、サードパーティのナビゲーションアプリはほとんど必要ありません。そうしたストアでは、テーマ標準のヘッダー設定で足りる場合があります。比較したい方のために、Shopifyテーマ向けNavi+セットアップガイドで人気のテーマを取り上げています。
お使いのテーマのヘッダーに余裕がなくなっているなら、Navi+で、テーマのコードを編集せずに独立したDesktop Mega MenuとMobile Menuを構築してみてください。そのうえで、上のチェックリストにあるノートPC幅のチェックを再度実施しましょう。
よくある質問（FAQ）
Shopifyでヘッダーメニューを変更するにはどうすればよいですか？
テーマエディターでテーマを開き、Headerセクションを選択します。Shopifyヘルプセンターによると、ほとんどのテーマでは、テーマのHeaderセクションの設定を編集することで、デフォルトのメインメニューを変更できます。
Shopifyのドロップダウンメニューは何階層まで作成できますか？
Shopify公式ドキュメントによると、最上位の項目には最大2階層の入れ子のドロップダウンメニューを設定できるため、ナビゲーションは最大3階層になります。
デスクトップ表示でハンバーガーメニューを使用すべきですか？
Nielsen Norman Groupは推奨していません：「デスクトップのユーザーインターフェースでは、隠れたナビゲーション（ハンバーガーアイコンなど）を使わないこと。」同グループのテストでは、デスクトップユーザーが隠れたメニューを使ったのは27%のケースで、可視のナビゲーションは48%でした。
検索ボックスはヘッダーのどこに配置すべきですか？
NN/gは、リンクではなく入力欄とし、ページ上部（通常は右上の隅）に置き、典型的なクエリが収まる十分な幅を持たせることを推奨しています。
アカウント、注文追跡、通貨選択リンクはどこに配置すべきですか？
これらはユーティリティナビゲーション、つまり補助的な操作とツールです。NN/gは、これらを補助的で目立ちにくい位置に置けると述べています。そのため、上部のユーティリティバーやヘッダーの右側に置き、商品カテゴリーとは分けるとよいでしょう。
ヘッダーのリンクやアイコンのサイズはどれくらい必要ですか？
W3C WCAG 2.2 SC 2.5.8では、ポインター入力のターゲットサイズは少なくとも24×24 CSSピクセルです。ただし、ターゲットの周囲に十分な間隔がある場合などの例外が適用されるときを除きます。
出典・参考資料
- Nielsen Norman Group: Pernice, K. & Budiu, R. (2016). Hamburger Menus and Hidden Navigation Hurt UX Metrics. nngroup.com/articles/hamburger-menus
- Nielsen Norman Group: Nielsen, J. (2001). Search: Visible and Simple. nngroup.com/articles/search-visible-and-simple
- Nielsen Norman Group: Pernice, K. (2017). F-Shaped Pattern of Reading: Misunderstood, But Still Relevant. nngroup.com/articles/f-shaped-pattern-reading-web-content
- Nielsen Norman Group: Farrell, S. (2015). Utility Navigation: What It Is and How to Design It. nngroup.com/articles/utility-navigation
- Baymard Institute: ‘Main Navigation’ Design Examples. baymard.com/homepage-and-category-usability/benchmark/page-types/drop-down-menu
- Baymard Institute (2023): Make Product Categories the Top-Level Navigation Items on Mobile Sites (33% Don’t). baymard.com/blog/main-navigation-product-categories
- Shopify Help Center: Set up drop-down menus in your online store. help.shopify.com
- W3C Web Accessibility Initiative: Understanding SC 2.5.8: Target Size (Minimum). w3.org/WAI/WCAG22/Understanding/target-size-minimum.html
- W3C WAI ARIA: Menu and Menubar Pattern. w3.org/WAI/ARIA/apg/patterns/menubar
- Google web.dev: Cumulative Layout Shift (CLS). web.dev/articles/cls
- Google Chrome Lighthouse: Avoid an excessive DOM size. developer.chrome.com
- Navi+: Setup guides for Shopify themes. naviplus.io/shopify-themes
トピックを見る
このガイドは各テーマの記事にリンクしています——それぞれをさらに深く学べます。