商品スペックの見せ方は、レイアウトの問題ではなく理解しやすさの問題です。Baymard Institute は主要 EC サイト 344 社をベンチマークし、そのうち 82% に商品ページの深刻なユーザビリティ問題があることを示しました。しかもスペック欄の損失は表に出ません。スペック表が読めませんでした、とわざわざメールしてくる人はいないからです。買い手はただ、疑問により早く答えてくれた出品ページで購入します。
結論から言えば、スペック表と注記入り画像は役割が別で、売れる商品ページには両方が必要です。以下の 6 つの問いが、どの数値をどこに置くかを決めます。回答は調査データと、輸出向けの出品ページで実際に起きていることの両方にもとづいています。
すべてのカテゴリーに通用する唯一の正解はありません。あるのはテキストと画像の正しい役割分担で、成果の出ていない出品ページはほぼ例外なく、同じ方向にその分担を誤っています。
スペックは表に入れるべきか、画像に描くべきか
両方です。そしてこの分担は好みの問題ではありません。
スペック表は機械可読なテキストです。検索エンジンはこれをインデックスし、モールの絞り込み機能はこれを読み、翻訳ツールは変換し、スクリーンリーダーは読み上げ、AI ショッピングアシスタントはここから情報を抽出します。一方、注記入り画像は理解のための装置です。42 cm がドアや手、パレットと並んだときにどう見えるかを買い手に伝えます。数値を運ぶのはテキスト、その数値の意味を運ぶのが画像です。
スケール比較画像とは、買い手がすでに大きさを知っている基準物 —— 人、ドア、手、標準パレットなど —— を写し込んだ商品写真のことです。 大きさを計算させるのではなく、読み取らせるための一枚です。Baymard の調査では、ユーザーの 42% が商品全体のスケールや大きさを画像から把握しようとする一方、ベンチマーク対象サイトの 28% はスケール比較画像を一枚も用意していませんでした。4 分の 1 のサイトが決して提供しない情報を、かなりの割合の買い手が探していることになります。
| スペック表 | 注記入り画像 / スケール比較画像 | |
|---|---|---|
| 主な役割 | 精度と比較 | 理解と大きさの実感 |
| 機械可読 | はい | いいえ |
| 多言語にそのまま流用できるか | できる | 言語ごとに書き出し直しが必要 |
| 「置けるか」に答えられるか | 遅い | 即座 |
| 「公差は正確にいくつか」に答えられるか | 答えられる | 答えられない |
| 買い手が先に見るのは | ギャラリーを見たあと | ギャラリーの中で |
購入判断を左右する項目は、両方で扱ってください。全体幅は表に載せ、さらに画像にも描きます。ねじピッチは表だけで十分です。
買い手が最初に確認する商品スペックはどれか
上から順には読みません。家具・産業機材・建材の調達では、買い手はまず少数の項目だけを拾い、それを確認してから残りを読みます。これはプラットフォームの規則ではなく実務上の慣行ですが、カテゴリーをまたいで驚くほど一貫しています。
| 段階 | 項目 | なぜ最初に見られるのか |
|---|---|---|
| 1 | 外形寸法、重量、耐荷重 | 収まるか、送料はいくらか、問い合わせを続けるかが決まる |
| 2 | 素材、仕上げ、グレード | 品質の階層と価格帯が決まる |
| 3 | 適合・互換寸法(ねじ、VESA、開口部、ラフ開口) | 手持ちの物と組み合わせられるかが決まる |
| 4 | 梱包データ(カートン寸法、CBM、入数) | ランデッドコストが決まる |
| 5 | 認証、試験規格、保証 | 社内のコンプライアンス確認を通るかが決まる |
ダウンロード資料を作るときも優先順位は同じです。読まれる製品仕様書の作り方で示した項目の並びは、買い手がページ上で拾い読みする順番と一致しています。
スペックは何項目まで読まれるのか
問題が「項目が少なすぎる」ことはほとんどありません。区切りのない一塊になっていることが問題です。
Baymard のスペック表調査は具体的な数字を示しています。50% のサイトはスペック表の設計が拾い読みしづらく、23% は関連する項目を見出し付きのサブセクションにまとめておらず、重要スペックの要約を置いているのはわずか 3%、23% は拾い読みを助ける視覚的な書式を一切使っておらず、20% は多段組みのレイアウトを読者に強います。さらに 52% はサプライヤーから受け取ったデータを加工しないため、同じ種類の商品なのに項目名も単位も異なります。
最後の 1 点は輸出向けでは致命的です。ある SKU が「幅 600 mm」、次が「W: 23.6 in」と書いてあれば、買い手は両方を信用しなくなります。
効果の大きい順に、やるべきことは次のとおりです。
- まず5〜7 行の主要スペック要約を置きます。第 1 段階の項目だけで、それ以外は入れません。これをやっているサイトは 3% しかないため、ほぼ無償の差別化になります。
- 全項目の表は見出し付きのサブセクションに分けます。寸法、素材、梱包、法規適合の 4 つです。
- 主となる単位系を 1 つに決め、換算値は別の列ではなく同じセルに入れます。
- 工場から届くシートがどうであれ、同一カテゴリー内のすべての SKU で項目名を揃えます。
寸法は商品ページのどこに置くべきか
3 か所に、この順番で置きます。
- 画像の上。 全体の幅・奥行き・高さを、実際にその寸法が走っている位置に描きます。大半の買い手が読むのはこのバージョンだけです。
- 主要スペック要約の中。 同じ 3 つの数値をテキストで、単位を省略せずに書きます。
- 全項目の表と構造化データの中。 モールの絞り込み機能と AI 回答エンジンが読み取るのはここです。空欄になりがちな項目については商品寸法の構造化データをご覧ください。
多くの出品ページが静かに失敗するのは 1 番です。理由は意見の相違ではなく、たいていは制作コストにあります。写真の上に正確な寸法線を手で描く作業は遅く、しかも決まった形で破綻します。目分量で引いた矢印は実際のエッジから数ミリずれ、その隣に書いた数値が商品と合わなくなるのです。解決策は「もっと良い写真を撮る」ことではありません。実測した寸法を画像に固定するソフトウェアを使うことです。計測を商品のエッジにスナップさせ、実際の値を一度だけ入力し、あとは各プラットフォームの画像サイズで書き出します。計測を一切せずにそれらしい寸法図を生成するツールは、読み手を納得させながら実際には間違っている数値を作ります。これは数値がない状態より悪いことです。メイン画像の誤った寸法は、提出されるのを待っている商品情報相違のクレームそのものだからです。
同じファイルがカタログと見積書の両方に使われることが多く、輸出事業者が製品仕様書作成ツールの出力として二度ではなく一度だけ作るのはそのためです。
スペックが画像の中にしか存在しないと、何が壊れるのか
ピクセルから先のすべてです。
- 検索と絞り込み。 モールは読めない数値で絞り込めません。画像内のテキストは、あなたが表示されるかどうかを決める絞り込み機能から見て存在しないのと同じです。
- アクセシビリティ。 W3C の WCAG に画像内テキストに関する達成基準があるのは、画像に焼き込まれた文字が拡大も書式変更もできず、支援技術で確実に読み取れないからです。
- 翻訳。 11 言語版は表をそのまま引き継げます。画像は言語ごとに書き出し直しが必要で、だからこそ重要な数値はテキストとしても存在しなければなりません。
- AI 回答エンジン。 ショッピングアシスタントが商品を要約するとき、読んでいるのはテキストです。ピクセルとしてしか存在しないスペックは、その回答に入りません。
- サムネイル。 全画面表示を前提に決めた文字サイズは、ギャラリーの一覧では消えます。注記がタイルサイズで生き残るかどうかは、商品画像の文字サイズのルールで決まります。
ここから導かれる原則があります。買い手が絞り込み・比較・見積もりに使う可能性のある数値は、画像に描いてある場合でも、必ずページ上のどこかにテキストとして存在させること。
スマートフォンでは話が変わるのか
変わるのは順序です。スマートフォンでの商品スペックの見せ方はギャラリーが決めます。モバイルではギャラリーがページそのもので、スペック表はスクロールの先、しばしばタップの向こう側にあるからです。
ここで効いてくる Baymard の指摘が 2 つあります。EC サイトの 25% は商品画像の解像度や拡大のレベルが不十分で、モバイルサイトの 76% は追加商品画像にサムネイルを使っていないため、買い手は寸法画像の存在にすら気づけません。この 2 つが重なると、よくある失敗になります。出品者は良い寸法図を作ったのに、スマートフォンでは誰も見つけられず、読むこともできない、という状態です。
実務上の帰結は次のとおりです。
- 寸法画像はギャラリーの2 番目か 3 番目に置きます。7 番目ではありません。
- 注記はタイルサイズの第一印象で成立するように設計し、拡大した人には細部で報います。
- 主要スペック要約はレビュー枠の下ではなく、モバイルのファーストビュー内に置きます。
商品スペックの見せ方:10 項目の点検リスト
カタログ全体に展開する前に、まず 1 つの出品ページで確認してください。
- ギャラリーに、見慣れた基準物が写ったスケール比較画像が 1 枚以上ある
- 外形寸法が画像・要約・全項目表の 3 か所に出ている
- 主要スペック要約は 5〜7 行で、全項目表より上にある
- 全項目表が見出し付きのサブセクションに分かれている
- 同一カテゴリーのすべての SKU で項目名と単位が揃っている
- 主となる単位と換算値が同じセルに入っている
- ピクセルとしてしか存在しない重要な数値がない
- 寸法画像がギャラリーの 2 番目か 3 番目にある
- 注記がサムネイルサイズでも判読できる
- 構造化データに幅・高さ・奥行き・重量が入っている
早見表
| 買い手の疑問 | 答えを置く場所 | 形式 |
|---|---|---|
| 実際どのくらいの大きさか | ギャラリー 2〜3 番目の画像 | 寸法線入りのスケール比較写真 |
| 自分のスペースに収まるか | 画像と主要スペック要約 | 注記した全体の 幅 x 奥行き x 高さ |
| 素材は何か | 主要スペック要約 | テキスト、1 行 |
| 手持ちの機器と合うか | 全項目表の適合セクション | テキストと公差 |
| カートン 1 箱の送料はいくらか | 全項目表の梱包セクション | テキスト、カートン寸法と CBM |
| 自国市場の認証はあるか | 全項目表の法規適合セクション | ロゴではなく規格番号 |
よくある質問
商品スペックは表と商品説明文のどちらに書くべきですか
表です。説明文は数値を文章の中に埋めてしまうため拾い読みに時間がかかり、絞り込み機能や AI アシスタントも抽出しづらくなります。説明文は用途・仕上げの選択肢・リードタイムといった文脈のために残し、測定できる事実はすべてグループ分けした表に移してください。
出品ページのどこに寸法を載せればよいですか
まず画像の上、次に 5〜7 行の主要スペック要約、最後に全項目のスペック表と構造化データです。買い手は画像を読み、機械はテキストを読みます。成約するためにも、見つけてもらうためにも、両方が必要です。
商品スペックは何項目まで表示すべきですか
すべて表示しますが、一度にではありません。購入を決める 5〜7 項目を先に出し、その下にグループ分けした完全な表を置きます。主要スペック要約を使っているサイトは 3% しかないと Baymard は報告しており、だからこそ実施しているサイトは目に見えて読みやすく感じられます。
買い手は本当にスマートフォンでスペック表を読みますか
スマートフォンではギャラリーを、デスクトップでは表を読みます。だからこそ重要な寸法は両方に置く必要があります。モバイルサイトの 76% が追加画像のサムネイルを出していない以上、ギャラリー 7 番目に埋もれた寸法図はスマートフォン上では存在しないのと同じです。
スペックをすべて商品画像に入れてしまってもよいですか
いけません。画像に焼き込まれた文字は絞り込みも翻訳も拡大もできず、支援技術でも読めず、サムネイルサイズでは消えます。収まるかどうかを決める 2〜3 個の数値を画像に描き、そのうえですべての数値をテキストでも保持してください。正確な寸法線を引くことがボトルネックなら、それは画像をやめるのではなく、実測にもとづく注記で解決すべき制作上の課題です。
出典・参考資料
- Baymard Institute —— 商品ページのユーザビリティ:主要 344 サイトのベンチマークで 82% に深刻な UX 問題
- Baymard Institute —— 商品スペック表:50% のサイトが拾い読みしづらい設計、グループ分け・要約・書式・段組みの調査結果
- Baymard Institute —— スケール比較画像を最低 1 枚:28% のサイトが未提供、ユーザーの 42% は画像で大きさを判断
- W3C —— WCAG 達成基準 1.4.5「文字画像」の解説
- Schema.org —— Product:構造化商品データ用の width、height、depth、weight プロパティ
- GS1 —— Mobile Ready Hero Images 標準:タイルサイズにおける商品情報の可読性
