配送状況を色で表す方法｜注文ステータスを見分けやすくするWEB UI

TIPS

ECサイトで注文後の配送状況を開いても、色付きの丸だけでは荷物が発送されたのか、輸送中なのか、すでに配達されたのか分からないことがあります。注文ステータスは、色と一緒に状態名・更新日時・次に確認できる情報を示すことが大切です。ここでは、物流の進み具合が伝わる画面の配色を考えます。

「注文受付」「発送済み」「配送中」「配達完了」を分けて表示する

注文を受け付けた時点では、まだ商品が発送されていない場合があります。「注文受付」は注文が記録された状態、「発送済み」は店舗側から出荷したことを確認した状態、「配送中」は配送会社の追跡情報などで輸送が確認できる状態として区別します。「配達完了」は配送会社などが配達を完了したと確認できたときだけ表示します。

すべてのショップでこの4段階を細かく取得できるとは限りません。確認できない工程を推測で「完了」にせず、取得できる情報に合わせて工程名を減らします。配達予定日も確定した事実ではなく見込みの場合があるため、予定であることを明示します。

進捗表示（手続きの進み具合を示す部分）には、番号・状態名・「済」「現在」「未到達」などの言葉を付けます。完了した段階にはチェック印、現在の段階には太枠を添えれば、緑や青といった色相（色の種類）だけで状態を判断せずに済みます。

折りたたみ傘の配送中画面を例にした配色

架空の雑貨店で折りたたみ傘を注文し、配送会社の追跡情報では現在「配送中」と確認できている例です。HEXとは、画面の色を16進数で表すコードです。次の色はこの画面のための提案で、すべての配送会社に共通する指定色ではありません。

ページ全体はホワイト■#FFFFFF、注文番号や日付などの本文文字は濃いグレー■#243447にします。コントラスト比（明るさの差）は約12.67:1です。
「1 注文受付済み」「2 発送済み」は完了した工程として、薄いグレー■#F2F5F8の背景にダークグレー■#475569の文字を使います。文字と背景の比は約6.93:1です。チェック印と「済」を添え、現在位置と混同させません。
現在の「3 配送中」は淡いブルー■#E8F3FCの背景に濃いブルー■#174B75の文字と枠を付けます。文字・枠と背景の比は約8.11:1です。見出しにも「現在：配送中」と書きます。
未到達の「4 配達完了」は薄いグレー■#F2F5F8の背景にダークグレー■#475569の文字で「未到達」と添えます。実際に配達完了が確認できた段階では、淡いグリーン■#E7F6EDに深緑■#175D46の文字を組み合わせられます。この場合の比は約6.99:1です。
工程を結ぶ意味のある線を使う場合はグレー■#64748Bとホワイト■#FFFFFFで約4.76:1を確保します。ただし線の色だけで通過済みかどうかは表しません。
「配送会社の追跡を見る」のリンクは濃いブルー■#174B75とホワイト■#FFFFFFで約9.13:1です。追跡番号と配送会社名は取得できた場合だけ表示し、実際の追跡先につなげます。

遅延・更新時刻・受け取り後の確認にも注意する

配送会社が遅延を案内している場合は、進捗そのものを赤色のエラーに置き換えるのではなく、別の注意欄に「配送遅延のお知らせ」と理由や案内の確認先を記載します。例えば淡いクリーム■#FFF5DDの背景に茶色■#895305の文字を使えば、比は約5.86:1です。遅延が未確認なら表示せず、予想だけで新しい到着日を断定しないようにします。

最後の更新日時と情報の提供元も確認できる形にします。店舗側の「発送済み」と配送会社側の「配送中」が異なる時刻で更新されることもあります。配達完了と表示されていても荷物が見つからない場合に備え、追跡先や問い合わせ方法へ進める案内を残しましょう。

WCAG 2.2（Webコンテンツを利用しやすくするための基準）では、通常の文字は背景と原則4.5:1以上、状態の意味を担う図形や必要なUI（画面の操作部分）は隣接色と原則3:1以上のコントラストが求められます。スマホでは、工程名と状態・日時の対応が崩れないかを確認してください。配送の事実を言葉で示し、色を補助として使うことが、注文後の不安を減らすための基本です。