Webデザイン・UIの配色を、
「読める・押せる・迷わない」まで設計する
Webデザインの配色を、背景・本文・ボタン・リンク・状態色・フォーカス・ダークモードまで実務の流れで整理します。96の配色パターンを用途や雰囲気から探し、そのままUI配色ラボで試せます。色の決め方、アクセシビリティ、CSS実装、公開前チェックまで、このページ内で一気に進められます。
画面デザインの参考写真やスクリーンショットから、気になる1点の色をそのまま拾えます。 カーソル位置の1pxをHEX・RGB・HSLで確認でき、必要なら3×3〜15×15の平均にも切り替えられます。
何を作りたい？ 目的から選ぶ
色の名前が分からなくても大丈夫です。作りたいサイトに近いものを選ぶと、下のおすすめ96パターンから候補を絞れます。
仕上がりの雰囲気から選ぶ
作るものは決まっていても、雰囲気で迷う人はこちらから。
使う場面・条件から選ぶ
誰に見せるか、どんな画面かまで決まっている人はこちらから。
Webデザインの配色パターンを96例から選ぶ
ゼロから色を考えなくて大丈夫です。用途・雰囲気・キーワードから絞り込み、気になるパターンをそのまま専用ラボで試せます。
96配色を、用途・コントラスト・配色の役割から自動評価して候補を3つに絞ります。
順位は固定の「正解」ではなく、このページ内の96配色を用途別の基準で比較した候補です。ブランド・文字サイズ・実際の画面構成に合わせてラボで最終確認してください。
Webデザインの「3色ルール」は、最初の整理に使う
「配色は3色にするとまとまりやすい」という考え方は、Webデザインの出発点として便利です。ただし、3色に固定すること自体がルールではありません。実際のUIでは、成功・警告・エラー、リンク、フォーカス、無効状態など、意味を持つ色を別に設けることがあります。
まずは3つの役割に分ける
- ベース：背景や大きな面積を支える色
- メイン：ブランドや主要な見出し・主要操作を担う色
- アクセント：CTAや強調など、視線を集めたい場所に使う色
60-30-10は「目安」として使う
- 60%：ベースカラー
- 30%：メインカラー
- 10%：アクセントカラー
比率は画面構成やコンポーネントによって変わります。数字を守ることより、情報の優先順位とコントラストを崩さないことを優先します。
色だけで状態や意味を伝えないことも重要です。エラーなら色に加えてアイコンや文言、リンクなら下線や形状など、色以外の手掛かりも併用します。
最初の3分でやること
いきなり「何色にする？」から始めず、まず役割を4つに分けます。
長時間見る面と文字を最初に固定します。最も使用回数が多い組み合わせです。
CTA、保存、購入など「一番押してほしい操作」の色を決めます。
成功・警告・エラー・情報を、意味が混ざらないよう整理します。
見た目だけで決めず、コントラスト比と実装値を確認します。
Web・UIでは「色名」より「役割」で管理する
同じ青でも「ブランド」「リンク」「主要ボタン」「情報表示」では意味が違います。色を役割に結びつけると、ページが増えても一貫性を保ちやすくなります。
ページ背景、カード、モーダル、入力欄など。大面積なので刺激を抑え、階層差を作ります。
本文、見出し、注釈、placeholder。重要度に応じて段階を作りつつ、薄くしすぎないことが重要です。
CTAや主要ボタン。画面内で最も重要な操作に優先的に使い、乱用しません。
本文中リンクやナビゲーション。色だけでリンクと伝える設計は避け、下線なども検討します。
意味を伝える色。色だけに依存せず、アイコン・ラベル・文章も併用します。
キーボード操作中の現在位置や選択状態を示します。背景に埋もれない見え方を作ります。
Web・UI配色ラボ
色を変えながら、実際のUIに近い状態で「本文」「主要ボタン」「フォーカス」の見え方を確認できます。
設定を保存しますか？
色の役割を分けると、画面全体の優先順位が見えやすくなります。
このラボは色の一次確認用です。コントラスト比が基準を満たしても、フォントの太さ、背景画像、hover/focus状態、実機表示などで読みやすさは変わります。
実際の画面で見る｜選んだ配色をWeb・UIに反映
色見本だけでは判断しづらいので、実際の画面に近い5種類のサンプルで確認できます。上の配色ラボで色を変えると、ここにもそのまま反映されます。
信頼が伝わる企業サイト
見出し・本文・行動ボタンを実際の役割で確認します。
資料を見る同じ配色でも、画面の用途によって「主役色を使う場所」が変わります。ボタン・リンク・カード・状態表示など、実際の役割で確認してください。
WCAG 2.2で押さえたい色の最低ライン
「色がきれいか」ではなく「情報が知覚できるか」を確認するための基準です。以下は実務で特に関係しやすい項目です。
| 対象 | 目安 | Web・UIでの確認例 |
|---|---|---|
| 通常の文字 | 背景とのコントラスト比 4.5:1 以上 | 本文、ボタン内文字、フォームラベル、注釈など。 |
| 大きな文字 | 3:1 以上 | 大きな見出し等。W3Cではlarge-scale textに別基準があります。 |
| UI部品・必要なグラフィック | 隣接色との 3:1 が関係する場合がある | 入力欄の境界、意味を持つアイコン、フォーカス表示など。 |
| 色による意味 | 色だけを唯一の手掛かりにしない | エラーを赤だけで示さず「エラー」表記やアイコンも使う。 |
| キーボードフォーカス | 現在位置が視覚的に分かること | outlineを消したままにしない。WCAG 2.2ではFocus VisibleがLevel AAです。 |
成功・警告・エラーは「色＋別の手掛かり」で伝える
赤・緑・黄は便利ですが、色だけで意味を伝えると見分けづらい人がいます。状態名、アイコン、文章、形を組み合わせます。
緑だけではなく「保存しました」など結果を文章でも表示します。
黄色だけで注意を示さず、何に注意すべきかを書きます。
赤枠だけにせず、エラー理由と修正方法を近くに表示します。
青などの慣習色を使っても、ラベルやアイコンで意味を補助します。
色だけで意味を伝えず、必ずラベル・アイコン・文章など別の手掛かりを併用してください。
ダークモードは「白黒反転」で作らない
先に役割を固定する
- page background
- surface / card
- text primary / secondary
- border
- action / link
- success / warning / danger
ダーク側で再調整する
- 真っ黒背景＋真っ白文字だけに頼らない
- 面の階層差を残す
- ブランド色は暗背景で鮮やかすぎないか確認
- 状態色・フォーカス色も個別に確認
背景・面・本文・補助文字・境界線を分けた最小構成です。ブランド色や状態色は、この土台の上で個別に再調整します。
CSSでは色名ではなく「意味」で変数化する
後からテーマやブランド色を変えるとき、--blue-500 だけで管理するより、役割を表すsemantic tokenを挟むと保守しやすくなります。
おすすめの考え方
- Palette token：色そのもの
- Semantic token：その色の役割
- Component token：特定部品での用途
CSS例
公開前の色チェックリスト
「配色が決まった」で終わらず、実際の操作状態まで確認します。
必要になったら使う色しるべの機能
よくある疑問
ブランドカラーが4.5:1を満たさない場合は使えませんか？
ブランドカラーそのものを捨てる必要はありません。大面積の装飾やロゴなどと、本文・ボタン文字など読みやすさが必要な用途を分け、必要ならUI用の濃い派生色を用意します。
リンクは青でないといけませんか？
青である必要はありません。ただし本文の中でリンクだと分かる必要があります。色だけに頼らず、下線など別の視覚的手掛かりを併用する方法があります。
エラーは赤、成功は緑で固定ですか？
必須ではありません。ただし一般的な慣習として理解されやすい面があります。どの色を使う場合でも、色だけで意味を伝えず、アイコンや文章を併用するのが重要です。
デザインの3色ルールとは？
ベース・メイン・アクセントの3つの役割に分けて考える方法です。WebやUIでは整理の出発点として便利ですが、成功・警告・エラー・リンク・フォーカスなど意味を持つ色まで3色だけに制限する必要はありません。
60-30-10カラールールとは？
ベース60%、メイン30%、アクセント10%を目安にする配色の考え方です。Web画面では固定比率ではなく、情報の優先順位、可読性、操作性、コントラストを優先して調整します。
Webデザインの色はどう決めればいいですか？
最初に背景・本文・主要操作・アクセントなど役割を決め、その後にブランドや目的に合う色を当てます。最後に文字コントラスト、状態色、フォーカス、ダークモードまで実際のUIで確認すると破綻しにくくなります。
確認に使った一次情報
アクセシビリティに関する数値や要件は、W3C/WAIのWCAG 2.2を基準に確認しています。
- W3C WAI｜SC 1.4.3 Contrast (Minimum) — 通常文字4.5:1、大きな文字3:1。
- W3C WAI｜SC 1.4.11 Non-text Contrast — UI部品や意味を持つグラフィックのコントラスト。
- W3C WAI｜SC 1.4.1 Use of Color — 色だけを唯一の視覚的手掛かりにしない。
- W3C WAI｜SC 2.4.7 Focus Visible — キーボードフォーカスを視認できるようにする。
Webの色を別媒体にもそろえる
画面で決めた色を、印刷物・画像・ブランド運用へ展開するときはこちら。