独自ドメインECのスマホ商品ページ改善7チェックリスト【MakeShop・Shopify対応2026年版】
- 独自ドメインECのスマホCVRが低い「本当の原因」
- チェック①：ファーストビューに「買う理由」があるか
- チェック②：CTAボタンは「親指で押せる」位置にあるか
- チェック③：商品画像は「スマホ縦表示」で映えるか
- チェック④：価格・送料・納期が「すぐわかる」か
- チェック⑤：レビュー・信頼要素がスマホで見えるか
- チェック⑥：ページ表示速度は3秒以内か
- チェック⑦：カートへのステップ数は最小限か
- まとめ：チェックリスト一覧＋優先順位
「広告を出すとアクセスは来るのに、全然買ってもらえない」——独自ドメインECをMakeShopやShopifyで運営しているお客様から、本当によく聞く悩みです。犯人は大抵、スマホでの商品ページ体験なんですよね。今日は現場で効果を確認してきた7つの改善ポイントをお伝えします。
独自ドメインECのスマホCVRが低い「本当の原因」
まず大前提として、EC全体の流入の7割以上がスマホです。MakeShopやShopifyのデフォルトテーマはPCデザインがベースのことが多く、スマホで見ると「なんか買いにくい」という状態になっていることが非常に多いんです。
私たちが独自ドメインECのサポートをする際、まず最初に確認するのがスマホでの商品ページ体験です。Googleアナリティクスでモバイルのコンバージョン率をデスクトップと比較して、モバイルCVRがデスクトップの半分以下なら商品ページに問題があるサインと見ています。
📊 ECサイトのデバイス別CVR比較（支援実績の傾向値）
| 状態 | PC CVR | スマホ CVR | 判定 |
|---|---|---|---|
| 改善が必要 | 2.0% | 0.7% | ⚠️ 要改善 |
| まずまず | 2.0% | 1.2% | 🟡 改善余地あり |
| 良好 | 2.0% | 1.6%以上 | ✅ 良好 |
ではどこを直せばいいのか、7つのチェックポイントを順番に見ていきましょう。
チェック①：ファーストビューに「買う理由」があるか
スマホで商品ページを開いたとき、スクロールしなくても見える範囲（ファーストビュー）に「なぜこの商品を買うべきか」が伝わるかが最重要です。
多くの独自ドメインECで見かけるのが「商品画像だけ大きく」「商品名だけ」のファーストビューです。これだとユーザーは「良さそうだけど…」で離脱してしまいます。
ファーストビューに入れるべき3要素
- 商品のベネフィット（効果・解決できる悩み）を一言で
- 価格・送料（ここが見えないと「高そう」で離脱される）
- カートボタン（スクロールしなくても見える位置に）
Shopifyなら「商品説明の最初の1〜2行」、MakeShopなら「キャッチコピー欄」をフル活用してください。「送料無料・翌日出荷」などの情報もここに入れると離脱率が下がります。
✅ チェック① 確認ポイント
- □ スクロールなしで商品のベネフィットが伝わるか
- □ 価格・送料がファーストビューで確認できるか
- □ カートボタンがファーストビュー内にあるか
チェック②：CTAボタンは「親指で押せる」位置にあるか
スマホを片手で持ったとき、親指が自然に届く範囲（画面中央〜下部）にカートボタンがあるかを確認してください。画面上部や両端のボタンは「押しづらい」と感じさせます。
また、ボタンのサイズも重要です。最低でも高さ44px以上・横幅は画面の60%以上が目安。細くて小さいボタンは「押せたかな？」という不安を生み、離脱につながります。
MakeShop・Shopifyでのボタン最適化
Shopifyのテーマ設定では「カートボタンのスタイル」をカスタマイズできます。Dawn・Impulseなどの人気テーマはすでにモバイル最適化されていますが、高さが小さいと感じたらCSSで調整を。MakeShopはカスタムCSS機能で.buy-button { height: 54px !important; }のように指定できます。
✅ チェック② 確認ポイント
- □ カートボタンが画面中央〜下部にあるか
- □ ボタンの高さが44px以上・横幅60%以上か
- □ ボタンの色が背景と十分にコントラストがあるか
チェック③：商品画像は「スマホ縦表示」で映えるか
PC向けに横長で作った商品画像は、スマホで縦表示すると商品が小さく見えて魅力が伝わらないことがあります。スマホでは正方形（1:1）か縦長（4:5）の画像が最も映えます。
特にShopifyのメイン商品画像は正方形推奨です。MakeShopも同様で、600×600px以上の正方形画像を用意すると、スマホ表示での見栄えが大幅に改善します。
画像枚数も重要
スマホユーザーは商品画像を複数枚確認してから買う傾向があります。最低5〜8枚、できれば「使用シーン」「サイズ比較」「詳細アップ」「コーディネート（アパレルの場合）」を用意しましょう。画像が1〜2枚しかない商品ページは、信頼感が低く見えます。
✅ チェック③ 確認ポイント
- □ メイン画像が正方形（1:1）か縦長（4:5）か
- □ 商品画像が5枚以上あるか
- □ 使用シーン・詳細アップ画像があるか
チェック④：価格・送料・納期が「すぐわかる」か
ECで購買を決める3大要素が「価格・送料・納期」です。この3つがスクロールなしに確認できないページは、離脱率が高くなります。
特に「送料無料かどうか」がわからないページは致命的です。スマホユーザーの大半は「送料がいくらかか確認するためにスクロールするのが面倒」で離脱します。商品タイトルの直下に「送料無料」または「送料○○円」を明記するだけで離脱率が改善します。
ShopifyとMakeShopでの設定
Shopify：「メタフィールド」や「商品説明の冒頭」に送料・納期情報を入れる方法が一般的です。バッジ型の表示には「Trust Badges」などのアプリも活用できます。MakeShop：「商品の特徴テキスト」欄や「ポイント説明」欄を使って、価格・送料・納期をカートボタンの近くに表示できます。
✅ チェック④ 確認ポイント
- □ 送料（無料か有料か）がスクロールなしで確認できるか
- □ 納期・発送日目安が商品ページに記載されているか
- □ 割引・セール価格の場合、元値も表示されているか
チェック⑤：レビュー・信頼要素がスマホで見えるか
独自ドメインECは楽天やAmazonに比べて「知らないサイトで買うのは不安」という心理的ハードルがあります。レビュー・口コミ・メディア掲載実績などの信頼要素を商品ページ上部に配置することで、この不安を和らげられます。
信頼要素の優先順位
- 購入者レビュー（星評価＋コメント）— 最も効果的
- SNSの投稿・UGC（実際に使っている写真）
- 購入実績数（「累計○○個販売」など）
- セキュリティバッジ（SSL・決済の安全性）
Shopifyなら「Product Reviews」アプリや「Loox」などがレビュー表示に使えます。MakeShopはデフォルトのレビュー機能がありますが、スマホ表示が見づらい場合はカスタムCSSで見やすく調整しましょう。
✅ チェック⑤ 確認ポイント
- □ レビューがカートボタンの近くに表示されているか
- □ 購入実績・累計販売数などの数字があるか
- □ セキュリティバッジ（SSL表示等）があるか
チェック⑥：ページ表示速度は3秒以内か
商品ページの表示が3秒を超えると、スマホユーザーの40%以上が離脱するとGoogleが発表しています。独自ドメインECはモール（楽天・Amazon）に比べてサーバー環境の最適化が開発者任せになりがちで、表示速度が遅いサイトが少なくありません。
速度チェックの方法
Google PageSpeed Insights（無料）でURLを入力するだけでスコアと改善点が確認できます。スマホのスコア60点以下は要改善です。
よくある原因と対策
- 画像が重い→ WebP形式に変換・サイズを1MB以下に圧縮
- アプリの入れすぎ（Shopify）→ 使っていないアプリをアンインストール
- 外部スクリプト多数→ チャットウィジェット・分析ツールの見直し
- フォント読み込みが遅い→ Googleフォントを最小限に
✅ チェック⑥ 確認ポイント
- □ PageSpeed Insightsのモバイルスコアが60点以上か
- □ 商品画像をWebP・1MB以下に最適化しているか
- □ 使っていないアプリ・スクリプトを削除しているか
チェック⑦：カートへのステップ数は最小限か
「商品ページ→カート→購入情報入力→確認→完了」のステップ数が多いほど、途中で離脱するユーザーが増えます。特にスマホは入力が面倒なので、カートに入れてから購入完了までのタップ数を最小化することが重要です。
Shopifyのチェックアウト最適化
ShopifyはShopify Paymentsを使うと「ショップペイ（Shop Pay）」が利用でき、登録済みユーザーは1タップで購入完了できます。また「ゲスト購入を許可」する設定にしておくと、アカウント作成の手間を省けます。
MakeShopのチェックアウト最適化
MakeShopは「かんたん購入」機能（会員ログイン後1クリック購入）をONにしておきましょう。また、「ゲスト購入」を無効にしているショップは設定を見直すことをお勧めします。
共通して有効なのが決済手段の多様化です。Amazon Pay・PayPay・Apple Payなど、スマホユーザーが使い慣れた決済を追加するだけでCVRが改善したケースが多いです。
✅ チェック⑦ 確認ポイント
- □ ゲスト購入が許可されているか
- □ Amazon Pay・PayPay・Apple Payなど主要決済が揃っているか
- □ 購入完了まで4ステップ以内か（スマホで実際に確認）
まとめ：チェックリスト一覧＋優先順位
7つのチェックポイントをまとめました。全部一度にやるのが理想ですが、リソースに限りがある場合は優先順位の高いものから着手してください。
📋 スマホ商品ページ改善チェックリスト（優先度順）
| 優先度 | チェック項目 | 工数 |
|---|---|---|
| ★★★ | ④ 価格・送料・納期をファーストビューで明記 | 30分 |
| ★★★ | ⑦ 決済手段の追加（PayPay・Apple Pay等） | 1〜2時間 |
| ★★ | ① ファーストビューにベネフィット・CTAを配置 | 1〜3時間 |
| ★★ | ⑥ 画像圧縮・PageSpeed改善 | 2〜4時間 |
| ★ | ② CTAボタンサイズ・位置の最適化 | 1時間 |
| ★ | ③ 商品画像を正方形・5枚以上に | 半日〜1日 |
| ★ | ⑤ レビュー・信頼要素の配置最適化 | 1〜2時間 |
私たちが独自ドメインECを支援する際、「まず④と⑦だけやってください」とお伝えすることが多いんです。この2つだけで、スマホCVRが1.2〜1.5倍になるケースをよく経験しています。
「どこから手をつければいいかわからない」「MakeShop・Shopifyの設定方法を詳しく教えてほしい」という方は、ぜひ一度相談してみてください。現在使っているカートの設定を一緒に見ながら、優先すべき改善点をお伝えできます。