色だけで伝えないUI：実務で使える3つのデザインパターン
2025年12月 3日
アクセシビリティの原則として有名な「色だけで情報を伝えない」は、分かっているつもりでも実装に落とし込めていないケースが多くあります。
特に、色覚多様性のあるユーザーや、明るい場所・暗い場所・低品質ディスプレイなど環境に左右されるユーザーにとって、色だけに依存したUIは大きなバリアになります。
この記事では、RARE TEKTの上野が改善支援でよく使う“実務で本当に役立つ3つのデザインパターン”を紹介します。
1. 色だけに依存したUIは「理解の遅さ」と「誤操作」を生む
色で状態を表すUI（赤＝エラー、青＝選択中など）は馴染みがありますが、デザインとしては危険です。
次のような問題が発生します。
- 赤と緑の区別がつかないユーザーが一定数いる
- ディスプレイ環境で色が変わる（スマホの省電力モードなど）
- 色の濃度・明度が低いと「違い」が伝わらない
- 色の意味が文化圏・サービスによって異なる
つまり、色だけに頼るUIは「見えている人には便利だが、それ以外には伝わらない」不安定な設計です。
2. 実務で使える“3つの補助デザインパターン”
色を完全にやめる必要はありません。重要なのは、色＋もう1つの手がかりを組み合わせることです。
① 形（シェイプ）で状態を区別する
最も汎用性が高いのが「形による区別」です。
- エラーアイコンに三角形を使う
- 成功メッセージに丸やチェックを使う
- 選択中のボタンは枠線を太くする
色の違いが見えなくても、形の違いは確実に伝わるため、誤操作が大きく減ります。
② テキストで意味を補足する
もっとも効果が高いのが「言葉で明示する」方法です。
- エラー → 「入力内容を確認してください」
- 選択状態 → 「選択中」や「ON」などのラベル
- グラフ → ラベルを直接線・棒の近くに配置
テキストはどのユーザーにも伝わるため、色覚特性に関わらず理解できます。
③ パターン（模様）で差をつける
グラフ・図版などで特に有効なのが“パターンによる区別”です。
- 斜線
- ドット
- 格子
- 波線
棒グラフや円グラフの領域を色＋パターンで表すと、色覚に依存せず視認できます。
3. 具体例：よくある「色だけ依存UI」と改善案
エラー表示の例
❌ NG：赤字だけでエラーを表示
⭕ OK：赤字＋アイコン＋「入力内容を確認してください」
選択中ボタンの例
❌ NG：選択中のボタンを青にするだけ
⭕ OK：青＋太めの枠線＋「選択中」ラベル
グラフの凡例の例
❌ NG：青と緑だけで区別
⭕ OK：色＋パターン（ドット・ストライプ）で区別
4. 色依存を避けることで“総合的UX”が向上する
色以外の手がかりを追加することで、アクセシビリティだけでなくUX全体の改善につながります。
- 理解が早くなる
- 誤操作が減る
- 情報の優先順位が明確になる
- 視覚だけに依存しないためストレスが減る
結果として、初回訪問者から熟練ユーザーまで、すべてのユーザーにとって使いやすいUIになります。
5. 明日からできる実務アクション
- 「色だけで伝えている場所」を洗い出す
- エラー・選択状態・グラフの3領域から改善する
- 形（アイコン）＋テキストを併用する
- 重要ボタンは色だけでなく“枠線”や“太さ”で強調する
- Figmaのコンポーネントに「色＋補助手がかり」をセットで登録する
色だけのUIは、気づかないうちに多くのユーザーを取りこぼします。小さな改善でも、意味の伝わりやすさは劇的に変わります。