UIデザインの色の決め方【保存版】配色パターン・色彩心理・アクセシビリティを徹底解説

UIデザインの色は、ベースカラー70%・メインカラー25%・アクセントカラー5%の比率で決めると、統一感を保ちやすくなります。まずブランドやターゲットからメインカラーを選び、次にボタンなど操作を促す要素にアクセントカラーを割り当てます。文字と背景のコントラスト比はWCAGの基準で通常テキスト4.5:1以上が目安です。色覚多様性に配慮し、色だけで情報を伝えないことも重要です。本記事では配色パターン、色彩心理、決め方の手順、ツール、失敗例を解説します。

1. UIデザインにおける色の役割と重要性

UIデザインにおける色は、見た目を整えるための装飾ではありません。ユーザーが画面のどこを見て、何を押し、いまどの状態にあるのかを判断するための情報として働きます。ここでは、色が使いやすさや印象にどう影響するのか、色がどのような役割を担うのか、グラフィックデザインとの違いはどこにあるのかを整理します。

1.1 色が使いやすさと第一印象を左右する理由

ユーザーは画面を開くと、文章を読む前に色や配置の違いを手がかりに、目立つ要素から視線を動かします。そのため、色の差が適切につけられていれば、ユーザーは説明を読まなくても主要な操作や重要な情報にたどり着きやすくなります。反対に、同じ強さの色のボタンが並んでいると、どれが主要な操作なのかを読み取る手間が増えます。

第一印象についても、色が関わる可能性があります。Lindgaardらの研究では、Webページの視覚的な魅力に対する評価が50ミリ秒という極めて短い表示時間でも形成されることが報告されています。この研究は色だけを対象にしたものではありませんが、色は画面を開いた直後に目に入る視覚要素のひとつです。サービスの内容と色の印象が合っていないと、機能に問題がなくても「信頼できなさそう」「使いにくそう」と受け取られるおそれがあります。

使いやすさの面では、文字と背景の明るさの差が小さいと、文字そのものが読み取れなくなります。屋外で明るさが変わるスマートフォンの画面や、画面サイズが小さい環境では、その影響が出やすくなります。読めない画面は、デザインの好みに関わらず、操作の失敗や離脱につながります。

1.2 UIデザインの色が果たす4つの役割

UIデザインの色の役割は、次の4つに整理できます。

1つ目の情報の整理と優先度づけでは、色の濃淡や面の違いで、ユーザーに読む順番や見る場所を示します。線や余白だけで区切るよりも、背景色の差を使うほうが、グループの境目を直感的に伝えやすくなります。

2つ目の操作の手がかりは、ボタンやリンクがクリックやタップできることを示す役割です。主要な操作だけに目立つ色を使い、副次的な操作は控えめな色にすると、ユーザーが迷いにくくなります。

3つ目の状態のフィードバックは、操作の結果やシステムの状況を伝える役割です。ただし、色だけで状態を伝えると、色の違いを区別しにくいユーザーには届きません。W3Cのアクセシビリティ指針であるWCAGでも、色を情報を伝える唯一の手段にしないことが求められています。具体的な対応は、アクセシビリティの章で扱います。

4つ目のブランドと印象の形成は、サービスらしさを画面全体で一貫して見せる役割です。ブランドカラーは、ボタンやリンクなど役割を持つ要素にも使われるため、見た目の印象と操作性の両方に関わります。この役割を担う色の選び方は、後述の配色や決め方の章で扱います。

1.3 グラフィックデザインとUIデザインの色選びの違い

グラフィックデザインとUIデザインでは、色を選ぶ前提が異なります。ポスターやバナーなどのグラフィックデザインは、一枚のビジュアルで印象を伝えることが中心です。一方、UIデザインでは、ユーザーが操作を続ける画面で、同じ色が同じ意味を持ち続けることが求められます。

この違いから、グラフィックデザインで見栄えのよい配色が、そのままUIに使えるとは限りません。たとえば、淡い色の文字を淡い背景に重ねる表現は、ポスターでは雰囲気を出せても、フォームやボタンのラベルでは読みにくくなります。UIでは、見た目の美しさに加えて、状態の数だけ色を用意し、ルールに沿って管理できるかという視点が必要です。

2. UIデザインの色の基本知識

UIデザインで配色を決める前に、色を数値や言葉で扱うための基礎を押さえておく必要があります。ここでは、色を構成する要素、画面上で色を指定する形式、色の印象をそろえるための考え方を整理します。

2.1 色の三属性（色相・彩度・明度）

色は色相・彩度・明度の3つの属性で説明できます。この3つを「色の三属性」と呼び、配色を調整するときの共通の物差しになります。

UIでは、色相よりも明度の差が文字の読みやすさやボタンの視認性に大きく影響します。たとえば、色相が異なっていても明度が近い2色を隣り合わせにすると、境界が分かりにくくなります。逆に、同じ色相でも明度に差をつければ、要素の区別がつきやすくなります。

彩度は、画面全体の印象と注目度の配分に関わります。彩度の高い色を多用すると画面が騒がしくなり、どこを見ればよいか判断しにくくなります。彩度の高い色は操作を促したい箇所に絞り、それ以外は彩度を抑えると、視線を誘導しやすくなります。

2.2 RGBとHEX、HSLの違いと使い分け

画面上の色は、主にRGB、HEX、HSLの3つの形式で指定します。いずれも同じ色を別の方法で表しているため、相互に変換できます。

HEXはデザインデータやコードで最も広く使われ、色を短い文字列で共有できます。ただし、数値から色の明るさや鮮やかさを直感的に読み取るのは困難です。

HSLは三属性とほぼ対応した指定方法のため、「少し暗くする」「彩度を下げる」といった調整を数値で行いやすいのが利点です。たとえば、ボタンの通常時をhsl(210, 100%, 40%)とした場合、ホバー時は明度だけを35%に下げるといった運用ができます。ベースとなる色を決めたあとの明暗バリエーション作成にはHSL、確定した色の受け渡しにはHEXと使い分けると、作業が整理しやすくなります。

なお、印刷物で使われるCMYKは、ディスプレイでの表示を前提としたUIデザインでは基本的に使いません。画面ではRGBを基準に色を管理します。

2.3 トーン（色調）の考え方

トーンとは、明度と彩度を組み合わせて表現する色の調子のことです。「明るい」「くすんだ」「濃い」といった色の印象を、色相とは別に整理できます。日本では、財団法人日本色彩研究所が開発した「PCCS（日本色研配色体系）」が、トーンを体系化した代表例として知られています。PCCSでは、ビビッド、ライト、ダルなど複数のトーンに色が分類されます。

UIデザインでトーンを意識する利点は、色相が違っても、トーンをそろえるだけで画面全体に統一感が出る点にあります。たとえば、赤・青・緑のカテゴリ色を使うとき、すべてを同じ明度と彩度に近づければ、色がばらついた印象を避けられます。逆に、強調したい要素だけトーンを一段階鮮やかにすれば、ほかの要素との差が明確になります。

色を選ぶときは、色相だけで決めず、「このトーンの範囲で統一する」という方針を先に立てると判断がぶれにくくなります。配色の比率やパターンへの応用は、次章で詳しく扱います。

3. UIデザインの配色パターンと比率

UIの配色は、どの色を組み合わせるかという色相の組み合わせ（パターン）と、各色を画面のどれだけの面積に使うかという比率の2点で決まります。パターンが整っていても比率が偏ると、操作してほしい要素が目立たなくなります。

3.1 ベースカラー・メインカラー・アクセントカラーの役割

UIの配色は、役割の異なる3種類の色で構成するのが基本です。役割ごとに色を分けておくと、画面を追加しても配色の判断基準がぶれにくくなります。

アクセントカラーは、使う箇所が少ないほど目立ち、画面のあちこちに使うと注目を集める効果が薄れます。1画面で最も押してほしいボタンにだけ使うなど、使う場面を決めておくと運用しやすくなります。

実際のUIでは、この3色に加えて、本文用のテキストカラーと、エラーや成功などの状態を示す色も必要です。ただし、これらはパターンや比率を考える段階では補助的な色として扱い、3色の構成を先に固めます。

デザインシステムでも色は役割ごとに定義されます。たとえばMaterial Designのカラーロールでは、primary、secondary、tertiaryといった役割で色を分けて管理します。色そのものではなく役割で名前を付ける考え方は、配色を設計するうえで参考になります。

3.2 70-25-5の法則で配色バランスを整える

70-25-5の法則は、ベースカラー70%、メインカラー25%、アクセントカラー5%を面積の目安とする配色の考え方です。法則として厳密に定められた規格ではなく、バランスを確認するための目安として使います。

ECサイトの商品一覧画面を例にすると、次のように割り当てられます。

この比率は、画面の内容によって次のように調整します。

• 写真やイラストが画面の多くを占めるサービスでは、画像の色が面積を占めます。UI側の色は比率どおりに配分せず、全体を抑えめにして画像と競合しないようにします。
• 情報量の多い管理画面では、背景と余白が広がるため、ベースカラーが70%を超えることがあります。この場合はアクセントカラーの割合を増やさず、色の役割を絞ります。
• アクセントカラーが複数の要素に分散して5%を大きく超えると、どれが最重要の操作なのかが伝わりにくくなります。

3.3 代表的な配色パターン

メインカラーとアクセントカラーの関係は、色相環上の位置から整理できます。以下の4つが、UIでよく使われる代表的なパターンです。

3.3.1 同系色配色

同系色配色は、1つの色相を固定し、明度と彩度だけを変えて組み合わせる方法です。たとえば青の色相で、背景を明るい水色、見出しを濃い青、ボタンを中間の青にします。色相が揃うため、統一感が出やすく、初めてでも失敗しにくい配色です。

注意点は、色同士の差が小さいと、ボタンと背景など要素の区別がつきにくくなることです。明度に十分な差をつけてください。また、行動を促す要素が埋もれやすいため、重要なボタンにだけ別の色相を少量加える方法も有効です。

3.3.2 補色配色

補色配色は、色相環で向かい合う2色を組み合わせる方法です。青とオレンジ、緑と赤紫などが該当します。お互いを引き立て合うため、メインカラーの青の画面にオレンジのボタンを置くと、ボタンが目に入りやすくなります。

両方の色を大きな面積で隣り合わせにすると、境界がちらついて見え、目が疲れやすくなります。補色同士を文字色と背景色に使うのも避けてください。補色のうち一方を広い面積に、もう一方を小さな要素に限定して使うと、70-25-5の比率にも沿います。

3.3.3 トライアド配色

トライアド配色は、色相環を3等分した位置にある3色を組み合わせる方法です。赤・黄・青のような組み合わせが代表的で、変化が大きく、活気や親しみやすさを出したい場面に向いています。

3色すべてを高い彩度で同じ面積に使うと、画面が騒がしくなり、視線の行き先が定まりません。1色をメインにして広めに使い、残り2色は面積を絞るか、彩度を下げて補助的に使うとまとまります。

3.3.4 アナロガス配色

アナロガス配色は、色相環で隣り合う2〜3色を組み合わせる方法です。青・青緑・緑のように、色味が連続的に変わるため、同系色より変化があり、補色より穏やかな配色になります。

隣り合う色は明度が近くなりやすく、区別がつきにくいことがあります。要素の違いを色相差だけで伝えず、明度の差もつけてください。メリハリが足りないときは、色相環の反対側にある色を、アクセントカラーとして1か所に加えると効果的です。

4. 色彩心理を活かしたUIデザインの色選び

色彩心理とは、色が人に与える印象や感情の傾向を扱う考え方です。UIデザインでは、色の印象をサービスの性格や操作の意味に合わせることで、ユーザーが画面の意図を直感的に理解しやすくなります。

ただし、色のイメージは固定されたものではありません。同じ赤でも、明るい朱色と暗い赤では受ける印象が異なります。また、使われる文脈や文化、ユーザーの年齢によっても変わります。以下の内容は、一般的に語られる傾向であり、すべてのユーザーに同じ効果があるとは限らない点を前提に読んでください。実際の採用にあたっては、ターゲットへのヒアリングやABテストで確認すると確実です。

4.1 色別のイメージと効果

色の印象は色相だけでなく、彩度と明度でも変化します。高彩度の色は活動的で目立ち、低彩度の色は落ち着いた印象になります。ここでは色相ごとに、代表的なイメージとUIでの使いどころを整理します。

4.1.1 青・緑系のイメージと使いどころ

青は信頼感、誠実さ、冷静さを連想させやすい色です。緑は安心感、安定、自然、健康といったイメージを持たれやすい色です。どちらも画面全体に使っても視覚的な負担が比較的少ないため、長時間使われる業務ツールや、信頼性が求められるサービスのメインカラーとして採用されることが多い色です。

青はリンクの色として広く定着しており、ユーザーは青い文字をクリックできる要素として認識しやすい傾向があります。この慣習を活かすなら、青系をリンク以外の装飾に多用しすぎず、操作できる要素との区別を保つことが大切です。

4.1.2 赤・オレンジ系のイメージと使いどころ

赤は情熱、興奮、注意、危険といった強い印象を与えます。オレンジは親しみやすさ、活発さ、カジュアルさを感じさせる色です。どちらも視線を集めやすいため、見せたい要素を強調する場面と、警告を伝える場面で使い分ける必要があります。

赤をエラーに使うルールは多くのサービスで共通しているため、ユーザーは赤い表示を「問題が起きた」と受け取りやすくなっています。メインカラーを赤にする場合は、エラー表示を赤の濃淡だけで済ませず、アイコンやメッセージ文を加えて区別すると誤解を防げます。

4.1.3 黄色・紫・ピンク系のイメージと使いどころ

これらの色は、青・緑・赤に比べると、メインカラーよりもアクセントや特定のターゲット向けに使われることが多い色です。印象が個性的な分、サービスの世界観を強く打ち出せる反面、使う面積と場面の判断が重要になります。

4.1.4 白・黒・グレーのイメージと使いどころ

白・黒・グレーは無彩色と呼ばれ、UIの背景、文字、境界線など、画面の土台を構成する役割を担います。色相を持たないため、他の色を引き立てる効果もあります。

グレーは「操作できない」「優先度が低い」という意味を持たせやすい色です。本当に読ませたい情報までグレーにしてしまうと、見落としにつながるため、補足情報に限定して使います。

4.2 業種やサービス別に見るUIデザインの色の選び方

業種ごとに、ユーザーがサービスに期待するイメージはある程度共通しています。その期待に近い色を選ぶと、初めて訪れたユーザーでもサービスの性格を短時間で把握しやすくなります。一方で、同業他社と同じ色ばかりになると差別化が難しくなるため、競合の色を調べたうえで、サブカラーやアクセントで個性を出す方法もあります。

実際のブランドでも、Yahoo! JAPANや楽天市場は赤、LINEは緑というように、ブランドカラーがそのままUIのアクセントやボタンの色に反映されています。業種の一般的な傾向に従うだけでなく、自社のブランドカラーが既にある場合は、それを基準にして他の色を決めると統一感を保ちやすくなります。

4.3 日本の文化や年齢層に配慮した色選び

日本のユーザーに向けたUIでは、国内で定着している色の使い方や、利用者の年齢による見え方の違いも考慮する必要があります。

文化面では、色が持つ意味が国や地域によって異なる点に注意します。たとえば株価や為替の表示では、日本の多くの証券サービスは上昇を赤、下落を青や緑で示す傾向があります。一方、欧米では上昇を緑、下落を赤とする表示が一般的です。海外製のデザインテンプレートやUIライブラリをそのまま使うと、国内ユーザーの慣習とずれることがあるため、公開前に確認が必要です。また、赤は祝い事を連想させる一方で、家計簿や会計の画面では赤字を連想させます。同じ色でも、サービスの文脈によって受け取られ方が変わるため、日本国内向けの競合サービスの表示も参考にします。

年齢層では、加齢による視覚の変化が配色に影響します。水晶体が黄色く濁るなどして、高齢になると、暗い色どうしや青系の濃淡の区別がつきにくくなることが知られています。国内には、年齢を考慮した色の組み合わせ方を示すJIS規格（JIS S 0031）もあります。高齢者の利用が多いサービスでは、以下のような工夫が有効です。

年齢層に合わせた色選びは、見た目の好みだけでなく、操作に必要な情報を確実に読み取ってもらうための配慮でもあります。コントラスト比の具体的な数値や色覚特性への対応は、アクセシビリティの章で詳しく扱いますが、ターゲットの年齢が決まっている場合は、色を決める段階から見え方を想定しておくと手戻りを減らせます。

5. UIデザインの色の決め方の手順

UIの色は、メインカラー、アクセントカラーとサブカラー、要素ごとの割り当て、パレットの整備の順に決めると、後工程での手戻りが少なくなります。

5.1 ブランドやターゲットからメインカラーを決める

メインカラーは、サービスの印象を決める基準色です。ロゴやコーポレートカラーがある場合は、それを起点にします。ない場合は、次の手順で候補を絞ります。

1. サービスの特徴や提供したい印象を、「信頼」「親しみ」「先進性」など3つ程度の言葉にする。
2. ターゲットの年齢層、利用シーン（屋外か室内か、夜間利用が多いか、長時間見続けるか）を整理する。
3. 競合や同じ分野のサービスで使われている色を調べ、分野の慣習に合わせるか、差別化するかを決める。
4. 候補を2〜3色に絞り、実際の画面に当てはめて比較する。

ロゴの色をそのままUIに使えないことがあります。彩度や明度が高い色は、白背景の文字やボタンに使うと読みにくくなる場合があります。ロゴの色相は保ったまま、明度と彩度をUI用に調整した色を別に用意すると、ブランドの印象と画面の見やすさを両立できます。

候補色は、ヘッダー、ボタン、カード、フォームを含む実際の画面に当てはめて確認します。単色の見本だけで決めると、広い面積に使ったときの強さや、文字を載せたときの読みやすさを見落とします。ディスプレイによって色の見え方は変わるため、PCとスマートフォンの両方で確認してください。

5.2 アクセントカラーとサブカラーを選ぶ

メインカラーが決まったら、アクセントカラーとサブカラーを選びます。両者は役割が異なるため、選ぶ基準も異なります。

注意したいのは、メインカラーやアクセントカラーとセマンティックカラーが衝突する場合です。たとえばメインカラーが赤系だと、通常のボタンとエラー表示の区別がつきにくくなります。この場合は、エラー表示は赤の明度や彩度を変えて区別するか、アイコンや文言を併用して、通常の操作と警告を見分けられるようにします。アクセントカラーに赤や緑を使う場合も同様です。

色数は、増やすほど管理が難しくなります。最初は、メイン1色、アクセント1色、サブ1〜2色、セマンティックカラー4色（成功・警告・エラー・情報）にとどめ、画面で不足が出た時点で追加を検討します。

5.3 ボタンやリンクなど要素別に色を割り当てる

色の候補が揃ったら、UIの要素ごとに役割を決めて割り当てます。同じ意味の要素には同じ色を使い、異なる意味の要素には同じ色を使わないことが基本です。ルールが一貫していれば、ユーザーは色から操作可能な箇所や重要度を学習できます。

ボタンやリンクには、通常時に加えて状態ごとの色も決めます。

割り当ての作業は、背景と文字、ボタン、リンク、状態、通知の順に進めると抜け漏れが出にくくなります。削除ボタンは赤、完了表示は緑といった、色と意味の対応も、この段階でルールとして固定します。

5.4 カラーパレットとデザインシステムに落とし込む

決めた色は、制作者や開発者が同じ色を使えるように、パレットとして整理します。ここで整理しておくと、画面が増えても色の使い方がぶれにくくなり、後から色を調整する場合の修正範囲も限定できます。

まず、メイン、アクセント、サブ、グレーの各色を、明るい色から暗い色まで段階的に用意します。たとえば、各色を50から900までの10段階のスケールにしておくと、背景には淡い段階、文字やボタンには濃い段階というように、用途に応じて選べます。

次に、色の名前を2階層で定義します。色そのものを表す名前（プリミティブ）と、用途を表す名前（セマンティック）を分けると、色を差し替えても用途側の定義を変えずに済みます。

この考え方は、Material Design 3のカラーロールにも見られます。Material Design 3では、primary、secondary、tertiary、errorなどの役割ごとに色を定義し、その上に載せる文字やアイコンの色も対応づけています。

Figmaでは、カラースタイルや変数（Variables）として登録すると、デザインファイル全体で同じ色を参照できます。色を変更したいときも、定義を更新すれば、使用している箇所へ反映できます。実装側では、CSSカスタムプロパティなどに同じ名前で定義すると、デザインとコードの対応が分かりやすくなります。

パレットには、色の値だけでなく、使い方のルールも記載します。記載する内容は次のとおりです。

• 各色の用途（どの要素に使うか）
• 文字色と背景色の組み合わせの可否
• 使ってはいけない例（アクセントカラーを装飾に多用しない、など）
• 新しい色を追加するときの判断基準と承認の流れ

運用ルールまで文書化しておくと、担当者が変わっても同じ基準で色を選べます。

6. UIデザインの色とアクセシビリティ

UIの色は見た目の好みだけで決めると、視力が低い人、色の見え方に特性がある人、屋外で画面を見る人などにとって使いにくくなります。アクセシビリティに配慮した色選びは、特定の人のためだけの対応ではなく、あらゆる環境や状態のユーザーが同じ情報を読み取り、操作できるようにするための基本要件です。ここでは、数値で判断できるコントラスト比、色の見え方の違い、色以外の手がかりの3点に分けて整理します。

6.1 コントラスト比の基準（WCAG）と確認方法

コントラスト比とは、文字色と背景色の明るさの差を表す数値で、1:1（差なし）から21:1（黒と白）までの値をとります。ウェブアクセシビリティの国際的なガイドラインであるWCAG 2.1（WAIC日本語訳）では、達成レベルごとに必要な比率が定められています。多くのサイトや公共性の高いサービスでは、中間のレベルであるAAを目標にするのが一般的です。

18ptはCSSのpxに換算すると約24px、14ptは約18.7pxにあたります。非テキストの基準はWCAG 2.1で追加された項目で、文字だけでなく、入力欄の枠線やフォーカスの表示、グラフの線といったUI部品も3:1以上の差が必要です。一方、無効化されたボタンやロゴタイプ、装飾目的の要素は、基準の対象外とされています。

確認は、文字色と背景色のカラーコードを取得し、コントラスト比を計算できるチェックツールに入力して行います。具体的なツールは後述の章で紹介します。確認する際は、通常時の見た目だけで済ませず、次の箇所も対象に含めてください。

• ホバー、フォーカス、押下、選択中などの状態ごとの色
• 入力欄のプレースホルダーやヘルプテキストなど、薄いグレーになりやすい文字
• 写真やグラデーションの上に重ねた文字（背景のもっとも明るい部分と暗い部分の両方で確認する）
• ダークモードなど、テーマを切り替えた場合の配色

基準に届かないときは、文字色を暗く、または背景を明るくして明度の差を広げます。コントラスト比は色相や彩度ではなく明るさの差で決まるため、色味を変えるだけでは改善しないことがあります。ブランドカラーが基準を満たさない場合は、ブランドカラーを背景に使い、文字は白や濃い色にするなど、使い方を調整する方法があります。

6.2 色覚多様性に配慮した色の使い方

色の見え方には個人差があります。NPO法人カラーユニバーサルデザイン機構（CUDO）によると、日本では男性の約5%、女性の約0.2%が、一般的な色覚とは異なる色の見え方をするとされています。クラスに1〜2人、男性の多い職場では数十人に1人以上の割合で該当者がいる計算になるため、UIの色は色覚の多様性を前提に設計する必要があります。

見え方の特性にはいくつかの型があり、日本人では赤と緑の区別がつきにくい型が大半を占めるとされています。配色を決めるときは、色相の違いだけに頼らず、明度の差を確保することが有効です。明度に十分な差があれば、色の違いが分かりにくい場合でも、濃淡の違いで要素を見分けられます。

区別しにくくなりやすい組み合わせと、対応の例は次のとおりです。

グラフやステータス表示などで複数の色を使い分ける場合は、色覚の多様性に配慮して選ばれた配色セットを使うと判断の手間を減らせます。CUDOは、色覚の特性にかかわらず見分けやすい配色を提示しています。作成後は、色覚シミュレーションで見え方を確認すると、問題のある箇所を見つけやすくなります。ただしシミュレーションは見え方の目安であり、実際の見え方には個人差があるため、明度差と色以外の手がかりを併せて設計してください。

6.3 色だけに頼らない情報伝達の工夫

WCAGの「色の使用」の基準（達成基準1.4.1）では、情報の伝達、操作の指示、反応の促し、要素の区別を、色だけで行ってはならないとされています。色が見分けられない場合だけでなく、白黒印刷や、日差しの強い屋外での閲覧、低品質なディスプレイでも、色だけの表現は伝わらなくなります。色に加えて、形、文字、位置、パターンなど別の手がかりを用意します。

キーボード操作やスクリーンリーダーを使う人にとっては、フォーカスの位置が見えることも重要です。フォーカスを示すアウトラインは、背景に対して3:1以上の差を確保し、ブラウザ標準の表示を消す場合は代わりの表示を必ず用意します。

これらの対応は、色を使わないという意味ではありません。色は情報を補強する手段として使い、情報の本体は文字や形でも伝わるようにするのが設計の基本です。デザインレビューの段階でUIをグレースケールに変換し、状態の違いが読み取れるかを確認すると、色だけに頼った箇所を見つけられます。

7. UIデザインの配色に役立つツール

配色ツールは、配色案の作成、コントラストの確認、デザインデータへの反映という3段階に分けて使い分けると作業が滞りません。ここでは各段階で使えるツールと、その使いどころを紹介します。

7.1 配色を生成できるカラーツール

配色ツールは、基準になる1色から調和する色の組み合わせを提案してくれます。配色理論の知識が浅くても候補を比較できるため、メインカラーが決まった後のアクセントカラーとサブカラーの絞り込みに向いています。

Adobe Colorは、カラーホイール上で基準色を動かしながら、補色、トライアド、類似色などの配色ルールに沿った組み合わせを確認できるWebツールです。写真をアップロードして、画像の雰囲気に近い色を抽出する機能もあります。Photoshop、IllustratorなどのAdobe製品やCreative Cloudライブラリと連携できるため、すでにこれらを使っている制作環境では色の受け渡しが容易です。

Coolorsは、ボタン操作でパレットを次々に生成するツールです。気に入った色だけを固定して残りを再生成できるため、メインカラーを固定したまま、組み合わせる色だけを入れ替えて探す使い方ができます。コントラストの確認機能や、Figma用のプラグインも提供されています。

Color Huntは、デザイナーが投稿した4色のパレットを一覧から選ぶ形式のサイトです。ゼロから色を組むのではなく、完成した配色例から雰囲気の近いものを探したいときに役立ちます。

これらのツールが出す配色は、あくまで色相の調和を基にした候補です。ボタンの文字が背景に対して読めるか、ブランドの印象と合っているかは判断してくれません。生成後は次のコントラスト確認に進み、実際の画面で検証してください。

7.2 コントラストを確認できるチェックツール

チェックツールは、前景色と背景色を入力してコントラスト比を算出し、WCAG 2.1の達成基準を満たすか判定します。基準値の内容は前章で扱ったため、ここでは入力から判定までの手順に絞って説明します。

WebAIM Contrast Checkerは、前景色と背景色のカラーコードを入力すると、コントラスト比と、通常の文字、大きな文字、UI部品それぞれの合否を表示します。画面を見ながら明度を調整でき、基準を下回ったときに色を微調整する作業に向いています。英語のツールですが、表示項目は少なく、操作に迷うことはほぼありません。

Google Chromeのデベロッパーツール（DevTools）では、実装済みのページ上でコントラスト比を確認できます。要素を選んでスタイルペインの色の指定部分をクリックすると、カラーピッカーにコントラスト比が表示されます。また、レンダリングの設定から色覚特性のエミュレーションを選ぶと、色の見え方の違いも確かめられます。デザインツール上では問題がなくても、画像の上に重ねた文字や状態変化後の色は実装後に崩れることがあるため、ブラウザ上での確認が有効です。

Adobe Colorにも、コントラスト比の確認と色覚特性のシミュレーションを行う機能があります。配色を作る画面からそのまま検証できるため、ツールを行き来する手間が省けます。

7.3 Figmaで使えるカラー管理プラグイン

Figmaでは、色の管理と検証をデザインデータ上で完結できます。標準機能のカラースタイルとバリアブルに色を登録しておくと、1か所の色を変更するだけで、使用している全画面に反映されます。バリアブルはライトモードとダークモードのように、モードごとに値を切り替えて持たせることもできます。プラグインは、この標準機能を補う位置づけで使います。

Starkは、Figma上でコントラスト比の確認と色覚特性のシミュレーションを行えるプラグインです。選択した要素の文字色と背景色を判定できるため、画面を作りながらその場で基準の合否を確かめる使い方ができます。

A11y – Color Contrast Checkerも、Figma上でコントラスト比を確認できるプラグインです。選んだレイヤーの色の組み合わせを判定する点で、Starkと用途が重なります。機能や表示の見やすさに違いがあるため、実際に使って自分のチームの運用に合うほうを選ぶとよいでしょう。

Material Theme Builderは、基準色からGoogleのMaterial Designに沿った配色テーマを生成するプラグインです。ライトテーマとダークテーマの両方の色を一度に作れるため、Material Designを採用するプロジェクトで、色の役割ごとの割り当てを素早く用意できます。

Coolorsのプラグインを使えば、Coolorsで作ったパレットをFigmaに取り込めます。外部ツールで検討した配色を手作業で入力し直す必要がなくなり、色の転記ミスも防げます。

プラグインの提供内容や対応機能は更新されることがあります。導入前にFigmaコミュニティの各プラグインのページで、最新の機能を確認してください。

8. UIデザインの色でよくある失敗と改善のコツ

配色の失敗は、色そのものの良し悪しよりも、色の使い方にルールがないことから起こります。ここでは、制作現場で起こりやすい3つの失敗について、原因と具体的な直し方を整理します。

8.1 色数を使いすぎて統一感がなくなる

画面ごとに別の色を足していくと、ボタンやリンク、見出しの色がばらつき、どこを押せばよいのか、どの情報が重要なのかがユーザーに伝わりにくくなります。複数人でデザインを分担している場合や、機能追加を繰り返したサービスで特に起こりやすい失敗です。

原因の多くは、色を「見た目の好み」で選んでおり、「役割」で決めていないことです。たとえば、同じ「押せる要素」なのに、画面によって青、緑、オレンジとボタンの色が変わっている状態です。

直し方の手順は次のとおりです。まず、現在の画面で使われている色をすべて書き出し、近い色をまとめます。次に、ベース・メイン・アクセントの3系統と、グレーの階調、状態を示す色に分類し、分類に入らない色は削除するか既存の色に置き換えます。最後に、色名ではなく「ボタン背景」「本文テキスト」のような役割名で管理します。こうしておくと、新しい画面を作るときに色を選び直す必要がなくなり、統一感を保てます。

色数を減らしても単調にならないよう、同じ色相の明度を変えて濃淡をつける方法が有効です。背景、枠線、ホバー時の色などを、メインカラーの明るい色や暗い色で作れば、新しい色相を足さずに情報の強弱を表現できます。

8.2 文字が読みにくい配色になっている

デザイン画面上では整って見えても、実際のスマートフォンや屋外の明るい環境では文字が読みにくくなることがあります。見た目の雰囲気を優先して文字色を薄くすると、読みにくさに直結します。

読みにくくなる代表的なパターンと対処法は次のとおりです。

判断の基準として、WCAG 2.1の日本語訳では、達成基準1.4.3（レベルAA）で、通常サイズの文字は背景とのコントラスト比4.5:1以上、大きな文字は3:1以上が求められています。確認の具体的な方法は、アクセシビリティの章で扱ったとおりです。ここでは、デザインの途中段階で本文・補足テキスト・ボタンのラベルの3か所を優先的に測ることを習慣にすると、後からの手戻りを減らせます。

配色を直すときは、背景色を動かすより文字色を調整するほうが、全体の印象を保ちやすくなります。文字を濃くしても重く感じる場合は、文字色の明度は確保したまま、行間や文字サイズで軽やかさを調整します。

8.3 ダークモードで色が破綻する

ライトモードの配色を単純に反転させてダークモードを作ると、色の見え方が変わり、読みにくさや不快感が生じることがあります。背景が暗くなると、同じ色でも明るく鮮やかに感じられるためです。

GoogleのMaterial Designのダークテーマに関するガイドラインでも、ダークテーマの背景には純黒ではなくダークグレーを使うことや、彩度の高い色は暗い背景で視認性の問題を起こしやすいため彩度を抑えた色を使うことが示されています。

実務では、色を直接指定せず、「背景」「文字」「ボタン」などの役割名をつけた色の変数として管理しておくと、ライトモードとダークモードで別の値を割り当てるだけで切り替えられます。この仕組みはカラーパレットとデザインシステムに落とし込む段階で整えておくと、ダークモード対応の工数を減らせます。

仕上げの確認では、ライトモードで問題なかった組み合わせを、ダークモード側でも改めてコントラスト比と見え方の両方で確認します。数値が基準を満たしていても、彩度の高い色が暗い背景でちらつく場合があるため、実機での目視確認もあわせて行います。

9. まとめ

UIデザインの色は、使いやすさと第一印象に影響します。色相・彩度・明度を理解したうえで、ベースカラー・メインカラー・アクセントカラーを70-25-5の比率で配分すると、画面の統一感を保ちやすくなります。

色は、ブランドやターゲットからメインカラーを決め、アクセントカラーを選び、要素ごとに割り当てて、カラーパレットにまとめる順で決めます。色彩心理は業種や年齢層、文化によって受け取り方が変わるため、参考情報として扱います。

アクセシビリティでは、WCAGのAA基準で通常サイズの文字に4.5:1以上のコントラスト比が求められます。色だけに頼らず、文言やアイコンも併用して情報を伝えてください。