スマホのカードUIはどう色分けする？狭い画面で情報を整理する方法

スマホでカードUIを縦に並べると、見出し、補足情報、ボタンが何度も続きます。カードごとに違う背景色を付ければ整理できるとは限りません。大切なのは、同じ種類の情報には共通の色を使い、選択中など操作上の違いだけを必要な場所で強調することです。ここではコワーキングスペースの席予約画面を例に考えます。

カード全体の色分けより、比較する情報の役割を揃える

カードUIとは、時間や料金、操作など関連する情報を一つのまとまりにした画面の部品です。スマホでは横並びだったカードが一列に変わることが多いため、すべてのカードで「時間帯→料金→空き状況」の順に置きます。文字の位置が揃っていれば、スクロールしても同じ項目を探しやすくなります。

カードの広い背景は基本的に同じ色にし、選択中のカードだけに淡い背景と濃い目印を追加します。一方、「空席あり」「満席」といった状態は必ず文字でも表示します。青やグレーの違いだけで予約可能かどうかを伝えると、色を識別しにくい人に伝わらないからです。

同じ画面に複数の強いボタン色を置く必要もありません。予約候補はカード内で選び、最終的な「この時間で進む」は画面下に一つ置くなど、操作の役割を分けます。カードを丸ごと押せる設計なら、選択したことが文言と枠線でも分かるようにします。

席予約の3枚のカードを7色で整理する例

「午前9:00～12:00（選択中）」「午後13:00～17:00（空席あり）」「夜18:00～21:00（満席）」という三つの時間枠を想定します。以下のHEX（#の後に6桁の英数字が続く色コード）は、この画面に使う配色例です。

ページ背景は淡いブルーグレー ■#F3F7F8、通常カードは白 ■#FFFFFF とします。この二色のコントラスト比は約1.08:1なので、色差だけに頼らずカード間に余白を取り、グレーブルー ■#758995 の輪郭線で区切ります。輪郭線は白 ■#FFFFFF に対して約3.64:1、ページ背景 ■#F3F7F8 に対して約3.38:1です。

時間帯と料金の見出しには濃いスレート ■#243746 を白いカード ■#FFFFFF に置き、比は約12.28:1です。定員や利用条件などの補足はブルーグレー ■#536574 に統一し、白 ■#FFFFFF との比は約6.03:1とします。満席カードも文字を極端に薄くせず、「満席・選択できません」と明記します。

午前の選択中カードだけは背景を淡いミント ■#E4F1F0 に替え、時間帯や料金を濃いスレート ■#243746 で表示します。文字と背景の比は約10.61:1、補足文字のブルーグレー ■#536574 も約5.21:1です。さらに左端に深いティール ■#165A61 の太い線と「選択中」の表示を加えます。線と選択背景 ■#E4F1F0 の比は約6.80:1です。

選択背景 ■#E4F1F0 と通常カードの白 ■#FFFFFF の比は約1.16:1しかありません。淡い塗りの差だけでは選択状態を示しきれないため、線と文字を必ず組み合わせます。画面下の「この時間で進む」ボタンは深いティール ■#165A61 の背景に白 ■#FFFFFF の文字を使い、比は約7.87:1です。ボタンとページ背景 ■#F3F7F8 の比も約7.29:1あります。

狭い画面での選択・満席・文字拡大を確認する

実際のスマホ幅では、料金が改行されたときに時間帯と空き状況の対応が崩れないか確認します。カードの間隔を十分に取り、指で別の候補を選んだら「選択中」の表示と濃い線が新しいカードへ移るようにします。満席の枠を押しても予約できないことは、色を薄くするだけでなく文言や操作不可の状態でも伝えます。

キーボードで選択する場合も、現在操作しているカードを示すフォーカス表示が必要です。選択中の色とフォーカスの目印は同じ意味ではありません。文字を拡大した状態や一列になった画面で、それぞれ見分けられるか点検します。

WCAG 2.2（Webコンテンツのアクセシビリティ指針）では、通常サイズの文字と背景に原則4.5:1以上、大きな文字に3:1以上が求められます。選択状態を示す線など、操作の理解に必要な視覚情報は隣接色と原則3:1以上が基準です。ただし、装飾だけのカード枠すべてが必ずこの基準の対象になるわけではありません。

HueRollでは選択色の濃淡や白・黒とのコントラストを確認できますが、任意の2色同士の直接比較やAA・AAAの自動判定には対応していません。選択中の線 ■#165A61 と淡い背景 ■#E4F1F0 のような組み合わせは、別の方法でも数値を確かめてください。