UIに効く青カラー完全版：ネイビー〜ライトブルーの使い分けと組み合わせ

結論｜UIの青は「役割」で決めれば迷わない

Webデザインで青を選ぶときは、「好きな青」を探すより先に、その青をどこで使うのか（役割）を決めると迷いが激減します。先に役割が決まれば、「この青は文字として読ませるのか」「面として敷くのか」といった判断軸ができ、候補を絞り込みやすくなります。リンク、ボタン、背景、アクセントの4つに分け、必要な青の数を絞れば、色コードの候補が自然に決まります。逆に、役割を決めないまま探し始めると、似た青を行き来して決め手を失いがちです。まずは使う場所を決めてから色を選ぶ、という順番にするだけで、配色の作業スピードも統一感も一気に上がります。

青が万能に見える理由と、迷いが増える落とし穴

青は信頼感や清潔感を連想させやすく、幅広いジャンルで使えます。金融・SaaS・医療・公共系など、堅実さを求められる領域でも受け入れられやすく、写真やイラストのテイストが違っても比較的なじみます。さらに、多くのOSやブラウザで「リンク＝青」が長く使われてきたこともあり、ユーザーの経験として“押せそう”に見えやすいのも強みです。

その一方で、青は種類（明度・彩度・色相の差）が多く、「どれもそれっぽい」ために選択肢が膨らみがちです。ほんの少し紫寄りにするだけで都会的に見えたり、緑寄りに振るだけでテックっぽく見えたりと、微差が印象に直結します。にもかかわらず、画面上では隣り合う要素の影響を強く受けるため、単体で見たときに良い青が、並べると突然チープに見えることもあります。

さらに、リンク・ボタン・背景のすべてを青で埋めると、情報の優先順位が見えにくくなり、結果としてUIのわかりやすさが下がることがあります。特に起きやすいのは、（1）リンクと通常テキストの差が小さくなって見落とされる、（2）CTAと二次ボタンの差がつかず行動が迷う、（3）背景に敷いた青のせいで全体が“青いモヤ”になり読み疲れる、の3パターンです。

加えて、青は白背景で薄く見えやすく、コントラスト不足にもつながりやすい色です。爽やかさを優先して明るい青を選ぶと、細い文字や小さいリンクが読みにくくなることがあります。「万能に見えるからこそ、使いどころを決めないと万能ではなくなる」という点が、青で迷いが増える最大の落とし穴です。

最初に分ける4役：リンク／ボタン／背景／アクセント

迷わないために、青の担当を先に決めます。

• リンク：本文中でクリックできる場所を見分けるための色（下線やホバー変化も含めて“リンクらしさ”を作る）
• ボタン：主要な行動を促す面積の大きい要素の色（主ボタンと副ボタンで強弱を付ける）
• 背景：カード・セクションなど、面で情報を分けるための色（主役にならない薄さが基本）
• アクセント：タグ、バッジ、アイコンなど、補助的に目を引かせる色（意味のある“少量”で効かせる）

この4役を決めると、「ボタンは面なので少し濃い青が必要」「背景は面なので淡い青が必要」「リンクは文字なので可読性が最優先」といったように、必要な濃さや彩度の方向性が自然に定まります。

同じ青でも「文字として読む青」と「面として使う青」では適正が違います。文字の青は、白背景でのコントラストと細部の読みやすさが重要です。一方で面の青は、広い面積で見たときの圧（強さ）や、隣接する白・グレーとの馴染みが重要になります。役割で分けるだけで、色選びの悩みが「無限の青」から「4つの用途」へと一気に縮みます。

迷わないルール：メイン青は1つ、補助は2つまで（状態色は派生でOK）

まずはメインに使う青を1つ決めます。次に、背景用の淡い青と、アクセント用の補助青を最大2つまでに絞ります。ここでのポイントは「色の数」ではなく「意味の数」を増やさないことです。メイン青が2つ3つに増えると、ユーザーは“どれが重要なのか”を毎回解釈しなければならず、UIの理解が遅くなります。

hoverやactiveなどの状態色は、メイン青から少し暗くする・少し明るくする、といった派生で作ると統一感が出ます。例えば「通常→hoverで少し暗く→activeでさらに暗く」のように段階を固定すると、ボタンやリンクの操作感が揃います。focusは色を変えるより枠線やシャドウで示すほうが、意味の混線が起きにくいこともあります。

また、disabledは“青の派生”にせず、グレー寄りに落とすのがおすすめです。操作できない状態に青を残すと、押せそうに見えて誤解を招きます。色数を増やすより、同じ青の濃淡で階層を作る方がUIが整います。

設計の前提｜ブランド青とUI青を分ける

青を上手に使うには、「ブランドを表す青」と「操作を支える青」を混ぜないことが重要です。青は便利で、つい何にでも当てはめたくなりますが、役割が違う青が同じ色だと、ユーザーは“どこが大事で、どこが押せるのか”を瞬時に判断しにくくなります。象徴としての青と機能としての青が同じだと、見せたい場所の主従が崩れ、結果としてUIのわかりやすさが下がりやすいからです。特に、情報量が多いページほど「色で意味を分ける」効果が大きいので、最初に分離しておくと後からの調整も楽になります。

ブランドカラー＝象徴、UIカラー＝機能（混ぜると崩れる）

ブランドカラーはロゴやキービジュアルなど、印象を作るための青です。サービスの人格や世界観を伝える青なので、多少個性的でも成立します。一方、UIカラーは「押せる」「選択中」「重要」「エラーに近い注意」など、意味を伝えるための青です。こちらは“誰が見ても迷わない”ことが優先で、奇抜さよりも識別しやすさが価値になります。

ブランド青をUIのすべてに広げると、押してほしいボタンとただの装飾が同じに見え、判断が遅くなることがあります。例えば、見出し・リンク・主ボタン・選択中タブが同じ青だと、画面全体が均一に強くなり、結局どれが行動の入口なのかがぼやけます。まずは「ブランド青は象徴として置く場所を限定する」「UIの青は操作に必要な場所だけに使う」と切り分けると、少ない色でも整理された印象になります。

リンク色は「識別性」と「一貫性」を優先（ブランド青と別でよい）

リンクは、本文中で最も見つけやすく、かつ本文の可読性を邪魔しない色が理想です。ブランド青が濃すぎたり彩度が高すぎたりする場合、リンクだけは別の青を採用して構いません。むしろ、ブランド青が“主役の青”であるほど、リンクは少し落ち着いた青にしたほうが、文章の流れを壊さずにクリック可能箇所だけを示せます。

重要なのは「リンクはこの色」と認識できる一貫性です。ページ内でリンクの青がブレると、クリックできる場所の判断に迷いが出ます。さらに、リンクは色だけに頼りすぎないのもコツです。下線、ホバー時の変化、訪問済みの変化などをセットで設計すると、色覚の差があっても迷いにくくなります。

青に頼らない土台：白・グレーで情報階層を作る

青を映えさせるには、中立色（白・グレー・黒寄りの文字色）で土台を整えるのが近道です。土台が整っていない状態で青を増やすと、見た目は派手でも情報の優先順位が伝わりにくくなります。背景が落ち着いているほど、少ない青でも十分に意味を持ちます。

カードの境界線、見出しの文字色、本文の色、補足文の色などを中立色で段階づけた上で、青は「意味のある箇所」にだけ置くと、UI全体が読みやすくなります。例えば、本文は濃いグレー、補足は少し薄いグレー、境界線はさらに薄いグレーにして、リンクと主ボタンだけ青にすると、色数は少なくても“押す場所”がはっきりします。青を増やす前に、まずグレーの階層で情報設計を作るのが、安定して整える最短ルートです。

青の系統をUI用途に翻訳する

青といっても、ネイビー寄りなのか、鮮やかなブルーなのか、ライトブルーなのかで印象も使いどころも変わります。色相の違いだけでなく、明度（どれくらい明るいか）と彩度（どれくらい鮮やかか）で、同じ青でも「強い」「軽い」「落ち着く」といった体感が大きく変わります。さらに、背景が白なのかダークなのか、文字なのか面なのかでも見え方が変わるため、色名だけで判断するとズレが起きやすいです。ここでは色名の違いを、UIでの使い方に結びつけて整理します。

ネイビー〜ミッドナイト：堅牢・締まる（見出し／ヘッダー／強いボタン）

深い青は重心が下がり、落ち着きや堅実さを出しやすい系統です。ヘッダー、フッター、見出し、主要ボタンなど「ここを主役にしたい」場所に向きます。画面全体のフレームとして使うと、情報が締まり、信頼感が出やすいのも特徴です。

ただし深い青は、面積が大きいと重たく見えやすいので、背景として広く敷く場合は余白を増やす、文字サイズを少し大きくするなど、圧をコントロールすると失敗しにくいです。また文字として使う場合は、黒に近すぎるとリンクに見えにくいことがあるので、装飾（下線や太字）や余白で区別できるようにします。濃い青は“見た目の強さ”が出やすい分、主役の場所にだけ使い、サブ要素はグレーや淡い青に逃がすとバランスが整います。

ロイヤル・コバルト：王道で使いやすい（リンク／主要CTA）

標準的な青は、リンクや主要CTAに使いやすく、白背景とも合わせやすいのが強みです。視認性と親しみやすさのバランスが取りやすく、リンクとしても「押せる」と伝わりやすい定番ゾーンです。ボタンの背景色にも文字色にも回しやすく、デザインシステムの主軸として採用しやすいのもメリットです。

使い勝手が良い分、同じ青を使うサービスも多いので、差別化したい場合は彩度を少し落として落ち着かせる、または少し紫寄り・緑寄りに振るなど、わずかな調整で独自性を作れます。さらに、同じ青でも「リンク用」と「CTA用」で濃さを少し変えると、意味の階層が作れます。例えば本文リンクは読みやすい濃さ、CTAは一段濃い青、といった具合です。色相を増やさずに階層を作れるので、UIが散らかりにくくなります。

ライトブルー・シアン：軽い・やわらかい（背景／サブ要素／情報表示）

明るい青は軽さや爽やかさが出ます。背景やサブ要素に使うと、圧が強くならず、情報の区切りを作れます。通知の情報枠、カードの背景、フィルタの選択状態など、「主役ではないけれど意味は持たせたい」場面と相性が良いです。淡い青を使うと“清潔感”が出やすい一方で、使いすぎると画面がぼんやりするので、面積と頻度は控えめにするのがコツです。

ただし、淡い青は文字とのコントラストが不足しやすいので、背景に敷く場合は文字色を暗くする、文字サイズを上げる、行間を広げるなど、読みやすさを優先して調整します。白文字を乗せたくなる場面もありますが、淡い青×白文字は読みにくくなりやすい組み合わせです。どうしても白文字にしたい場合は、背景を一段濃くするか、文字を太くするなどして、可読性を先に確保してからデザインを整えると安全です。

用途別｜そのまま使える青系カラーコード候補セット

ここでは「用途別」に、実務で使いやすい青の候補をまとめます。最終的には、プロダクトの雰囲気や写真素材、タイポグラフィに合わせて微調整しますが、まずは候補セットから選ぶとスピードが上がります。

リンク／主要ボタン向きのメインブルー（推奨レンジ＋候補セット）

メインブルーは、白背景で読みやすく、ボタンにも使える濃さが目安です。以下は「まず試しやすい」候補例です。

選び方のコツは、本文リンクは「読みやすさ」、CTAは「視認性」を優先することです。同じメインブルーでも、本文リンクは下線や太字で補強し、CTAは面積と余白で強さを出すと、色の圧が強くなりにくいです。

背景／サイドバー向きの淡いブルー（読みやすさ優先の候補セット）

背景に敷く青は、主役にならない薄さが基本です。淡いほど安全に見えますが、薄すぎると「白と区別がつかない」こともあるので、区切りが見える程度の差を確保します。

背景に青を敷くときは、文字色を濃いグレー（例：#111827 付近）に寄せると読みやすくなります。薄い青の上に青文字を重ねると読みにくくなることがあるので、リンクの色は濃くするか、下線で識別性を補います。

アクセント向きの補助ブルー（情報の強弱づけ用）

補助ブルーは、タグやバッジ、アイコンなど「小さな要素」に効かせると綺麗に決まります。面積が小さいほど彩度を少し上げても疲れにくいです。

アクセントは多用すると「常に強調」になって意味が薄れます。目立たせたい場所を先に決め、同じ補助ブルーを繰り返す方が、統一感が出ます。

状態色の作り方：hover／active／disabledを青で整える手順

状態色は「別の青を探す」より、同じ青を少しだけ動かすと整います。基本の流れは次の通りです。

• hover：メイン青を少し暗くする（または少し彩度を上げる）
• active：hoverよりさらに一段暗くする
• focus：枠線やシャドウで示す（色の面積を増やしすぎない）
• disabled：青を使わず、グレーに寄せる（操作できないことを明確にする）

青の状態色を作るときは、色差が小さすぎると変化が伝わりません。逆に差が大きすぎると「別のボタン」に見えることがあります。まずは小さな差で試し、操作感に合わせて調整します。

迷わない配色テンプレ｜青×中立色×差し色

配色で迷う原因の多くは「色の組み合わせのパターンが手元にない」ことです。特に青は“どの青でもそれっぽく見える”反面、隣の色や面積の影響で印象が変わりやすいので、行き当たりばったりに組むと整うまで時間がかかります。よく使うテンプレを決めておけば、毎回ゼロから考えずに済みます。さらに、テンプレごとに「青を使う場所」と「青以外で整える場所」を固定できるため、色を増やさずに一貫性を出しやすくなります。

鉄板：白・グレーで安定（可読性と余白が主役）

最も事故が少ないのは、白とグレーで情報設計を作り、青はリンクとCTAだけに使うパターンです。白は余白と清潔感を担い、グレーは文字の階層（本文／補足／キャプション）や境界線を担います。本文は黒ではなく濃いグレー、補足文は少し薄いグレー、境界線はさらに薄いグレー、といった階層があると、青が少なくても「押してほしい場所」が自然に目立ちます。

このテンプレの強みは、青を“常に見せる色”ではなく“意味を付ける色”として扱えることです。たとえば「リンクは青＋下線」「主CTAは青背景」「その他はグレーで整理」と決めておくと、色の強弱がブレにくくなります。逆に、見出しやアイコンまで青にすると全体が均一に強くなるので、青を増やす前にグレーの階層で解決できないかを先に確認すると安定します。

メリハリ：補色（オレンジ／イエロー）を“少量”で効かせる

青は反対色のオレンジ系と相性が良く、メリハリが出ます。青が「冷静・信頼」寄りの印象を作るのに対して、オレンジ／イエローは「注意・促進・活気」寄りの印象を作りやすいので、意味の分担もしやすい組み合わせです。

ただし差し色を増やすと、今度は差し色が主役になります。差し色は「1つの用途」に限定し、例えば「注意」や「キャンペーン」など、意味がはっきりしている場所だけに使うとブレません。たとえば、通常のCTAは青のまま、期間限定の訴求だけオレンジ、と決めると意味が明確です。また、差し色は“面積”が強さを決めるので、バッジや小さなアイコン、細いラインなど、小面積から試すと派手になりすぎません。

奥行き：同系色×トーン違いで階層を作る（色数を増やさない）

青の濃淡だけで、ヘッダー、カード、ボタン、リンクの階層を作る方法もあります。同系色でまとめると落ち着いた印象になり、BtoBや情報量が多いページに向きます。色相を増やさないぶん、全体の統一感が出やすく、写真や図版が多いサイトでも邪魔をしにくいのがメリットです。

ポイントは、明度差をしっかり取り、面積の大きい場所ほど薄く、小さい要素ほど濃くすることです。例えば、セクション背景はごく薄い青、カードはもう一段濃い青、ボタンはさらに濃い青、リンクは読みやすい濃さの青、と段階を固定すると迷いません。もし全体が“青っぽく”なりすぎたら、背景側を白や薄いグレーに戻し、青はリンクと主ボタンに寄せると、同系色のメリット（統一感）を残したまま軽さを取り戻せます。

アクセシビリティ｜青のコントラスト設計を“判断基準”で覚える

青は綺麗に見える一方、白背景で「薄く見える」ためにコントラスト不足が起きやすい色でもあります。特に、細い文字・小さい文字・淡い青の上に青文字といった条件が重なると、見た目の爽やかさと引き換えに読みやすさが落ちやすいです。さらに、ディスプレイの明るさや屋外での閲覧、ユーザーの視力・色覚の差でも見え方が変わるため、「自分の画面で読める」だけでは安全とは言い切れません。ルールを暗記するより、判断の順番を持っておくと実務で回せます。

WCAGの最低ライン：どこをAA必須にするか（本文／リンク／ボタン）

まずは、本文文字とリンク文字は読みやすさを最優先にします。ここは“読む”ことが目的なので、最低ラインを下げると体験に直結します。次に、ボタンは「押せる」とわかることが重要なので、文字だけでなく背景との関係も含めて調整します。ボタンは面積が大きい分、背景色の選び方で圧が変わるため、文字の可読性と「ボタンらしさ（クリックできる感じ）」の両方を見ます。

数値はツールで確認する前提にして、「本文とリンクは厳しめ、装飾や背景は柔軟に」という姿勢で設計すると迷いにくいです。例えば、区切りの薄い背景色やカードの淡い背景は、本文ほど厳格にせず、必要なら余白や境界線で補います。一方、本文中リンクは色だけで判別できないケースもあるので、コントラストに加えて下線やホバー変化まで含めて“リンクとしての確実さ”を作ります。

失敗しやすい組み合わせ：青×白／薄い青×白文字／細いリンク

よくある失敗は、白背景に明るい青の細い文字を置いてしまうケースです。見た目は爽やかでも、読むときに目が疲れやすくなります。特に、リンクが小さいテキストで本文の途中に埋もれていると、見落としやすくクリック率も落ちがちです。

また、淡い青の背景に白文字を置くと、ほとんどの場合で読みづらくなります。背景が「薄い＝明るい」ため、白文字との明度差が出にくいからです。どうしても白文字を使いたいなら、背景を一段濃くするか、文字を太くする、サイズを上げるなど、複数の手段で読みやすさを確保します。

リンクを「色だけ」で区別すると見落とされることがあるため、下線や太字で補うのも有効です。加えて、ホバー時に下線が出る、訪問済みで色が変わるなどの変化を統一すると、操作の学習コストが下がります。

実務で使いやすい組み合わせ例（文字・リンク・ボタン・背景）

最初の当たりを作るための例です。実際にはフォントサイズやウェイト、余白も含めて調整します。色だけでなく、下線・角丸・影・余白といった“形”の要素も合わせると、同じ青でも伝わり方が安定します。

• 本文：濃いグレー、リンク：濃いブルー、下線あり（リンクはホバーで少し暗く）
• ボタン：濃いブルー背景＋白文字（hoverは少し暗く、focusは枠線で強調）
• 情報枠：薄いブルー背景＋濃いグレー文字、アイコンだけ青（見出しは太字で区別）
• サイドバー：淡いブルー背景＋文字はグレー、選択中だけ濃い青（選択中は背景も少し変える）

コントラストチェック手順（ツール→判定→調整の順）

コントラストは感覚で判断しない方が早いです。手順を固定します。慣れてくると、最初から“通りそうな範囲”で色を選べるようになるため、試行回数も減ります。

1. まずメイン青を決める（リンク/CTAの候補）
2. 背景に置くパターンを2〜3個だけ作る（白・淡い青・グレーなど）
3. コントラストチェックツールで文字色と背景色を確認する
4. 足りなければ、青を少し暗くするか、文字を太くするか、下線を足す

この順番で回すと、色数を増やさずに読みやすさを確保できます。さらに、通らない場合は「色を変える」だけでなく「太さ・サイズ・下線・余白」を調整候補に入れると、青の印象を崩さずに改善しやすくなります。

目的別｜ブランドイメージに合う青の選び方

最後に、目的から逆算して青の方向性を決める考え方です。先に「どんな印象を持ってもらいたいか」を言語化しておくと、色選びで迷いにくくなります。同じ「青」でも、明るさと鮮やかさの違いによって、堅い・親しみやすい・高級感があるといった印象は大きく変わります。ここでは、よくある目的別に、UIでの使い方を含めた考え方を整理します。

信頼感・堅実さ（BtoB／金融／行政）：深め＋低彩度

信頼感や堅実さを出したい場合は、深めで少し落ち着いた青が向きます。ネイビー寄りの青は、情報の重心を下げ、安定した印象を与えやすいのが特徴です。メインカラーとしては、彩度を抑えた深い青を選び、ロゴやヘッダー、主要な見出しなど「軸になる場所」に使います。

背景は白か薄いグレーにして、青の面積を増やしすぎないと上品にまとまります。画面全体を青で覆うより、白やグレーの余白の中に深い青を点在させる方が、信頼感が長時間持続しやすいです。また、リンクや補助情報には、メインより一段明るい青やグレーを使うことで、堅さの中に読みやすさを残せます。

親しみやすさ（アプリ／コミュニティ）：明るめ＋中彩度

親しみやすさを狙うなら、明るさは上げつつ、彩度は中くらいに抑えた青が適しています。明るすぎると子ども向けに、彩度が高すぎるとポップになりすぎるため、「少し軽いが落ち着きもある」バランスを意識します。

強い青を広い面積に敷くより、ボタンやアイコンなど、ユーザーの操作に近い場所で使うと軽快さが出ます。背景は白やごく淡いブルーで支え、青は行動を促すポイントに集中させると、親しみやすさと使いやすさを両立できます。イラストや写真が多いサービスでは、青を控えめにすることで、コンテンツ自体の印象も柔らかくなります。

プレミアム（高級感）：深い青＋余白＋中立色（黒は使いすぎない）

高級感は「濃い青」だけで作るより、余白と中立色の設計とセットで作るのが効果的です。深い青はアクセントとして効かせ、画面全体に敷き詰めないことで、色そのものの価値を引き立てます。

文字色は純白ではなく、少し柔らかい明るいグレーにすると、眩しさが抑えられ、落ち着いた印象になります。黒を多用するとコントラストが強くなりすぎて硬さが出るため、グレーを基調にし、必要なところだけ深い青で締めると、静かな高級感が生まれます。余白を広めに取り、要素数を絞ることで、青の存在感がより際立ちます。

よくある失敗と直し方

青は便利ですが、使い方を誤ると読みづらさやチカチカ感につながります。特に青は「清潔」「信頼」といった良い印象が出やすいぶん、気付かないうちに面積が増えたり、役割が混ざったりしやすい色です。ここでは、よくある失敗と直し方をセットで整理します。ポイントは、色を増やして解決するのではなく、明度・彩度・面積・役割の4つを調整して“意味が伝わるUI”に戻すことです。

薄すぎて読めない（背景青の罠）→対処：明度差／文字色の見直し

淡い青の背景は綺麗に見えますが、文字が薄いと読めません。特にカード背景や情報枠で「爽やかにしたい」と思って薄い青を敷くと、本文・リンク・補足テキストが同じトーンに寄ってしまい、全体がぼんやりします。対処は、背景をほんの少し濃くするか、文字色を濃くすることです。まずは文字色を濃いグレーに寄せ、それでも足りなければ背景を一段濃くすると、印象を大きく変えずに改善できます。

リンクを背景の上に置く場合は、リンク色を濃くするか、下線を付けて識別性を確保します。さらに、リンクを本文中に埋め込む場合は、ホバーで下線が強まる、訪問済みで色が変わるなど、状態変化を用意すると見落としが減ります。背景青を使うときは「読みやすさが最優先」で、爽やかさはその次、と考えると失敗が少なくなります。

彩度が高すぎて疲れる→対処：彩度を落とす／面積を減らす

鮮やかな青を広い面積に使うと、目が疲れやすくなります。特に、背景・サイドバー・大きなボタンが同時に高彩度だと、画面が常に強い状態になり、重要な情報が埋もれます。対処は、彩度を少し落とすか、面積を減らしてポイント使いにすると解決しやすいです。

具体的には、主CTAだけ鮮やかにして、背景やサイドバーは落ち着かせる、といった役割分担が有効です。もう一歩踏み込むなら、面積の大きい部分ほど“薄く・低彩度”にし、小さい要素（アイコンやバッジ）ほど“少し鮮やか”にすると、視線誘導が自然になります。青が強すぎると感じたら、いきなり別色に変える前に、まず彩度と面積のどちらで解決できるかを確認するのが近道です。

役割が混線（ブランド青の使い過ぎ）→対処：役割表で整理

何となく青を足していくと、ボタン、リンク、強調が同じ青になり、押してほしい場所が伝わりにくくなります。さらに、ブランド青を「ヘッダーにも背景にもボタンにも」と広げると、青が“象徴”なのか“操作”なのかが曖昧になり、ユーザーは毎回判断することになります。

対処は、役割表を作り、「リンクはこの青」「CTAはこの青」「背景はこの青」と決め直すことです。加えて、状態色（hover/active/focus）を“派生”として整理し、別の青を増やさないようにすると統一感が戻りやすいです。整理の順番は、（1）主CTA、（2）本文リンク、（3）選択中状態、（4）補助の強調、の順に優先度を付けるとスムーズです。役割が整理できれば、色数を増やさなくても短時間で整います。

FAQ（検索の取りこぼし回収）

最後に、青の配色でよく出る疑問をまとめます。ここだけ押さえておけば、細部で迷っても判断が戻せるはずです。

青は何色まで使っていい？（原則：メイン1＋補助2）

基本はメイン1色、補助2色までに絞ると迷いません。大事なのは“色の数”より“意味の数”で、意味が増えるほどUIが複雑に見えやすくなります。状態色（hover/active/focus）は別の色を追加するのではなく、メインから明度を少し動かして派生させれば、色数が増えても統一感が保てます。

もし増やす必要があるなら、「情報用の薄い背景」と「注意用の差し色」など、用途がはっきりしている場合に限定します。逆に、リンク用の青がページごとに変わる、ボタンごとに青が違う、のように“意味が曖昧な増え方”は避けるのがコツです。

リンクは必ず青にしないとダメ？（識別性が担保できればOK）

必ずしも青である必要はありません。大事なのは「リンクだと一目でわかる」ことと、「どのページでも同じルールで見分けられる」ことです。ブランドカラーを優先して別色にする場合でも、リンクの色はサイト内で統一し、通常テキストと十分に差があるかを確認します。

色だけで弱い場合は、下線や太字、ホバー時の変化で補います。特に本文中リンクは見落とされやすいので、下線を常時付ける、ホバーで下線が強まる、訪問済みで色が少し変わるなど、複数の手掛かりを用意すると安心です。

ダークモードの青はどう選ぶ？（明度・彩度・発光感の調整）

ダーク背景では青が発光して見えることがあります。特に高彩度・高明度の青は眩しくなり、文字が“にじんで”見えたり、長時間読むと疲れたりします。明るすぎる青は少し落ち着いた青にし、背景との明度差を調整します。リンクやボタンは明るさを確保しつつ、面積を増やしすぎないのがコツです。

実務では、（1）リンクは明度を確保して読めること、（2）ボタン背景は彩度を抑えて圧を減らすこと、（3）focusは発光させすぎず枠線で示すこと、の3点を意識すると整いやすいです。どうしても眩しい場合は、青を少し暗くするだけでなく、文字ウェイトを上げる・下線を付けるなど、色以外の要素で識別性を補うと、ダークモードらしい落ち着きを保てます。

まとめ｜迷わない決め方の手順

青の配色で迷わないためには、色の種類を増やすより、役割で分けて数を絞るのが近道です。どんなに綺麗な青でも、使う意味が曖昧なまま増やしてしまうと、UI全体が散らかって見えます。まずはリンク／ボタン／背景／アクセントの4役を決め、それぞれに「なぜこの青なのか」を説明できる状態を作ります。そのうえでメイン青を1つ選び、補助は最大2つに抑えると、判断軸がブレにくくなります。

次に重要なのがコントラストの確認です。見た目の好みで決め切らず、ツールを使って文字やボタンが十分に読めるか・押せるかをチェックします。hoverやactiveといった状態色は、新しい色を足すのではなく、メイン青から明度や彩度を少し動かした派生で作ると、全体のトーンが揃います。こうした手順を踏めば、感覚に頼らずに判断でき、結果として統一感と使いやすさを両立した青のUIに仕上がります。