# モバイルECの最適化:Core Web Vitals、チェックアウト、コンバージョンを動かす具体的な改善

> ECトラフィックの70〜85%はモバイルです。モバイルとデスクトップのコンバージョン格差を埋める10の具体的な領域(Web Vitals、タッチターゲット、フォームの自動入力、Apple Pay、親指ゾーン)を、実際のツールと基準値とともに解説します。

Ryan Badger - 2025年5月1日 - 読了目安 8 分

## モバイルがすべてである理由

ECトラフィックの70〜80%はモバイルです。消費者向けのカテゴリの多くでは、85%に迫っています。デスクトップのコンバージョンは、通常モバイルの2〜3倍ですが、これはデスクトップが優れているというより、ほとんどのストアでモバイルが壊れていることを示しています。

モバイル体験をしっかり最適化すれば、その差は埋まりますし、逆転することもよくあります。いまや、モバイルのコンバージョンがデスクトップと同等かそれ以上のD2Cブランドもあります。違いは具体的で、測定可能で、ほとんどが革新ではなく基本の衛生管理の話です。

この記事では、モバイルのコンバージョンを実際に動かすものを、基準値、ツール、直すべき具体的な点とともに紹介します。「モバイルファーストで設計しよう」という話ではありません。積み重なって効いてくる、具体的なチェック項目です。

## 1. Core Web Vitalsと、Googleがそれを見ている理由

Googleは、Core Web Vitalsを検索ランキングのシグナルとして、また体験の質の代理指標として使っています。SEOの観点を別にしても、これらの指標はコンバージョンの強力な予測因子です。

### LCP(Largest Contentful Paint)

ファーストビューで最も大きな要素(たいていはヒーロー画像かH1)が描画されるまでの時間です。目標は、モバイル4Gで2.5秒未満です。

LCPが悪い最も一般的な原因:

- ヒーロー画像が圧縮されていない、または大きすぎる
- Webフォントの読み込みが描画をブロックしている
- サードパーティのスクリプト(チャットウィジェット、アナリティクス、A/Bテストツール)が`<head>` に挿入されている

### INP(Interaction to Next Paint)

ユーザーの操作(タップ)から、次の画面更新までの時間です。目標は200ミリ秒未満です。

INPが悪い最も一般的な原因:

- JavaScriptの重いページ(コード分割をしていないReact/Vueのストア)
- 操作のたびに同期的に動くアナリティクスやチャットのスクリプト
- 古いモバイルブラウザでのタップの遅延

### CLS(Cumulative Layout Shift)

ページの読み込み中に、要素があちこち動いてしまう現象です。目標は0.1未満です。

最も一般的な原因:

- 幅と高さの属性がない画像
- コンテンツのあとに読み込まれる広告やサードパーティの埋め込み
- フォントの読み込みによってテキストのサイズが変わる

### 確認方法

無料:[PageSpeed Insights](https://pagespeed.web.dev/)はLighthouseを実行し、3つすべてを報告します。テストするのはトップページではなく、最も売上の大きい商品ページです。赤は直し、黄色は許容して、先に進みましょう。

有料 / 詳細:ウォーターフォール分析にはWebPageTest.org、ローカルでのプロファイリングにはChrome DevToolsのPerformanceタブが使えます。

## 2. モバイルの速度を3秒以内に(スロットリングしたデスクトップではなく、実際のモバイルで)

デスクトップブラウザの「モバイルエミュレーター」は、高速な回線と高速なCPUを使っています。実際のスマートフォンは、それより遅い回線と遅いCPUです。その差は小さくありません。

4G回線の実機でテストしましょう。Chromeのモバイルエミュレーターで2秒なら、4G回線のミドルレンジAndroidでは、おそらく4〜5秒かかります。

### 速度改善の効果が大きい順

1. **画像の最適化:** 画質80%に圧縮し、実際に必要な寸法にリサイズし、WebPまたはAVIFで配信します。ShoprocketはCloudflare経由でこれを自動で行います
2. **ファーストビューより下のコンテンツを遅延読み込みにする。** 画像、iframe、重いスクリプトは、そこまでスクロールされるまで読み込まないようにします
3. **重要でないJavaScriptを遅延させる。** アナリティクス、チャットウィジェット、A/Bテストツールが描画をブロックしてはいけません
4. **静的アセットを積極的にキャッシュする。** 画像、フォント、CSS、JSは、フィンガープリント付きURLにして1年間キャッシュします
5. **CDNを使う**(Cloudflare、Fastly、またはプラットフォームに組み込みのもの)。地理的に近いエッジからアセットを配信できます
6. **サードパーティのスクリプトを減らす。** ピクセルやタグは、1つにつき約50〜200ミリ秒かかります。本当に必要なものを見直しましょう

## 3. タッチターゲットのサイズ

AppleのHuman Interface Guidelinesは、タッチターゲットを最小44×44ピクセルと定めています。GoogleのMaterialは48×48です。「モバイル版」と称するテーマの多くは、どちらも満たしていません。

**対策:**

- ボタンは高さ44px以上にし、内側に8〜12pxのパディングを取る
- ナビゲーションのリンクも高さ44px以上にする
- フォームの入力欄も高さ44px以上にする(アクセシビリティにも役立ちます)
- 隣り合うタップ対象の間隔は、8px以上空ける

テスト:スマートフォンでストアを開き、親指でカテゴリのナビゲーションをタップしてみてください。押し間違えていませんか。それがタッチターゲットの問題です。

## 4. モバイルのチェックアウトに特有の点

モバイルでのカートとチェックアウトは、コンバージョンの大半が漏れる場所です。具体的なやることリストです。

### 1カラムのフォーム

2カラムのフォームはデスクトップでは使えますが、モバイルでは失敗します。すべての入力欄を縦に並べてください。例外はありません。

### 適切な入力タイプ

- メール欄:`type="email"`(@記号付きのメール用キーボードが出ます)
- 電話番号:`type="tel"`(数字キーボード)
- 郵便番号:数字の郵便番号の国では`type="text" inputmode="numeric"`
- クレジットカード番号:`type="text" inputmode="numeric" autocomplete="cc-number"`(自動入力が機能します)

ほとんどのプラットフォームは、標準でこれを正しく処理しています。それでも、スマートフォンでフォームを確認する価値はあります。違うキーボードが出るなら直しましょう。

### 自動入力への対応

フォームの`autocomplete`属性が正しければ、ブラウザは氏名、住所、メール、電話番号、カード情報を自動入力できます。自動入力の候補をタップしたお客様は、3秒でチェックアウトを完了します。自動入力がなければ、12個以上の項目を手で入力することになります。

標準的なautocompleteの値:`name`、`email`、`tel`、`street-address`、`postal-code`、`country`、`cc-number`、`cc-exp`、`cc-csc`、`cc-name`。

### 商品ページに追従する「カートに入れる」ボタン

モバイルの商品ページを3画面分スクロールすると、「カートに入れる」ボタンは画面の外に出ます。対策として、元のボタンがスクロールで見えなくなったら、価格と「カートに入れる」を載せた追従バーを画面下部に表示しましょう。

### Apple Pay + Google Pay + Link

モバイルのチェックアウトを最も改善するのが、これらです。入力不要のワンタップ決済で、端末標準の生体認証も使えます。

- **Apple Pay:** Stripeでドメインを認証すると自動で有効になります(Shoprocketが処理します)
- **Google Pay:** 同様です
- **Stripe Link:** Linkのサイト横断のIDから、カード情報と住所を入力します

これらのないモバイルのチェックアウトは、お客様を取りこぼしています。3つとも有効にしましょう。

## 5. 入力項目の削減

モバイルのチェックアウトにある入力項目は、すべて摩擦の要因です。項目を見直しましょう。

**たいてい必要なもの:**

- メールアドレス
- 配送先住所(氏名、番地、市区町村、郵便番号、国)
- 支払い情報(またはApple Pay / Google Pay)

**集めすぎになりがちなもの:**

- 電話番号(配送業者に必要な場合だけ。不要なケースが多いです)
- 生年月日(購入時にはほぼ不要です)
- 会社名(B2Bの場合のみ)
- ニュースレターの登録(法的に許される地域ではチェック済みに。それ以外は別のチェックボックスに)
- 「当店をどこで知りましたか」(購入後のアンケートに移す)

項目が少ない = チェックアウトが速い = 完了率が高い。項目を1つ減らすごとに、モバイルのチェックアウト完了率がおよそ5〜10%改善し、それが積み重なります。

## 6. モバイルでの読みやすい文字と行の長さ

- **本文:** 最小16px(iOSの標準で、GoogleのMaterialガイドラインでもあります)
- **行の長さ:** 45〜75文字
- **行の高さ:** フォントサイズの1.4〜1.6倍
- **コントラスト:** 最低でもWCAG AA(本文は4.5:1、大きな文字は3:1)

お客様が商品説明をピンチズームしているなら、文字が小さすぎます。読むためにスマートフォンを横向きにしなければならないなら、行が長すぎるか、文字が詰まりすぎています。

## 7. 片手での操作への配慮

モバイルユーザーの多くは、スマートフォンを片手で使い、右下(左利きなら左下)から親指を伸ばします。重要な操作は、その親指ゾーンに置くべきです。

- 主要なCTA(カートに入れる、チェックアウト、今すぐ購入)は下のほうに
- ナビゲーションのハンバーガーメニューは、親指が届く左上か右上に
- 「戻る」ボタンは予測どおりに(多くの場合、独自の戻るボタンよりブラウザの戻るのほうが優れています)

届きにくい場所をダブルタップさせてはいけません。親指に無理をさせる瞬間ごとに、お客様を失います。

## 8. モバイル専用の商品ページ

デスクトップの商品ページは、たいていすべてを一度に見せます(左にギャラリー、右に詳細、下に説明)。このレイアウトはモバイルにそのまま移せないので、コンテンツの順序を組み立て直す必要があります。

効果的なモバイル商品ページの構成:

1. ヒーロー画像(スワイプできるギャラリー)
2. タイトルと価格
3. バリエーションの選択(サイズ、色)
4. カートに入れる(主要なCTA)
5. 信頼の裏付け(評価、送料無料、返品)
6. 説明文(折りたたみ式、3行で折りたたむ)
7. 仕様 / 詳細(折りたたみ式)
8. レビューの概要と「すべて見る」の展開
9. 関連商品
10. FAQ(折りたたみ式)

ファーストビューより下のコンテンツは遅延読み込みにしましょう。モバイルのお客様は、最初の3セクションで購入を決めることが多く、すべてを読み込むとその判断が遅くなります。

## 9. 実機でのテスト

DevToolsではありません。ブラウザのモバイルエミュレーターでもありません。モバイル回線に接続した、実際のスマートフォンです。

最低限のテスト対象:

- iPhone SE(小さい画面、古い端末)
- iPhone 15 Pro(最新のiOS、Safari)
- Samsung Galaxyのミドルレンジ(Android、Chrome)
- 4G回線の古いAndroid(パフォーマンスの問題が表に出ます)

おまけ:機種の違う友人3人に、あなたのストアで何か買ってもらいましょう。その様子を観察してください。彼らがつまずいたところが、あなたの修正リストです。

## 10. モバイルのコンバージョンを壊すパターンを避ける

モバイルのコンバージョンを台無しにするよくある間違いです。

### 全画面のポップアップ

モバイルのランディングで画面を覆う「登録で10%オフ!」のポップアップです。Googleはモバイル検索のランキングでこれにペナルティを与えます。お客様もそれに当たって離脱します。代わりにインラインの登録フォームを使いましょう。

### 音声付きの動画の自動再生

帯域を無駄にし、ユーザーをいらだたせ、iOSでは多くの場合どのみちブロックされます。ヒーロー動画のミュートでの自動再生は許容範囲ですが、音声付きの自動再生はユーザーに敵対的です。

### タッチ操作でのホバー状態

「ホバーして詳細を表示」は、タッチ操作では機能しません。モバイルでもホバーで表示するパターンが残っているテーマは、事実上壊れています。

### モーダルの小さすぎる「閉じる」ボタン

角にある16ピクセルのXは、親指では押せません。閉じるボタンは44×44にするか、モーダルの下部に全幅の「閉じる」ボタンを置きましょう。

### 商品グリッドの横スクロール

モバイルで商品を横スクロールのカルーセルにすると、商品の80%がファーストビューの下に隠れます。縦方向のグリッド(モバイルでは2カラム)のほうが、コンバージョンします。

## モバイルでShoprocketが対応していること

基本的な要件の大半は、最初から備わっています。

- **自動画像最適化:** すべての商品画像でリサイズ、圧縮、WebP変換、遅延読み込み
- **カートドロワー(全画面のカートページではなく)** がモバイルでの標準
- **追従する「カートに入れる」ボタン** に、テーマ付きのストアフロントで対応
- 正しい入力タイプ、autocomplete、縦積みを備えた**モバイル対応のチェックアウト**
- Stripe経由のワンタップ決済、**Apple Pay + Google Pay + Stripe Link**
- **モバイル対応のライブチャットウィジェット**
- Cloudflareによる、すべてのアセットの**CDN配信**
- ホスト型ストアフロントは**Core Web Vitalsが最初から最適化** されています

```
<!-- 例です。実際のスニペットは、ダッシュボードの「販売チャネル → 埋め込み」で取得してください -->
<script src="https://cdn.shoprocket.io/loader.js" data-pk="pk_yourkey"></script>
<div data-shoprocket="catalog" data-embed-id="emb_xxx"></div>
```

ウィジェットを埋め込んで使う場合:周囲のページの速度とデザインは、あなたの管理下にあります。Shoprocketのウィジェットは遅延読み込みされ、ページの描画をブロックしませんが、ページ全体の速度はあなたが管理するものです。

> **ヒント:**四半期に一度、売上上位3つの商品ページを、モバイルでPageSpeed Insightsにかけましょう。Core Web Vitalsの3つのスコアを書き留めておき、次の四半期に比較します。下降傾向は、静かにコンバージョンを損なう要因です。被害が出てからではなく、四半期ごとに見つけましょう。

## 要点

- **モバイルはトラフィックの70〜85%です。** 多くのストアは後回しにしていますが、そうしてはいけません
- **追跡すべきCore Web Vitalsは3つの数字:** LCP、INP、CLS。目標は2.5秒 / 200ミリ秒 / 0.1未満
- **4G回線の実機でテストする。** ブラウザのエミュレーターではありません
- **チェックアウトの要点:** 1カラムのフォーム、正しい入力タイプ、autocomplete、Apple Pay / Google Pay、追従するCTA
- **入力項目を減らす** = 完了率が上がります。本当に必要なものを見直しましょう
- **タッチターゲットは最小44×44。** ターゲット間の間隔は最小8px
- **親指ゾーンが重要です。** 主要なCTAは下のほうに、ハンバーガーメニューは左上か右上に
- **モバイルを壊すものを避ける:** 全画面のポップアップ、音声の自動再生、ホバー状態、小さすぎる閉じるボタン

[無料トライアルを始めて](https://app-v3.shoprocket.io/signup)、自動画像最適化、Apple Pay、モバイルネイティブのチェックアウトを初日から使いましょう。14日間、カード不要です。

---

- HTML version: https://v3.shoprocket.io/ja/blog/mobile-ecommerce-optimisation-core-web-vitals-checkout-and-the-specific-fixes-that-move-conversion
- Language: 日本語 (ja)
- Also in: [العربية](https://v3.shoprocket.io/ar/blog/mobile-ecommerce-optimisation-core-web-vitals-checkout-and-the-specific-fixes-that-move-conversion.md), [Deutsch](https://v3.shoprocket.io/de/blog/mobile-ecommerce-optimierung-core-web-vitals-checkout.md), [Ελληνικά](https://v3.shoprocket.io/el/blog/mobile-ecommerce-optimisation-core-web-vitals-checkout-and-the-specific-fixes-that-move-conversion.md), [English](https://v3.shoprocket.io/blog/mobile-ecommerce-optimisation-core-web-vitals-checkout-and-the-specific-fixes-that-move-conversion.md), [Español](https://v3.shoprocket.io/es/blog/optimizacion-ecommerce-movil-core-web-vitals-checkout-y-arreglos-que-mueven-la-conversion.md), [Français](https://v3.shoprocket.io/fr/blog/optimisation-ecommerce-mobile-core-web-vitals-paiement.md), [עברית](https://v3.shoprocket.io/he/blog/mobile-ecommerce-optimisation-core-web-vitals-checkout-and-the-specific-fixes-that-move-conversion.md), [हिन्दी](https://v3.shoprocket.io/hi/blog/mobile-ecommerce-optimisation-core-web-vitals-checkout-and-the-specific-fixes-that-move-conversion.md), [Bahasa Indonesia](https://v3.shoprocket.io/id/blog/optimasi-ecommerce-mobile-core-web-vitals-checkout-dan-perbaikan-konversi.md), [Italiano](https://v3.shoprocket.io/it/blog/ottimizzazione-ecommerce-mobile-core-web-vitals-checkout.md), [Lietuvių](https://v3.shoprocket.io/lt/tinklarastis/mobilioji-el-prekyba-core-web-vitals-atsiskaitymas-ir-konkretus-pataisymai-didinantys-konversija.md), [Norsk](https://v3.shoprocket.io/nb/blogg/mobiloptimalisering-nettbutikk-core-web-vitals-kasse.md), [Nederlands](https://v3.shoprocket.io/nl/blog/mobiele-webshop-optimalisatie-core-web-vitals-checkout-conversie.md), [Polski](https://v3.shoprocket.io/pl/blog/optymalizacja-ecommerce-na-mobile-core-web-vitals-kasa-i-poprawki-ktore-ruszaja-konwersje.md), [Português](https://v3.shoprocket.io/pt/blog/otimizacao-ecommerce-mobile-core-web-vitals-checkout-conversao.md), [Română](https://v3.shoprocket.io/ro/blog/optimizare-ecommerce-mobil-core-web-vitals-plata.md), [Русский](https://v3.shoprocket.io/ru/blog/mobile-ecommerce-optimisation-core-web-vitals-checkout-and-the-specific-fixes-that-move-conversion.md), [ไทย](https://v3.shoprocket.io/th/blog/mobile-ecommerce-optimisation-core-web-vitals-checkout-and-the-specific-fixes-that-move-conversion.md), [Türkçe](https://v3.shoprocket.io/tr/blog/mobil-eticaret-optimizasyonu-core-web-vitals-odeme-ve-donusumu-artiran-duzeltmeler.md), [中文](https://v3.shoprocket.io/zh/blog/mobile-ecommerce-optimisation-core-web-vitals-checkout-and-the-specific-fixes-that-move-conversion.md)