カードの重要度を色で分ける方法｜WEB UIに強弱をつける配色
カードが何枚も並ぶWEBページでは、すべてを同じ色や大きさで並べると、最初に見てほしい内容が伝わりにくくなることがあります。反対に、各カードを鮮やかにすると、どれも目立って差がなくなります。カードUI（ユーザーインターフェース）は、情報や操作をひとまとまりにした画面上の部品です。今回はコワーキングスペースの利用案内を例に、主役・通常・補足のカードに強弱を付ける方法を考えます。
重要なカードだけ強くし、残りは同じ基準でそろえる
カードの重要度は、まず内容の役割で決めます。初めて利用する人に見学予約を案内するなら、そのカードを主役にできます。一日利用や月額利用の比較カードは標準の扱いにし、設備案内は補足としてまとめる方法があります。ただし「主役」は運営側の設計方針です。すべての利用者にとって最優先とは限りません。
主役には背景の淡い色と明確な枠線、主要操作の塗りボタンを組み合わせます。標準カードは背景と文字の規則をそろえ、補足カードには大きなボタンを増やさないようにします。色だけで重要度を表さず、「見学から始める」「利用プラン」「設備・アクセス」のような言葉と配置でも区別します。
違いを出すのはカード全体の鮮やかさよりも、枠の太さ・占める面積・操作部分です。例えば主役カードを一覧の先頭で少し広く扱い、通常カードは同じ幅で並べると、色数を増やさずに情報の段階を示せます。
コワーキングスペースのカードを3つの役割で配色する
共通のページ背景は淡いグレー#F8FAFC、本文は濃いグレー#1F2937にし、文字とのコントラスト比を約14.03:1にします。HEXとは、#と6桁の数字・英字で色を表すWEBの書き方です。コントラスト比は、文字や枠線と隣接する背景の明るさの差を表す数値です。
- 主役カード「見学から始める」：背景は淡いミント#F0FDFA、見出しは深い青緑#134E4A、本文は濃いグレー#1F2937にします。背景との文字の比は見出しが約9.09:1、本文が約14.07:1。枠線には青緑#0F766Eを使い、カードの内側と約5.25:1、外側のページ背景#F8FAFCと約5.23:1になります。「見学を予約する」ボタンも青緑#0F766Eにして、白文字#FFFFFFとの比を約5.47:1にします。
- 標準カード「1日利用」「月額利用」：背景は白#FFFFFFに統一し、本文の濃いグレー#1F2937との比は約14.68:1です。枠線はグレー#64748Bとし、白いカード面#FFFFFFとの比は約4.76:1。主要な塗りボタンを増やさず、詳しい条件へ進む下線付きリンクを深い青緑#115E59にすると、白背景との文字の比は約7.58:1です。
- 補足カード「設備・アクセス」：背景は明るいグレー#F1F5F9、本文は濃いグレー#1F2937で約13.40:1とします。案内のリンクには深い青緑#115E59を使い、背景との比は約6.92:1です。カード全体を大きな操作部品にせず、短い説明と下線付きリンクを置いて、主役カードと競わせません。
この例ではカードの目的が違うため、すべてに同じ「予約する」ボタンを載せません。一覧を比較するときは、通常カード同士では見出し・余白・リンクの置き方をそろえ、主役だけを意図的に変えます。背景色を3つ使ったから重要度が伝わるのではなく、色と構造の差を同じ役割に結び付けることがポイントです。
淡いカードの境界と文字・操作のコントラストを確認する
主役の淡いミント#F0FDFAとページ背景#F8FAFCの差は約1.00:1、通常カードの白#FFFFFFとページ背景#F8FAFCも約1.05:1です。背景の塗り分けだけではカードの境界が分かりにくいため、先ほどの枠線や間隔を併用します。枠線が重要な手掛かりになる場合は、細すぎて実際の画面で消えて見えないかも確認してください。
WCAG 2.2（WEBコンテンツのアクセシビリティに関する指針）レベルAAでは、通常サイズの文字と背景に原則4.5:1以上、規定の大きな文字に3:1以上が必要です。操作部品を識別するために必要な枠線などにも隣接色と3:1以上が求められる場合があります。一方、飾りのためのすべての枠線に同じ要件がかかるわけではありません。色だけで「おすすめ」「選択中」を伝えず、ラベルや選択マークも付けましょう。
スマートフォンでは主役カードが画面を占めすぎず、通常カードへ続けて移れるかを見直します。HueRollではHEXコードから関連色・濃淡を探し、選択色と白・黒とのコントラストを確認できます。ただし任意の2色の比較やAA・AAAの自動判定はできません。この記事の白・黒以外の組み合わせは別途計算しました。