商品ページ改善チェックリスト：購入をやめる原因

BaymardとWebAIMの調査に基づく商品ページのチェックリスト。価格、送料と返品、画像、レビュー、スマホでのカート追加、ポップアップ、サイト内検索、キーボード操作を確認します。

FixReports 編集部2分で読めます

買い物客が商品ページで購入をやめてしまう原因として多いのは、総額がわからない、送料や返品の条件が見つからない、写真やレビューから商品を判断できない、そして特にスマートフォンで購入ボタンにたどり着きにくく使いにくい、といったことです。ページを覆うポップアップ、見つけにくいポリシーページ、簡単な質問にも答えられないサイト内検索、キーボードで操作できないコントロールも購入を妨げます。以下の数値は、Baymard InstituteとWebAIMによる業界調査の数値で、多数のサイトと買い物客のサンプルに基づいています。これらはよくある傾向を示すものであり、個々のストアについての予測ではありません。

要点

  • Baymardが過去3か月以内にオンラインで買い物をした米国の成人1,083人を対象に行った2026年の調査では、40%が、送料、税金、手数料などの追加費用が高すぎたためにチェックアウトで購入をやめたことがあると回答しました（Baymard Institute （新しいタブで開きます））。
  • Baymardの商品ページのベンチマークでは、主要なECサイトの67%が購入エリアの近くに総額の目安を示しておらず、44%が商品のメインコンテンツで返品ポリシーを表示もリンクもしていませんでした（Baymard Institute （新しいタブで開きます）、2026年3月18日更新）。
  • 同じベンチマークで、モバイルサイトの62%は商品ページのUXが「平凡（mediocre）」以下と評価されました。
  • WebAIMは2026年2月、上位100万サイトのトップページの95.9%でWCAGの不適合を検出しました（WebAIM （新しいタブで開きます））。
  • Baymardが2021年に売上上位のECサイト33件を調べたところ、45%にキーボードで操作できない機能がありました（Baymard Institute （新しいタブで開きます））。

買い物客が購入をやめるのはなぜですか？

最も多い回答は「見ていただけ」で、次いで追加費用、配送の遅さ、カード情報の取り扱いへの不安、アカウント作成の強制が続きます。

Baymardのカゴ落ち（カート放棄）に関するページは、50件の調査から算出した、記録されたカゴ落ち率の平均を70.22%としています（ページの最終更新は2025年9月22日）。2026年のデータと表示された理由のグラフは、過去3か月以内にオンラインで買い物をした米国の成人1,083人を対象とした調査に基づいています。回答者は複数の理由を選べました（Baymard Institute （新しいタブで開きます）、2026年10月時点）。

チェックアウトでオンライン購入をやめた理由回答者の割合
見ていただけ／まだ買うつもりがなかった42%
追加費用（送料、税金、手数料）が高すぎた40%
配送が遅すぎた20%
サイトにクレジットカード情報を預けるのが不安だった19%
アカウントの作成を求められた18%
チェックアウトの手続きが長すぎる、または複雑すぎた17%
ウェブサイトでエラーが起きた、またはクラッシュした17%
返品ポリシーに満足できなかった13%
注文の総額を事前に確認・計算できなかった12%
クレジットカードが承認されなかった10%
支払い方法の選択肢が少なかった9%

これらはチェックアウトに関する米国での調査結果であり、自社ストアを測定したものではありません。ただし、いくつかの理由は、買い物客が初めて価格、配送条件、返品条件を目にする商品ページの段階から始まっています。自社にとってどれが重要かは、自社のアクセス解析でしかわかりません。

商品ページで総額がはっきりわかりますか？

現在の価格、元の価格（ある場合）、何が含まれていて何が含まれていないか、送料の目安を、すべて購入ボタンの近くに置きましょう。

Baymardの2026年の商品ページのベンチマークでは、サイトの67%が購入エリアの近くに「注文総額」の目安を示しておらず、81%が異なる数量やサイズで販売される商品に単位あたりの価格を表示していませんでした（Baymard Institute （新しいタブで開きます））。ページに次の内容が表示されているか確認してください。

  • 現在の価格と、セール品の場合は元の価格。
  • 複数のサイズで販売される商品の単位価格。
  • 税金や関税が含まれているかどうか。
  • 送料、または送料無料になる注文金額。

Shopify：Dawnテーマでは、該当する設定と配送ポリシーがある場合、価格ブロックに「Taxes included.」（税込み）の表示と「Shipping calculated at checkout.」（配送料はチェックアウト時に計算されます）のリンクが追加されます（Dawnのソース （新しいタブで開きます））。これは正確ではありますが目安にはならないため、実際の送料や送料無料になる金額をテキストブロックで追加しましょう。

WooCommerce：WooCommerce > 設定 > 配送（WooCommerce > Settings > Shipping）にある「Enable the shipping calculator on the cart page」（カートページで送料計算機を有効にする）と「Hide shipping costs until an address is entered」（住所が入力されるまで送料を非表示にする）のオプションは、カートとチェックアウトに影響するもので、商品ページには影響しません（WooCommerceのソース （新しいタブで開きます））。送料は商品テンプレートか商品の簡単な説明に記載しましょう。

カートに追加する前に、配送と返品の情報が見つかりますか？

配送日数、送料、返品期間の短い要約を購入ボタンの近くに置き、詳しいポリシーへのリンクを添えましょう。

Baymardが1,032人を対象に行った検討・購入行動調査（Consideration & Purchase Behavior survey）では、60%が商品ページで返品ポリシーの情報を探すと回答しましたが、ベンチマーク対象サイトの44%は商品のメインコンテンツで返品ポリシーを表示もリンクもしていませんでした（Baymard Institute （新しいタブで開きます））。前述の2026年のカゴ落ち調査では、20%が配送の遅さを、13%が返品ポリシーへの不満を理由に挙げています。

<details class="product-policy">
  <summary>Shipping and returns</summary>
  <p>Ships in 1 to 2 business days. Free shipping on orders over $75.</p>
  <p>Free returns within 30 days. <a href="{{ shop.refund_policy.url }}">Read the return policy</a></p>
</details>

Shopify：ポリシーは 設定 > ポリシー（Settings > Policies）で作成します（Shopifyヘルプセンター （新しいタブで開きます））。Dawnでは、商品ページの 折りたたみ可能な行（Collapsible row）ブロックでテキストやページの内容を表示できるため（Dawnのソース （新しいタブで開きます））、配送と返品のページを1つ用意すれば、すべての商品に表示できます。

WooCommerce：WooCommerceは「Refund and Returns Policy」（返金・返品ポリシー）ページを下書きとして作成します（WooCommerceのソース （新しいタブで開きます））。編集して公開するまでは非公開のままです。

商品画像は買い物客の疑問に答えていますか？

多くの買い物客は仕様ではなく写真からサイズや着用感を判断するため、画像では商品を複数の角度から、大きさがわかる形で、使用している様子とともに見せましょう。

Baymardのテストでは、42%のユーザーが画像から商品のサイズを把握しようとしていた一方、ベンチマーク対象サイトの37%は、人物や身近な物と並べて大きさがわかる「スケール」画像を用意していませんでした。また、23%はモデルの着用画像を用意しておらず、これは特に衣料品、アクセサリー、化粧品で重要です（Baymard Institute （新しいタブで開きます））。

あわせて、色を選んだときにギャラリーが正しい画像に切り替わるか、スマートフォンでズームが使えるか、各画像に「リネンシャツ、背面」のようにその画像に写っている内容を説明する代替テキストがあるかも確認しましょう。

レビューは見つけやすく、信頼できますか？

商品名の近くに平均評価とレビュー件数を表示してすべてのレビューへリンクさせ、否定的なレビューには返信しましょう。

Baymardによれば、ベンチマーク対象サイトの89%が否定的なレビューに返信しておらず、63%は、あるレビュー投稿者の写真から次の投稿者の写真へと、レビューをまたいで移動できるようにしていませんでした（Baymard Institute （新しいタブで開きます））。遅れて読み込まれるレビューウィジェットはページを押し下げることもあるため、そのスペースを確保しておきましょう。

Shopify：Dawnの 商品評価（Product rating）ブロックはレビューアプリの星評価を表示するもので、テーマ側でアプリが必要だと明記されています（Dawnのソース （新しいタブで開きます））。

WooCommerce：WooCommerce > 設定 > 商品（WooCommerce > Settings > Products）のレビューのオプションには、「Enable product reviews」（商品レビューを有効にする）、「Show 'verified owner' label on customer reviews」（カスタマーレビューに「認証済みオーナー」ラベルを表示する）、「Reviews can only be left by 'verified owners'」（レビューは「認証済みオーナー」のみ投稿可能）、「Enable star rating on reviews」（レビューの星評価を有効にする）があります（WooCommerceのソース （新しいタブで開きます））。

スマートフォンで「カートに追加」ボタンに届きやすく、タップしやすいですか？

スマートフォンでは、買い物客が探し回ることなく価格を確認し、バリエーションを選び、「カートに追加」をタップできるようにしましょう。コントロールは押しやすい大きさにする必要があります。

Baymardの2026年のベンチマークでは、デスクトップサイトの52%とモバイルサイトの62%で商品ページのUXが「平凡」以下と評価され、57%のサイトはサイズ選択にボタンを使わず、サイズをドロップダウンの中に隠していました（Baymard Institute （新しいタブで開きます））。

実際のスマートフォンで商品ページを開き、次の点を確認してください。

  • 最初の画面。 スマートフォンの縦に積み重なるレイアウトではギャラリーが先頭に来ることが多く、縦長の画像があると、商品名、価格、ボタンが最初の画面より下に押し出されることがあります。
  • 固定表示の購入バー。 使う場合は、フォーカスされた要素を覆い隠してはいけません。W3CによるWCAG 2.2の達成基準2.4.11（レベルAA）の解説では、フォーカスされた項目を隠してしまう固定フッターが例として挙げられています（W3C （新しいタブで開きます））。
  • タップターゲット。 WCAG 2.5.8（レベルAA）は、例外を除いて最小24 × 24 CSSピクセルを定めています（W3C （新しいタブで開きます））。Shopifyのテーマガイダンスは、モバイルでは48 × 48ピクセル以上を推奨しています（Shopify （新しいタブで開きます））。
  • 横スクロール。 WCAG 1.4.10 リフローは、幅320 CSSピクセルでも縦横両方向のスクロールなしにコンテンツを利用できることを求めています（W3C （新しいタブで開きます））。幅の広いサイズ表や比較表がよくある原因です。

ポップアップが購入の妨げになっていませんか？

ページを開いたとたんに商品ページを覆うポップアップは、買い物客が求めている情報を隠してしまいます。小さなバナーを優先し、登録を促す表示は控えめにしましょう。

Googleの検索セントラルのガイダンスは、煩わしいインタースティシャルやダイアログをコンテンツの表示を妨げる要素と説明し、全画面のオーバーレイではなく小さなバナーを使うよう推奨しています（Google検索セントラル （新しいタブで開きます））。Shopifyは、ポップアップのコンテンツがレイアウトのずれを引き起こすこともあると指摘しています（Shopifyヘルプセンター （新しいタブで開きます））。残すダイアログは、キーボードで閉じられなければなりません。WCAG 2.1.2 キーボードトラップなし（レベルA）は、キーボードだけでコンポーネントからフォーカスを移動できることを求めています（W3C （新しいタブで開きます））。

信頼につながるページやポリシーのページは見つけやすいですか？

返金、配送、プライバシー、利用規約、お問い合わせのページへのリンクを、すべてのページのフッターに置きましょう。

Baymardの2026年の調査では、回答者の19%が、カード情報を預けるのが不安でサイトでの購入をやめたことがあると答えています。わかりやすいポリシーと連絡先は、ストアが正当な事業者であることを示す基本的なシグナルです。

Shopify：設定 > ポリシー（Settings > Policies）でポリシーを追加すると、Shopifyはチェックアウトのフッターに自動でリンクします。ストアに表示するには、コンテンツ > メニュー（Content > Menus）でメニューに追加するか（Shopifyヘルプセンター （新しいタブで開きます））、Dawnのフッター設定で ポリシーへのリンク（Policy links）をオンにします。

WooCommerce：下書きの返金ページを公開し、ポリシーとお問い合わせのページをフッターに追加します。

サイト内検索で商品や答えが見つかりますか？

検索は、商品名、誤字、同義語に対して正しい商品を返し、「返品」や「配送」といった質問にも答えられるべきです。

Baymardが170以上のサイトとアプリを対象に行った2026年の検索ベンチマークでは、デスクトップの46%、モバイルの58%、アプリの64%の体験が「平凡」以下と評価され、66%のサイトで、返品ポリシーを検索すると商品が表示されるといった、商品以外の検索に関する問題が見つかりました（Baymard Institute （新しいタブで開きます）、2026年4月29日更新）。

ベストセラー商品の名前、その誤字、カテゴリー名、そして「返品」で自社ストアを検索してみましょう。Shopifyでは、ストアフロントの検索は商品、ブログ記事、ページを返し、予測検索とタイプミスの許容は既定でオンになっています。Search & Discoveryアプリを使うと、フィルターや商品のブーストを追加できます（Shopifyヘルプセンター （新しいタブで開きます））。そのため、配送と返品の要約を載せた通常のページを用意すれば、こうした検索の結果に表示させることができます。

キーボードだけで購入できますか？

バリエーションの選択からチェックアウトにたどり着くまで、すべての手順をキーボードだけで操作でき、フォーカスインジケーターが見えるようにする必要があります。

WCAG 2.2は、すべての機能をキーボードで操作できること（2.1.1、レベルA）、キーボードトラップがないこと（2.1.2、レベルA）、フォーカスインジケーターが見えること（2.4.7、レベルAA）、フォーカスされた項目がほかのコンテンツに完全に隠されないこと（2.4.11、レベルAA）を求めています（W3C （新しいタブで開きます））。こうした基本が欠けていることは珍しくありません。Baymardが2021年に売上上位の33サイトを調べたところ、45%にキーボードで操作できない機能があり、48%はフォーカスインジケーターを常に表示してはいませんでした（Baymard Institute （新しいタブで開きます））。WebAIMの2026年2月のスキャンでは、トップページ1件あたりの検出エラー数は平均56.1件で、ショッピングカテゴリーのサイトでは71.0件でした（WebAIM （新しいタブで開きます））。

5分でできるテストです。

  1. 商品ページを開き、マウスに触れずにTabキーを押します。
  2. フォーカスの位置が常に見えることを確認します。
  3. サイズと色を選び、数量を変更します。
  4. 「カートに追加」を押し、フォーカスがカートドロワーの中に移動すること、そしてキーボードでドロワーを閉じられることを確認します。
  5. 購入手続きボタンまで進みます。
/* A visible focus style for keyboard users */
:focus-visible {
  outline: 3px solid #1a5fb4;
  outline-offset: 2px;
}

無料スキャンでは、これらの項目の多くを約1分で確認できます。コンバージョンレポートは、価格の見やすさ、スマートフォンでのカート追加、配送と返品の情報、ポップアップ、フッターのポリシーリンク、検索、キーボードでの購入経路、横スクロールといったページのチェック結果を、優先順位付きの改善提案にまとめます。売上データではなくページのチェックに基づくもので、売上を保証するものではありません。

よくある質問

買い物客が購入をやめる理由で最も多いのは何ですか？

Baymardが米国の成人1,083人を対象に行った2026年の調査では、最も多い回答は「見ていただけ」（42%）でした。それ以外の理由では、送料、税金、手数料などの追加費用が40%で最も多く、配送の遅さ（20%）を上回りました。

これらの問題を修正すれば、コンバージョン率は上がりますか？

それは誰にも約束できません。調査が示しているのは、多数のサイトと買い物客のサンプルに共通して見られるバリアです。それを取り除くことで結果が変わるかどうかは、商品、価格、集客によって異なるため、変更のたびに前後で測定してください。

商品ページのどこに配送と返品の情報を置くべきですか？

価格と購入ボタンの近くに、詳しいポリシーへのリンクを添えた短い要約として置きます。Baymardの調査では、回答者の60%が商品ページで返品ポリシーの情報を探すと答えています。

スマートフォンでは、「カートに追加」ボタンがスクロールせずに見える必要がありますか？

それを義務づける決まりはありませんが、買い物客がすぐに価格を確認し、ボタンにたどり着けるようにすべきです。固定表示の購入バーも選択肢の1つですが、フォーカスされた要素やほかのコンテンツを隠さないことが条件です。

アクセシビリティはコンバージョンの一部ですか？

はい、ごく単純な意味で一部です。キーボードやスクリーンリーダーでバリエーション選択や「カートに追加」ボタンを操作できない買い物客は、購入できません。WCAG 2.2のレベルAAは、こうした基本をカバーしています。

出典

すべてのガイド