画面・機能Product detail page・詳細ページ
商品詳細ページ
商品詳細ページとは、1つの商品の写真・価格・オプション・配送・交換の案内をまとめ、お客様に「買おう」と決めてもらうためのページです。
店頭でスタッフが商品を手に取って、一つひとつ説明してくれる時間のようなものです。オンラインでは、このページがスタッフの代わりに説明します。
もう少し詳しく
お客様が買う前に聞きたいこと(サイズ・素材・配送期間・交換の可否)に、ページが先回りして答えておく必要があります。
縦長の画像1枚で作った詳細ページはよく見かけますが、画像の中の文字は検索エンジンやAIには読み取りにくいものです。重要な情報は文字でも書いておくのがおすすめです。
オンライン販売では、商品の種類ごとに必ず表示すべき情報(商品情報提供告示)と、交換・返金の案内が定められています。
商品詳細ページにはどんな順番で情報を載せる?
詳細ページは、上から「買うかどうかを決める情報」、下に行くほど「確認するための情報」の順に並べれば大丈夫です。お客様は写真・価格・オプションを見て興味がわいたら、そこで下にスクロールして配送・交換などの詳しい内容を確認します。
ユーザビリティ研究機関のNielsen Norman Groupも、商品ページではお客様が価格・オプション・配送などの重要な情報をすばやく見つけられることが大切だと強調しています。情報がページのあちこちに散らばっていると、お客様は質問を残すか、そのまま離れてしまいます。
スマホではこの順番がさらに重要です。画面が狭いので、写真のすぐ下に価格・オプション・購入ボタンが見えないと、お客様は商品が気に入っても、どこで買えばいいのか探すのに時間を使ってしまいます。
表は横にスワイプして見られます
| 位置 | 載せる情報 | 理由 |
|---|---|---|
| いちばん上 | メイン写真、商品名、価格、オプション、購入ボタン | 買うかどうかを決めるのに必要な情報 |
| そのすぐ下 | ひと言での特徴、主なメリット3つ | なぜこの商品なのかをすばやく伝える |
| 中ほど | ディテール写真、使用シーン、サイズ・素材の説明 | 実物を見られない部分を補う |
| 下のほう | 口コミ、よくある質問 | ほかのお客様の体験で迷いを減らす |
| いちばん下 | 商品情報提供告示、配送・交換・返金の案内 | 必ず伝えるべき情報をもれなく載せる |
商品情報提供告示には何を書けばいい?
商品情報提供告示とは、公正取引委員会(韓国)が定めた「電子商取引等における商品等の情報提供に関する告示」のことで、商品群ごとに必ず表示すべき項目が決められています。たとえば衣類なら素材・色・サイズ・製造者・洗濯方法、加工食品なら原材料・内容量・消費期限といった項目が入ります。
自分の商品がどの商品群に当てはまるかをまず確認し、その商品群の項目を表にまとめておけば大丈夫です。正確な項目は、国家法令情報センター(韓国)の告示原文で確認できます。
販売者情報と申込みの撤回(購入キャンセル)の案内もあわせて用意しましょう。電子商取引法(韓国)は、商号・代表者・事業者登録番号などの販売者情報の表示と、商品を受け取った日から7日以内の申込みの撤回を基本として定めています。ただし例外もあるので、原文を確認するか専門家に相談してください。
詳細ページの写真はどう撮って、どう選べばいい?
写真は、お客様が店頭で商品を手に取って確認することを、代わりに見せる役割を果たす必要があります。そのため、きれいなメイン写真1枚よりも、それぞれ違う役割を持つ写真を何枚か用意するほうが役に立ちます。
実物の色と違って見えるように補正した写真は、交換・返品のいちばんよくある理由のひとつです。自然光で撮影し、色が重要な商品には「画面によって色が多少異なる場合があります」のような案内も添えましょう。
写真は多いほどよいですが、重くなってはいけません。詳細写真は画面サイズに合わせて縮小し、下のほうの写真はあとから読み込むようにすれば、たくさん写真を載せても最初の画面は遅くなりません。
自分で撮るのが難しければ、メイン写真だけでもプロに任せ、ディテール・使用シーンはスマホで撮っても大丈夫です。大切なのは、写真ごとに役割がはっきりしていることです。
- メイン写真:明るい背景で、商品全体がひと目でわかるように
- ディテール写真:素材、仕上げ、縫い目・釉薬などの近くで見た様子
- サイズ比較の写真:手・カップ・定規のように大きさの見当がつくものと一緒に
- 使用シーンの写真:実際に使ったり着たりしている様子
- セット内容の写真:箱の中に何が入っているか
詳細ページはどんな手順で作ればいい?
デザインから始めるより、お客様の質問を集めるところから始めるのが正しい順番です。質問への答えがまとまれば、写真と文章はその答えを見せる役割を果たすだけで済みます。
文章を書くのに困ったら、お客様の質問を見出しに、答えを本文にそのまま移しても大丈夫です。「ギフト包装はできますか?」という質問の下に「はい、包装とメッセージカードをお付けします」のように書けば、読みやすい詳細ページになります。
写真と文章を分けて載せておくと、あとで価格やオプションが変わったときにも直しやすくなります。縦長の1枚画像だと、文字が1つ変わるだけでも画像を作り直さなければなりません。
- 01店頭・メッセージでお客様からよく聞かれる質問を10個ほど集めます。
- 02商品情報提供告示で、自分の商品群の必須項目を確認します。
- 03質問と必須項目への答えを、まず文章でまとめます。
- 04答えを見せるための写真のリストを決めて撮影します。
- 05上の表の順番どおりに写真と文章を配置します。
- 06スマホで、価格・オプション・購入ボタンがスクロールせずに見えるか確認します。
- 07公開後に届く質問を見て、よくある質問の欄に追加し続けます。
検索エンジンやAIに商品情報を正しく読み取ってもらうには?
重要な情報を文字で書き、「構造化データ」でもう一度伝えれば大丈夫です。構造化データとは、商品名・価格・在庫・口コミの評価などの情報を、検索エンジンが読みやすい形式でページに書いておく設定です。
Google検索セントラルは、商品の構造化データを入れると、検索結果に価格・在庫・評価などの情報があわせて表示される場合があると案内しています。ただし表示するかどうかはGoogleが判断するので、入れたからといって必ず表示されるわけではなく、構造化データにはページに実際に表示されている情報と同じ内容を書く必要があります。
縦長の1枚画像だけで作った詳細ページは、この点で不利です。画像の中の文字は検索エンジンやAIが正確に読み取りにくいので、同じ情報を文字でも残しておくのがおすすめです。
AI検索が商品を紹介するときも、ページの文章をもとに回答を作るので、素材・サイズ・使い方などの情報を文章で書いておくと、自分の商品が正確に紹介される可能性が高まります。
業種別の例とよくある失敗は?
小さなお店は商品数が少ない分、1つの商品のストーリーを深く見せることができます。下の例のように業種に合った情報を1つずつ加えていけば、大きなショッピングモールとは違う強みが生まれます。
よくある失敗は、送料や交換のルールをページのいちばん下に小さな文字でしか載せないことです。決済の直前に初めて送料を目にすると、お客様は購入をやめてしまいやすいので、価格の近くに送料もあわせて書いておきましょう。
オプションの価格を隠すのも避けましょう。基本価格だけを大きく書き、オプションを選ぶたびに金額が上がると、お客様はがっかりしやすいので、オプションごとの価格を最初から一緒に見せるのがおすすめです。
制作会社には、商品登録画面で告示の項目・オプション・送料をオーナー様が自分で入力できるか、縦長の1枚画像ではなく文章と写真を分けて載せられるかを確認しましょう。
- 工房の陶器:手作りのため一つひとつ形・色が少しずつ違うという案内、食洗機・電子レンジの使用可否。
- カフェのドリップバッグセット:焙煎日、コーヒー豆の産地、ギフト包装・メッセージカードのオプション。
- 美容室のホームケア製品:使う順番、髪質別のおすすめ、内容量と使用期間。
- オンラインの衣類:実寸のサイズ表、モデルの身長・着用サイズ、洗濯方法。
たとえば
- 工房の指輪:サイズの測り方、素材、制作期間、刻印の可否を、写真の下に文章でまとめます。
- カフェのコーヒー豆:産地・焙煎日・味の説明・挽き方のオプションを表で見せます。
これだけは確認してください
- 価格・オプション・配送期間・交換ルールが文字で書かれているか
- 実物と同じ色味の写真か
- お客様によく聞かれる質問の答えがページ内にあるか
うちのお店には?
ホームページで商品を販売したり紹介したりするなら必要です。
ISSYMOでは
機能カスタマイズホームページの「ショッピングモール・コマースタイプ」には、商品販売・オンライン決済が標準で含まれています。ほかのタイプやランディングホームページには、「商品販売」オプションで商品一覧と詳細、カート・注文まで追加できます。文章づくりが負担なら「文章作成代行」オプションもあります。
オプションを見るよくある質問
参考にした資料
最終更新日