目立たせたい情報へ次々と色を足すと、何が操作で、何が注意で、何が単なる飾りか分からなくなることがあります。
色は好みを表すだけでなく、情報の分類や状態を知らせる記号として働きます。
架空の申込管理画面を使い、基盤、文字、操作、状態の役割へ色を整理します。
色の見え方の違いを踏まえ、色が分からなくても必要な情報を受け取れる設計にします。
この記事で学ぶこと
- 色ごとに担う役割を決めます。
- 文字と背景の組み合わせでコントラストを確認します。
- 色に加えて文字や形でも必要な意味を伝えます。
使用中の色と意味を棚卸しする
最初に画面で使う色を一覧にします。
背景、本文、リンク、ボタン、成功表示、エラー、グラフを分け、各色が何を意味するかを書きます。
似た青が何種類もあっても、同じ役割なら統合を検討できます。
逆に同じ赤がエラーと申込ボタンの両方に使われていたら、役割の衝突を調べます。
架空の管理画面では、部署の好みで見出しを赤、完了を青、操作も青にしていました。
まず色の好みを議論する前に、利用者が状態と操作を区別できるか確認します。
「この青は何を示すか」を一語で答えられないなら、用途が混ざっている可能性があります。
写真やブランドロゴの色まで無理に少数へ変える必要はありません。
管理対象をUIの文字や部品などへ限定し、画像とは分けます。
色数を減らすこと自体を成果にせず、意味のある役割を揃え、不要な違いをなくすことを目的にしてください。
現状を記録しておくと、変更が全体へ与える影響を追えます。
ひとつの色を変えたら、ボタン、リンク、選択状態など、同じ値を使う場所を確認します。
目の前の画面だけを直して、別のページで読めなくなる変更を避けます。
状態色は、現実の状態と表示が一致して初めて役立ちます。
保存処理が終わっていないのに完了の色を出すと、利用者が画面を閉じるかもしれません。
色を決める担当と機能を作る担当で、いつ表示が変わるかを確認し、正しいタイミングを仕様へ残してください。
基盤色と強調色を役割で決める
基盤色は、背景や文字など画面の大部分を担う色です。
強調色は、主な操作や重要な違いへ注意を向ける色です。
基盤を落ち着かせ、必要な箇所だけに強調を使うと、見る場所を選びやすくなります。
鮮やかな色を広い面積へ使う必要はありません。
申込管理画面なら、通常の本文、補足、区切り、主要操作をそれぞれ決めます。
エラーや完了には別の状態色を割り当てます。
同じ青でも、リンクと主要ボタンのように関連する操作へ使う設計は可能です。
ただし色だけで操作種別を表すのではなく、形や文言も揃えます。
強調の役割が増えすぎたら、色を追加する前に情報の優先順位を見直します。
重要、注目、おすすめ、特別を別の鮮色にすると、利用者には強弱が伝わりません。
最も重要な操作と補助操作を分け、後者は文字リンクなど別の表現へ下げる方法があります。
ブランド色が薄い場合も、そのまま小さい文字へ使う必要はありません。
背景のアクセントへ使い、文字や操作には読める濃さを用意できます。
ブランドの印象と機能上の読みやすさを、同じ一色ですべて解決しようとしないでください。
文字と背景の明るさの差を測る
文字の読みやすさは、文字色と背景色の組合せで確認します。
W3CのWCAG 2.2では、通常の文字に原則4.5対1以上のコントラスト比を求めます。
大きな文字などには別の条件があるため、すべてを一律に3対1でよいと解釈しないでください。
確認日は2026年10月6日です。
測定では実際に表示する文字色と背景色を入力します。
画像上の文字や透明度のある色は、背景の場所によって結果が変わります。
サンプルの白背景で合格しても、写真へ重ねた状態の読みやすさを保証しません。
必要なら文字の背景に単色面を設けて確認します。
コントラスト比が基準を満たしても、極端に細い文字や小さい文字が使いやすいとは限りません。
数値は必要な確認の一つであり、全体の品質保証ではありません。
実際の画面で本文を読み、情報の階層や表示サイズも合わせて点検します。
色を修正したら、通常、ホバー、選択、エラーなどの状態も確認します。
通常時だけ読めても、選択すると白い文字が薄い背景へ重なるようでは不十分です。
部品の状態を一覧で並べ、変化の前後で意味と可読性が保たれるかを見ます。
色以外の手がかりを併用する
色だけで成功や失敗を伝えると、色の区別が難しい人や白黒で見る人に意味が届かないことがあります。
エラーなら赤い枠に加えて「メールアドレスの形式を確認してください」と具体的に書きます。
色は発見を助け、文字は何を直すかを伝える役割です。
グラフなら系列名を近くへ置き、線の種類や印も併用します。
赤い線と緑の線を凡例だけで区別するより、ラベルがあれば探す負担も減ります。
数値の大小を強い色だけで表さず、数字と単位も示してください。
白黒表示は簡易点検になりますが、すべての見え方を再現するものではありません。
フォームの必須項目も、赤だけにしません。
「必須」と文字で明記し、どの項目へ適用されるかを分かる位置へ置きます。
リンクは周囲の本文と色だけが違う場合、識別が難しくなることがあります。
下線などの手がかりを含め、操作できることが伝わるかを確認します。
色を増やさずに説明できるなら、その方法も検討します。
完了と未完了はラベルやアイコンで区別できる場合があります。
ただしアイコンだけでは意味が分からない人もいるため、初めて見る人が状態を説明できるかを確かめてください。
配色表を作り運用で確認する
配色表には色の値だけでなく、使う場所と使わない場所を記載します。
「主要操作／申込送信に使用／警告文には使わない」と書けば、新しい画面でも判断できます。
背景と文字の組合せ、状態の違い、測定結果も同じ表へ残します。
架空の完成案では、濃い文字を本文、青を主要操作、緑を完了、赤を入力エラーに使います。
これは例であり、色と意味が文化や業界を超えて必ず同じになるという主張ではありません。
既存サービスの習慣がある場合は、変更で利用者を迷わせないかも確認します。
レビューでは好きな色を投票で選ぶだけにしません。
どの操作が主か、どこにエラーがあるか、完了したかを答えてもらいます。
色を消した画像でも意味が残るかを見た上で、実画面の操作を確かめます。
読めなかった箇所は数値と表示条件を添えて修正します。
新しい色を追加する際は、既存の役割で説明できない理由を書きます。
一時的なキャンペーンの強調が恒久的なUIへ残ると、少しずつ意味が崩れます。
見直し日を置き、使われていない色や重複する役割を整理して、配色表を実態と一致させます。
コントラストの測定結果は、使用する組合せごとに記録します。
青単体が合格するという意味ではなく、青と白など特定の組合せの結果です。
背景を変えた際には再測定し、以前の結果をそのまま引き継がないようにします。
測定日と色の値があると更新を追えます。
実践課題
実践課題：色の役割表を作る
既存制作物の色を、役割と組合せの一覧へ変えます。
画面と使用色の値を用意し、通常・選択・エラーを含めて調べます。
不要な色を減らすだけでなく、色がなくても意味を説明できる文字や形を加えてください。
- 使用色と役割を一覧にする
- 基盤・操作・状態へ整理する
- 文字と背景のコントラストを測る
- 色以外のラベルを追加して初見で確認する
架空の完成例「主要操作＝青の送信ボタン。エラー＝赤い枠と修正内容の文章。完了＝緑の印と「受付済み」。本文と背景の組合せは測定して記録します。ブランドの淡色は背景に限定し、小さい文字へは使いません。」
自己確認
- 一つの色の役割を説明できる
- 文字と実際の背景で測定している
- 色だけに必要な意味を依存していない
まとめ
配色は、基盤、操作、状態の役割から決めます。
文字と背景の差を測り、ラベルや形を併用して意味を伝えます。
まず既存画面の色を一覧にし、同じ色が違う意味に使われていないかを確認してください。
- 色ごとに担う役割を決めます。
- 文字と背景の組み合わせでコントラストを確認します。
- 色に加えて文字や形でも必要な意味を伝えます。
