Dawn（またはRefresh、Sense）をインストールしたばかりで、メニューは機能しています。カテゴリーが表示され、ハンバーガーアイコンはモバイルで開き、カートアイコンは右上隅に位置しています。「十分だ、商品写真に進もう」と思うかもしれません。
その直感は売上を失わせます。これらのテーマが悪いからではなく、実は非常によく構築されています。しかし「動作する」ことと「販売のために適切に機能する」ことは別物です。各デフォルトテーマは特定の設計トレードオフを行っており、その一部は新しいストアの売上に直結します。
このガイドでは、最も人気の3つの無料Shopifyテーマ—Dawn、Refresh、Sense—を詳しく解説し、どのメニュー機能がそのままで十分か、どれが軽い調整が必要か、そしてどれをすぐに変更すべきかを特定します。
- Dawnのナビゲーションはシンプルで高速ですが、メガメニューサポートとモバイルタブバーがそのまま付属していません
- Refresh（2024年版）はより現代的なヘッダーを追加していますが、モバイルでは依然として標準的なハンバーガーパターンを使用しています
- Senseはビジュアル面に優先順位を置き、画像が多いブランドには適していますが、低スペックな電話では遅く感じることがあります
- 3つのテーマすべてに共通する課題：ボトムタブバーなし、メニューアイコンなし、モバイルカスタマイズが限定的
- ほとんどの問題はテーマ設定で修正できます。アプリやカスタムコードが必要なケースはわずかです
テーマ選択に関する簡単な補足
まだテーマを選んでいない場合は、深く考えすぎないでください。Dawn、Refresh、Senseはすべて無料であり、Shopifyに保守されており、そのままで優れたパフォーマンスを発揮します。違いはほとんどビジュアル的です—Dawnはミニマル、Refreshはモダン、Senseはエディトリアルです。
ナビゲーションの観点からは、3つのテーマの中に明らかな優位性はありません。同じ課題と強みがすべての3つに適用されます。ブランド美学に基づいて選択してから、ナビゲーションをカスタマイズしてください。
Dawn：最も人気のあるデフォルトテーマ
Dawnはプロダクト（Shopify）の旗艦無料テーマであり、ほとんどの新しいストアが始まるものです。意図的にミニマルで、読み込みが速く、アクセシビリティのベストプラクティスに従っています。ナビゲーションを詳しく見てみましょう。
何が上手く機能しているか
シンプルなヘッダー構造。 Dawnのヘッダーは直感的です：ロゴが左側、ホリゾンタルメニューが中央または左揃え、ユーティリティアイコン（検索、アカウント、カート）が右側。これはユーザーが期待する標準的なeコマースレイアウトに従っています。
適切なモバイルメニュー。 ハンバーガーアイコンはメニュー項目が入ったクリーンなスライドアウトドロワーを開きます。1レベルのネスト（親をタップして子を展開する）に対応しており、ほとんどの中小規模ストアには十分です。
高速読み込み。 Dawnのナビゲーションは軽量です。重いJavaScriptフレームワークやカスタムアニメーションを読み込まないため、遅い接続でもメニューは素早く表示されます。PageSpeed Insightsテストでは、Dawnは一貫してモバイルパフォーマンスで85以上をスコアしています。
固定ヘッダーオプション。 テーマ設定→ヘッダーで、固定ヘッダーを有効にしてユーザーがスクロールしても表示されたままにできます。これはメニュー、検索、カートを常にアクセス可能に保つ—多くのストアオーナーが有効にし忘れる大きな使いやすさの向上です。
組み込み検索。 Dawnのヘッダーには検索アイコンが含まれており、これをクリックするとpredictive search オーバーレイが開きます。入力時に結果が表示され、顧客は商品をより速く見つけるのに役立ちます。
調整が必要なもの
デフォルトではメガメニューがない。 Dawnはドロップダウンメニュー（1レベルのサブカテゴリ）に対応していますが、複数列レイアウト、カテゴリー画像、プロモーションバナーを備えた真のメガメニューには対応していません。30以上の商品を持つストアの場合、15のサブカテゴリーを持つドロップダウンは長くてスクロール可能なリストになり、ナビゲーションが難しくなります。
解決策： Shopifyナビゲーション（Online Store → Navigation）を論理的なグループに整理することで、疑似メガメニューを作成できます。ただし、視覚的な結果は依然として1列のドロップダウンです。画像付きの真の複数列メガメニューが必要な場合は、ナビゲーションアプリが必要です。
検索アイコン対検索バー。 デスクトップでは、Dawnはデフォルトで虫眼鏡アイコンのみを表示します。これをクリックするとsearch オーバーレイが開きます—これは悪くありませんが、Baymard Instituteの研究によれば、目に見える検索フィールド（アイコンだけではなく）を使用すると、検索使用が20～30%増加します。
解決策： 一部のDawnカスタマイズでは、ヘッダーに永続的な検索バーを表示できます。テーマ設定またはDawnドキュメントで「予測検索」オプションを確認してください。お使いのテーマバージョンがこれに対応していない場合、検索に焦点を合わせたアプリで追加できます。
ヘッダーアナウンスメントバーの制限。 Dawnのアナウンスメントバーはテキストとリンクに対応していますが、複数の回転メッセージやカウントダウンタイマーには対応していません。送料しきい値の促進（「$50以上で送料無料」）や期間限定オファーの場合、単一の静的メッセージは機能的ですが基本的です。
すぐに変更すべきもの
固定ヘッダーを有効にする。 テーマ設定→ヘッダー→「固定ヘッダーを有効にする」をチェックしてください。このトグル1つでナビゲーションをスクロール中も常にアクセス可能にします。デメリットはありません。
予測検索を有効にする。 テーマ設定で、予測検索が有効になっていることを確認してください。顧客が入力するときに商品提案が表示され、検索とプロダクトページの間のステップが減ります。
メニュー階層を確認する。 Online Store → Navigationに移動してメニュー構造を確認してください。カテゴリーが2レベル以上ネストされている場合（カテゴリー→サブカテゴリー→サブサブカテゴリー）、平坦にしてください。Dawnのモバイルメニューは1レベルのネストを優雅に処理しますが、2レベル以上では不安定になります。
Refresh：モダンアップデート
Refreshは、2024年にリリースされたShopifyの新しい無料テーマです。Dawnのパフォーマンス重視のアプローチを採用し、より多くのビジュアルポーランド—丸みを帯びた角、柔らかいタイポグラフィ、わずかに異なるヘッダーレイアウトを追加します。
何が上手く機能しているか
更新されたヘッダーレイアウト。 Refreshは複数のヘッダーレイアウトオプションを提供します：ロゴ左側でインラインメニュー、ロゴ中央でメニュー下、またはより小さいスクリーン用のコンパクトレイアウト。この柔軟性により、カスタムコードなしでブランドのスタイルに合わせることができます。
改善されたモバイルドロワー。 Refreshのモバイルメニュードロワーはdawnのものよりも洗練されています。スムーズなアニメーション、クリアなタイポグラフィ、タップターゲット間のより良いスペーシングが含まれています。親カテゴリーとサブカテゴリー間の視覚的階層はより明確です。
コレクションページフィルター。 厳密にはナビゲーションではありませんが、Refreshのコレクションページには、Dawnのデフォルトより洗練された組み込みフィルターおよびソート機能が含まれています。顧客は価格、利用可能性、商品タイプでフィルターでき、すべてのバリエーションを表示するためのメインメニューの負担が軽減されます。
アクセシビリティ。 Dawnと同様に、Refreshはガイドライン（WCAG）に従います。メニュー項目には適切なARIAラベルがあり、焦点状態はキーボードナビゲーション用に表示され、コントラスト比はアクセシビリティ基準を満たしています。
調整が必要なもの
同様のメガメニューの制限。 RefreshはDawnと同じ制約を継承しています：ドロップダウンメニューはサブカテゴリーをサポートしていますが、画像と複数列レイアウトを備えた真のメガメニューは追加のカスタマイズまたはアプリが必要です。
古いデバイス上のアニメーションパフォーマンス。 Refreshのスムーズなアニメーションは新しい電話では素晴らしく見えますが、古いデバイス（iPhone SE、予算Androidスマートフォン）では若干のラグを引き起こす可能性があります。ターゲットオーディエンスに古いハードウェアを使用している価格に敏感な買い手が含まれている場合、低スペックデバイスでテストしてください。
解決策： ほとんどのアニメーション関連のラグは、メニュー項目の数を減らし、テーマ設定でパラレックス効果を無効にすることで軽減できます。
すぐに変更すべきもの
固定ヘッダーを有効にする。 Dawnと同じ—テーマ設定→ヘッダーで有効にしてください。Refreshの固定ヘッダーはフルヘッダーより若干コンパクトで、これは良いです：スクリーンスペースを節約しながらナビゲーションをアクセス可能に保ちます。
ヘッダーレイアウトオプションを確認する。 Refreshは3～4のヘッダーレイアウトバリアントを提供します。各試してどの1つがカテゴリーに最も視認性を与えるかを見てください。5つ以上のトップレベルカテゴリーを持つストアの場合、メニュー（フルワイドを持つロゴ下）のレイアウトは、すべてを1行に詰め込むことよりも機能することが多いです。
モバイルスペースを監査する。 Refreshのモバイルメニューがdawnのものよりもデフォルトスペーシングが優れているため、実際のタブタッピングで確認してください。項目が近すぎる場合は、テーマのカスタムCSSまたはセクション設定でメニューパディングを増やしてください。
Sense：エディトリアルテーマ
Senseはストーリーテリングに傾く、職人製品、美しさのブランド、またはライフスタイルストアなどのブランド向けに設計されています。そのナビゲーションはそのエディトリアルフォーカスを反映しています。
何が上手く機能しているか
ヘッダーの視覚的ウェイト。 Senseのヘッダーはロゴとブランドアイデンティティにより多くのスペースを与えます。ナビゲーションは実用的ではなく意図的に感じられ、これは美学が販売ポイントであるブランドに適しています。
画像フレンドリーなコレクションページ。 Senseのコレクションレイアウトは商品画像を強調し、ナビゲーションはメニューをクリーンで乱雑なものに保つことでこれをサポートしています。商品写真がカテゴリー名よりも売上に優れているストアの場合、これは利点です。
エレガントなモバイルメニュー。 Senseのモバイルドロワーはビジュアル的に洗練されています—クリーンタイポグラフィ、寛大なホワイトスペース、スムーズなトランジション。エディトリアルまたはラグジュアリーブランドに適合するプレミアムフィールを作ります。
調整が必要なもの
ヘッダーレイアウトオプションが少ない。 DawnとRefreshと比較すると、Senseはヘッダーレイアウトのカスタマイズオプションが少なくなっています。ロゴの配置とメニューの位置はより固定されており、カテゴリー構造がデフォルトレイアウトに合わない場合は制限的に感じることができます。
パフォーマンストレードオフ。 Senseは主にビジュアル効果のため、DawnよりもわずかにCSSとJavaScriptを読み込みます。ほとんどのストアでは差は無視できます（モバイルで50～100ms）が、他のアプリを積み重ねている場合、すべてのミリ秒が重要です。
解決策： サードパーティスクリプトを最小化し、ヘッダーにJavaScriptを追加する複数のアプリのインストールを避けてください。Senseを使用している場合は、特にページの総重みに注意してください。
すぐに変更すべきもの
メニュー構造を簡素化する。 Senseのエレガントなメニューデザインは、より少ない、よく選ばれたカテゴリー（5～7のトップレベル項目）で最適に機能します。以前のテーマから複雑なカテゴリーツリーを継承した場合は、統合する良い時機です。
ミッドレンジのAndroidデバイスでテストする。 Senseの視覚的ポーランドは最新の画面用に設計されていますが、グローバルeコマーストラフィックの重要な部分はミッドレンジの電話からきています。Samsung Galaxy Aシリーズまたは同様のデバイスでストアを開き、メニューがスムーズに開くことを確認してください。
検索を目立たせて有効にする。 Senseの検索アイコンはビジュアルデザインに対して二次的に感じることができます。ヘッダーで目立つ位置に配置されていることを確認してください—顧客は検索を見つけるために狩りをすべきではありません。
3つのテーマすべてに共有される課題
選択したテーマに関わらず、3つはすべて新しいストアオーナーに影響を与えるナビゲーション制限を共有します：
ボトムタブバーなし
Shopifyの無料テーマはいずれも、モバイルボトムタブバー（Instagram/Amazonスタイルナビゲーション）を含むものはありません。これは大きな課題です。その理由は：
- タブバーはハンバーガーメニューをタップして開くことなく、ナビゲーションを表示状態に保ちます
- それらは親指にとって優しい（スクリーンの下部は最も簡単なリーチゾーンです）
- 「ブラウジング」から「ナビゲーション」までのステップを2つのタップ（メニュー→カテゴリーを選択を開く）から1つのタップに減らします
タブバーの追加には、ナビゲーションアプリまたはカスタムテーマコードが必要です。
メニューアイコンなし
3つのテーマはすべてテキストのみのメニュー項目を表示します。ホーム、検索、カート、またはカテゴリーのアイコンはありません。研究によると、テキストラベルにアイコンをペアリングすると、スキャン速度が20～35%改善され、顧客がより速く自分の方向を把握するのに役立ちます。
限定的なモバイルカスタマイズ
ネイティブに別々のモバイルとデスクトップメニューを構成することはできません。Online Store → Navigationで設定したものは両方のスクリーンサイズに適用されます。しかし、モバイルユーザーとデスクトップユーザーは異なるニーズを持っています—モバイルメニューはより平坦で直接的であるべきである一方、デスクトップメニューはより深さを余裕を持つことができます。
メニュー分析なし
これらのテーマはいずれも、どのメニュー項目がクリックされたか、どのカテゴリーが最もトラフィックを駆動するか、またはどのナビゲーションパスが購入につながるかを知らせません。このデータを取得するには、Google Analytics イベント追跡または専用ナビゲーションアプリが必要です。
| 機能 | Dawn | Refresh | Sense | 理想的 |
|---|---|---|---|---|
| 固定ヘッダー | はい（トグル） | はい（トグル） | はい（トグル） | はい |
| メガメニュー | いいえ | いいえ | いいえ | 画像付き複数列 |
| モバイルタブバー | いいえ | いいえ | いいえ | 下部の4～5タブ |
| メニューアイコン | いいえ | いいえ | いいえ | アイコン+テキストラベル |
| 予測検索 | はい | はい | はい | はい |
| 別々のモバイル/デスクトップメニュー | いいえ | いいえ | いいえ | 独立した構成 |
| メニュークリック分析 | いいえ | いいえ | いいえ | 組み込みクリック追跡 |
| ドロップダウンサブカテゴリー | はい（1レベル） | はい（1レベル） | はい（1レベル） | 2+レベル |
デフォルトが十分なとき（そしてそうでないとき）
デフォルトを保つ場合：
- 30以下の商品がある
- カテゴリー構造が平坦（5～7カテゴリー、サブカテゴリーなし）
- トラフィックは主にデスクトップ
- ちょうど起動しており、ナビゲーションに投資する前に商品市場適合性を検証したい
このシナリオでは、固定ヘッダーを有効にし、予測検索をオンにしたDawn、Refresh、またはSenseは良く機能します。顧客が立ち往生する場所を示す交通データを持つまで、ナビゲーションアプリの金を費やさないでください。
アップグレードする場合：
- 30以上の商品とサブカテゴリーがある
- モバイルトラフィックが50%を超える（Shopify Analytics → Online Store → Sessions by deviceで確認）
- バウンス率が60%を超えており、ナビゲーションの混乱を疑っている
- カテゴリー画像、アイコン、またはプロモーションバナー付きのメガメニューを望んでいる
- モバイルタブバーが必要で親指にとって優しいブラウジング
このようなシナリオでは、Navi+ Menu Builderなどのナビゲーションアプリはテーマの間のギャップを埋めることができます。既存のテーマを置き換えずにこれに層を追加し、メガメニュー、タブバー、アイコン、および別々のモバイル/デスクトップ構成を追加します。
テーマアップデートShopifyは定期的に無料テーマを更新します。ここで言及されている一部の課題は将来のバージョンで対処される可能性があります。テーマアップデート後、ナビゲーションを再度テストして、新機能が追加されているかどうか、および既存のカスタマイズが上書きされていないことを確認してください。
次のステップ
- テーマを特定する。 Online Store → Themesに移動して、実行しているテーマを確認します。
- 固定ヘッダーを有効にする。 すべてのテーマはこれをサポートしています。今すぐ有効にしてください。
- 予測検索を有効にする。 同じ—1つのトグル、即座の改善。
- 上記の比較表を確認してください。 ストアサイズとトラフィックパターンにとって最も重要な課題を特定します。
- 決定する：調整またはアップグレード。 デフォルトが必要を満たしている場合は、コンテンツとマーケティングに焦点を当てます。メガメニュー、タブバー、またはモバイル固有のレイアウトが必要な場合は、ナビゲーションアプリを評価してください。
Shopifyのデフォルトテーマはナビゲーション用の固い開始点を提供し、多くの新しいストアでは、その開始点は本当に十分です。重要なのは、どの機能をすぐに有効にしか知ることです（固定ヘッダー、予測検索）、およびストアが成長するにつれてどの制限が重要になるか（メガメニューなし、タブバーなし、別々のモバイルメニューなし）。あなたが持っているもので始め、顧客が戦う場所を追跡し、データがアップグレードするように指示するときに意図的にアップグレードしてください。
このArticleは、より大きなガイドの一部です：はじめてのオンラインストアのナビゲーション基本：5つの必須要素。