ECサイトの購入ステップを色で示す方法｜現在位置を分かりやすくする配色

TIPS

ECサイトでカートから注文確定へ進むとき、どこまで入力したのか分からなくなると、戻って確認することにも不安を感じます。購入ステップを示す表示は、色を付けるだけでなく「完了した工程」「今いる工程」「これからの工程」を番号と文字でも区別することが大切です。現在位置がすぐ分かる配色の決め方を、3段階の購入画面で説明します。

完了・現在・未着手の3つに役割を決める

購入ステップとは、注文までの手続きをいくつかの工程に分けて示す案内です。例えば「1 カート → 2 お届け先・支払い → 3 注文内容の確認」と並べ、今いる工程を強調します。買い物が完了したかどうかとは別の表示なので、カートの入力が終わっただけで「注文完了」と見せないようにします。

完了した工程にはチェック印と「完了」、現在の工程には太い枠や塗りつぶしと「現在」、未着手には番号と「未着手」を付けます。緑・青・グレーの色相（色の種類）を変えるだけでは判別しにくい人もいるため、形と文字を組み合わせます。進行状況の線だけを頼りにせず、画面の見出しにも「ステップ2/3：お届け先・支払い」と表示しましょう。

この案内が移動用のリンクではない場合は、押せるボタンのように見せないことも重要です。入力済みの工程に戻れる設計なら、戻れる項目だけをリンクにし、入力内容を保持できるか確認します。

3段階の購入画面で使う配色例

架空のイヤホン通販サイトで、現在は2番目の「お届け先・支払い」を入力中とします。HEXは画面上の色を16進数で表すカラーコードです。白いページを前提に、状態ごとの色と表示を決めます。

ページ背景はホワイト■#FFFFFF、通常の見出しと説明文字は濃いグレー■#243447。両者のコントラスト比（明るさの差）は約12.67:1です。
「1 カート（完了）」は深緑■#21614Cの丸に、ホワイト■#FFFFFFのチェック印を入れます。丸と白背景、チェック印と丸の比はいずれも約7.29:1です。
「2 お届け先・支払い（現在）」はブルー■#1E527Bの丸にホワイト■#FFFFFFの数字「2」を入れ、名称の周囲を薄いブルー■#E7F1F8で囲みます。白い数字と青い丸の比は約8.24:1、青い文字・枠と薄いブルー背景の比は約7.20:1です。
「3 注文内容の確認（未着手）」はホワイト■#FFFFFFの丸にグレー■#64748Bの枠を付けます。枠と白背景は約4.76:1。名称と数字には濃いグレー■#475569を使い、白背景とは約7.58:1です。
工程をつなぐ線は、白背景に対して約4.76:1となるグレー■#64748Bにそろえます。線の色だけで完了を表さず、各工程の番号と「完了・現在・未着手」を読み取れるようにします。

この画面の「注文内容を確認する」ボタンにはブルー■#1E527Bの背景とホワイト■#FFFFFFの文字を組み合わせると、比は約8.24:1です。ステップの青とボタンの青は役割が異なるため、ボタンには動作が分かる文言を必ず付けます。

進行状況の更新とスマホ表示で注意すること

工程が進んだら、前の工程だけを「完了」にし、新しい工程を「現在」に切り替えます。入力エラーで次に進めなかった場合は、現在位置を先へ動かさず、該当する入力欄に修正内容を示します。注文確定後の「注文完了」は、実際に注文が成立したことを確認してから表示します。

WCAG 2.2（Webコンテンツを利用しやすくするための基準）では、通常サイズの文字と背景は原則4.5:1以上、意味を伝える図形や操作部品の重要な表示は隣接する色と原則3:1以上のコントラストが必要です。支援技術にも現在の位置を伝えるには、現在の工程に aria-current="step"（現在のステップを知らせる属性）を付ける方法があります。

スマホでは、工程名が狭くなって省略されないか、番号と名称の対応が崩れないかを確認しましょう。表示幅が足りなければ縦並びに切り替え、「2/3」のような進行数も併記します。色と数字と文字が一致していれば、どの画面からでも現在位置を確認しやすくなります。