商品バリエーションを色で選ばせる方法｜カラースウォッチUIの基本

ECサイトで同じ商品の色違いを選んでもらうとき、小さな色の丸だけでは「何色なのか」「どれを選択したのか」が伝わりにくいことがあります。カラースウォッチUIとは、色を表す小さな見本をクリックやタップで選ぶ画面の操作部品です。色見本を並べるだけでなく、名前・選択状態・操作方法をそろえることが基本になります。

色見本は「色名が分かる選択肢」にする

商品バリエーションは、同じ商品の色やサイズなどの違いを表す選択肢です。色を選ぶ画面では、それぞれの見本に「ネイビー」「サンド」などの色名を付け、選んだ色を「選択中：ネイビー」のように文字でも表示しましょう。似た色が並んでいても選択内容を確かめられます。

選択中の見本には、通常より太い枠や二重の輪郭、チェックマークなどを加えます。色相（赤や青など色の種類）の違いだけで選択状態を表すと、見分けづらい場合があります。輪郭の形と文字を併用することが大切です。

色見本は装飾ではなく入力欄です。実装時は、色名を付けたラジオボタン（複数の候補から一つを選ぶ入力部品）としてまとめると、キーボードや読み上げ機能でも選択状態を扱いやすくなります。色名は画面に表示し、各入力部品にも対応付けます。

4色のバッグで考える配置と配色例

布製バッグに4色あると仮定します。商品画像の下に「カラー：ネイビー」と表示し、その直下に次の色見本を横並びにする例です。HEX（16進数で画面の色を表すコード）は、実物の色を保証するものではなく、ここではUIを設計するための例示色です。

• ネイビー：■#24324A。濃い青の見本。
• サンド：■#D9C6A7。明るいベージュの見本。
• セージ：■#61785E。落ち着いた緑の見本。
• テラコッタ：■#A35438。赤みのある茶色の見本。

背景はホワイト■#FFFFFF、色名などの通常文字はダークグレー■#1F2937を組み合わせます。背景と文字のコントラスト比は約14.68:1です。色見本の外側には、グレー■#4B5563の線を設けます。この線と白背景のコントラスト比は約7.56:1で、淡いサンドの見本も輪郭で位置を示せます。

選択中はダークグレー■#1F2937の外輪を、見本との間に白いすき間を空けて重ね、「選択中：サンド」などの文字も更新します。購入ボタンの色を毎回変える必要はありません。選んだ色と対応する商品情報・在庫を連動させることの方が重要です。

見やすさと操作性を仕上げる注意点

キーボード操作中の位置は、選択中の印とは別に示します。例えばフォーカス（今操作対象になっている位置）の線をブルー■#0B57D0にすれば、白背景とのコントラスト比は約6.39:1です。色見本自体は指で押しやすい大きさと間隔を取り、小さな丸の周囲まで操作範囲を広げます。

WCAG 2.2（ウェブを使いやすくするためのアクセシビリティ基準）では、通常の文字に原則4.5:1以上、操作部品や状態を識別するために必要な視覚情報に原則3:1以上のコントラストが求められます。実装した背景・輪郭・文字の組み合わせを個別に確かめましょう。

在庫がない色は単に薄くするだけではなく、「売り切れ」と文字で示し、選べない状態を明確にします。また色名・商品画像・価格・在庫表示が選択内容に一致するかを確認してください。似た色の判別や色の見え方には個人差があるため、色と文字の両方で確認できる設計が安心です。