注文完了ページに合う配色は？購入後に情報を確認しやすくする方法

TIPS

ネットショップで注文を終えた直後、目立つ「完了」の表示があっても、注文番号や支払い状況が見つからないと不安が残ります。注文完了ページは、購入手続きを進める画面ではなく、結果と明細を確認する場所です。明るい色でお祝いするより、「受け付けた内容」と「次に確認すること」を読み分けられる配色にしましょう。

受付結果を最初に示し、注文の明細は落ち着いた色で表示する

注文がシステムで正常に受け付けられたことを確認できた場合に、「ご注文を受け付けました」と表示します。見出しの近くにチェック印を添えるのは有効ですが、緑色の印だけで成功を伝えず、結果を文章でも明記します。注文を受け付けたことと、支払い・発送が終わったことは同じではありません。

受付結果の案内の下には、注文番号、購入した商品と数量、税込合計金額、支払い方法、配送先の確認に必要な情報をまとめます。項目名と金額を濃い文字でそろえれば、カードごとに違う色を付けなくても探しやすくなります。確認メールの送信状況や注文履歴への進み方も、事実に沿った言葉で案内します。

購入後の画面にもう一度「注文を確定する」というボタンを置くと、追加の注文操作と誤解されるおそれがあります。主な操作は「注文履歴を見る」などの確認行動に切り替えましょう。

文具通販の注文受付画面で考える配色例

架空の文具通販で、ノートを2冊注文した直後の画面を考えます。金額や注文番号には実際に確定した値を表示する前提です。HEX（画面上の色を16進数で示すコード）を使い、結果・注文情報・操作の役割を分けます。

ページの背景はホワイト■#FFFFFF、通常の見出しと本文は濃いグレー■#243447。文字と背景のコントラスト比（明るさの差）は約12.67:1です。
受付結果の帯は淡いミント■#EAF5EE、見出し「ご注文を受け付けました」は深緑■#21614C。文字と帯の比は約6.53:1です。深緑■#21614Cの丸にホワイト■#FFFFFFのチェック印を入れる場合、印と丸の比は約7.29:1です。
注文番号・商品名・数量・合計を示す明細欄には薄いグレー■#F3F6F8の背景と濃いグレー■#243447の文字を使い、比を約11.68:1とします。欄の境界にはグレー■#64748Bの線を使い、背景との比は約4.38:1です。
コンビニ払いなどで入金確認がまだの場合に限り、「お支払い確認中」を薄いクリーム■#FFF4E5の欄に濃い茶色■#7A4A06の文字で表示します。比は約6.88:1です。入金済みと確認できた注文には、この案内を出しません。
「注文履歴を見る」ボタンはブルー■#215D77にホワイト■#FFFFFFの文字を組み合わせ、比は約7.25:1です。「買い物に戻る」は同じブルー■#215D77の文字をホワイト■#FFFFFFの背景に置くと、比は約7.25:1です。
確認メールや問い合わせ方法の補足はグレー■#475569の文字を薄いグレー■#F3F6F8の背景に置きます。比は約6.98:1で、本文より目立たせすぎずに必要な情報を残せます。

支払い・発送の状態を混同せず、スマホでも確認する

「ご注文を受け付けました」は注文受付の結果です。決済の確認待ちなら「お支払い確認中」と別に表示し、発送前なのに「発送しました」と書かないようにします。メールがまだ送信されていなければ「送信済み」と断定せず、実際の処理状況に合わせて説明を変えます。注文番号は控えられるようにし、注文履歴へのリンクは本人が自分の注文だけ確認できる形にします。

WCAG 2.2（Webコンテンツを利用しやすくするための基準）では、通常サイズの文字は背景と原則4.5:1以上、意味を伝える重要な図形は隣接色と原則3:1以上のコントラストが必要です。チェック印は文字と併用し、画面を切り替えずに結果を表示する場合は、読み上げ機能にも状態が伝わる通知方法を検討しましょう。

スマホでは、最初の画面内に受付結果と注文番号が見えるか、合計金額が折り返されて読みにくくならないかを確認します。確認画面を再表示しても新たな注文が作られないことや、ボタンが誤って再購入につながらないことも重要です。結果の色を控えめにし、必要な数字と次の行動を明確にする配色なら、購入後の確認がしやすくなります。