定期購入と通常購入を色で分ける方法｜選び間違いを防ぐ配色

TIPS

ECサイトで「通常購入」と「定期購入」を選べる商品は、価格や割引の見せ方が似ていると、買うつもりのなかった定期購入を選んでしまうことがあります。購入方法を色で分けるなら、色の違いだけで判断させず、購入回数や支払いのタイミングまで同じ画面で比べられるようにすることが大切です。

色分けは購入方法の区別に使い、選択状態は別に示す

通常購入はその注文で購入する方法、定期購入は決められた間隔で商品が届き、契約条件に従って支払いが続く方法です。両者の選択欄は同じ大きさで並べ、「通常購入（1回のみ）」「定期購入（30日ごと）」のように名称と頻度を文字で示します。定期購入の方だけ大きなボタンにすると、価格差よりも視覚的な誘導が強くなります。

カードの背景色は購入方法を見分ける補助にし、現在選んでいる方には太い枠と「選択中」の文字を加えます。色相（赤や緑などの色の種類）だけで選択状態を伝えないことがポイントです。ラジオボタン（複数の候補から1つだけ選ぶ入力部品）を使えば、クリック・タップに加えてキーボードでも購入方法を切り替えられます。

最初から定期購入だけを目立つ色で選択済みにするのではなく、未選択から選んでもらう設計も検討しましょう。初期値を設ける場合も、選択中の表示と契約条件が一目で確認できることが欠かせません。

コーヒー豆の購入欄を例にした配色

200gのコーヒー豆を、通常購入は税込2,000円で1回、定期購入は税込1,800円で30日ごとに届ける架空の例を考えます。定期購入の1,800円は2回目以降も同じと仮定し、送料や解約条件は別に明示します。HEX（画面の色を16進数で表すコード）を使い、次のように役割を分けます。

ページ背景はホワイト■#FFFFFF、商品名や価格の文字は濃いグレー■#243344。この組み合わせのコントラスト比（明るさの差）は約12.87:1です。
「通常購入」のカードはホワイト■#FFFFFFを背景に、グレー■#64748Bの枠を付けます。枠と白背景の比は約4.76:1です。
「定期購入」のカードは淡い青緑■#EAF5F1を背景にし、見出しに深緑■#164B40を使います。見出し文字と背景の比は約8.90:1です。未選択時の枠をグレー■#64748Bにするなら、淡い青緑との比は約4.27:1です。
どちらのカードを選んでも、選択中の外枠は深緑■#164B40に統一し、チェック印または選択済みのラジオボタンと「選択中」を表示します。外枠と白背景は約9.93:1、淡い青緑背景とは約8.90:1です。
頻度・送料・解約条件などの補足文字にはグレー■#475569を使い、白背景と約7.58:1、淡い青緑背景と約6.79:1を確保します。
購入手続きへ進むボタンは両方とも濃いグレー■#243344の背景とホワイト■#FFFFFFの文字に固定し、比は約12.87:1。表示文言だけ「通常購入で進む」「定期購入で進む」に切り替えます。

価格と継続条件を色より先に確認できるようにする

定期購入の「初回だけ割引」を強調する場合は、2回目以降の価格も同じ視線で確認できる位置に示します。購入方法を切り替えたら、選択中の名称、支払額、配送間隔、最終確認画面の内容、ボタンの文言が一致するかを確認してください。定期購入の継続期間、最低購入回数、解約方法や期限は、実際の契約条件に沿って表示します。

日本国内の通信販売では、最終確認画面でも価格や契約・解約に関する条件を明確に表示する必要があります。色での区別は、その説明に代わるものではありません。

WCAG 2.2（Webコンテンツを利用しやすくするための基準）では、通常の文字と背景のコントラスト比は原則4.5:1以上、選択状態を示す必要な枠線などは隣接色と原則3:1以上が目安です。色を区別しにくい場合もあるため、購入方法と選択状態を必ず文字・印・枠でも表し、スマホの狭い画面でも両方の条件を読み比べられるか確かめましょう。