Shopify ストア向けのモバイル コマースの最適化
現在、モバイル コマースは世界中の Shopify トラフィックの 65 ～ 72% を占めています。しかし、モバイルのコンバージョン率は依然としてデスクトップに比べて 40 ～ 50% 低いままです。このギャップは純粋な収益の損失であり、チェックアウトの摩擦、ページ速度の問題、タッチスクリーンの世界でキーボードとマウス用に設計された UI パターンの結果です。
モバイル コンバージョンのギャップを埋めるのにネイティブ アプリは必要ありません。それには、Shopify ストアフロントを意図的にモバイルファーストに最適化する必要があります。このガイドでは、Shopify 販売者向けの具体的で実行可能な手順とともに、モバイル コマースの最適化の技術面と UX の側面について説明します。
重要なポイント
- Shopify トラフィックの 65 ～ 72% がモバイルです。モバイルのコンバージョン率はデスクトップの 40 ～ 50% です。この差を埋めることが、ほとんどの店舗にとって最大の収益機会となります
- Core Web Vitals (LCP、FID/INP、CLS) は、コンバージョンに直接影響を与える測定可能で修正可能なパフォーマンス目標です
- モバイル ページの読み込み時間が 1 秒短縮されるごとに、コンバージョン率が 3 ～ 7% 増加します
- 親指ゾーンの設計 — 親指が自然に置かれる場所にインタラクティブな要素を配置 — タップエラーを軽減します
- モバイル チェックアウトの放棄率はデスクトップよりも高い。決済アクセラレーター (Apple Pay、Google Pay、Shop Pay) がモバイル チェックアウトのギャップの 60% を埋める
- 画像の最適化は、ほとんどの Shopify ストアにとって唯一最大のモバイル パフォーマンスの機会です
- iOS 上の Safari には、Chrome ファーストのテストでは見逃される特定の互換性の問題があります
- プログレッシブ Web アプリ (PWA) 機能により、App Store を複雑にすることなくネイティブ アプリのようなパフォーマンスを実現
モバイル パフォーマンスのベースラインを診断する
最適化する前に測定してください。ツール:
Google PageSpeed Insights
Shopify ストアの URL を pagespeed.web.dev に入力します。モバイルの分析を実行します (右側のタブ)。現在のスコアを記録します。
- パフォーマンス スコア (0 ～ 100)
- 最大コンテンツフル ペイント (LCP): ターゲット < 2.5 秒
- 次のペイントへのインタラクション (INP): ターゲット < 200ms
- 累積レイアウト シフト (CLS): ターゲット < 0.1
Google Search Console — コア ウェブ バイタル レポート
GSC は、ラボ データ (シミュレーション) ではなくフィールド データ (実際のユーザー測定) を提供します。 Search Console → Core Web Vitals → Mobile に移動します。これは、Chrome ユーザー エクスペリエンス レポートのデータに基づいて、「良い」、「改善が必要」、または「悪い」と評価された URL の割合を示します。 URL レベルのデータは、最初に修正するページの優先順位を付けるのに役立ちます。
Shopify Analytics — デバイスの内訳
「管理」→「分析」→「ダッシュボード」→「デバイスの種類」。注:
- デバイスごとにトラフィックを分割
- デバイス別のコンバージョン率
- デバイス別の収益
- デバイス別の AOV
モバイルのコンバージョン率がデスクトップを 50% 以上下回っている場合は、モバイルを最適化する大きなチャンスがあります。 25% 以内であれば、すでにかなりのパフォーマンスを発揮していることになります。
画像の最適化: 最大の手段
通常、画像は Shopify 製品ページのページ重量の 60 ～ 80% を占めます。モバイル接続はデスクトップに比べて遅く、遅延が大きくなります。
WebP 形式
Shopify は、WebP 形式の画像をサポートするブラウザー (最新のすべてのモバイル ブラウザー) に自動的に提供します。サイト上の画像リクエストを検査して、これが機能していることを確認します。モバイル上の Chrome では、Content-Type ヘッダーに image/webp が表示されるはずです。
画像のサイズ設定
よくある間違い: 4000 × 4000 ピクセルの製品画像をアップロードすると、デスクトップでは 800 × 800 ピクセル、モバイルでは 400 × 400 ピクセルで表示されます。ブラウザーは、サイズを変更する前に 4000 ピクセルの完全な画像をダウンロードします。
Shopify の CDN は、URL パラメーター (?width=800) を介して画像のサイズ変更を処理します。テーマのリキッド コードは、正しいサイズの画像を参照する必要があります。 Shopify 2.0 テーマでは、widths パラメーターを含む image_tag フィルターにより srcset 属性が生成されます。
{{ product.featured_image | image_url: width: 800 | image_tag: widths: '400, 600, 800, 1200' }}
これにより、コンテナー サイズを満たす最小の画像が提供されます。
遅延読み込み
スクロールせずに見える範囲の画像は遅延読み込みを使用する必要があります。スクロールして表示された場合にのみ読み込みます。 Shopify 2.0 テーマには、デフォルトでヒーロー以外の画像に loading="lazy" が含まれています。テーマがこれを行うことを確認してください。古いテーマはそうでない場合があります。
ヒーロー画像の最適化
ヒーロー/バナー画像は、ほとんどの Shopify ホームページの LCP 要素です。それは次のことを行う必要があります:
- プリロードされる:
<head>内の<link rel="preload" as="image" href="..."> - JPEG フォールバックで WebP を使用する
- 適切なサイズにする: モバイルでは幅 1200 ピクセル (2400 ピクセルではない)
- レイアウトのずれを防ぐために明示的な幅と高さの属性を持たせる
Core Web Vitals: LCP、INP、CLS の修正
LCP (最大コンテンツフルペイント) の修正
LCP は、最大の表示要素が読み込まれるまでの時間を測定します。 Shopify ストアでは、通常、これはヒーロー画像または大きな商品画像です。
一般的な LCP の原因と修正:
| LCP の原因 | 修正 |
|---|---|
| 最適化されていない大きなヒーロー画像 | サイズの最適化、WebP の使用、プリロード リンクの追加 |
| 画像が遅延プリロードされていない | ヒーロー画像タグに fetchpriority="high" を追加 |
| レンダリングをブロックするフォント | CSS で font-display: swap を使用する |
| レンダリングをブロックするサードパーティのスクリプト | defer または async を使用して重要ではないスクリプトをロードします。 |
| テーマ CSS がインライン化されていません | <head> の重要な CSS インライン |
INP (次のペイントへのインタラクション) の修正
INP (2024 年 3 月以降、FID に置き換えられました) は、ページがユーザーの操作にどれだけ早く応答するかを測定します。 Shopify:
- アプリ (ライブ チャット、ポップアップ、ロイヤルティ ウィジェット) からの大量の JavaScript により INP が増加します
- Chrome DevTools のパフォーマンス パネルを使用して、長いタスクを特定します
- タグマネージャーまたは非同期読み込みを使用して、重要ではないアプリスクリプトを延期する
CLS (累積レイアウトシフト) の修正
CLS は、ページの読み込み時に要素が飛び回る、予期しないレイアウトの変化を測定します。 Shopify CLS の一般的な原因:
| CLS 原因 | 修正 |
|---|---|
| 明示的な寸法のない画像 | width および height 属性を常に設定します。 |
| Web フォントによりテキストのスワップが発生する | サイズ調整されたフォールバックで font-display: swap を使用する |
| 広告やバナーの読み込みが遅い | ロード前に CSS min-height を使用してスペースを予約する |
| コンテンツをプッシュする Cookie 同意バナー | ドキュメント フローではなくオーバーレイとして配置 |
| 要素を挿入するアプリ ウィジェット | プレースホルダー領域を予約するようにアプリを構成する |
親指に優しい UI デザイン
モバイル UX のほとんどの決定は、キーボードを手に持ち、親指を主な入力デバイスとして使用して行われます。 iPhone の親指ゾーン (グリップを調整することなく親指が快適に届く場所) は、画面のほぼ中央と下部をカバーします。上部の角は「ストレッチゾーン」（届きにくい）です。
重要なインタラクティブ要素の配置
| 要素 | 最適な配置 | なぜ |
|---|---|---|
| カートに追加ボタン | 画面の中央または下部 | 親指が届きやすい |
| ナビゲーションメニュー | 下部のタブバーまたは左上のハンバーガー | 両方アクセス可能 |
| 製品画像ギャラリー | スワイプベース、全幅 | 自然な親指のジェスチャー |
| フィルターコントロール | ボトムシートまたはトップバー | 上隅のタップを避ける |
| 検索バー | 中央上部または目立つアイコン | ユーザーはこの場所を期待しています |
| 戻るボタン | 左上 (ネイティブ アプリの規則に一致) | モーターメモリ |
最小タップターゲットサイズ
Google のウェブ コンテンツ アクセシビリティ ガイドラインでは、最小タップ ターゲットを 44×44 ピクセルにすることを推奨しています。 Shopify テーマのボタンは通常準拠しています。確認してください:
- サイズセレクターのスウォッチ (小さすぎることがよくあります)
- 色見本 (適切な間隔とサイズが必要)
- 数量セレクターのプラス/マイナス ボタン
- コレクションページのページネーション矢印
- フッター リンク (多くの場合、圧縮されすぎます)
スティッキー カートに追加バー
ユーザーが製品説明を下にスクロールすると、「カートに追加」ボタンがスクロールして見えなくなります。画面の下部にある粘着バーにより、プライマリ CTA が表示されたままになります。この機能はベースラインとしてすべての Shopify ストアで有効にする必要があります。コンバージョン上昇率はカテゴリ間で一貫しています。
モバイル コレクション ページの最適化
グリッド レイアウト: デフォルト 2 列
ほとんどのモバイル製品グリッドには 2 列が最適です。 1 列ではスクロールごとに表示される商品の数が少なくなり (発見が遅くなります)、3 列では商品画像が小さすぎて使用できなくなります (テキストが読めず、画像が不鮮明になります)。
スワイプベースのカテゴリーナビゲーション
モバイルでは水平スクロールのカテゴリ タブをスワイプ ベースのカルーセルに置き換えます。正確なタップを必要とする固定テキスト タブのパフォーマンスは、全幅のスワイプ可能な要素よりも劣ります。
無限スクロールとページネーション
研究内容はさまざまですが、モバイルに関しては次のとおりです。
- 無限スクロールによりタップが減少します (ブラウジング モードの顧客に適しています)
- ページネーションにより、顧客は自分の位置に戻ることができます (再訪問の場合に適しています)
- ハイブリッド ([さらに読み込む] ボタン) は合理的な中間点です。無限スクロールによる戻るナビゲーションの問題がなく、オンデマンドでさらに読み込まれます。
モバイル検索エクスペリエンス
モバイル検索 UI 要件はデスクトップとは異なります。
- モバイルでの全画面検索オーバーレイ (デスクトップでのインライン展開と比較)
- 音声検索オプションを備えた大きな入力フィールド
- 「最近の検索」が検索フォーカスにすぐに表示されます
- 製品サムネイル（テキストだけでなく）によるオートコンプリート
- 「X」ボタンでバックスペースを繰り返しタップせずに検索入力をクリアします
Klevu と Searchpie は、モバイルに最適化された検索インターフェイスを提供します。デフォルトの Shopify 検索は機能しますが、これらのモバイル固有の UX 拡張機能は含まれていません。
モバイル チェックアウトの最適化
モバイルでは高速チェックアウト ボタンが重要です
Apple Pay と Google Pay は、モバイルに特に影響を与えます。
- フォームに入力する必要はありません
- パスワードの代わりに生体認証（Face ID、指紋）
- デバイスの連絡先から配送先住所を自動入力します
- ワンタップで購入が完了します
iOS デバイスでは、Apple Pay のチェックアウトは従来のチェックアウトより 60% 高速です。カート ページと商品ページの両方で高速チェックアウト ボタンを有効にし、目立つように表示します。
キーボードの最適化
モバイルで入力フィールドが開いたら、正しいキーボードのタイプを設定します。
- 電子メールフィールド:
type="email"→ 電子メールキーボード (@ 記号が目立つ) - 電話フィールド:
type="tel"→ 数字キーボード - 郵便番号:
inputmode="numeric"→ テンキーキーボード - クレジット カード:
inputmode="numeric"→ 数字キーボード、自動修正を防止
Shopify のホスト型チェックアウトはこれを正しく処理します。カスタム チェックアウト拡張機能が次のパターンに従っていることを確認してください。
自動ズームの回避
iOS Safari は、フォント サイズが 16 ピクセル未満のフォーム フィールドを検出すると自動ズームします。これは方向感覚を失い、チェックアウト フローを中断します。すべてのチェックアウト フォーム フィールドのフォント サイズを最小 16 ピクセルに設定します。
input, select, textarea {
font-size: 16px; /* Prevents iOS auto-zoom */
}
Shopify のプログレッシブ Web アプリ機能
PWA 機能は、別のアプリを使用せずに、ネイティブ アプリのような機能を Shopify ストアに追加します。
ホーム画面に追加
Web アプリ マニフェスト (manifest.json) を構成して、ユーザーがストアをホーム画面に追加できるようにします。ストアアイコンがホーム画面に表示されます。これを開くと、ネイティブ アプリに似た、アドレス バーのないスタンドアロンのブラウザ ウィンドウでストアが起動します。
Shopify テーマにはマニフェスト ファイルを含めることができます。構成には以下が含まれます。
- アプリ名と短縮名
- テーマカラー (モバイルのステータスバーの色)
- 表示モード:
standalone - アイコンのサイズ: 192×192pxおよび512×512px
Service Worker によるオフライン サポート
Service Worker は静的アセット (CSS、JavaScript、フォント) をキャッシュし、その後の訪問時にキャッシュからそれらを提供します。これにより、接続が遅い場合でも再訪問者の読み込み時間が大幅に改善されます。
基本的な Service Worker の実装では、テーマのコア アセットがキャッシュされます。高度な実装では、オフラインで閲覧できるように製品カタログ データをキャッシュします。 Shopify のプラットフォームでは、ホストされているストアの Service Worker の機能が制限されていますが、テーマでは assets フォルダー内の Service Worker を介して基本的なキャッシュを実装できます。
プッシュ通知 (Web プッシュ)
Web プッシュ通知を使用すると、Shopify ストアは、サイトにいない場合でも、オプトインしたユーザーに通知を送信できます。使用例:
- 再入荷のお知らせ
- 注文の発送通知
- セールイベントのお知らせ
- 放棄された閲覧の回復
ツール: PushOwl (月額 19 ～ 149 ドル) または Firepush は、オプトイン ウィジェットとキャンペーン管理ダッシュボードを使用して Shopify に Web プッシュを実装します。
iOS 上の Safari: 一般的な互換性の問題
Chrome ファーストの開発では、iOS モバイル ユーザー全体に影響を与える Safari 固有のバグが見逃されます。特に iPhone の Safari でテストします。
| 問題 | 症状 | 修正 |
|---|---|---|
position: fixed のバグ | 粘着要素がジャンプしたり消えたり | 固定要素で transform: translateZ(0) を使用する |
| オーバーフロースクロール | 固定コンテナではスクロールが機能しません。 -webkit-overflow-scrolling: touch を追加 | |
| 日付入力型 | ネイティブの日付ピッカーを表示するか、表示しません | カスタム日付ピッカー ライブラリを使用する |
| 背景フィルター | CSS backdrop-filter は古い Safari ではサポートされていません | -webkit-backdrop-filter プレフィックスを追加 |
| フォームの自動入力 | Safari の自動入力がカスタム スタイルのフィールドと重なる | Z インデックスと背景色を調整する |
| 100vhの問題 | ビューポートの全高にはブラウザのクロムが含まれます | 100dvh または JavaScript で計算された高さを使用します。 |
よくある質問
Shopify ストアの最適化による現実的なモバイル コンバージョン率の向上とは何ですか?
ベースラインが不十分 (モバイル コンバージョンがデスクトップの 30 ～ 40%) からスタートした店舗では、通常、包括的な最適化後にモバイル コンバージョン率が 40 ～ 60% 向上します。 Stores already performing reasonably well see 15–25% improvement.最大の効果は、支払い方法の最適化 (Apple Pay、Shop Pay) とページ速度の改善によるものです。通常、これら 2 つの領域を合計すると、モバイル コンバージョン全体の改善の 60 ～ 70% を占めます。
ネイティブ iOS/Android アプリを構築するべきですか、それともモバイル ウェブ ストアを最適化すべきですか?
ほとんどの Shopify 販売者の場合: まずモバイル ウェブを最適化します。ネイティブ アプリの開発には 50,000 ～ 200,000 ドルと継続的なメンテナンスが必要で、顧客はアプリをダウンロードする必要があります (大きな摩擦障壁)。適切に最適化された PWA 対応モバイル Web ストアは、ネイティブ アプリのパフォーマンスの 85 ～ 90% を実現します。ネイティブ アプリを構築するのは、プッシュ通知とオフライン機能から真のメリットを得る、購入頻度が高く、実証済みの熱心な顧客ベース (サブスクリプション ビジネス、毎日のユーザーがいるロイヤルティ プログラム) がある場合にのみ作成してください。
すべてのデバイスを所有せずに、モバイルで Shopify ストアをテストするにはどうすればよいですか?
3 層のテスト アプローチ: (1) 開発中の迅速な反復のための Chrome DevTools デバイス エミュレーション。 (2) iOS Safari、Samsung Internet、および古い Android ブラウザにわたる実デバイス テスト用の BrowserStack (有料、月額 29 ドル以上)。 (3) 少なくとも iPhone (最新の iOS) とミッドレンジの Android デバイスでの物理デバイスのテスト。エミュレーションだけに依存しないでください。実際のデバイスでは、エミュレータが見逃すスクロール パフォーマンスの問題やタッチ ジェスチャの問題が明らかになります。
Shopify ストアではどの Core Web Vitals スコアを目標にすべきですか?
目標LCPは2.5秒未満、INPは200ms未満、CLSは0.1未満。これらは Google の「良好」のしきい値であり、SEO ランキングの向上とコンバージョン率の向上に関連しています。コンテキスト: Shopify ストアの LCP 中央値はモバイルで約 3.5 ～ 4.5 秒で、「改善が必要」の範囲に十分入っています。 「改善が必要」のしきい値（LCP 4 秒未満）を達成した場合でも、コンバージョンに大きな影響を与えます。
ページの速度は実際に Shopify SEO ランキングに影響しますか?
はい。 Google の Core Web Vitals は、2021 年以降確認されたページ エクスペリエンス ランキング シグナルです。Mobile Core Web Vitals スコアは、特にモバイル検索ランキングに影響します。コンテンツの品質やバックリンクに比べれば効果の大きさはさほど大きくありませんが、他の要素がサイト間で類似している競合カテゴリーでは、ページ速度が差別化要因となりえます。さらに重要なのは、ページの速度は有料トラフィックの ROI に直接影響します。Google 広告の品質スコアにはランディング ページのエクスペリエンスが含まれており、高速なページほど CPC が低くなります。
次のステップ
モバイル コマースの最適化は継続的なプロセスであり、モバイルの使用パターン、ブラウザーの機能、競合他社のベースラインはすべて四半期ごとに進化します。モバイルで常に優れたパフォーマンスを上げている販売者は、モバイルを 1 回限りのプロジェクトではなく、規律として扱います。
ECOSIRE の Shopify Speed Optimization サービス には、Core Web Vitals 監査、画像の最適化、JavaScript パフォーマンス分析、モバイル UX レビュー、および高速チェックアウト構成が含まれます。当社のモバイル最適化取り組みにより、通常 90 日以内にモバイル コンバージョン率が 40 ～ 60% 向上します。
Shopify ストアの モバイル パフォーマンス監査を取得 — 現在のスコアを競合他社と比較してベンチマークし、優先順位付きの最適化ロードマップを提供します。
執筆者
ECOSIRE Research and Development Team
ECOSIREでエンタープライズグレードのデジタル製品を開発。Odoo統合、eコマース自動化、AI搭載ビジネスソリューションに関するインサイトを共有しています。
関連記事
Case Study: eCommerce Migration to Shopify with Odoo Backend
How a fashion retailer migrated from WooCommerce to Shopify and connected it to Odoo ERP, cutting order fulfillment time by 71% and growing revenue 43%.
Integrating GoHighLevel CRM with eCommerce Stores
Step-by-step guide to integrating GoHighLevel CRM with Shopify and WooCommerce. Sync orders, automate post-purchase flows, and recover abandoned carts at scale.
Odoo + Shopify Sync: Products, Orders, and Inventory
Complete guide to syncing Odoo 19 with Shopify. Covers product sync, real-time order import, bidirectional inventory, financial reconciliation, and multi-store management.