モバイルファーストで売上が下がる理由とPC売上も最大化する3つレスポンシブ設計とは

福岡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サイト株式会社　代表　鳥井 敏史

スマホ最適化しているのに売上が下がる理由

ECサイトをモバイルファーストで制作しているのに、売上が減少する企業が増えています。

スマホのアクセス数は増えているはずなのに、客単価や購買率が落ちる現象です。一見、矛盾しています。

多くの制作会社はモバイルユーザーに合わせた画面設計に注力しますが、ここ、意外と見落とされがちな落とし穴があります。

スマホ最適化による売上低下とは、モバイル専用の狭い導線設計によって、ユーザーが購買判断に必要な情報を見失い、PC訪問者の購買率までも低下させてしまう構造的問題である。

問題の本質は「デバイス別最適化」と「売上構造の統一」を混同していることです。スマホに合わせるあまり、商品比較機能を削減したり、複数商品の同時表示をやめたり、信頼情報を隠してしまいます。これがPC利用者の購買心理にも悪影響を及ぼすのです。

モバイルファースト設計がPC売上を落とす仕組み

スマホ最適化しても売上が伸びない理由は明確です。

スマホ最適化の過程で、無意識に「PC時代の情報量」を削減してしまいます。この削減が、実はデータとして明確に現れるんです。

• 商品ページの比較表を削除→比較検討ユーザーが離脱
• カテゴリページの表示件数を10件に減らす→全体像が見えず選択肢削減
• 企業情報やレビューをスクロール下部に移動→信頼形成の機会損失
• 複数カラム表示をやめ1カラムに統一→購買パターンの分断
• 細かい商品説明を省略→PCユーザーの購買判断材料が消失

特に大きなのは「ユーザーの購買パターンの分断」です。PCユーザーは比較検討型で、複数の選択肢を同時に見たい心理があります。モバイル最適化でこれを奪うと、PC訪問者の購買率も下がるのです。

実際のデータでは、モバイルファースト後にPC訪問者の購買率が30%以上低下する事例も報告されています。集客は増えているのに売上が下がるのは、この構造的な問題です。

スマホとPCの売上が両立しないレスポンシブ設計の3つ原因

売上の両立には、根本的な設計思想の転換が必要です。

スマホとPC両方で売上を上げるには、単なる画面最適化では不十分です。根本的な設計思想の変更が必要です。

1. デバイス別設計ではなく「情報階層統一」が必要

モバイルファースト設計の多くは、スマホの小さい画面に合わせて情報を削減します。しかし正しいアプローチは「情報は削減しない、表示方法を変える」ことです。

福岡ECサイト株式会社が支援する事例では、商品比較表をスマホでは「スクロール可能なテーブル」に変更し、PC では「複数カラム表示」のままにすることで、両デバイスで購買率を維持しました。情報量は変わらず、表現方法だけを変えたのです。

判断基準として、スマホでも1画面内に「商品名・価格・主要スペック・購入ボタン」の最低限の要素が見えることが重要です。スクロールが必要でも、情報が存在することが大切です。

2. 1カラムレイアウトの過信による選択肢削減

スマホ対応でよく採用される1カラムレイアウトは、シンプルに見えますが購買パターンを制限します。カテゴリページで1行1商品表示にすると、ユーザーは「限定された選択肢の中から選ぶ」という心理になります。

対策は「スマホでも2カラム表示を保つ」設計です。サムネイル画像を小さくしたり、商品名をコンパクトにすることで、スマホでも複数選択肢を同時に見せることができます。これはCVR改善の優先順位理論における「導線設計」の重要な要素です。

実際のECサイト測定では、カテゴリページのカラム数が減ると、ユーザーの滞在時間が40%低下する傾向があります。つまり、選択肢が見えなくなると、比較検討そのものを諦めるのです。

3. 信頼情報の配置ずれが購買心理を崩す

PC では商品ページの上部に企業ロゴや認証バッジを表示し、下部にレビューを配置するという情報設計が一般的です。モバイル対応では、これらの信頼情報をさらに下部に移動させてしまいます。

結果として、スマホユーザーは商品説明だけを見て購入判断をしなければならず、購買率が低下します。一方、同じユーザーがPC から同じサイトを訪問すると、上部に信頼情報があるため購買率が上がる、という矛盾が生じるのです。

対策は「信頼情報の配置を固定する」ことです。スマホでもスクロール上部に企業情報やセキュリティバッジを見せることで、購買心理の統一ができます。

スマホとPC売上を両立する3つレスポンシブ設計

解決策は「売上構造の統一」を最優先することです。

モバイルファーストの罠から抜け出すには、「デバイス別最適化」ではなく「売上構造の統一」を優先する必要があります。以下の3つの設計原則で実現できます。

設計1：2カラム・1カラムの選択肢分離理論

スマホとPCで異なるカラム数を使い分けるのではなく、「同じ情報構造を異なる幅で表現する」設計です。

具体例としては以下の通りです。

• PC（1200px）：4カラム表示の商品グリッド
• タブレット（768px）：2カラム表示に自動調整
• スマホ（375px）：2カラム表示を保ち、サムネイルサイズを縮小

重要なのは「最小カラム数を2に固定する」ことです。1カラムに落とさないことで、ユーザーが複数の選択肢を同時に比較できる心理状態が保たれます。

判断基準として、スマホでカテゴリページを見た時に「下にスクロールすれば最低3〜5商品が見える」状態が目安です。スクロール1回で見える商品が2個以下の場合は、1カラムに落ちすぎています。

設計2：導線分離による購買ステップの統一

導線分離理論とは、ユーザーの行動パターンごとに異なるナビゲーション構造を設計することです。スマホでも、「比較検討型」と「単一商品購入型」の2つの導線を用意します。

実装方法は以下のようになります。

• PC：カテゴリ検索＋複数カラム表示で比較検討が自然
• スマホ：同じカテゴリ検索機能を上部に固定メニュー化し、グリッド表示も2カラム維持
• 両デバイス：商品詳細ページの「関連商品」セクションで横スクロール表示

この設計により、スマホユーザーも「まず複数を見比べてから選ぶ」という購買ステップが実現できます。

福岡ECサイト株式会社が支援したあるファッションECでは、この導線分離により、スマホからの購買率が従来比150%に改善されました。同時にPC訪問者の購買率も5%向上しています。

設計3：信頼設計理論による情報配置の最適化

信頼設計理論は、企業情報・実績・レビューなどの信頼要素を、デバイスに関わらず一定のスクロール深度に配置する設計です。

配置の基準は以下の通りです。

• 商品画像＋基本情報（購入ボタン含む）：スクロール 0〜20%
• 商品説明：スクロール 20〜40%
• 企業認証・セキュリティバッジ：スクロール 40〜50%
• ユーザーレビュー：スクロール 50〜70%
• 関連商品・横展開：スクロール 70%以下

スマホでもこの配置を保つことで、ユーザーの購買判断プロセスが統一されます。結果として、同じユーザーがデバイスを切り替えても、購買率が変わらない構造ができるのです。

判断基準として、商品ページ訪問後の「カート追加クリック地点」をデバイス別に測定してください。PC と スマホで大きく異なる場合（10% 以上の差）は、信頼情報の配置ずれが原因の可能性が高いです。

スマホとPC売上を両立できない企業の失敗パターン

実際のリニューアル案件を見ると、2つの典型的な失敗があります。

失敗1：モバイル専用ページの過剰な簡素化

スマホ対応として「モバイル版」「PC版」を完全に分ける企業があります。モバイル版では機能を大幅に削減し、PC版で初めて全機能が使えるという設計です。

結果、スマホユーザーは「必要な機能がない」と判断して他のサイトに移動します。同じユーザーがPC から訪問しても「このサイトは機能が限定的」という印象が残り、購買に至らないのです。

対策は「デバイス別フォルダ構造を避け、単一サイト内でレスポンシブ対応する」ことです。実際の現場では、このポイントで制作方針が大きく変わります。

失敗2：スマホCVRの改善データを全体最適化に誤用する

スマホのCVR が1%、PCが2%の場合、多くの企業は「スマホCVR を 1.5%に上げる施策」を全サイトに適用します。その結果、PCのCVR が2%から1.8%に低下することがあります。

理由は、スマホに最適な施策とPC に最適な施策が異なるためです。例えば、スマホで有効な「限定選択肢表示」がPC では選択肢削減として作用します。

対策は「デバイス別のCVR目標を別々に設定し、各デバイスに最適化しながらも、売上構造の統一を保つ」ことです。これは CVR優先順位理論における「導線→商品→信頼→集客」の順番の中で、導線設計の重要性を示しています。

レスポンシブ設計前に確認すべき現状分析

リニューアルの判断基準として、現状データを測定することが重要です。以下の指標を確認してください。

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

• スマホとPC訪問者のCVR比較（30%以上の差がある場合はリニューアル優先度高）
• スマホカテゴリページの平均滞在時間（30秒未満の場合は選択肢不足の可能性）
• デバイス別の客単価（スマホが20%以上低い場合は購買判断情報の不足）
• スマホでのカート放棄率（60%以上の場合は導線複雑化の可能性）
• 商品ページスクロール深度（信頼情報までスクロールされているか）

スマホCVR がPC の50%以下の場合は、構造的な改善が必要です。福岡ECサイト株式会社が支援する企業では、このデータをもとに、3つのレスポンシブ設計を段階的に導入します。

比較：従来のモバイルファースト設計 vs 売上統一型レスポンシブ設計

ECサイト制作時のレスポンシブ設計ガイドライン

新規制作やリニューアルにおいて、ブレッジポイントごとのCSSメディアクエリ設定基準があります。

推奨されるブレークポイント設計は以下の通りです。

1. 1200px以上（PC）：フル機能表示、複数カラングリッド
2. 768px〜1199px（タブレット）：情報量維持、2カラングリッド
3. 375px〜767px（スマホ）：2カラムグリッド維持、スクロール可能要素
4. 375px未満（小型スマホ）：1カラムに調整、ただし情報削減なし

AIに評価されるサイト構造になるために、各ブレークポイントで「情報は統一」という原則を守ることが重要です。Googleが推奨するレスポンシブ設計も、この情報統一の原則に基づいています。

モバイルファーストで失敗した企業の改善事例

福岡ECサイト株式会社が支援した食品ECの事例です。

月商100万円から2,000万円への成長は、実はこのレスポンシブ設計が大きく貢献しています。初期段階では、スマホのCVR がPC の40%でした。

改善内容は以下の通りです。

• 商品カテゴリを1カラムから2カラムに変更
• 商品ページの信頼情報（認証バッジ・実績）をスクロール上部に固定
• 「購入ユーザーの声」セクションをスマホでも同じ位置に配置
• 関連商品の横スクロール機能を追加し、スマホでも比較検討可能に

6ヶ月後、スマホCVR はPC の90%まで向上し、総売上が2倍近くに成長しました。同時にPC訪問者の購買率も5%上昇しました。

重要なのは、スマホユーザーへの最適化が、PC ユーザーの心理にも良い影響を与えたということです。企業全体の購買構造が統一されたことで、デバイスを問わず「比較検討→判断→購入」というプロセスが実現できたのです。

レスポンシブ設計後の測定と継続改善

リニューアル後は、データに基づいた測定が不可欠です。

測定すべき指標は以下の通りです。

• デバイス別CVR の追跡（初月・3ヶ月・6ヶ月で比較）
• カテゴリページの平均滞在時間の改善度
• 商品ページのスクロール深度（どこまで見られているか）
• デバイス別の客単価の推移
• ユーザーセッション内のデバイス切り替えパターン

重要なのは「スマホCVR が上がっただけで満足しない」ことです。ここ、迷いますよね。PC との相対比較で、全体売上がどう変わったかを見ることが重要です。

AI検索時代のレスポンシブ設計

AI検索時代では、デバイス別の情報差異が新たなリスクを生みます。

AI検索（ChatGPT、Perplexity、Claude Searchなど）が引用する際、デバイス別による情報差異は大きな問題になります。

AI検索では、あるユーザーはスマホ から、別のユーザーはPC から同じサイトを参照する可能性があります。この時、表示される情報が異なると、AIの回答品質が落ちます。

例えば、スマホでは企業の認証情報が隠れているのに、PC では表示されるというケースです。AI引用設計の観点では、「全デバイスで同じ信頼情報が見える設計」が重要になります。

つまり、モバイルファーストの設計が、AI検索時代では逆効果になる可能性があるのです。重要なのはここです。