商品一覧では、デザインは数秒しか見られない

01

詳細ページでは良い。一覧では埋もれる

商品詳細ページには、時間と場所があります。

大きな商品写真を表示でき、正面、背面、着用写真、プリントの接写、素材の表面まで複数枚で見せられます。説明文では、使用しているボディ、加工方法、デザインの背景、サイズ感なども伝えられます。

そこまで来た人は、すでに商品へある程度の関心を持っています。画像を拡大したり、説明を読んだり、別の色と比較したりしてくれる可能性があります。

しかし、商品一覧は事情が違います。

一覧では、一枚の商品画像に、商品名、価格、色、バッジ、お気に入りボタンなどが同居します。そのカードが二列、三列と並び、前後には似た商品が続きます。スマートフォンでは画面そのものが小さく、指を動かせば次の商品がすぐ現れます。

購入者は一枚ずつ腰を据えて鑑賞しているわけではありません。画面を流しながら、気になった商品で一瞬だけ指を止めます。その短い時間で「自分に関係がありそうか」「ほかの商品と何が違うのか」を判断しています。

ここで問題になるのが、詳細ページで成立していた魅力が、一覧ではほとんど見えなくなることです。

たとえば、黒いボディへ濃いグレーで小さなプリントを入れたTシャツは、実物では落ち着いていて上品に見えるかもしれません。近くで見れば、光の当たり方によってプリントが浮かび、さりげない面白さがあります。

ところが一覧画像では、ほぼ無地の黒Tシャツに見える。

上品さが悪いのではありません。上品さが存在ごと消えているのが問題です。

02

商品カードは小さい

デザインを作るとき、私たちは大きな画面で見ています。

Illustratorでは好きなだけ拡大できます。商品写真も、撮影後に大きく開けば、布の質感やプリントの端まで確認できます。その状態で見ていると、細かな要素も十分に存在感があるように感じます。

しかし、実際の商品カードはかなり小さいものです。

「商品カード、ちっちゃ！」

PCでは三列や四列、スマートフォンでは二列で表示されることもあります。画像の下には商品名と価格が入り、セール表示やお気に入りアイコンが重なる場合もあります。商品画像として使える範囲は、制作画面で見ていたときより、ずっと限られています。

この小さなカードの中で、細部をすべて説明しようとしても無理があります。

必要なのは、情報を増やすことではなく、最初に見える主役を決めることです。

大きな文字なのか、特徴的なモチーフなのか。プリント位置なのか、ボディカラーなのか、シルエットなのか。一覧では、その商品の違いを最初に認識させる要素を一つ選びます。

細かな魅力は、詳細ページへ進んでもらってから伝えればよいのです。商品カードは作品の解説書ではありません。入口の看板に近いものです。

映画のポスターに脚本を全部載せないのと同じです。

03

色違いと別デザインを区別できるか

商品一覧では、同じデザインの色違いをどのように扱うかも重要です。

白、黒、ネイビー、グレーを別々の商品カードとして表示すると、同じ構図のTシャツが続きます。それ自体は悪くありません。色を比較しやすく、好きな色から商品を選べる利点があります。

ただし、色違いと別デザインの区別がつかなければ、一覧全体が単調になります。

「黒、黒、黒黒黒黒黒黒黒、くろくろくろ〜〜〜〜ッ！」

落ち着いてください。商品一覧です。

同じ黒いボディに、小さな白いプリントが入った商品が何枚も続けば、カードを一つずつ開かなければ違いが分かりません。購入者にとっては、商品を選ぶ前に、まず違いを探す作業が発生します。

反対に、同じ商品の色違いなのに、撮影角度、背景、モデル、トリミングがすべて違うと、今度は同じシリーズであることが伝わりにくくなります。

一覧では、そろえるものと変えるものを決めます。

同じ商品の色違いなら、写真の角度、商品の大きさ、背景、トリミングをそろえる。そのうえで、ボディカラーやプリントカラーの違いを見せます。

別デザインなら、一覧の小さな状態でも主役が違って見えるようにします。プリント位置、モチーフの面積、配色、写真の選び方のどこかで、カード同士の違いを作ります。

すべてを変えれば比較できません。すべてをそろえれば区別できません。

商品一覧は、小さな売り場です。現物の店舗で商品を棚へ並べるときと同じように、似ている商品をどうまとめ、違う商品をどう見分けさせるかまで考えます。

04

サムネイルで見える主役を決める

商品画像を作るとき、Tシャツ全体を必ず見せようとすると、プリント部分が小さくなります。

反対に、プリントへ寄りすぎると、Tシャツの形、丈感、プリント位置が分かりません。購入者はグラフィックだけでなく、それがどのくらいの大きさで、身体のどこへ配置されているかも見ています。

どちらを優先するかは、商品の特徴によって変わります。

大きな背面プリントが主役なら、背中全体が見える着用写真が必要です。左胸の小さな刺繍が特徴なら、一覧では全体を見せ、二枚目や詳細ページで接写を使う方が自然かもしれません。オーバーサイズのシルエットが価値なら、プリントだけへ寄るより、モデルの全身に近い写真の方が商品の違いを伝えられます。

一枚ですべてを見せるのではなく、画像ごとの役割を分けます。

一覧の一枚目では、商品として何が違うのかを伝える。二枚目以降では、加工や素材の細部を見せる。詳細ページでは、サイズ感、裏側、プリントの接写まで説明する。

一覧画像へ全部を詰め込むと、結局どれも小さくなります。

「せっかく作ったんだから、全部見せたい」

分かります。

でも、一枚目に全員を乗せたら、全員が脇役になります。

特に注意したいのが、同系色プリントや小さなワンポイントです。

これらは実物では魅力的でも、一覧では消えやすい表現です。その場合は、撮影時の光を調整してプリントの質感を出す、少し寄った画像を二枚目へ入れる、商品名で加工の特徴を補足するなど、デザインを派手に変えずに伝える方法を考えます。

静かな商品は、静かなままで構いません。

ただし、静かすぎて無地の商品に見えたら、まだ売り場へ届いていません。

05

商品名と画像は一緒に働く

商品名は、画像の下に付く管理情報ではありません。

画像だけでは伝えきれない違いを、短い言葉で補う役割があります。

似た黒いTシャツが並んでいても、

• Small Chest Logo Tee
• Back Print Tee
• Washed Black Tee
• Reflective Print Tee

のように特徴が分かれば、購入者は商品を区別できます。

反対に、すべての商品名が抽象的な英単語だけだと、画像と名前の関係が分かりにくくなることがあります。ブランドらしい名前を付けることは大切ですが、一覧で商品の違いが分からないなら、サブタイトルや短い説明で補う方法もあります。

商品カードでは、画像、商品名、価格が一緒に働きます。

画像は見た目を伝える。商品名は違いを伝える。価格は購入条件を伝える。

この三つの役割が重複しすぎたり、逆にどれも説明不足になったりしないようにします。

たとえば画像で背面プリントがはっきり見えているなら、商品名で同じことを長く説明する必要はありません。画像では分かりにくい特殊加工なら、名前やバッジで補う意味があります。

一覧カードは小さいからこそ、役割分担が必要です。

06

拡大しないと分からない魅力をどう伝えるか

刺繍の立体感、織りネームの細かさ、発泡プリントの厚み、布の風合い。こうした魅力は、小さな一覧画像だけでは十分に伝わりません。

だからといって、一覧画像の中へ接写、全体、着用、裏側を全部詰め込むと、写真が小さなコラージュになります。情報は増えていますが、何を最初に見ればよいのか分かりません。

一覧では、細部があることだけを気づかせます。

刺繍部分へ光が当たり、少し立体感が見える。プリントに厚みがあり、影が落ちている。商品名に「刺繍」「発泡プリント」と短く入っている。二枚目へ進めば接写がある。

詳細を全部見せるのではなく、「ここには何かある」と思わせる程度でよいのです。

詳細ページの感動は、クリックされた後にしか届きません。

まず、そのクリックが必要です。

07

数秒で選ばれる場所までデザインする

「商品は数秒しか見られない」というのは、厳密な秒数を測る話ではありません。

商品一覧は、長い説明を読んでもらう場所ではない、ということです。

人は画面をスクロールしながら、気になる商品で手を止めます。その短い時間で、少なくとも次のことを判断します。

• 何の商品なのか
• ほかの商品と何が違うのか
• 自分に関係がありそうか
• 価格帯は合いそうか
• もう少し詳しく見る価値があるか

ここで伝えるべきことを整理すれば、必ずしも派手なデザインにする必要はありません。

落ち着いた商品なら、背景やトリミングを統一し、プリント位置が見える角度を選び、商品名で特徴を補えばよい。細かなデザインを無理に大きくするより、一覧で認識できる一つの手掛かりを作ります。

確認するときは、完成した商品画像を単体で大きく開くだけでは足りません。

実際の商品一覧へ入れる。隣に似た商品を置く。スマートフォンの二列表示で見る。画像を縮小する。スクロールしながら見る。

その状態で主役が残っているかを確認します。

商品詳細ページのデザインが完成してから、一覧へ小さく置いて驚くのではなく、最初から売り場の大きさで考えます。

商品は、詳細ページで評価される前に、一覧で選ばれます。

拡大したときに良いデザインを作ることは大切です。 同時に、拡大してもらえるデザインにしておく必要があります。