Sense vs Dawn：Shopifyの無料ビューティー向けテーマは初期標準を超えるか？（2026年）

Shopifyの公式無料テーマSenseとDawnの技術・UX比較。Liquidコードの共通性、スキンケア商品ページ構造、肌悩み別ナビゲーション、Core Web Vitalsを徹底解説します。

クイックアンサー：あなたのストアが選ぶべき無料テーマは？

• Shopify Sense（0ドル）を選ぶべきケース：SKU数が50未満のスキンケア、コスメ、ウェルネスブランドを立ち上げる場合。パステルカラー、丸みを帯びたボタン、成分表やスキンケアルーティン用の標準折りたたみアコーディオンにより、初期制作工数を大幅に短縮できます。

• Shopify Dawn（0ドル）を選ぶべきケース：多ジャンル展開や、シャープで洗練された白黒ミニマリズムを追求する場合。開発のベースとして最も汎用性が高く、Shopifyの最新機能アップデートが最速で反映されます。

• ビューティー系特有の共通ナビゲーション欠陥：スキンケア購入者は成分種別（『セラム』）だけでなく、肌悩み（『毛穴』『エイジング』）で商品を探します。SenseもDawnも文字主体のメニューに固定されており、視覚的なナビゲーションができません。外部連携による分離型ナビゲーションがCVR改善に不可欠です。

1. アーキテクチャの真実：なぜSenseの92%以上はDawnと同じなのか

コードベースの検証と継承構造

両テーマのLiquid構造を照合すると、Web Components、主要JavaScript（predictive-search.js、cart-drawer.js）、レイアウトエンジンが完全に同一であることが判明します。違いはsettings_data.jsonと一部のCSS装飾に留まります。

2. 技術仕様比較マトリクス：Sense vs Dawn

3. ビューティー商材向け商品詳細ページ（PDP）構造

Senseに標準搭載されたコスメ専用ブロック

Senseには、有効成分アイコン付き折りたたみアコーディオン（葉、水滴など）、スキンケアルーティンのクロスセル提案、容器を引き立てる柔らかな枠線が標準で備わっています。

4. 致命的なUXの課題：肌悩み別ナビゲーションの欠如

肌の悩みから探せないテキストメニューの限界

一般的な文字だけのメニュー（クレンザー、美容液）では、専門知識のない購入者は迷います。肌悩み（ニキビ、乾燥）ごとの画像カードがない場合、モバイルでの直帰率は65%を超えがちです。

5. モバイル人間工学と親指操作エリアの課題

画面下部タブバーの不在

6.7インチ画面で左上のハンバーガーボタンを押すには持ち替えが必要です。両テーマとも親指が自然に届く画面下部エリアを完全に活用できていません。

6. パフォーマンス検証：初期速度 vs アプリ追加後の速度低下

初期状態では両テーマともPageSpeed 96〜98点を記録します。しかしレビュー、色見本（スウォッチ）、メガメニューアプリを追加すると、スコアは65点未満に急落しTBTが悪化します。

7. ヘッダーナビゲーションのLiquidコード解析

header.liquidの処理はlink.titleとlink.urlのみを取得するため、コードを改変しない限り画像やバッジをメニューに埋め込むことができません。

<!-- Standard Header Navigation Loop in Dawn / Sense header.liquid -->
<header class="header header--middle-left header--mobile-center page-width">
  <nav class="header__inline-menu">
    <ul class="list-menu list-menu--inline" role="list">
      {% for link in section.settings.menu.links %}
        <li>
          {% if link.links != blank %}
            <header-menu>
              <details id="Details-HeaderMenu-{ forloop.index }">
                <summary class="header__menu-item list-menu__item link focus-inset">
                  <span {%- if link.child_active %} class="header__active-menu-item"{% endif %}>
                    { link.title | escape }
                  </span>
                  {% render 'icon-caret' %}
                </summary>
                <ul class="header__submenu list-menu list-menu--disclosure caption-large" role="list">
                  {% for childlink in link.links %}
                    <li>
                      <a href="{ childlink.url }" class="header__menu-item list-menu__item link link--text">
                        { childlink.title | escape }
                      </a>
                    </li>
                  {% endfor %}
                </ul>
              </details>
            </header-menu>
          {% else %}
            <a href="{ link.url }" class="header__menu-item list-menu__item link link--text">
              <span>{ link.title | escape }</span>
            </a>
          {% endif %}
        </li>
      {% endfor %}
    </ul>
  </nav>
</header>

8. 現代のビューティーEC構造：Navi+によるナビゲーション分離

メニュー構成をグローバルEdge CDN（Cloudflare R2）へ分離することで、無料テーマの軽快さを維持しながら、親指で届く下部タブバーと画像付きドロワーを16ミリ秒未満で表示できます。

9. 実践的選定マトリクス

10. トレードオフと構造的制限事項

• Sense: Senseの制限：フェミニンな色調による他業種転用の難しさ、硬直したテキストメニュー、標準スウォッチの非搭載。
• Dawn: Dawnの制限：初期状態が極めて簡素、成分表アコーディオン作成の手間、モバイル下部ドックの欠如。

11. コスメブランド向け5ステップ実装リスト

• Step 1: Structure your catalog around skin concerns and customer goals.
• Step 2: Populate Sense’s pre-configured collapsible rows with active ingredient breakdowns.
• Step 3: Audit third-party apps to prevent script injection bloat.
• Step 4: Verify minimum 44px by 44px mobile tap targets.
• Step 5: Deploy a visual category drawer and bottom tab bar via Navi+.

よくある質問（FAQ）

Senseは公式にDawnより高速ですか？

いいえ。ラボテストではDawnがわずかに上回ります（98〜100点 vs 96〜98点）が、実際の体感差はほぼありません。

DawnからSenseへの移行でデータは消えませんか？

消えません。同じOnline Store 2.0構造のためスムーズに移行可能です。移行後にフォントや配色設定を再確認してください。

Prestigeのような400ドルの有料テーマは必須ですか？

必須ではありません。無料のSenseにNavi+を組み合わせることで、高額なテーマを購入せずとも洗練されたモバイル体験を実現できます。

Citations & Verification Sources

1. Shopify Open Source Theme Architecture: Dawn Reference Repository and Release Notes (v15+), GitHub, 2026.
2. Shopify Theme Store: Sense Theme Feature Documentation and Specification Guide, 2026.
3. Baymard Institute: Cosmetics & Skincare Ecommerce UX: Navigating Formulations, Concerns, and Routines, 2025.
4. Nielsen Norman Group: Visual Information Scent in Mobile Category Exploration, 2024.
5. Google Web Vitals Documentation: Optimizing Interaction to Next Paint (INP) on Mobile Devices, 2025.