チケット販売サイトの配色はどうする？席種や販売状況を分かりやすくする方法

チケット販売サイトでは、席種の違いと「今買えるかどうか」を同時に伝える必要があります。席ごとに鮮やかな色を割り当てるだけでは、価格や販売状況を比較しにくくなることもあります。席種は名前と価格で整理し、販売状況は文字と補助的な色で示すのが基本です。架空のコンサートの販売画面を例に、選び間違いを防ぐ配色を考えます。

席種と販売状況には別々の見せ方を使う

まず席種を「一般席」「前方席」「プレミア席」などの名称、価格、座席位置の説明で区別します。色は見分ける手がかりの一つに留め、色が分からなくても条件を比較できる構成にしましょう。例えば席種ごとに同じ形の行を用意し、左から席種名・税込価格・販売状況・操作を一定の順序で並べます。

一方、販売状況は「販売中」「残りわずか」「完売」のように文字で明示します。「残りわずか」を暖色で補足しても、色だけで意味を伝えないことが大切です。完売した席は淡くするだけでなく「完売」「選択不可」と示し、購入できる席のボタンと取り違えないようにします。

購入ボタンの色は席種によって変えず、購入可能な行で共通にすると操作のルールが統一されます。選択中の席はチェックマークや「選択中」の表示も加え、色の変化だけに頼らないようにします。

架空のコンサート販売画面に使う6色の例

次の6色を、ページ・文字・操作・残席案内に割り当てます。HEXコードは「#」に6桁の英数字を続けて色を指定する書き方です。

• ページ背景：淡い青みの白 #F7F9FC ― 席種一覧全体の背景。
• 本文・席種名：濃い青灰 #273443 ― 名称、価格、完売の文字。
• 購入ボタン：深い青緑 #17627A ― 購入可能な席の「席を選ぶ」。
• ボタン文字：白 #FFFFFF ― 青緑のボタン上に配置。
• 残席注意の背景：淡い琥珀色 #FFF1D8 ― 「残りわずか」の表示面。
• 残席注意の文字・枠：濃い茶 #71471D ― 注意表示の文字と輪郭。

席種の並び方は、例えば次のようにします。以下の席種・価格・販売状況は説明用の架空の例で、実際の販売情報ではありません。

「席を選ぶ」のボタンは■#17627Aを背景、■#FFFFFFを文字にし、一覧の背景■#F7F9FCと区別します。「残りわずか」は■#FFF1D8の面に■#71471Dの文字と枠を付けます。淡い注意色の面とページ背景だけでは差が小さいため、必ず文字で状況を示します。完売行は■#273443の文字で「完売」と表示し、購入操作を出さない設計にします。

コントラスト比とは、隣り合う色の明るさの差を示す数値です。本文■#273443と背景■#F7F9FCは約12.01:1、白文字■#FFFFFFと青緑ボタン■#17627Aは約6.85:1、注意表示の文字■#71471Dと淡い背景■#FFF1D8は約7.18:1です。いずれもWCAG 2.2のレベルAAが通常サイズの文字に求める4.5:1以上を満たします。青緑のボタンとページ背景も約6.50:1で、操作部品を識別するための3:1の目安を上回ります。

販売状況が変わる画面で気を付けたいこと

「残りわずか」は実際の在庫に基づいて表示します。単なる販促表現として使わず、販売状況が更新される仕組みと一致させます。購入手続きの途中で空席が変わることもあるため、席の確保や購入確定の前に状況を再確認できる案内が必要です。

完売と購入可能の違いを薄い色だけで表さないこと。文字の「完売」と、操作できないことを明確にする表示を用意します。別日程への案内やキャンセル待ちは、実際にその仕組みがある場合だけ掲載します。購入可能な席でも、ボタンや選択状態の輪郭、キーボード操作時のフォーカス表示を周囲の背景と照合しましょう。

スマートフォンでは比較順を保ちます。席種名・価格・販売状況・選択操作が分断されない配置を確認します。色の印象より、何をいくらで買えて、次に何を押せばよいかが分かることを優先すると、席種が増えても迷いにくい販売画面になります。