色違い商品をWEBで分かりやすく見せる方法｜カラー選択UIの配色

同じ型の服に色違いがあると、商品写真が切り替わるだけでは「今見ているのは何色か」「ほかの色と何が違うか」を確かめにくくなります。カラー選択UI（ユーザーインターフェース、画面上で商品色を選ぶ操作部分）は、色見本だけでなく、写真・色名・周囲の配色を一緒に整えることが重要です。商品一覧から詳細ページまで、違いを比較しやすい見せ方を考えます。

商品写真と色名を同じ位置で見比べられるようにする

商品一覧では、代表色の写真の近くに「全3色」などと表示し、色違いがあることを知らせます。詳細ページでは、選択中の色の大きな写真に加え、ほかの色のサムネイル（小さなプレビュー画像）を並べると、選択前に違いを見渡せます。写真は同じ向き・倍率・明るさで撮り、色以外の条件をなるべくそろえましょう。

選んだ写真の横には「カラー：フォレスト（全3色）」のように色名と総数を表示します。画像を切り替えるときは色名も同時に更新し、一覧と詳細ページで同じ呼び方を使います。スマホでは画像に指を重ねている間だけ色が見える仕組みにせず、タップ後も選択内容が分かるようにします。

大切なのは、服の色に合わせてページの背景や購入ボタンまで毎回塗り替えないことです。周囲の画面色を固定すれば、写真の中の商品の違いに目を向けやすくなります。

3色のニットを例に画面の配色を組み立てる

アイボリー・フォレスト・テラコッタの3色があるニットを例にします。HEX（画面の色を16進数で表すコード）はUIを設計するための仮の色で、実物の生地の色を保証するものではありません。

• 商品の色見本：アイボリー■#EADDC7、フォレスト■#365E58、テラコッタ■#BB6048。色名を必ず併記します。
• ページと商品カードの背景：ホワイト■#FFFFFF。写真の背景は薄いグレー■#EDF0F2に統一し、3色とも同じ面積で掲載します。
• 商品名と価格の文字：濃いグレー■#283544。補足文はグレー■#4B5864にし、背景の白とのコントラスト比（明るさの差）はそれぞれ約12.48:1、7.29:1です。
• 写真枠やサムネイルの輪郭：グレー■#64748B。写真の薄いグレー背景との比は約4.16:1なので、画像を区切る線として使えます。
• 選択中の色名を示す欄：ごく薄いブルー■#EAF1F6を敷き、濃いブルー■#285477の枠と「表示中：フォレスト」の文字を添えます。枠と欄の背景の比は約7.01:1です。
• 購入ボタン：濃いブルー■#285477に白文字■#FFFFFFを組み合わせます。コントラスト比は約8.00:1です。

アイボリーのような明るい服は、薄いグレーの撮影背景と明るさが近く、輪郭が消えることがあります。その場合は商品だけ色を加工して濃くするのではなく、撮影時の光や影、背景との境目を調整し、比較用の写真全体で条件をそろえます。

色を切り替えても情報がぶれないか確認する

色を変えたときは、表示中の写真、色名、価格、在庫、購入対象の品番が一致しているかを確かめます。同じ商品を色ごとに別カードで見せる場合も、商品名や価格表示の位置をそろえると違いを追いやすくなります。写真が実物と違って見える場合があるため、色名に加えて拡大写真や素材の説明も用意しましょう。

選択中の状態を淡い背景色だけに任せず、文字と輪郭でも示すことが大切です。WCAG 2.2（ウェブの使いやすさに関する基準）では、通常の文字と背景に原則4.5:1以上、操作に必要な枠線や状態表示には原則3:1以上のコントラストが求められます。実際に隣り合う色同士で確認してください。

仕上げには、一覧から詳細ページを開き、3色を切り替えて元の色に戻す流れをスマホとPCの両方で試します。商品の色が主役になり、購入操作の色は変わらない設計なら、色違いを落ち着いて比較できます。