売れる商品ページの作り方 — 購入率を上げる構成と書き方の実践チュートリアル

「アクセスはあるのに、なぜか売れない」。Shopifyアプリを開発しながら複数のストアに導入してまわっていると、運営者の方からいちばん多く聞く相談がこれです。広告やSNSでどれだけ集客しても、商品ページで離脱されてしまったら売上にはつながりません。

実店舗ならスタッフが声をかけて質問に答えられますが、オンラインでお客様が判断する材料は 商品ページだけ 。写真・説明文・レイアウトすべてが「無言の接客」になります。この記事は、その商品ページを8ステップで作り直すチュートリアルです。

売れる商品ページの完成イメージ

最初に「ゴールの形」を共有しておきます。購入率の高いストアの商品ページに共通して入っているパーツは、おおむね次の8つです。

このうち1つでも欠けていると、お客様の頭に「？」が残って離脱の原因になります。逆に言えば、欠けているパーツを足すだけでも数字は動きます。

商品ページ最適化

ECサイトの商品ページについて、構成・コピー・画像・速度・モバイル表示を整え、購入率（CVR）を引き上げる一連の作業を指します。広告で集客した後の「受け皿」を整える施策で、新規広告費を増やさずに売上を伸ばせる、ECで最もコスパの良い改善領域の1つです。

なぜ商品ページが効くのか、数字でも見ておきましょう。Baymard Institute の調査では、ECサイトのカート離脱率は平均 70.19% にのぼり、その大きな理由のひとつが商品ページでの情報不足とされています。

出典：Baymard Institute - Cart Abandonment Rate Statistics

つまり「カゴに入った後」に逃げているお客様だけで7割。商品ページで「カゴに入れる」の手前で逃げている人を含めると、改善の余地はもっと大きいということです。

始める前の前提条件

着手する前に、最低限そろえておきたい材料を確認します。

• 商品写真：白背景・使用シーン・ディテールなど計5枚以上の素材
• 商品名と正式な価格（税込表記・割引前価格）
• スペック情報：素材・サイズ・重量・原産国・成分など
• 配送条件：発送までの日数・送料・対応エリア
• 返品ポリシー：返品可否・期間・条件
• レビュー素材：レビュー1件以上、または購入後アンケートの一文でも可
• 所要時間：1商品あたり3〜4時間（写真選定・コピー作成・配置）

売れる商品ページを作る8ステップ

ここからが実作業です。1ステップずつ手を動かしながら進めてください。

1. 1

   STEP 1: ファーストビューで『誰のための商品か』を即伝える

   ファーストビューは「この商品はわたしのためのものだ」とお客様に1秒で思ってもらう場所です。スマホの最初の1画面に、次の4要素を必ず収めてください。

   • 商品メイン画像（白背景もしくは映える1枚）
   • 商品名（できれば30文字以内）
   • 価格（税込・送料の有無まで）
   • カートに入れるボタン

   商品名の前に ターゲットを示す一言 を添えると、刺さり方が一段変わります。

   • NG: オーガニックコットンTシャツ
   • OK: 敏感肌でもチクチクしない / オーガニックコットンTシャツ

   ファーストビューに「ブランドの世界観」を語る長文を入れるストアが多いですが、初回訪問者の大半はそのブランドを知りません。世界観はページ後半に置き、最初は商品スペックと価格を優先してください。

2. 2

   STEP 2: 商品写真は5枚以上、用途とサイズ感がわかる構成にする

   オンラインで商品を手に取れない不安を埋めるのが写真の役割です。次の5種類を最低限そろえてください。

   1. メイン画像：白または無地背景で、商品の全体像が見える1枚
   2. ディテール画像：素材感・縫製・質感がわかる接写
   3. スケール画像：手に持った写真、定規との比較、サイズ表
   4. 使用シーン画像：実際に使っているライフスタイル写真
   5. インフォグラフィック：スペックや使い方を1枚絵にまとめた画像

   

   5枚というのはあくまで下限です。アパレルや家具など「サイズ感」が購入判断に直結する商材は、7〜10枚あったほうが離脱率が下がります。

   Instagram に上げているおしゃれな写真をそのまま使うと、商品が小さく写りすぎていることが多いです。商品ページ用は「商品をしっかり見せる」目的で、SNS用とは別に撮り直すのが安全です。

   → ECサイトの商品写真を自分で撮る方法を読む

3. 3

   STEP 3: 商品説明文はベネフィット先行で書く

   説明文は、改善で一番効くパートです。テキストの修正はすぐに反映でき、効果検証もしやすいからです。次の3パート構成で書いてください。

   1. キャッチコピー（20〜40字）：商品最大のベネフィットを一言で
   2. ボディコピー（300〜500字）：使ったあとの変化、ターゲットの悩みへの共感
   3. クロージング（50〜100字）：今買う理由、保証や送料の安心材料

   スペック羅列型と、ベネフィット先行型を比較してみます。

   	スペック羅列型（NG）	ベネフィット先行型（OK）
   書き出し	素材：オーガニックコットン100%、サイズ：S/M/L	敏感肌のあなたに。一日中チクチクしない、やさしい着心地
   本文	重量120g、洗濯機OK、カラー5色展開	赤ちゃんにも使えるオーガニックコットンを100%使用。洗うほどやわらかく、何年も愛用いただけます。
   締め	ご注文はこちら	今なら送料無料。肌に合わなければ30日間返品OK。

   “

   「お客様は素材ではなく、その素材で何が起きるかを買っている」

   販売スタッフが新人だったときに先輩に言われて染み付いた言葉

   スペックを書くなというわけではありません。ベネフィットを先に伝えたうえで、裏付けとしてスペックを置く のがコツです。

   「最高品質」「業界No.1」などの根拠ない表現は景品表示法に抵触する恐れがあります。優良誤認・有利誤認に当たる表現は避け、数字や第三者評価で裏付けてください。

   出典：消費者庁 - 景品表示法

4. 4

   STEP 4: スペック表で疑問を先回り解消する

   ベネフィット先行で書いたあとは、スペックを 表形式 で1カ所にまとめます。お客様が「サイズは？」「素材は？」と探し回らずに済むようにするためです。

   項目	内容例
   サイズ	S（着丈64cm）/ M（着丈68cm）/ L（72cm）
   素材	オーガニックコットン100%
   重量	約120g
   原産国	日本
   お手入れ	洗濯機可（ネット使用）
   保証	30日間返品・交換無料

   スペック表は画像ではなくテキストで実装してください。画像にすると検索エンジンに読まれず、スマホで拡大しないと読めない問題も起きます。

5. 5

   STEP 5: レビュー・実例で社会的証明を入れる

   「他の人も買っている」という安心感を、ページ内で見せられるかどうかで購入率は大きく変わります。最低限、次の3つを置いてください。

   1. 星評価と総レビュー数（ファーストビュー直下に表示）
   2. 写真付きレビュー3件以上（テキストのみより説得力が段違い）
   3. メディア掲載・販売実績（「累計5,000個販売」「○○雑誌掲載」）

   レビューが0件の段階では、購入後アンケートの一文や、SNSでお客様が投稿してくれた口コミ（許可を取って）を掲載する方法もあります。「サクラレビュー」だけは絶対に避けてください。発覚すると一発でブランドが終わります。

   Shopifyなら Judge.me や Loox でレビュー収集を自動化できます。購入後3〜7日で「使い心地はいかがですか？」の依頼メールを自動送信するのが定番設計です。

6. 6

   STEP 6: 配送・返品ポリシーを購入ボタンの近くに置く

   「いつ届くの？」「返品できるの？」が解消されないままだと、お客様はカートに入れる手前で止まります。次の3点を 購入ボタンの直近 に書いてください。

   • 発送までの日数（例：「ご注文から2営業日以内に発送」）
   • 送料（例：「全国送料無料 / ¥5,000以上で送料無料」）
   • 返品条件（例：「30日間返品OK・サイズ違いも対応」）

   これらをフッターやFAQページに隠してしまうストアが本当に多いです。お客様は「探さない」前提で、購入ボタンの上下にテキストかアイコンで入れてください。1行加えるだけで離脱率が変わります。

7. 7

   STEP 7: CTAボタンの文言とコントラストを整える

   「カートに入れる」ボタンは、商品ページで唯一のゴール地点です。次のチェックを通してください。

   • 文言は「カートに入れる」「今すぐ購入する」など 動詞 + 何が起きるか
   • 色はページ全体で唯一目立つ配色（背景とのコントラスト比4.5以上）
   • ボタンサイズはスマホで 最低48px × 48px（親指で押せるサイズ）
   • ボタン横に 在庫状況・配送目安・送料 を1行で添える

   「お問い合わせ」ボタンと「カートに入れる」ボタンが同じ色・同じ大きさで並ぶデザインは避けてください。CTAは1ページに1つだけ強調するのが鉄則です。

8. 8

   STEP 8: スマホ表示で必ず最終確認する

   国内ECのモバイル比率は年々上がっており、商品ページの主戦場はスマホです。PCで作り終えたページは、必ず実機で次のチェックをしてください。

   • ファーストビューに商品名・価格・カートボタンが収まっている
   • 商品写真がスワイプで切り替わり、拡大できる
   • 説明文が長文の塊にならず、適度に改行・小見出しが入っている
   • スペック表がスクロールせず読める（横スクロールしない）
   • CTAボタンが片手の親指で届く位置にある
   • 表示速度が3秒以内（PageSpeed Insightsで70点以上）

   Shopify管理画面の「テーマ → カスタマイズ」画面では、上部のデバイス切り替えで PC / タブレット / モバイルの表示を即時確認できます。公開前に必ずモバイル表示で全画面チェックしてください。

   出典：Shopify ヘルプセンター - テーマをカスタマイズする

トラブルシューティング

実際にやってみると、教科書どおりに進まない場面が出てきます。導入支援先でよく遭遇する4パターンを置いておきます。

応用：1商品が完成したあとに広げる

1商品で勝ちパターンができたら、次の3つに広げてください。

1. 01

   主力商品TOP10にテンプレ展開する

   同じ構成・同じコピーパターンで主力10商品を作り直すと、ストア全体のCVRが底上げされます。Shopifyのメタフィールドを使えば、スペック表のテンプレも一元管理できます。
2. 02

   A/Bテストでファーストビューを磨く

   ヒーロー画像とキャッチコピーをA/Bテストすると、CVRが10〜30%変わることもあります。Shopifyならテーマ複製で簡易A/Bが組めます。詳細はShopifyのコンバージョン率改善ガイドで解説しています。
3. 03

   検索流入を意識したSEO対策を入れる

   商品名・説明文・altタグに検索キーワードを自然に含めると、Google検索からの流入が伸びます。書き方の具体例はShopifyのSEO対策ガイドにまとめてあります。

まとめ — 商品ページは「無言の接客」

商品ページの改善は、広告費を増やさずに売上を伸ばせる、ECで最もコスパの良い施策です。最後に、今日の8ステップをチェックリストで振り返ります。

• ファーストビューに画像・商品名・価格・購入ボタンが揃っている
• 商品写真は5枚以上で、用途とサイズ感がわかる構成
• 説明文はベネフィット先行で、3パート構成になっている
• スペック表が表形式テキストで1カ所にまとまっている
• レビュー・実績が購入ボタンより上に見える
• 配送・返品ポリシーが購入ボタンの直近に書かれている
• CTAボタンの文言・色・サイズが整っている
• スマホ実機で全画面チェック済み

「商品の魅力をちゃんと伝える」。当たり前のように聞こえますが、この8項目を全部クリアできているストアは少数派です。今日から1商品ずつ、手を動かしてみてください。

→ Shopifyの無料体験はこちら

→ コンバージョン率を改善する7つの方法を読む