Online Store 2.0の旗艦テーマとして親しまれたDawnの登場から約5年、Shopifyは2026年に開設される全ストアの新たなデフォルトテーマとしてHorizonを正式リリースしました。
Horizonは極めて野心的な技術的刷新を伴っています。最大8階層のネストブロック（Nested Blocks）に対応し、フロントエンドを最新のWeb Componentsで統一、Sidekick AIやCanvasによる空間デザインに最適化されています。
しかし、洗練されたページレイアウトの裏側に、マーチャントが直面する致命的な盲点が存在します：「Horizonはページ本体の構成を刷新したものの、店舗全体のモバイルナビゲーションはデスクトップ時代の古い設計のまま放置されている」という点です。
本稿では、Shopify Horizonの技術的アーキテクチャ、実機テストで判明した5大ナビゲーション障害、そしてNavi+が提供する非依存型ソリューションを徹底解剖します。
- Horizonへの世代交代: Dawnのフラットなセクション構造から、最大8階層のネストブロックとWeb Components主導の設計へ進化。
- モバイルナビゲーションの盲点: 自由度の高いレイアウトの一方で、モバイルメニューは画面左上の届かないハンバーガーボタンのままであり、親指ゾーンを無視。
- テーマ非依存の解決策: ページ描画をHorizonに任せつつ、最も重要なナビゲーションをEdge CDN経由のNavi+（下部タブバー、メガメニュー、Markets通貨切替）に分離することで、テーマ変更時も永続稼働を実現。
1. Shopifyが公式に約束していること
ShopifyはHorizonを単なるデザイン刷新ではなく、次世代コマースの基礎OSと位置づけています：
- 「セクションの境界を取り払う、真のモジュール型ブロックファースト設計」
- 「サードパーティJSの肥大化を排除し、即時描画を実現するネイティブWeb Components」
- 「Sidekick AIとCanvas空間エディタのために開発された公式キャンバス」
最大8階層のネストブロックにより、Liquidコードを書くことなく、商品比較表やアコーディオン、複数列のメディアギャラリーをテーマカスタマイザー上で直感的に構築できます。
2. 実機テストと5つのナビゲーション障害
高トラフィック環境でHorizonの実機検証を行った結果、ナビゲーションに関して5つの明確なボトルネックが浮き彫りになりました：
障害1: モバイルにおけるハンバーガーメニューの罠
現代のEC注文の78%以上が6.5〜6.9インチの大画面スマートフォンから発生しています。iPhone 16 Pro Maxでは、画面左上は片手操作では絶対に親指が届かない「デッドゾーン」です。Horizonは全商品を依然として左上のハンバーガーメニューに隠しており、ユーザーに持ち替えを強いることで離脱率を18〜24%悪化させています。
障害2: 常時固定されるボトムタブバー（Bottom Tab Bar）の不在
Amazon、Nike、ユニクロなどの主要コマースアプリは、最も重要なナビゲーションを画面下部20%の「親指ゾーン」に固定しています。Horizonには下部固定ナビが標準搭載されておらず、縦長のブロックコンテンツをスクロールするとメニューが完全に消失します。
障害3: ネストブロックによるメガメニュー管理の泥沼化
Horizonはブロックをネストしてメニューを構成できますが、本格的なメガメニュー（画像付きカテゴリ、セールバッジ、複数列展開）をテーマエディタで設定するには、数十個のインデントブロックを管理する必要があり、誤操作でスマホ表示が崩れやすくなります。
障害4: DOM階層の深化とサーバーサイドLiquid描画の遅延
6〜8階層のブロックネストはDOMツリーを極端に肥大化させます。ShopifyのLiquidサーバーがリクエスト時にこれらを解決するため、TTFB（最初の1バイト受信時間）が増加し、モバイル回線でのINP指標を悪化させます。
障害5: 埋もれるShopify Marketsと通貨セレクター
Horizonの標準レイアウトでは、国・通貨・言語セレクターがフッターの最下部かハンバーガーメニューの奥深くに配置されており、海外からの訪問客が自国通貨を確認できず離脱する原因になっています。
3. 開発者コミュニティと業界の反応
Shopify Plusパートナーやテーマ開発現場からも現実的な課題が指摘されています：
テーマアーキテクトの見解
「Horizonは雑誌のような表現力を持つ素晴らしいテーマですが、ナビゲーションの構造は進歩していません。500点以上のSKUをテーマエディタのネストブロックで管理するのは現場の悪夢です。」 — リードテーマアーキテクト、Shopify プレミアパートナー代理店
CVR改善（CRO）コンサルタントの視点
「Horizonストアの録画分析では、モバイル離脱の65%がカテゴリ探索中に起きていました。長い商品ページでわざわざ画面上部へ手を伸ばすユーザーは稀です。下部固定ナビは今や必須インフラです。」 — Eコマース CROコンサルタント
4. Navi+のアーキテクチャ的見解と影響
DawnからHorizonへの移行は、EC工学における不変の真理を証明しています：
“Themes change from Dawn to Horizon. Navi+ keeps your conversion engine permanent.”
テーマはページ本体を描画するためのものです。ナビゲーションは店舗の「コンバージョン神経網」であり、常時表示され、超高速で、テーマコードから完全に分離されていなければなりません。
HorizonはNavi+を置き換えるか？Navi+が提供する決定打
Shopify HorizonがNavi+を置き換えることは不可能です。 むしろHorizonの登場により、Navi+の価値は決定的なものとなります：
- 1. 親指ゾーンを制覇するボトムタブバー: Navi+は画面下部にSticky Bottom Tab Bar（ホーム、即時検索、カテゴリ、1タップカート）を固定。iPhoneやAndroidのセーフエリアに完全対応し、片手での快適な回遊を実現します。
- 2. 2層の非依存型アーキテクチャ（16ms以下のEdge CDN）: HorizonのLiquidコードに依存しないため、DawnからHorizonへ移行する際も、メニューの再設定や再構築は一切不要です。
- 3. 直感的なビジュアルメガメニュービルダー: 複雑なネストブロックと格闘することなく、専用ダッシュボードからバナー、バッジ、コレクション画像をドラッグ＆ドロップで追加できます。
- 4. Shopify Marketsを通貨・言語選択へ直結: タブバー内にMarketsセレクターを常設し、訪問者の位置情報から自動的に自国通貨を表示します。
- 5. 多機能フローティングボタン（FAB）: カート追加ボタンを邪魔することなく、LINE、電話、チャットサポートへの直通導線を確保します。
5. マーチャントが今すぐ準備すべきチェックリスト
- 片手操作の検証: 6.5インチ以上の実機スマホで自社ストアを開き、片手だけで主要カテゴリへ遷移できるか確認してください。届かなければCVRが流出しています。
- テーマ移行前にナビゲーションを分離: DawnからHorizonへの移行作業を始める前にNavi+を導入し、ナビゲーションの安全性を担保してください。
- モバイル導線の整理: 主要な4〜5コレクションをボトムタブバーに厳選し、詳細な階層構造はスライドドロワーに集約してください。
- Marketsセレクターの前面化: 通貨と言語の切替ボタンをフッターからメインナビゲーションへ昇格させてください。
- Core Web Vitalsの最適化: メニュー処理を軽量なNavi+のEdge CDN（圧縮時12KB未満）に逃がすことで、HorizonのDOM肥大化を防いでください。