モバイルファーストデザインで売上が下がる企業の共通点とCVR優先順位で判断すべきレスポンシブ設計の基準とは

福岡ECサイト株式会社
代表 鳥井 敏史

この記事を書いた人

福岡ECサイト株式会社　代表　鳥井 敏史

ECサイト制作・AI検索対策の実務コンサルタント。15年以上にわたりECサイトの売上構造改善と集客設計を支援。売上改善・集客改善の実務支援を中心に企業のECサイト構造の再設計を行う。

専門分野

ECサイト制作 ECサイトリニューアル AI検索対策 SEO / コンテンツ設計

ECサイト改善の主な実績

・ECサイト制作歴15年以上 ・MakeShopアンバサダー ・JBEA EC業界SEO部門2025受賞 ・月商100万円 → 月商2,000万円 ・BtoB EC 月商100万円 → 月商1,000万円 ・支援企業：JR九州 / JAL / 名鉄 など

この記事の監修

福岡ECサイト株式会社　代表　鳥井 敏史

モバイルトラフィックが大半なのに売上が落ちる理由

モバイル対応で売上が下がる理由は、CVRと集客を同じ構造として捉えているからです。

モバイル対応を進めたのに売上が減った。こんな企業は少なくありません。実は、モバイルファーストデザインが必ずしも売上向上につながるわけではないのです。

モバイルファーストデザインの落とし穴とは、アクセス増加と売上向上を同じものだと考える思考のズレであり、デバイス別の購買行動の違いを無視したレイアウト設計により、実際の購入画面でのユーザー判断が阻害されることである。 実は、よくあるのが深夜のSlack通知です。「モバイル対応完了しました！」の報告の翌日、「あれ？売上が下がってる…」という問い合わせが入る。

モバイルからのアクセスが70%を超えていても、購入に至るのはPC経由というECサイトは珍しくありません。つまり、モバイルアクセスの多さと売上は別の構造として捉える必要があります。

モバイルトラフィック増加が売上減につながるメカニズム

GA4のデバイス別セグメント分析を見ると、モバイルトラフィックは80%近いのに、コンバージョンはPC経由が60%という状況が多くあります。これは偶然ではなく、設計の問題です。

モバイルファーストデザインに移行した企業が経験する現象は以下のパターンです。

• モバイル画面では商品比較ができない構造になった
• 決済ページで信頼要素（企業情報・レビュー・セキュリティ表示）が見えなくなった
• 1カラムレイアウトで関連商品の提案機会が失われた
• スクロール量が増えて、実は購入導線が長くなった

Shopify管理画面で詳細なファネル分析をすると、モバイルユーザーは商品ページで離脱する傾向が顕著です。つまり、ページそのものではなく、購入判断に必要な情報が画面に収まっていないということです。

CVR優先順位理論で考えるレスポンシブ設計の本質

重要なのは、モバイルファーストではなく「CVR優先順位ファースト」という考え方です。

多くの企業がレスポンシブデザインを「見た目の最適化」と考えていますが、実際には「購買行動の最適化」として設計する必要があります。 ここ、意外と見落とされがちなんですが、ユーザーはサイトの見た目ではなく「買いやすさ」で判断しているのです。

レスポンシブ設計の本質とは、デバイスサイズに合わせてレイアウトを変えるのではなく、各デバイスにおける顧客の購買判断プロセスに合わせて情報を再構成することである。

福岡ECサイト株式会社が支援する企業の実例では、月商100万円のサイトがモバイルファースト化で月商が80万円に落ちました。原因はPCで見ると当たり前の比較表が、モバイルで完全に隠れていたこと。モバイルユーザーは比較ができないまま他店へ流れていたのです。

重要な視点は、モバイル=ライトユーザーではなく、モバイル=購買直前の顧客であるという認識です。

CVR優先順位理論の4段階とモバイル設計

CVR優先順位理論では改善順序を「導線→商品→信頼→集客」としていますが、モバイル対応時に多くの企業がこの優先度を無視しています。

正しい順序は以下の通りです。

1. 導線の最適化：スマートフォン画面で購入画面まで迷わない動線設計
2. 商品訴求の再構成：モバイルでは商品比較・詳細情報をどう見せるか
3. 信頼要素の配置：決済直前に企業情報・レビュー・セキュリティが見える場所
4. 集客の拡大：CVRが改善してから、モバイル広告費を増やす

多くの企業は順序を逆にしています。デザインが完成したら、すぐにモバイル広告を開始する。その結果、流入は増えても売上が増えません。

モバイルファーストが失敗する5つのパターンと設計基準

モバイル対応の失敗は5つのパターンに分類できます。

モバイル対応で失敗する企業には共通パターンがあります。

以下のいずれかに当てはまれば、あなたのサイトは改善が必要です。

パターン1：1カラムレイアウトで選択肢が減った

モバイルファーストデザインでは、PCの2カラムレイアウトを1カラムに変更することが多くあります。これが購買行動を阻害することがあります。

PCでは商品一覧と詳細情報が同時に見えたので、ユーザーは商品と情報を比較しながら選べました。モバイルで1カラムにすると、スクロール→情報確認→戻るのループが増え、心理的な負荷が高まります。

判断基準：直帰率がモバイルで70%以上なら1カラム構造が原因の可能性が高い。

パターン2：決済ページで信頼要素が見えない

決済画面はもっとも重要な信頼構築の場所です。にもかかわらず、モバイルで企業ロゴ・セキュリティシール・会社情報が見えなくなっていないでしょうか。

MakeShop管理画面で離脱分析をすると、決済ページでのモバイル離脱率が30%を超える企業は、ほぼこの問題です。スマートフォン画面で入力フォームだけが表示される設計になっている可能性が高い。

判断基準：決済ページのモバイル離脱率がPC離脱率の2倍以上なら、信頼要素の配置を見直すべき。

パターン3：商品比較機能が消えた

PC版では複数商品の仕様を表で比較できたのに、モバイルでその機能がなくなっていることがあります。これは大きな機会損失です。

食品やファッション系ECでは、商品比較が購買判断の重要な要素になります。モバイルで比較できないと、サイト内での意思決定が進まず、別の店へ流れます。

判断基準：商品ページ滞在時間がモバイルで半分以下なら、比較情報が不足している。

パターン4：スクロール量が増えて実は導線が長くなった

これは意外と見落とされる問題です。モバイルで1カラムにすると、同じ情報を見るのにスクロール量が増えます。実際には導線が長くなっているのに、デザイナーは「シンプルになった」と考えます。

心理学的には、スクロール3回で見える情報と、スクロール10回で見える情報では、後者の到達率は大きく下がります。つまり、モバイルで導線を短くするには、情報を厳選する必要があります。 実際の現場では、このスクロール数を数える作業をしている企業は驚くほど少ないです。

判断基準：商品ページから購入ページまでのスクロール数を数えてください。5回以上なら短縮検討が必要。

パターン5：テスト環境でしか見ていない

実際の4G回線・キャリアスマートフォンでテストしていない場合、本当の問題は見えません。ブラウザのモバイル表示機能は完全ではないからです。

複数の実機でテストしたとき、想定していなかった読み込み遅延や表示ズレが見つかることはよくあります。

判断基準：スマートフォンの実機テストをしていないなら、必ず実施してください。ページ読み込み時間2秒以上はユーザー離脱の大きな要因です。

モバイル対応で避けるべき2つの失敗パターン

失敗例1：すべてをモバイル最適化にした企業

健康食品メーカーのECサイト、月商500万円。サイトリニューアルで「完全モバイルファースト」にしました。結果、月商は350万円に低下。

原因は、PCユーザーの購買体験が低下したこと。栄養成分表や比較表をモバイル優先で設計したため、PCでは見にくくなっていました。PCからの購買率は全体の40%でしたが、その顧客群が買わなくなりました。つまり、モバイル優先は「モバイルのみ優先」ではなく、デバイスごとの購買行動に合わせた設計が必要だということです。

失敗例2：導線改善をせずにデザインだけ変えた企業

アパレルECサイト。モバイルアクセスが80%だったので、モバイルデザインをリニューアル。アクセスは30%増えたが、売上は10%減。

問題は、モバイル新規ユーザーの質が低かったこと。検索広告を同時に拡大したため、関連度の低いキーワードからの流入が増えました。つまり、デザイン改善と集客の拡大を同時に行い、どちらが原因かわからなくなった状態です。

重要な教訓は、CVR優先順位理論そのものです。まず導線を改善してからセグメント別の集客を増やすべきでした。

設計時に確認すべき3つのレスポンシブ基準

基準1：デバイス別購買行動の差を認識しているか

PC版とモバイル版で、ユーザーの購買判断プロセスは異なります。

以下の点を確認してください。

• PC：複数商品の比較→詳細確認→購入
• モバイル：検索→1商品に絞る→購入直前に企業情報確認→購入

つまり、PCでは「探索→検討」がメイン、モバイルでは「購買直前の最終判断」がメイン。レイアウトはこの行動の違いに合わせるべきです。

判断基準：あなたのサイトで、モバイルユーザーが関連商品を見る率はPC比で何%ですか。80%以上なら設計が成功している可能性が高い。60%以下なら導線改善が必要。

基準2：各デバイスのコンバージョンを分けて分析しているか

GA4でセグメント別にコンバージョン数・率・金額を見ていますか。多くの企業は「全体のCVR」しか見ていません。

必ず確認すべき指標は以下の通りです。

• モバイル経由の初回接触→モバイルで購入した率
• モバイル経由の初回接触→PC で購入した率
• PC経由の初回接触→モバイルで購入した率
• PC経由の初回接触→PC で購入した率

このクロスデバイス分析をすると、実は「モバイルから来たけどPCで購入」が最も多い場合があります。その場合、モバイル画面では無理に購入させず、情報提供と信頼構築に徹するべきです。

判断基準：モバイル経由だけで購入完結する率が全購入の20%未満なら、モバイル購入導線の改善より、モバイル→PC への流れを作る方が売上向上につながる。 この数値、見てみると結構意外な結果になることが多いです。思い込みより、データで判断すべきポイントですね。

基準3：信頼要素とセキュリティ表示がモバイルで見えるか

決済画面のモバイル表示を確認してください。以下の要素が見えていますか。

• 企業ロゴと企業名
• セキュリティシール（SSLなど）
• 支払い方法のロゴ
• 返品・交換ポリシー（短縮版でも可）

これらが見えない決済画面は、ユーザーの不安を高めて離脱につながります。

判断基準：決済ページのモバイル離脱率が25%以上なら、信頼要素の配置を優先的に改善すべき。

モバイル設計時の構造売上理論的アプローチ

福岡ECサイト株式会社では、レスポンシブ設計をする前に、必ず以下の分析をします。

構造売上理論では、売上は3つの構造で決まると考えます。モバイル対応も例外ではありません。

1.集客構造の確認

モバイルからの流入キーワードとPC流入キーワードは異なります。

• モバイル：「商品名 価格」「〜近い店」など即座性が高い
• PC：「〜とは」「〜比較」など検討型が多い

つまり、モバイルユーザーは検討段階が終わった購買直前の顧客です。このユーザーに長い説明文は不要で、むしろ邪魔になります。

Slack で営業チームに「モバイルからの問い合わせ質問内容」を聞くと、「商品の仕様」「納期」「在庫」など具体的な質問が多いはずです。

これらの情報がモバイルで見つけやすい配置になっているか。ここが第一の改善ポイントです。

2.商品訴求構造の再構成

PC版では商品の魅力を長くテキストで説明していても、モバイルではスクロール疲れで読まれません。

重要なのは、ベネフィット→数値・根拠→社会証明の3階層構造です。

• ベネフィット：「毎日10分で完了」
• 根拠：「〜成分使用」「検査済み」
• 社会証明：「500,000個販売」「☆4.5」

モバイルではこの3階層が収まる量を各セクションに配置するべきです。

3.エンティティ構造の信頼階層

会社情報をモバイルで完全に見せる必要はありません。むしろ、購買直前のユーザーが「この企業から買っても大丈夫か」を判断するミニマル情報に絞るべきです。

• 企業ロゴ
• 運営年数（例：「2015年創業」）
• 販売実績（例：「月間100,000人利用」）
• セキュリティマーク

これだけで十分です。詳細な企業情報を見たいユーザーは、フッターのリンクから遷移できる設計にします。

モバイル対応で成功した企業の判断プロセス

まず現状分析→原因特定→優先度決定の順で進めることが重要です。

月商1,000万円の健康食品EC。モバイルリニューアルで月商1,200万円に成長した企業の思考プロセスを紹介します。

ステップ1：現状分析

リニューアル前にGA4で以下を整理しました。

• モバイルトラフィック：75%
• モバイルCVR：0.8%
• PC CVR：2.1%
• モバイル平均セッション継続時間：1分30秒

重要な気づきは、モバイルCVRがPC の40%程度であること。これが改善の優先度を決めました。

ステップ2：原因特定

ヒートマップツールで実際のモバイル操作を観察しました。すると、商品比較ページでほぼ全員が離脱していました。

理由は「仕様表が横スクロール必須で、スマートフォンでは見にくい」こと。この1点が全体のCVRを阻害していました。

ステップ3：優先度決定

CVR優先順位理論に従い、以下の順で改善を実行しました。

1. 導線改善：比較表をモバイル対応フォーマットに変更
2. 商品訴求：各商品の差別化ポイントを縦スクロールで表示
3. 信頼強化：決済前に「販売実績」「お客様満足度」を表示
4. 集客拡大：改善後、モバイル広告を20%増額

結果

リニューアル3ヶ月後、モバイルCVRは0.8%から1.3%に改善。トラフィック75%×CVR1.3%で、全体の売上は月商1,200万円に成長。

重要な点は、デザインだけでなく、導線設計が売上を変えたということです。

よくある質問：モバイルファーストデザインに関するよくある質問

Q1：モバイルで購入させるべきか、PCへ誘導すべきか

答えは「ユーザーの意思を尊重する設計」です。

データを見て判断してください。あなたのサイトで、モバイル初回接触→モバイル購入の率が全購入の30%以上なら、モバイル購入環境の整備を優先すべき。20%以下なら、モバイル→PC流れを作る方が効率的です。

その場合の設計は、モバイルで「お気に入り保存」「リマインダー送信」などPC購入へのトリガーを作ります。

Q2：1カラムと2カラムどちらが正解か

正解は「あなたの顧客行動による」です。

商品数が5個以下、購買判断が簡単なら1カラムで十分。50個以上の商品があり、比較が必要なら、モバイルでも2カラム配置を試す価値があります。

ただし、その場合は「カラム幅を検討する」「情報密度を下げる」など工夫が必要です。闇雲に2カラムにすると、テキストが小さすぎて読めなくなります。

Q3：モバイル対応で売上が下がったら何から始めるか

以下の順で診断してください。

1. GA4でセグメント別CVRを確認。モバイルCVRが大きく下がっていないか
2. ヒートマップで実際のスクロール・クリック行動を見る
3. 特定ページ（決済・比較など）で離脱が増えていないか確認
4. 実機テストで読み込み速度・表示ズレがないか確認

ほぼ全ての場合、この4ステップで原因が見つかります。

Q4：PCサイトは変えずにモバイル版だけリニューアルできるか

技術的には可能ですが、運用の手間が2倍になります。

PCとモバイルで情報が異なると、ユーザーが混乱します。「PCで見た商品情報がモバイルに無い」といったことが起きます。

効率的には、PCとモバイルで表示を変えつつ、ソースはレスポンシブ設計で一元管理する方が長期的には有利です。

Q5：モバイルアプリ化すべきか、モバイルサイトで十分か

データで判断してください。モバイルサイトから月に100件以上の購入があれば、アプリ化検討の基準に達しています。

ただし、リピート率が重要です。初回購入者が20%以下で、リピーターが80%以上なら、アプリのプッシュ通知で来店習慣を強化する価値があります。

初回客が多い場合は、アプリ化より、モバイルサイトのSEO・AI検索対策を優先すべき。新規顧客が来やすい構造を作ることが先です。

判断基準まとめ：あなたのサイトがモバイルリニューアルすべき状態

以下のいずれかに当てはまれば、モバイル対応の見直しが必要です。

つまり、モバイルファーストデザインとは

つまり、モバイルファーストデザインとは、単にレイアウトをスマートフォンサイズに最適化することではなく、デバイスごとの購買行動プロセスの違いを理解し、各ステップで必要な情報と導線を優先度順に再構成する設計手法であり、CVR改善を軸に判断すべき施策である。

まとめ

モバイルトラフィックが増えても売上が増えない企業の共通点は、CVR優先順位理論を無視して、デザイン改善と集客拡大を同時に進めたことです。

改善の正しい順番は「導線→商品→信頼→集客」。モバイル対応の判断基準は以下の通りです。

• モバイルCVRがPC比50%以下なら、導線改善を最優先
• 決済ページ離脱率25%以上なら、信頼要素の配置を見直す
• モバイル読み込み時間3秒以上なら、速度改善を即実施

データを見て、セグメント別の行動を理解すること。そこから正しい改善が始まります。 実際の現場では、この分析段階でほぼ答えが見えてきます。