ECサイト商品ページの作り方｜売れる構成と写真

01はじめに｜この記事でわかること

要点： 「商品は良いのに、ネットだと売れません」という方に向けた記事です。売れる商品ページの構成、写真の枚数と種類、説明文の書き方、費用と期間の目安を、ご相談案件の集計とあわせてご説明します。

ECサイトのご相談でよく伺う言葉があります。「店頭では説明すれば売れるんです。でもネットだと、まったく反応がなくて」。

店頭で売れるのに、ネットで売れない。理由は単純です。店頭で店員が答えていた質問に、商品ページが答えていないからです。サイズ感、素材、届く日数、送料。聞ける相手がいないので、答えが見つからないまま黙って閉じられます。

2000年創業のWeb制作会社ZenWeb Japanでは、ECサイトの制作と改修を手がけています。この記事は、装飾のコツではなくお客様が知りたいことをどの順番で置くかという視点で商品ページの作り方をご説明します。

まずは全体像を動画でつかんでおくと、読み進めやすくなります。

02商品ページの役割｜入口はトップページではない

要点： ECサイトでは、検索や広告から商品ページへ直接入るお客様が大半です。トップページを見ていない前提で作ります。商品ページ1枚で、店の信頼と商品の魅力を両方伝えるのが役割です。

多くの店舗様が、トップページを入口だと考えて設計を始めます。ところが実際のアクセスでは、お客様は商品名で検索し、商品ページにいきなり降り立ちます。トップページは通りません。

この前提が変わると、載せるものも変わります。商品の情報だけでなく、「この店で買って大丈夫か」を判断する材料も同じページに要ります。

• 商品の情報。 写真、サイズ、素材、使い方、税込価格。買うかを決める中身です。
• 店の情報。 送料、納期、返品条件、問い合わせ先。安心できないと、良い商品でも見送られます。
• 次の一手。 関連商品への導線。1点だけ見て帰る方を、もう1周させます。

市場は伸び続けています。経済産業省の令和6年度の調査では、物販系分野のBtoC-EC市場規模は15兆2,194億円、EC化率は9.78%と報告されました。伸びるほど、比べられる相手も増えます。自社ECとモール出店の違いを踏まえると、自社ECでは商品ページの作り込みが差になります。

03売れる商品ページの基本構成｜上から並べる順番

要点： 上から、写真、商品名、税込価格と送料、在庫と納期、カートボタン、詳しい説明、レビュー、関連商品の順に並べます。判断に要る情報ほど上へ。読ませたい情報は下で構いません。

並べる順番はお客様が判断する順番で決めます。多くのページは店側が伝えたい順になっていて、そこがずれの原因です。

1. メイン写真。 何の商品かを1秒で伝えます。切り抜きより、使う場面が伝わる1枚が向きます。
2. 商品名と型番。 検索して来た方が「これだ」と確認できる言葉を入れます。
3. 税込価格と送料の目安。 空けたまま読ませると、あとで必ず驚かれます。
4. 在庫と発送日。 「あす発送」か「取り寄せ2週間」かで判断が変わります。
5. カートに入れるボタン。 スマートフォンでも最初の画面に見えている状態にします。
6. 詳しい説明と仕様。 使う場面、素材、サイズ表、お手入れ方法。長くて構いません。
7. レビュー・よくある質問・関連商品。 迷いを消し、次のページへつなぎます。

この並びは紙に描いてから作ると早く決まります。ワイヤーフレームの作り方と制作の流れを先に押さえておくと、意見が割れたときも「どの情報を上に出すか」に話を戻せます。

04ファーストビュー｜要素別の掲載率と足した効果

要点： 改修前の商品ページでは、税込価格はほぼ載る一方、送料の目安と発送日が抜けています。この2つを最初の画面に足した案件で、カート投入率がもっとも大きく動きました。

ご相談時に拝見した商品ページを、最初の画面に何が入っていたかで集計しました。掲載率が低く、変化が大きい要素ほど先に手を付ける価値があります。

掲載率が低い項目ほど、足したときの変化が大きく出ています。送料と発送日は、店側が「あとで書いてある」と考えがちな情報です。お客様は、そこが見えないまま先へ進むのを嫌がります。

送料の目安を最初の画面に出しただけで、カート投入率が2.8ポイント上がりました。デザインは触っていません。

05商品写真のそろえ方｜そろえたい6カット

要点： 商品写真は、全体・別角度・使用場面・大きさの比較・素材の寄り・付属品一式の6カットを基本にします。上手に撮ることより、疑問を消すカットがそろっているかが大事です。

写真の相談で多いのが「プロに頼むべきでしょうか」です。答えの前に枚数と種類がそろっているかを確認してください。1枚を撮り直すより、足りないカットを足すほうが効きます。

1. 全体が写った1枚。 背景は白か無地。何の商品かが迷わず伝わるのが先です。
2. 別の角度。 背面、側面、開いた状態。手に取って裏返す動作にあたります。
3. 使っている場面。 誰がどこで使うかが伝わる1枚。買ったあとを想像させます。
4. 大きさの比較。 手やペットボトルなど身近なものと並べます。返品の相談が減ります。
5. 素材や質感の寄り。 生地の織り、木目、縫製。触れないぶんをここで補います。
6. 付属品を並べた1枚。 届く一式が写っていれば、「これも付くのか」が消えます。

撮影の条件はシリーズでそろえてください。背景、明るさ、角度、サイズがばらばらだと、一覧に並んだとき雑な印象になります。1点ずつの美しさより、並べたときの統一感が店の信用に効果的です。

06写真の枚数別｜下まで読まれた割合と購入率

要点： 写真が5枚までのページは、説明文まで読まれずに離れます。6枚を超えると下まで読まれるようになり、購入率も上がりました。ただし10枚を超えると伸びはほぼ止まります。

担当した商品ページを、掲載写真の枚数で分けて集計しました。棒の長さは説明文まで到達した割合です。

注目したいのは返品と交換の割合です。写真が増えるほど返品が減っています。届いてから「思っていたのと違う」となる方が減るためです。写真は返品対応の手間を減らす投資でもあります。

枚数を増やすときは表示速度にご注意ください。無圧縮の写真を10枚並べると、スマートフォンでは開くのに時間がかかります。ECサイトに必要な機能を選ぶ段階で、画像の自動圧縮に対応しているか確認しておくと安心です。

07商品説明文の書き方｜仕様の前に使う場面を書く

要点： 説明文は使う場面から書き始め、仕様表はそのあとに置きます。長い文章を一続きに並べるより、特徴ごとに見出しと写真で区切るほうが読まれます。仕様は表にまとめてください。

説明文で多い失敗は、仕様を上から並べることです。素材、寸法、重量、原産国。お客様は仕様ではなく、自分に合うかを知りに来ています。

順番を入れ替えるだけで読まれ方が変わります。まず「どんな場面で役に立つか」、次に「特徴を3つほど見出しと写真で区切る」、最後に「仕様は表で」。

Baymard Instituteの調査では、商品説明を特徴ごとに区切って見せているサイトは22%にとどまるとされています。裏を返せば、やるだけで差がつきます。

• 主語をお客様にする。 「高密度の生地を使用」より「洗っても型崩れしにくい」。
• 迷いを先回りする。 「食洗機に入れられますか」など、よく届く質問は本文に入れます。
• 仕様は表に逃がす。 文章に埋めると読み飛ばされます。表なら自分で探せます。

08価格・送料・納期の見せ方｜あとから増やさない

要点： 商品ページの段階で、税込価格・送料の目安・発送日の3つを見せます。カートに進んで金額が増えると、そこで離れます。送料無料の条件は、残りいくらかを添えてください。

お客様が嫌がるのは金額の高さではありません。あとから増えたという感覚です。3,000円だと思って進んだのに、カートで3,800円になる。この落差が離脱を生みます。

• 税込で表示する。 総額表示が原則です。税抜を大きく出すと落差が生まれます。
• 送料の目安を添える。 「全国一律600円、5,000円以上で無料」のように、商品ページで完結させます。
• 発送日を具体的に書く。 「1〜3営業日以内に発送」。「お早めに」では判断できません。

送料の決め方で迷う場合は、ECの送料設定の考え方で利益とのバランスを整理してから文言を決めるほうが早く済みます。金額の見せ方はカゴ落ち対策とも直結します。

09レビューとQ&A｜第三者の声を置くときの注意

要点： レビューは件数より、評価の分布と写真つきの投稿があるかで見られ方が変わります。低い評価を消すと、かえって信用されません。店側が消費者を装って書く行為は景品表示法違反です。

レビューを置くとき、高評価だけ残したくなります。逆効果です。5点しか並ばないレビュー欄は、作られたものだと受け取られます。

効くのは、評価の分布が見えることと、店からの返信です。3点の投稿に「ご指摘ありがとうございます。サイズ表を見直しました」と返っていれば、対応する店だと伝わります。

気をつけたいのが法律の線です。令和5年10月1日からステルスマーケティングは景品表示法違反となりました。事業者が消費者のふりをしてレビューに投稿する行為は規制の対象です。レビューは集める仕組みを作るもので、書くものではありません。

10デバイス別｜商品ページの見られ方の違い

要点： 閲覧の7割以上がスマートフォンですが、購入率はパソコンのほうが高く出ます。縦に長く、説明文まで届きにくいためです。上に何を置くかは、スマートフォンを基準に決めます。

担当した案件を、端末別に並べました。

スマートフォンでは滞在が48秒しかありません。この48秒で判断されると考えて、上に置くものを決めます。パソコンで作り込んだページが、縦に伸びて情報が沈むのはよくあります。

対策は簡単です。写真を横に流せるようにして、価格と送料をその真下へ。カートボタンは画面の下に固定します。この3点で到達率は変わります。

11検索から商品ページに来てもらう｜制作時にできる実装

要点： 商品ページには、検索結果で見分けがつく情報を入れます。商品名に型番と用途を含める、写真に説明文を設定する、価格と在庫の構造化データを入れる。この3つは制作時に仕込めます。

商品ページは、検索から直接入ってもらう前提で作ります。ZenWeb Japanは検索順位を上げる運用代行はお受けしていませんが、検索されたときに正しく読み取られる作りにするのは制作の範囲です。

• 商品名に用途と型番を入れる。 「ステンレスボトル」より「ステンレスボトル 500ml 保温 直飲み ABC-500」。打たれる言葉に寄せます。
• 写真に代替テキストを設定する。 画像が読めない環境でも内容が伝わり、画像検索にも拾われます。
• 価格・在庫・レビューを構造化データで渡す。 検索結果に価格や在庫が表示されることがあります。

これらは公開後に足すと、全商品を触り直すことになります。設計段階で決めておけば、追加費用はほとんどかかりません。既存のカートでも同じです。Shopify構築で制作会社に頼める範囲を確認するとき、この部分を含めるか聞いてみてください。

12商品点数別｜整備にかかる費用と期間の目安

要点： 整備費用は、テンプレートの設計費と、1商品あたりの登録・撮影の積み上げに分かれます。点数が増えるほど、設計に手をかけて1点あたりを軽くするほうが総額は下がります。

ご提示することの多い費用と期間を、商品点数別に整理しました。金額は構成や撮影の有無で変わるため、目安です。

点数が多いほど、1商品あたりの単価は下がります。入力欄とルールを作り込むほど、1点ずつの判断が減るためです。逆に手作りすると、点数に比例して費用が伸びます。

13よくある失敗｜あとから直すと高くつく3つ

要点： 情報を画像に焼き込む、商品ごとに構成がばらばら、写真を無圧縮のまま載せる。この3つは、公開後に直そうとすると全商品を触ることになり、費用がふくらみます。

公開後に直すご相談で、繰り返し出る失敗があります。どれも作る前なら数分で決まります。

• 説明を画像に焼き込む。 文字を画像にすると検索に読まれず、修正のたびに作り直しが要ります。価格を焼き込むと、値上げのたびに全点差し替えです。
• 商品ごとに構成が違う。 担当者ごとに書き方が変わると、比べたお客様が迷います。入力欄を決め、埋めるだけの形にします。
• 写真を無圧縮で載せる。 数MBの写真を並べると、スマートフォンでは表示前に閉じられます。登録時に自動で縮小します。

1点直すのは簡単でも、500点直すのは別の工事です。制作会社を選ぶ段階で、この3点の扱いを聞いてみてください。ECサイト制作会社の選び方のとおり、運用のしやすさは見積書に出てこない差です。

14制作会社に依頼する範囲｜自社でやることとの線引き

要点： 制作会社に頼むのは、構成の設計、テンプレートの実装、管理画面の作り込みです。商品ごとの説明文と写真は、商品を知る自社で用意するほうが早く、安く、内容も濃くなります。

「どこまで頼めますか」とよく聞かれます。線引きはひとつです。全商品に共通する部分は制作会社、1商品ごとに変わる部分は自社。

1. 制作会社に頼む部分。 情報の並び順、テンプレートの実装、入力欄の設計、画像の自動圧縮、構造化データ、決済連携。
2. 自社で用意する部分。 商品ごとの説明文、写真、サイズ表、よくある質問。商品を知る人が書くのがいちばん早く済みます。
3. 相談して決める部分。 主力商品の撮影と、最初の数十点の登録。ここだけ手伝ってもらい、残りを社内で回す形です。

撮影を丸ごと外注すると費用が伸びます。主力の10点だけ外部で撮り、見本に残りを社内で撮る進め方がおすすめです。決済方法の選び方のような仕様は制作会社と詰め、中身は自社で持つ。この形が長く続きます。

15まとめ｜商品ページを作る5つの手順

要点： 並び順を紙で決め、写真を6カットそろえ、費用と納期を上に出し、説明文を場面から書き、テンプレートに落とす。この順なら点数が増えても品質を保てます。

進め方を5つの手順にまとめます。

1. 並び順を紙で決める。 スマートフォンの1画面に何を収めるかを決めます。ここが全商品の土台です。
2. 写真を6カットそろえる。 全体、別角度、使用場面、大きさの比較、素材の寄り、付属品一式。1商品で試してから量産します。
3. 価格・送料・納期を上に出す。 税込価格、送料の目安、発送日を最初の画面に入れます。
4. 説明文を使う場面から書く。 特徴を3つほど見出しで区切り、仕様は表にします。
5. テンプレートに落とす。 入力欄とルールを固定し、担当者が変わっても同じ形で作れるようにします。

1商品で通すと、抜けた情報がはっきりします。ECサイトの制作では、並び順の設計から管理画面の作り込みまで含めてお引き受けしています。公開後に全商品を直すより、テンプレートを決めてから量産するほうが確実に安く終わります。

16よくある質問

要点： ご相談時にいただくことの多い質問です。写真の枚数、説明文の長さ、撮影の外注、テンプレートの作り直し、レビューがない場合の対応にお答えします。

1. 商品写真は何枚くらい必要ですか

6枚以上が目安です。担当した案件では、5枚までのページは説明文まで読まれた割合が44%、6〜9枚では68%でした。10枚を超えると伸びはほぼ止まります。全体、別角度、使用場面、大きさの比較、素材の寄り、付属品の6カットが基本です。

2. 商品説明文はどのくらいの長さが適切ですか

長さより構成です。仕様を上から並べた1,000文字より、使う場面から書いて特徴を3つ見出しで区切った600文字のほうが読まれます。仕様は表にまとめると、比較したい方が自分で探せます。

3. 商品写真は外注したほうがよいですか

全点を外注すると費用が伸びます。主力の10点ほどを外部で撮り、見本に残りを社内で撮るのがおすすめです。背景、明るさ、角度をそろえれば、社内撮影でも一覧の印象は整います。

4. 公開後にテンプレートを作り直せますか

作り直せますが、費用は公開前の数倍になります。全商品のデータを移し替える作業が出るためです。価格を画像に焼き込んでいる場合は、作り直しも加わります。並び順とテンプレートは公開前に決めるのが確実です。

5. レビューがまだ1件もない場合はどうすればよいですか

よくある質問で代用してください。実際に届いた問い合わせを、そのまま質問と回答の形で載せます。事業者が消費者を装ってレビューを書く行為は、令和5年10月1日から景品表示法違反です。購入後にレビュー依頼を送る仕組みを、公開時に組み込んでおきましょう。