商品カード設計完全ガイド｜使いやすく購入しやすいECサイトのUI改善方法

ECサイトの商品カードは、商品画像、商品名、価格、評価、在庫、配送情報、購入ボタンなどを小さな領域にまとめて表示する重要な接点です。利用者は商品カードを見ながら、商品を詳しく確認する価値があるか、他の商品と比較すべきか、その場で購入すべきかを短時間で判断します。そのため、情報を多く掲載するだけでは、購入しやすい商品カードにはなりません。

情報が不足している商品カードでは、利用者が商品詳細ページを何度も開く必要があります。一方、情報を詰め込みすぎた商品カードでは、価格や商品の違いを把握しにくくなります。使いやすさを高めるには、購入判断に必要な情報を優先し、視線の流れに沿って配置しなければなりません。

本記事では、商品カードの情報設計、商品画像、価格、割引、評価、在庫、配送、購入ボタン、スマートフォン表示、アクセシビリティ、実装方法、効果測定まで詳しく解説します。商品一覧を見やすくするだけでなく、商品詳細ページへの移動率、カート追加率、購入率を高めるための実務的な設計方法を紹介します。

1. 商品カードとは

商品カードとは、ECサイトの商品一覧、検索結果、関連商品、ランキング、特集ページなどで、一つの商品に関する主要情報をまとめて表示する画面部品です。商品カードの目的は、単に商品を並べることではなく、利用者が短時間で商品の特徴を理解し、次の行動を選べるようにすることです。

優れた商品カードでは、商品を探している段階、比較している段階、購入を決めている段階の利用者が、それぞれ必要な情報へ素早く到達できます。商品カードを単なる縮小版の商品詳細ページとして設計せず、一覧画面に適した役割を明確にする必要があります。

1.1 商品一覧における商品カードの役割

商品一覧では、利用者が多数の商品を短時間で確認します。商品カードは、一つひとつの商品を識別し、候補を絞り込むための入り口として機能します。商品画像、商品名、価格などの違いがすぐ分からなければ、利用者は比較に時間を使い、離脱しやすくなります。

商品カードには、商品を購入候補へ入れるための十分な情報が必要です。ただし、すべての仕様を表示する必要はありません。商品の選択に強く影響する情報をカード上に置き、詳しい仕様や説明は商品詳細ページへ分けます。

1.2 商品詳細ページとの違い

商品詳細ページは、一つの商品について詳しく説明し、購入への不安を解消する場所です。商品カードは、複数商品の中から候補を選ぶ場所であり、情報量と利用目的が異なります。

商品詳細ページの内容を小さく縮めてカードへ入れると、文字が増え、重要情報が見つけにくくなります。商品カードでは、商品識別、比較、購入判断に必要な情報だけを残し、詳しい説明は段階的に表示します。

1.3 購入しやすさを支える役割

購入しやすい商品カードでは、利用者が「何の商品か」「いくらか」「いつ届くか」「購入できるか」をすぐ理解できます。必要情報を探すために視線を何度も移動させる設計では、購入判断に余計な負担がかかります。

購入しやすさは、購入ボタンを大きくするだけでは向上しません。商品情報への理解、価格への納得、在庫への安心、操作結果への確信がそろって初めて、利用者は購入行動へ進めます。

1.4 売上へ与える影響

商品カードの改善は、商品詳細ページへの移動率、カート追加率、一覧ページからの購入率などへ影響します。商品自体に魅力があっても、一覧で価値が伝わらなければ、詳細ページを開いてもらえません。

特に広告や検索から一覧ページへ流入するECサイトでは、最初に表示される商品カードが売上を左右します。カードの表示順、情報の見せ方、価格表現、画像品質をまとめて改善する必要があります。

1.5 商品カテゴリによる違い

商品カードに必要な情報は、商品カテゴリによって異なります。衣類では色やサイズ、食品では内容量や賞味期限、家電では主要性能、家具では寸法や配送条件が重要です。

すべてのカテゴリへ同じ構成を適用すると、利用者が必要とする情報が不足する場合があります。共通部分を維持しながら、カテゴリ固有の判断項目を追加できる構造にします。

2. 購入判断に必要な情報を決める方法

商品カードを設計する前に、利用者が商品を選ぶ際に何を確認しているかを把握します。制作担当者が掲載したい情報ではなく、利用者の判断に影響する情報を優先しなければなりません。

必要情報は、アクセス解析、検索語句、問い合わせ内容、返品理由、レビュー、接客記録などから確認できます。感覚だけで情報を選ばず、実際の購入行動をもとに決めることが重要です。

2.1 商品識別に必要な情報

利用者が最初に確認するのは、何の商品であるかです。商品画像、商品名、ブランド名、型番などが商品識別を支えます。似た商品が多い場合は、容量、世代、用途などの違いも必要になります。

商品名だけで違いが分からない場合、短い補足情報を追加します。例えば「500ミリリットル」「屋外用」「二人掛け」など、比較時に重要な特徴を一行で示すと選びやすくなります。

2.2 価格判断に必要な情報

価格は購入判断へ直接影響するため、商品カード内で見つけやすく表示します。販売価格だけでなく、税込表示、送料、定期購入条件、数量単価なども必要に応じて示します。

割引商品では、通常価格、割引後価格、割引率の関係を明確にします。価格情報が複数ある場合でも、現在支払う金額を最も強く表示し、補助情報との優先順位を分けます。

2.3 品質判断に必要な情報

利用者は、商品を手に取れないため、画像、レビュー、ブランド、素材、保証などから品質を推測します。商品カードでは、品質判断に強く影響する情報を短く示します。

ただし、「高品質」「人気」「おすすめ」のような根拠のない表現を並べても信頼は高まりません。評価件数、販売実績、認証、保証期間など、確認可能な情報を優先します。

2.4 配送判断に必要な情報

すぐ商品が必要な利用者にとって、価格より配送日が重要な場合があります。最短到着日、発送までの日数、送料無料条件、店舗受取可否などを商品カードで確認できると、候補を絞りやすくなります。

配送情報を一律に表示するのではなく、利用者の地域、注文時間、在庫拠点によって変化する場合は動的に表示します。確定していない到着日を断定しないよう注意します。

2.5 購入可能性を判断する情報

商品が在庫切れ、予約商品、受注生産、残りわずかである場合、その状態を購入前に理解できる必要があります。購入ボタンを押した後で在庫切れが分かる設計は、利用者の不満につながります。

色やサイズを選ばなければ購入できない商品では、カード上で選択可能な種類を表示します。すべての選択肢を表示すると複雑になる場合は、利用可能数や代表的な選択肢だけを示します。

3. 商品カードの情報優先順位を設計する方法

商品カードには限られた表示領域しかありません。すべての情報を同じ大きさ、同じ色、同じ間隔で表示すると、利用者はどこから見ればよいか分からなくなります。

情報の優先順位は、文字サイズ、太さ、色、余白、配置によって表現します。装飾を増やすより、重要情報と補助情報の差を明確にすることが大切です。

3.1 第一優先情報を決める

第一優先情報は、商品画像、商品名、現在価格など、商品を識別して購入候補へ入れるために欠かせない情報です。これらは、スクロール中でも短時間で認識できるようにします。

第一優先情報を増やしすぎると、すべてが目立たなくなります。利用者調査や販売データをもとに、商品カテゴリごとに三つから四つ程度へ絞る方法が有効です。

3.2 第二優先情報を決める

第二優先情報には、評価、割引、配送予定、主要仕様などが含まれます。購入候補になった商品をさらに比較する際に使われる情報です。

第一優先情報より小さく表示しても構いませんが、読みにくくしてはいけません。文字色を極端に薄くするのではなく、余白や文字サイズで優先順位を表現します。

3.3 補助情報を分ける

在庫詳細、色数、ポイント、キャンペーン条件などは、商品によって必要性が異なります。補助情報を常に表示するとカードが長くなるため、条件に応じて表示します。

例えば、送料無料が通常条件である場合、すべての商品カードへ大きく表示する必要はありません。一部商品のみ送料がかかる場合に、その商品へ注意情報を表示する方が比較しやすくなります。

3.4 情報の表示順を統一する

商品ごとに価格や評価の位置が変わると、利用者はカードを見るたびに情報を探し直す必要があります。商品一覧では、同じ種類の情報を同じ位置へ配置します。

商品名の長さや割引情報の有無によって配置が崩れないように、カードの内部構造を決めます。空欄を残すか、条件付き情報を別領域へ配置するかを設計段階で決めます。

3.5 視線の流れを設計する

一般的な商品カードでは、商品画像、商品名、評価、価格、配送情報、購入操作の順に視線が移動します。ただし、横長カードや業務用ECでは異なる場合があります。

視線の流れに逆らう位置へ重要情報を置くと、利用者が見落とします。実際の画面で視線追跡や操作観察を行い、想定した順序で情報が確認されているか検証します。

4. 商品カードのレイアウトを設計する方法

商品カードのレイアウトは、商品数、画面幅、情報量、比較方法によって決めます。縦長カード、横長カード、一覧形式など、それぞれに適した用途があります。

見た目の新しさだけでレイアウトを選ぶのではなく、商品を比較しやすいか、重要情報を見落とさないか、スマートフォンで操作しやすいかを確認します。

4.1 縦長カードを使用する場合

縦長カードは、商品画像を上部に大きく表示し、その下へ商品名や価格を配置する一般的な形式です。衣類、食品、雑貨など、見た目が購入判断へ強く影響する商品に適しています。

複数列で並べやすい一方、商品名や説明が長いとカードの高さが変わります。画像比率、商品名の最大行数、情報領域の高さを統一すると、一覧性を維持できます。

4.2 横長カードを使用する場合

横長カードは、左側へ画像、右側へ商品情報を配置する形式です。仕様や配送条件など、文字情報を多く表示したい場合に適しています。

スマートフォンでは横幅が不足しやすいため、画像が小さくなりすぎないよう注意します。狭い画面では縦配置へ切り替える設計が必要です。

4.3 一覧形式を使用する場合

表に近い一覧形式は、型番、容量、価格、在庫、納期などを細かく比較する業務用ECや部品販売に適しています。画像より数値や仕様が重要な商品で有効です。

ただし、項目数が多すぎると横スクロールが必要になります。重要項目を固定し、詳細項目は展開表示や商品詳細ページへ分けます。

4.4 カード間の余白を決める

商品カード間の余白が狭すぎると、どの価格やボタンがどの商品に属するか分かりにくくなります。反対に、余白が広すぎると、一画面に表示できる商品数が減ります。

カードの境界は、余白、背景色、枠線、影などで表現できます。装飾を重ねすぎず、情報のまとまりが自然に理解できる方法を選びます。

4.5 カードの高さをそろえる

同じ行に並ぶカードの高さが大きく異なると、価格や購入ボタンの位置がそろわず、比較しにくくなります。商品名、補足文、ラベルの最大表示行数を設定する方法があります。

ただし、重要な情報を途中で切り捨ててはいけません。全文を確認できる商品詳細ページへの移動、展開表示、利用可能な名前の設定などを組み合わせます。

コード例：商品カードの格子配置

.product-grid {
 display: grid;
 grid-template-columns: repeat(
   auto-fill,
   minmax(min(100%, 16rem), 1fr)
 );
 gap: 1.5rem;
}

.product-card {
 display: flex;
 flex-direction: column;
 min-width: 0;
 height: 100%;
 border: 1px solid #d1d5db;
 border-radius: 0.75rem;
 background-color: #ffffff;
 overflow: hidden;
}

.product-card__body {
 display: flex;
 flex: 1;
 flex-direction: column;
 padding: 1rem;
}

.product-card__actions {
 margin-top: auto;
 padding-top: 1rem;
}
 

5. 商品画像を見やすく表示する方法

商品画像は、商品カード内で最も大きな面積を占めることが多く、商品への第一印象を決めます。画像が小さい、暗い、切れている、商品ごとに比率が異なると、商品価値を正しく伝えられません。

画像品質を高めるだけでなく、一覧表示で比較しやすい統一感も必要です。商品の大きさや角度がばらばらでは、実際の商品差より撮影条件の差が目立ちます。

5.1 画像比率を統一する

商品一覧では、正方形、縦長、横長などの画像比率をカテゴリごとに統一します。比率が混在するとカードの高さが変わり、視線が安定しません。

元画像の比率が異なる場合は、背景余白を追加するか、表示領域内で収まるように調整します。商品の重要部分を切り落とす方法は避けます。

5.2 商品全体が分かる画像を使う

第一画像では、商品全体の形状、色、主要部分が分かる画像を使用します。細部の拡大画像や使用場面だけでは、何の商品か理解しにくい場合があります。

商品カードでは表示面積が小さいため、背景を単純にし、商品と背景の差を明確にします。装飾を増やすより、商品の輪郭が分かることを優先します。

5.3 画像内文字を減らす

商品画像へ割引、特徴、容量などの文字を大量に入れると、スマートフォンで読めなくなります。また、同じ情報がカード本文にもある場合、重複して画面が複雑になります。

重要情報は画像内へ焼き込まず、HTML上の文字として表示します。これにより、表示倍率、音声読み上げ、多言語化、内容変更へ対応しやすくなります。

5.4 二枚目画像を表示する

マウスを重ねた際に、使用場面、別角度、着用状態などの二枚目画像へ切り替えると、詳細ページを開かずに商品を理解できます。特に衣類や家具では有効です。

ただし、画像切り替えだけに重要情報を依存させてはいけません。マウス操作ができない利用者やタッチ端末でも、同じ情報へ到達できるようにします。

5.5 画像読み込みを最適化する

商品一覧では、多数の画像が同時に読み込まれます。画像が重いと表示が遅れ、カードの位置が後から変化して誤操作につながる場合があります。

表示サイズに適した画像を配信し、画像領域の幅と高さを事前に指定します。画面外の画像には遅延読み込みを使用しますが、最初に表示される主要画像まで遅らせないようにします。

コード例：商品画像を安定して表示する

<a class="product-card__image-link" href="/products/example">
 <img
   class="product-card__image"
   src="/images/product-480.webp"
   srcset="
     /images/product-320.webp 320w,
     /images/product-480.webp 480w,
     /images/product-720.webp 720w
   "
   sizes="(max-width: 640px) 50vw, 25vw"
   width="480"
   height="480"
   alt="白い持ち手が付いた青色の保温ボトル"
   loading="lazy"
 />
</a>
.product-card__image {
 display: block;
 width: 100%;
 aspect-ratio: 1 / 1;
 object-fit: contain;
 background-color: #f7f7f7;
}
 

6. 商品名と説明文を読みやすくする方法

商品名は、商品を識別し、検索結果や類似商品と区別するために使われます。ブランド名、用途、型番、特徴をすべて詰め込むと、長く読みにくい名称になります。

商品名と短い補足文の役割を分け、一覧で必要な特徴だけを表示します。検索対策のための語句を不自然に繰り返すことは、利用者の理解を妨げます。

6.1 商品名の構造を統一する

同じカテゴリ内では、商品名の順序を統一します。例えば「ブランド名、商品種類、主要特徴、容量」の順にすると、利用者が商品差を比較しやすくなります。

商品ごとに名称の付け方が異なると、同じ情報を探す位置が変わります。商品登録規則として、名称に含める項目と順序を決めます。

6.2 不要な販促表現を減らす

「大人気」「最高級」「今だけ」などの表現を商品名へ追加すると、本来の商品情報が見つけにくくなります。販促情報は、商品名とは別のラベルや説明領域へ配置します。

根拠のない強調表現が多いと、サイト全体の信頼性も低下します。商品名には、商品を正確に識別できる情報を優先します。

6.3 表示行数を管理する

商品名の長さが異なると、価格やボタンの位置がずれます。二行または三行まで表示し、それ以上は省略する方法があります。

省略する場合でも、商品名全体を利用可能な名前として残し、商品詳細ページで確認できるようにします。重要な型番や容量が末尾で切れないよう、名称の順序も調整します。

コード例：商品名を二行まで表示する

.product-card__title {
 display: -webkit-box;
 min-height: 3em;
 margin: 0;
 overflow: hidden;
 font-size: 1rem;
 font-weight: 700;
 line-height: 1.5;
 -webkit-box-orient: vertical;
 -webkit-line-clamp: 2;
}
 

6.4 補足文へ主要特徴を表示する

商品名だけでは違いが分からない場合、主要特徴を一行で補足します。素材、対象者、用途、容量など、比較に役立つ情報を選びます。

補足文へ複数の特徴を詰め込むと読みにくくなります。詳細仕様は商品詳細ページへ移し、一覧では一つから三つ程度の特徴へ限定します。

6.5 ブランド名を表示する

複数ブランドを扱うECサイトでは、ブランド名が購入判断へ影響します。商品名の先頭へ含めるか、別の小さな行として表示します。

自社商品だけを扱うサイトでは、すべての商品カードへ同じブランド名を表示する必要性は低くなります。限られた領域を、商品の違いを示す情報へ使用します。

7. 価格と割引を分かりやすく表示する方法

価格表示は、利用者が実際に支払う金額を誤解しないことが最優先です。通常価格、割引価格、会員価格、定期価格、ポイント還元などを同時に表示すると、どの金額が適用されるか分かりにくくなります。

価格を強く見せるだけでなく、適用条件を明確にします。小さな注意書きへ重要条件を隠す設計は、購入後の不満や問い合わせにつながります。

7.1 現在価格を最も強く表示する

現在購入できる価格を、価格領域内で最も目立たせます。通常価格や参考価格は補助情報として表示し、現在価格と同じ強さにしません。

通貨記号、桁区切り、税込表示を統一します。商品によって税表示の位置や形式が変わると、価格比較が難しくなります。

7.2 通常価格と割引価格を区別する

割引商品では、通常価格を取り消し線付きで表示し、割引後価格を強調します。ただし、取り消し線だけで価格状態を伝えず、「通常価格」「販売価格」などの意味も示します。

通常価格が実際に販売されていない価格である場合、利用者へ誤解を与えます。価格表示は、各地域の法令や表示規則に沿って運用します。

7.3 割引率と割引額を使い分ける

価格が高い商品では割引額、価格が低い商品では割引率の方が価値を理解しやすい場合があります。どちらが購入判断へ有効かは商品カテゴリによって異なります。

割引率と割引額を両方表示すると、情報が重複する場合があります。検証結果をもとに、利用者が短時間で理解できる形式へ絞ります。

7.4 単位価格を表示する

容量や数量が異なる商品では、一個あたり、100グラムあたり、1リットルあたりの価格を表示すると比較しやすくなります。販売価格だけでは、大容量商品が本当に割安か判断できません。

単位価格の計算単位をカテゴリ内で統一します。商品ごとに一個あたりと100グラムあたりが混在すると、比較機能として役立ちません。

7.5 定期購入価格を明確にする

定期購入商品では、初回価格だけを大きく表示すると、二回目以降の支払額を誤解される可能性があります。初回価格、通常価格、配送間隔、最低購入回数などを明確にします。

商品カード内ですべてを説明できない場合でも、重要条件を短く表示し、詳細条件へのリンクを近くに置きます。条件を確認せずにカートへ追加されない構造が必要です。

コード例：意味が分かる価格表示

<div class="product-price">
 <p class="product-price__previous">
   <span class="visually-hidden">通常価格</span>
   <del>6,600円</del>
 </p>

 <p class="product-price__current">
   <span class="visually-hidden">現在価格</span>
   <strong>4,980円</strong>
   <span class="product-price__tax">税込</span>
 </p>

 <p class="product-price__discount">通常価格から24％引き</p>
</div>
 

8. 評価とレビューを信頼につなげる方法

評価とレビューは、商品を使用した経験がない利用者の不安を減らします。しかし、星の数だけを表示しても、評価の信頼性や意味を判断できません。

平均評価、レビュー件数、評価分布、最新レビューなどを適切に組み合わせます。商品カードでは、比較に必要な最小情報を表示し、詳しい内容は商品詳細ページへ分けます。

8.1 平均評価を表示する

平均評価は、星の図形だけでなく数値でも表示します。星の塗り分けが見えにくい利用者でも、評価を理解できるようにするためです。

小数点以下を細かく表示しすぎると、実際以上に精密な印象を与えます。一般的には小数点以下一桁程度で十分です。

8.2 レビュー件数を併記する

平均評価が同じでも、二件の評価と二千件の評価では信頼度が異なります。レビュー件数を平均評価の近くへ表示します。

件数を目立たせすぎると、人気商品だけが選ばれ、新商品が発見されにくくなる場合があります。新商品には「新着」や「レビュー受付中」など、誤解のない状態表示を用意します。

8.3 星以外の表現を追加する

星の色だけで評価を伝えると、色の違いを認識しにくい利用者へ情報が伝わりません。「4.6／5、レビュー128件」のような文字を追加します。

音声読み上げでは、星の記号を五回読み上げないようにします。図形部分を読み上げ対象外とし、評価内容を一つの文章として提供します。

コード例：読み上げやすい評価表示

<a
 class="product-rating"
 href="/products/example#reviews"
 aria-label="5点満点中4.6点、128件のレビュー"
>
 <span class="product-rating__stars" aria-hidden="true">
   ★★★★★
 </span>
 <span class="product-rating__score">4.6</span>
 <span class="product-rating__count">（128件）</span>
</a>
 

8.4 レビューがない商品を扱う

レビューがない商品へ「0.0」と表示すると、品質が低い商品と誤解される場合があります。「レビューはまだありません」と状態を明確にします。

新商品であることが価値になる場合は、「新着商品」と表示します。ただし、発売から長期間経過している商品へ新着表示を残さないようにします。

8.5 不自然な評価表示を避ける

すべての商品が満点に近い場合、利用者は評価の信頼性を疑うことがあります。低評価を削除したり、対象レビューを不明確にしたりしてはいけません。

購入者確認済みレビュー、評価対象期間、投稿規則などを商品詳細ページで説明します。商品カードでは、詳細説明へ到達できるよう評価表示をリンクにします。

9. 色・サイズ・仕様の選択肢を表示する方法

色、サイズ、容量などの種類がある商品では、利用者が希望する選択肢を購入できるかが重要です。商品カード上で何も示さないと、詳細ページを開いた後に在庫切れが分かる場合があります。

一方、すべての種類を商品カードへ表示すると操作が複雑になります。カード上で選択させる範囲と、詳細ページで選択させる範囲を決めます。

9.1 色の選択肢を表示する

色見本を小さな円や四角で表示すると、利用可能な色を短時間で把握できます。ただし、色だけでは「紺色」と「黒色」などを区別しにくい場合があります。

色見本には文字による名前を設定し、選択時またはフォーカス時に確認できるようにします。白色など背景と区別しにくい色には境界線を付けます。

9.2 サイズの選択肢を表示する

衣類や靴では、希望サイズの在庫有無が購入判断へ強く影響します。主要サイズを商品カード上で表示すると、無駄な詳細ページ移動を減らせます。

サイズ数が多い場合は、すべてを並べず「6サイズ展開」などと表示します。カード上で直接購入させる場合のみ、実際のサイズ選択操作を提供します。

9.3 在庫切れの選択肢を区別する

在庫切れの色やサイズは、薄い色だけで示さず、取り消し線、文字、利用不可状態を組み合わせます。色だけに依存すると状態を判断できない利用者がいます。

在庫切れの選択肢を完全に非表示にすると、その商品に希望種類が存在すること自体を理解できません。再入荷予定がある場合は、通知登録への導線を提供します。

9.4 選択肢変更時に画像を更新する

色を選択した際に商品画像も同じ色へ変わると、利用者は選択内容を確認しやすくなります。選択状態と表示画像が一致しないと、誤購入につながります。

画像読み込みに時間がかかる場合は、読み込み状態を表示します。画像変更によってカード全体の高さが変わらないよう、画像領域を固定します。

9.5 商品カード内で選択させる条件

利用者が商品仕様を理解しており、選択肢が少ない場合は、商品カードから直接種類を選んでカートへ追加できます。消耗品や再購入商品で有効です。

選択肢が複雑、注意事項が多い、仕様によって価格が変わる商品は、詳細ページで選択させた方が安全です。購入速度だけでなく、誤購入率や返品率も考慮します。

10. 在庫と配送情報を分かりやすく表示する方法

在庫と配送は、購入できるか、いつ受け取れるかを判断する情報です。特に急ぎ購入では、価格よりも到着日が選択理由になる場合があります。

在庫を過度に急かす表現は、短期的な購入を増やしても信頼を損なう可能性があります。実際の在庫と配送能力に基づいて表示します。

10.1 在庫状態を明確にする

「在庫あり」「残りわずか」「在庫切れ」「予約受付中」など、利用者が理解できる状態名を使用します。社内用の在庫記号や曖昧な表現は避けます。

在庫数を表示する場合は、更新頻度と実在庫の差を確認します。複数チャネルで在庫を共有していると、表示数と購入可能数がずれる場合があります。

10.2 残り数量を表示する

残り数量は、購入判断に役立つ場合にのみ表示します。数量限定商品や欠品しやすい商品では有効ですが、常に「残りわずか」と表示すると信頼を失います。

表示基準を決め、「残り三点以下のみ表示」のように運用します。実在庫と連動しない演出目的の数量表示は避けます。

10.3 到着予定日を表示する

「最短翌日到着」「7月25日までにお届け」のような具体的な日付は、利用者が予定を立てやすくします。注文時刻、配送先、休日によって変わる条件を正確に反映します。

確定できない場合は、「通常二日から四日で発送」のように範囲を示します。発送日と到着日を混同しない表現が必要です。

10.4 送料を表示する

送料無料の場合でも、地域や注文金額による条件がある場合は明記します。「送料無料」と表示した後、購入画面で追加送料が発生すると離脱や不満につながります。

大型商品、冷蔵配送、離島配送などで追加費用がある場合、商品カード上で注意を示します。具体的な金額が住所入力後に決まる場合は、その条件を説明します。

10.5 予約商品と受注生産を区別する

予約商品は発売前または入荷前の商品、受注生産は注文後に生産する商品です。発送時期やキャンセル条件が異なるため、同じ「予約」として扱わないようにします。

通常商品と一緒に購入した場合の配送方法も説明します。すべてそろってから配送するのか、別々に配送するのかによって、送料と到着日が変わります。

11. 購入ボタンと操作導線を設計する方法

商品カードの購入操作には、商品詳細を見る、カートへ追加する、すぐ購入する、保存する、比較するなどがあります。操作を増やしすぎると、どれを選べばよいか分かりにくくなります。

最も重要な操作を一つ決め、他の操作との視覚的な差を付けます。すべてを強いボタンとして表示すると、カードが操作要素で埋まります。

11.1 主要操作を決める

選択肢が少ない商品では「カートに追加」、高価格商品や説明が必要な商品では「商品を見る」が主要操作になります。商品カテゴリと購入行動に合わせて決めます。

一覧画面全体で主要操作を統一すると、利用者が操作方法を学びやすくなります。商品ごとにボタン名や位置を変えないようにします。

11.2 ボタン文言を具体的にする

「詳しくはこちら」より「商品詳細を見る」、「追加」より「カートに追加」の方が操作結果を理解しやすくなります。短さだけでなく、意味の明確さを優先します。

同じ画面に複数の「詳細」リンクがある場合、音声読み上げやリンク一覧では対象商品が分かりません。商品名を利用可能な名前へ含めます。

11.3 ボタンを押しやすくする

スマートフォンでは、指で押せる十分な高さと間隔を確保します。購入ボタンと保存ボタンが近すぎると、誤操作が増えます。

文字だけでなくボタン全体を操作可能にします。小さなアイコン部分だけを押させる設計は避けます。

11.4 カート追加後の結果を伝える

ボタンを押した後、商品が追加されたか分からないと、利用者が何度も押して数量を増やす可能性があります。ボタン表示、通知、カート数量などを更新します。

通知は短時間で消えるだけでなく、音声読み上げでも伝わるようにします。エラー時には、追加できなかった理由と次の行動を示します。

コード例：カート追加結果を通知する

<button
 class="product-card__cart-button"
 type="button"
 data-product-id="p-001"
>
 カートに追加
</button>

<p
 id="cart-status"
 class="cart-status"
 role="status"
 aria-live="polite"
></p>
const statusElement = document.querySelector("#cart-status");

document.addEventListener("click", async (event) => {
 const button = event.target.closest("[data-product-id]");

 if (!button) {
   return;
 }

 button.disabled = true;

 try {
   await addProductToCart(button.dataset.productId);
   button.textContent = "追加済み";
   statusElement.textContent = "商品をカートに追加しました。";
 } catch (error) {
   statusElement.textContent =
     "商品を追加できませんでした。もう一度お試しください。";
 } finally {
   button.disabled = false;
 }
});
 

11.5 保存と比較の操作を分ける

お気に入り保存は後で確認するための操作、比較追加は複数商品を並べるための操作です。目的が異なるため、同じアイコンだけで表現しないようにします。

ハートやチェックなどのアイコンには文字による名前を設定します。選択後は「お気に入りに追加済み」のように状態を伝えます。

12. スマートフォンで使いやすくする方法

ECサイトの利用者がスマートフォンを使う場合、商品カードは狭い画面、片手操作、移動中の閲覧などを想定する必要があります。デスクトップ版を単純に縮小すると、文字やボタンが小さくなります。

表示商品数を増やすために情報を削りすぎると、利用者が詳細ページを何度も開くことになります。画面密度と購入判断に必要な情報のバランスを取ります。

12.1 一列表示と二列表示を使い分ける

画像中心の商品では二列表示が有効ですが、商品名、価格、配送情報が多い場合は一列表示の方が読みやすくなります。カテゴリによって切り替える方法もあります。

利用者が一覧密度を変更できる機能を提供する場合、選択状態を保存します。ただし、初期表示は最も多くの利用者が比較しやすい形式にします。

12.2 文字サイズを確保する

カード内へ多くの商品を表示するために文字を小さくすると、価格や商品名を読み間違える可能性があります。本文相当の情報は、無理なく読める大きさを確保します。

補助情報でも、重要な配送条件や定期購入条件を極端に小さくしないようにします。優先順位は色の薄さだけでなく、配置や余白で表現します。

12.3 指で押せる操作領域を確保する

購入、保存、色選択などの操作領域は、指で正確に押せる大きさにします。小さな色見本を密集させると、希望と違う色を選ぶ可能性があります。

操作要素同士にも間隔を設けます。カード全体をリンクにする場合、内部の購入ボタンや保存ボタンとの操作競合に注意します。

12.4 横スクロールを分かりやすくする

関連商品を横スクロールで表示する場合、次の商品が一部見えるようにすると、横へ続いていることを理解しやすくなります。矢印やページ位置も補助になります。

横スクロール領域を増やしすぎると、縦スクロール中に誤って横へ動く場合があります。主要商品一覧では、通常の縦方向一覧を優先します。

12.5 画面固定操作を慎重に使う

購入ボタンや絞り込み操作を画面下部へ固定すると便利ですが、商品カードの表示領域を狭めます。小さな画面では、固定要素が商品情報を隠す場合があります。

固定操作は、利用者が必要とする場面でのみ表示します。キーボード表示、端末の安全領域、ブラウザ操作領域も考慮します。

コード例：画面幅に応じて列数を調整する

.product-grid {
 display: grid;
 grid-template-columns: repeat(2, minmax(0, 1fr));
 gap: 0.75rem;
}

@media (min-width: 48rem) {
 .product-grid {
   grid-template-columns: repeat(3, minmax(0, 1fr));
   gap: 1.25rem;
 }
}

@media (min-width: 75rem) {
 .product-grid {
   grid-template-columns: repeat(4, minmax(0, 1fr));
 }
}

@media (max-width: 22rem) {
 .product-grid {
   grid-template-columns: 1fr;
 }
}
 

13. アクセシビリティへ対応する方法

商品カードは、画像、リンク、ボタン、価格、評価、状態表示など、多数の要素を含みます。見た目だけでなく、キーボード、音声読み上げ、拡大表示でも利用できる必要があります。

アクセシビリティ対応は、特定の利用者だけのためではありません。文字の読みやすさ、操作結果の明確さ、状態表示の分かりやすさは、すべての利用者の購入体験を改善します。

13.1 適切なHTML構造を使用する

商品一覧にはリスト構造、商品カードには記事構造など、内容に合ったHTMLを使用します。すべてをdiv要素だけで構成すると、支援技術が情報のまとまりを理解しにくくなります。

商品名を見出しとして扱い、画像、価格、操作との関係を明確にします。ページ全体の見出し順序も崩さないようにします。

コード例：商品カードのHTML構造

<ul class="product-grid">
 <li>
   <article class="product-card" aria-labelledby="product-001-title">
     <a href="/products/product-001">
       <img
         src="/images/product-001.webp"
         width="480"
         height="480"
         alt="黒色の軽量リュックサック"
       />

       <h3 id="product-001-title">
         軽量リュックサック 18リットル
       </h3>
     </a>

     <p>通勤と日帰り旅行に適した撥水仕様</p>

     <p>
       <strong>5,980円</strong>
       <span>税込</span>
     </p>

     <button type="button">
       カートに追加
     </button>
   </article>
 </li>
</ul>
 

13.2 商品画像へ代替文を設定する

商品画像の代替文では、画像が伝えている商品情報を簡潔に説明します。商品名と同じ内容を繰り返すだけでは、色、形、使用状態などが伝わりません。

装飾目的の画像や、直前の文字と完全に同じ情報しか持たない画像では、空の代替文を使用する場合があります。すべての画像へ長い説明を付ければよいわけではありません。

13.3 キーボードで操作できるようにする

商品詳細リンク、購入ボタン、保存ボタン、色選択など、すべての操作をキーボードで利用できるようにします。マウスを重ねたときだけ表示される操作は避けます。

フォーカス位置を明確に表示し、カード間を移動する順序が視覚的な順序と一致するようにします。カード全体と内部リンクを重複してフォーカスさせる設計にも注意します。

13.4 色だけで状態を示さない

値下げ、在庫切れ、選択中、評価などを色だけで表現すると、一部の利用者が状態を区別できません。文字、形、線、アイコンを組み合わせます。

赤色の価格だけで割引を示すのではなく、「24％引き」と文字で表示します。在庫切れでは、画像を薄くするだけでなく状態名を表示します。

13.5 拡大表示へ対応する

画面を拡大した際に、商品名や価格が重なったり、購入ボタンが画面外へ出たりしないようにします。固定高さを多用すると、文字が増えたときに内容が隠れます。

横スクロールが必要になる場合でも、主要操作へ到達できることを確認します。ブラウザの文字サイズ変更でも表示を検証します。

14. HTML・CSS・JavaScriptで実装する方法

商品カードの実装では、見た目の再現だけでなく、情報更新、状態変化、読み込み速度、再利用性を考慮します。商品数が増えても管理できる構造が必要です。

商品名や価格を直接コードへ書くのではなく、商品データから共通部品を生成します。表示条件を整理し、在庫や割引の状態によって構造が大きく変わらないようにします。

14.1 再利用できる構造を作る

共通の商品カード部品を作成し、商品データを渡して表示します。ページごとに異なるHTMLを使用すると、価格表示やアクセシビリティ修正を一括反映できません。

一覧用、関連商品用、検索結果用で必要情報が異なる場合は、表示形式を指定できる設計にします。ただし、形式を増やしすぎると保守が難しくなります。

14.2 状態を属性で管理する

在庫あり、在庫切れ、割引中、選択中などの状態を、データ属性や利用可能な属性で管理します。見た目だけのクラス名へ状態を依存させないようにします。

在庫切れボタンにはdisabled属性を使用し、理由を文字で表示します。保存状態にはaria-pressedなど、操作に適した属性を使用します。

14.3 CSS変数で色と余白を管理する

商品カードごとに個別の色や余白を設定すると、サイト全体の一貫性が失われます。境界線、背景、文字、価格、操作色をCSS変数で管理します。

用途名で変数を定義すると、配色変更やダークモードへ対応しやすくなります。単純な色名だけでは、どこに使用してよいか判断しにくくなります。

コード例：商品カード用の変数

:root {
 --card-background: #ffffff;
 --card-border: #c7ccd4;
 --card-text: #20242a;
 --card-text-secondary: #4d5561;
 --card-price: #9f1d1d;
 --card-action-background: #174ea6;
 --card-action-text: #ffffff;
 --card-radius: 0.75rem;
 --card-space-small: 0.5rem;
 --card-space-medium: 1rem;
}
 

14.4 カード全体リンクを安全に実装する

カード全体を押せるようにすると操作しやすく見えますが、内部の購入ボタン、保存ボタン、色選択と競合します。リンクの中へボタンを入れる不正な構造は避けます。

商品画像と商品名を詳細ページへのリンクにし、カード内の他操作を独立させる方法が安全です。カードの空白部分まで押せる必要があるかは、誤操作と合わせて判断します。

14.5 読み込み中とエラー状態を設計する

商品情報を通信で取得する場合、読み込み中にカードの位置が大きく変わらないよう、仮表示領域を用意します。価格や画像の取得失敗時には、空白のまま放置しません。

カート追加やお気に入り登録で通信エラーが発生した場合、操作を再試行できるようにします。失敗したのに見た目だけ成功状態へ変わらないよう、通信結果と表示状態を同期します。

コード例：商品カードの生成関数

function createProductCard(product) {
 const article = document.createElement("article");
 article.className = "product-card";

 const stockText = product.inStock
   ? "在庫あり"
   : "在庫切れ";

 article.innerHTML = `
   <a href="/products/${encodeURIComponent(product.id)}">
     <img
       src="${product.imageUrl}"
       width="480"
       height="480"
       alt="${product.imageAlt}"
     />
     <h3>${product.name}</h3>
   </a>

   <p class="product-card__price">
     <strong>${product.formattedPrice}</strong>
     <span>税込</span>
   </p>

   <p class="product-card__stock">
     ${stockText}
   </p>

   <button
     type="button"
     data-product-id="${product.id}"
     ${product.inStock ? "" : "disabled"}
   >
     ${product.inStock ? "カートに追加" : "在庫切れ"}
   </button>
 `;

 return article;
}
 

15. 商品カードの効果を検証して改善する方法

商品カードは、一度制作して終わりではありません。商品構成、利用者、販売施策、端末環境が変化すると、適切な情報や操作も変わります。

見た目の好みだけで改善案を決めず、行動データ、利用者テスト、問い合わせ、返品理由を組み合わせて評価します。購入率だけでなく、誤購入や返品の増減も確認します。

15.1 商品詳細ページへの移動率を確認する

商品カードが商品の魅力を十分に伝えているかは、詳細ページへの移動率から確認できます。表示回数に対して、画像や商品名がどの程度押されたかを測定します。

移動率が低い場合でも、カード内で直接購入されているなら問題とは限りません。商品カードの目的に合わせて指標を解釈します。

15.2 カート追加率を確認する

商品カードから直接カート追加できる場合、表示回数に対する追加率を確認します。商品ごとの差だけでなく、端末、流入元、表示位置でも分けます。

追加率が高くても、その後の削除や返品が増えている場合は、情報不足による誤購入の可能性があります。購入完了後まで追跡します。

15.3 商品比較行動を確認する

複数の商品詳細ページを往復している場合、商品カード上の比較情報が不足している可能性があります。利用者が何を確認するために移動しているかを調べます。

価格、容量、サイズ、配送日など、頻繁に確認される情報を商品カードへ追加すると、比較負担を減らせます。ただし、追加後にカードが複雑にならないか検証します。

15.4 表示試験を実施する

価格表示、画像比率、購入ボタン文言などの違いを比較し、どの形式が行動へ良い影響を与えるか確認します。一度に多くの要素を変更すると、効果の原因が分かりません。

購入率だけでなく、詳細移動率、カート削除率、返品率、問い合わせ率も確認します。短期的な購入増加が、長期的な満足度低下につながっていないか評価します。

15.5 定期的な品質確認を行う

商品情報の欠落、画像切れ、古い価格、在庫表示の不一致などを定期的に確認します。商品数が多いECサイトでは、自動検査と目視確認を組み合わせます。

新しい商品カテゴリを追加する際は、既存の商品カード構造で必要情報を表示できるか確認します。無理に共通形式へ合わせず、カテゴリ固有の要件が大きい場合は専用形式を用意します。

商品カード評価の計算例

商品詳細ページ移動率
＝ 商品詳細ページへの移動数
÷ 商品カード表示回数
× 100
カード経由カート追加率
＝ 商品カードからのカート追加数
÷ 商品カード表示回数
× 100
カード経由購入率
＝ 商品カードを起点とした購入数
÷ 商品カード表示回数
× 100
 

おわりに

使いやすく購入しやすい商品カードを設計するには、商品画像や購入ボタンを目立たせるだけでは不十分です。商品識別、価格比較、品質判断、在庫確認、配送確認、種類選択、操作結果まで、購入判断の流れ全体を支える必要があります。

商品カードへ掲載する情報は、利用者が実際に商品を選ぶ際の優先順位に基づいて決めます。第一優先情報と補助情報を分け、同じ情報を同じ位置へ配置することで、複数商品を比較しやすくなります。また、スマートフォン、キーボード、音声読み上げ、拡大表示でも利用できる構造にすることが重要です。

公開後は、商品詳細ページへの移動率、カート追加率、購入率だけでなく、削除率、返品率、問い合わせ内容も確認します。購入操作を速くすることと、誤購入を減らすことを同時に評価し、商品カテゴリや利用者行動に合わせて継続的に改善することが、ECサイトの商品カードを売上へつなげる方法です。