青はコーポレートサイトからサービスLPまで、本当に出番が多い色ですよね。
「どの青のカラーコードをベースにすればいいのか」「配色のせいで読みづらくならないか」と悩むことも多いはずです。
実は、Webデザインに向いた青には、ある程度「定番のカラーコード」と「外さない組み合わせ」が決まっているんです。
そこにアクセシビリティ基準とブランドイメージの視点を足してあげると、青系の配色で迷う場面がかなり減ります。
このページでは、Webで使いやすい青系のカラーコードを一覧で整理しつつ、見やすさとブランドらしさを両立させる配色の考え方をまとめていきます。
【この結論まとめ】
- Webで迷いにくい基準色としては、#0066CC前後のブルーを軸にすると扱いやすい
- 小さな本文テキストには、コントラスト比4.5:1以上を満たす濃い青＋明るい背景の組み合わせが安心
- 青は白・グレー・オレンジ系と相性が良く、トーンを揃えると一気に整って見える
- ブランドイメージに合わせて、ネイビー寄り（堅実）／ライトブルー寄り（カジュアル）など方向性を決めてからコードを選ぶ
- 迷ったら、親記事の「青の作り方・仕組み」とあわせて押さえると色選びがスムーズになる
Webデザインで青を選ぶときの基本ルール
最初に、Webデザインで青を選ぶときの「軸」になる考え方を整理しておきます。
ここがぶれていると、コード集を見ても選びきれずに迷いやすくなります。
まず押さえたい青の代表カラーコードと役割
Webでよく使われる青を、まずは「基準色」として3つ押さえておくと選びやすくなります。
【Webデザインで基準にしやすい青の例】
| 用途イメージ | HEXカラーコード | 特徴の目安 |
|---|---|---|
| ベースにしやすい標準ブルー | #0066CC | 明るめの濃紺寄りで、本文テキストでも使いやすいコントラスト感 |
| 濃いめで力強いネイビー寄り | #004C99 | コントラストが高く、見出しや重要ボタンに向く |
| 明るさ優先の爽やかなブルー | #3399FF | 背景やアクセント向きで、テキストにはややコントラスト不足になりやすい |
（出典：MDN Web Docs）
※本内容は執筆時点。最新情報は公式サイト確認。
0066CCや#004C99のような濃い青は、白背景との組み合わせでコントラスト基準を満たしやすく、本文やボタンの文字色としても扱いやすいんです。
一方で、#3399FFのような明るい青は爽やかですが、細かい文字まで任せるにはコントラストが不足しがちなので、背景やボーダーなど「面」や「線」に回した方が安全です。
ここがポイント：
まずは1〜2色の「濃いめの青」を軸に決めてから、そこに明るい青やグレーを足していくと全体がまとまりやすくなります。
リンク色とブランドカラーの分け方
青は「リンク色」としてのイメージも強いので、ブランドカラーの青とリンクの青が混ざって見えないように整理しておくと、UIがぐっと分かりやすくなります。
おすすめは、ブランドのメインブルーをやや彩度高め・太めの要素（ロゴ・大ボタンなど）に使い、リンクテキストは少し暗めの青にしておくやり方です。
リンクは下線＋色で示すと、色覚の違いにも配慮しやすくなります。
アドバイス：
「ブランドブルー」と「リンクブルー」は、明度か彩度のどちらかをしっかり変えておくと、役割の違いがひと目で伝わりやすくなります。
青だけに頼らないUI全体の色構成
青系のコード集を見ていると、つい画面全部を青で埋めたくなりがちですが、実際のUIでは「無彩色」とのバランスがとても大事です。
特にWebでは、白・黒・グレーが「読みやすさ」を支える土台になり、その上に青が乗るイメージで組み立てると安定します。
親記事で扱う「光・絵の具・デジタルでの青の仕組み」を理解しておくと、なぜそうなるのかもイメージしやすくなります。
一言まとめ：
「青何色を増やすか」よりも、「どれだけ白とグレーを残すか」を意識すると、読みやすくて上品な配色になりやすいです。
青系カラーコードの代表パターンと印象の違い
同じ青でも、ネイビー寄りかライトブルー寄りかで、受ける印象はかなり変わります。
ここでは、Webデザインでよく使われる青のざっくりしたカテゴリと、印象の違いを整理します。
深いネイビー〜ミッドナイトブルーの印象
ネイビーやミッドナイトブルーのような深い青は、「金融」「BtoB」「公的機関」など、信頼感や堅実さを重視するサイトでよく使われます。
背景を真っ黒ではなく、ほのかに青いネイビーにすることで、硬さを保ちながらもわずかに柔らかさを加えられます。
ちょっと深掘り：
ダークモードUIでも、完全な黒ではなく「わずかに青を含んだダークネイビー」を使うと、目の疲れが抑えられた印象になります。
王道のロイヤルブルー・コバルト系
いわゆる「青っぽい青」、ロイヤルブルーやコバルトブルーに近い色は、サービスサイトやプロダクトサイトでの利用が多いゾーンです。
ボタン・リンク・図形アイコンなどに使ったとき、白背景とのコントラストも取りやすく、Webの世界では「基本の青」として扱われることが多いです。
【青のカテゴリと印象のざっくり比較】
| カテゴリ | 代表的なHEXの目安 | 受ける印象の傾向 |
|---|---|---|
| ネイビー寄り | #002B5C前後 | 重厚・堅実・信頼・フォーマル |
| ロイヤルブルー系 | #005BBB〜#0066CC前後 | 標準的・バランスが良い・ビジネス全般 |
| ライトブルー系 | #4DA6FF前後 | 柔らかい・フレンドリー・軽やか |
（出典：Material Design 3）
※本内容は執筆時点。最新情報は公式サイト確認。
要点まとめ：
サイト全体のトーンを決めるときは、「ネイビー寄りで落ち着かせるのか」「ロイヤルブルー寄りで標準感を出すのか」を最初に決めておくと、コード選びがスムーズです。
ライトブルー・シアン系でやわらかく見せる
ライトブルーやシアン寄りの青は、スタートアップやtoCサービス、教育・ヘルスケア系でよく見られるゾーンです。
優しく見せたいときに便利ですが、文字色に使うと一気に読みにくくなるので、アクセントの背景やアイコン、イラスト部分に回すのがおすすめです。
注意点：
ライトブルーを使うときは「本文テキストには使わない」「重要情報は必ず濃い青か黒で書く」というルールを決めておくと、アクセシビリティ面で安心です。
Webで使いやすい青系カラーコード一覧をひと目で
ここからは、実際にWebデザインで使いやすい青系のカラーコードを、用途別に整理していきます。
まずはボタンやリンク、ラベルなどに使いやすい色の一覧です。
ボタン・リンクに使いやすいメインブルー
「このあたりをベースにしておけば大きく外れない」という実務寄りの基準色を、用途付きでまとめます。
【インタラクティブ要素向きの青コード例】
| 用途 | HEXカラーコード | コメント |
|---|---|---|
| 標準のプライマリボタン | #0066CC | 白背景とのコントラストが十分で、標準的な青として扱いやすい |
| 強調ボタン・太字リンク | #004C99 | やや暗めで力強く、重要CTAに向く |
| セカンダリボタン枠線 | #3385FF | 枠線やホバー時の背景に使うと軽やかに見える |
| 情報系ラベル（お知らせ等） | #007BFF | お知らせやインフォ系ラベルに向く明るめの青 |
（出典：MDN Web Docs）
※本内容は執筆時点。最新情報は公式サイト確認。
失敗しないコツ：
プライマリボタン用の青を1色決めたら、ホバー・アクティブ・無効状態も同じ色相で明度だけ変えると、一貫性が出てプロダクト感が高まります。
背景やサイドバーに向く淡いブルー
背景に使う薄い青は、「画面全体の雰囲気を整える」役割がメインになります。
ここでは、白と青の中間のような淡い色を選ぶのがポイントです。
覚えておきたい：
背景の青は、テキストとのコントラスト確保が難しくなるので、「背景は淡い青＋テキストはほぼ黒寄りのグレー」という組み合わせを基本形にするのが安全です。
アクセントに効く補助カラーの青
折れ線グラフの線や、小さめのアイコン、アラートで使う「情報通知色」などでは、少しビビッドな青が活躍します。
ただし、ここでもテキストとして多用するのではなく、アイコンやピクトグラム・境界線などの役割に絞ると、画面がうるさくなりにくいです。
実践ポイント：
グラフの線色は「メインブルー＋やや明るい青＋グレー」の3色程度に絞ると、情報量が多くても読みやすいチャートになります。
青と相性の良い配色パターンで迷わない組み合わせ
青そのもののコードを決めたら、次は「一緒に並べる色」です。
ここでは、Webデザインで扱いやすい青の組み合わせパターンを整理します。
白・グレーと組み合わせる鉄板パターン
最も汎用的で扱いやすいのは、「青＋白＋グレー」という三角形の関係です。
背景は白かごく薄いグレー、文字は黒〜濃いグレー、アクセントを青にしておくと、どんな業種にも合わせやすい構成になります。
【青＋無彩色の基本パターン】
| 役割 | 推奨カラー例 | コメント |
|---|---|---|
| 背景 | #FFFFFF / #F5F5F5 | 白〜ごく薄いグレーで情報を乗せやすくする |
| 本文テキスト | #111111 / #222222 | ほぼ黒に近いグレーで視認性を確保 |
| アクセント（ボタン等） | #0066CC / #004C99 | メインの青。リンクやボタンに集約 |
（出典：MDN Web Docs）
※本内容は執筆時点。最新情報は公式サイト確認。
要点：
まずは「青＋白＋グレー」で構成してみて、物足りない場合だけ差し色を足す方が、結果的に迷いが少なくなります。
補色オレンジ・イエローでメリハリを出す
青の補色に近い色はオレンジ〜黄寄りの色なので、ここを少しだけ足してあげると、視線の集まるポイントを作りやすくなります。
たとえば「通常ボタンは青、最重要ボタンはオレンジ」と役割分担するやり方は、SaaSやtoCプロダクトでよく見られるパターンです。
判断の基準：
オレンジなど暖色系は使いすぎると「青らしさ」が薄れてしまうので、全体の5〜10％くらいに抑える意識を持つとバランスが取りやすいです。
同系色とトーン違いで奥行きをつくる
青の中で、明度や彩度を少しずつ変えた色を組み合わせると、カードやセクションの背景に奥行きを出しやすくなります。
見出しの帯・カードの背景・グラフの補助線などを、同じ色相のトーン違いで揃えると、ブランド感のある画面になります。
見逃せないのが：
同系色のトーン違いを多用するときほど、「文字は必ず黒〜濃いグレーで統一する」ルールを決めておくと、読みにくさを防げます。
アクセシビリティを意識した青のコントラスト設計
青系の配色で特に重要なのが、コントラスト比です。
きちんと基準を押さえておくと、「なんとなく見づらい」を避けやすくなります。
WCAGのコントラスト基準と最低ライン
Webコンテンツのコントラストは、国際的な指針であるWCAG 2.2の基準がよく使われます。
ざっくり言うと、小さめのテキストでは4.5:1以上、大きめ太字のテキストでは3:1以上がレベルAAの目安です。
覚えておきたい：
「普通の本文テキスト」は4.5:1以上、「見出しなど大きな文字」は3:1以上、「より高い水準を目指す場合は7:1以上」がひとつの指標になります。
実務で使いやすい青×背景の組み合わせ例
実際に、先ほどの代表的な青と背景色のコントラストを見てみます。
ここでは、WCAGの計算式に従って算出したコントラスト比を、あくまで目安としてまとめています。
【青と背景のコントラスト例（目安）】
| 組み合わせ | コントラスト比の目安 | 適した使い方 |
|---|---|---|
| #0066CC（文字）× #FFFFFF（背景） | 約5.6:1 | 小さめの本文テキストでもAAを満たしやすい組み合わせ |
| #004C99（文字）× #FFFFFF（背景） | 約8.4:1 | 見出しや重要情報に使うと非常に読みやすい |
| #0066CC（文字）× #E6F3FF（背景） | 約4.9:1 | 淡い青背景上でも本文用として使いやすいライン |
| #3399FF（文字）× #FFFFFF（背景） | 約2.9:1 | 小さい文字には不足。太めの大きな文字や装飾向き |
（出典：WCAG 2.2）
※本内容は執筆時点。最新情報は公式サイト確認。
失敗しないコツ：
「この組み合わせで大丈夫かな」と迷ったら、コントラストチェッカーを一度通してから採用するクセを付けると安心です。
ツールを使ったコントラストチェックの手順
コントラスト比は、手計算せずに専用ツールでチェックするのが現実的です。
代表的なツールとして、WebAIMのContrast Checkerなどが広く使われています。
ツールに前景色・背景色のHEXコードを入力すると、AA・AAAの基準を満たしているかが一瞬でわかるので、デザインの最終確認用としてとても便利です。
ここがポイント：
デザインカンプの段階だけでなく、開発後の実装画面でも一度ツールでチェックしておくと、サイズや太さの変化も踏まえた現実的なコントラスト評価ができます。
ブランドイメージ別・目的別の青の選び方
同じ青でも、ブランドの方向性によって「ちょうどいいゾーン」は変わります。
ここでは、目的別にどのあたりの青を軸にするとイメージが揃えやすいかを整理します。
信頼感・堅実さを出したいときの青
金融・行政・BtoBサービスなどでは、深めのネイビー寄りの青がよく選ばれます。
明度を落としつつ、ほんの少しだけ彩度を残すことで、「真っ黒ではない落ち着いた雰囲気」を作りやすくなります。
【ブランドイメージ別の青の選び方】
| 目的・印象 | 推奨ゾーンの例 | コメント |
|---|---|---|
| 信頼・堅実・フォーマル | #002B5C〜#004C99 | ネイビー寄りで、白とのコントラストも取りやすい |
| 親しみ・カジュアル | #1E88E5〜#3399FF | やや明るめのブルーで柔らかい印象に |
| プレミアム・高級感 | #001F3F〜#003366 | かなり暗いネイビーで、金・白との相性が良い |
（出典：Material Design 3）
※本内容は執筆時点。最新情報は公式サイト確認。
結論：
どの青を使うか迷ったときは、「信頼重視ならネイビー方向」「親しみ重視ならライトブルー方向」と、まずは方向だけ決めてから具体的なコードを調整していくと決めやすいです。
親しみやすさ・カジュアルさを出したいときの青
toC向けサービスや子ども向けコンテンツでは、すこし明るめの青を軸にすると親しみやすい印象になります。
ただし、あまりに明るい青を本文テキストに使うと読みにくくなるため、「背景やアイコン用」として位置づけることが大切です。
アドバイス：
カジュアルな青を使うときも、テキストそのものは濃い青か黒で統一すると、見た目は柔らかくても読みやすさはしっかり保てます。
プレミアム・高級感を演出したいときの青
高級感を出したいときは、かなり暗いネイビーに少しだけ彩度を残したような色が定番です。
背景にダークネイビー、文字をオフホワイトやゴールド寄りのベージュにすると、一気にラグジュアリーな印象に寄せられます。
見逃せないのが：
高級感を狙う配色ほど、コントラスト不足になりやすいので、装飾よりもまず「読みやすさ」を基準に明度差を決めていくことが重要です。
よくある失敗パターンと青の配色を整えるコツ
最後に、青系のWebデザインでよく起こりがちな失敗と、その整え方をまとめます。
事前にパターンを知っておくと、レビューや改善がスムーズになります。
薄すぎる青で文字が読みにくくなるケース
よくあるのが、「ライトブルーのテキストを白背景に載せてしまう」ケースです。
見た目はきれいでも、コントラスト比が足りず、小さな文字は一気に読みづらくなります。
彩度が高すぎてチカチカする青
彩度が非常に高い青を面積広く使うと、スマホ画面では「まぶしい」「疲れる」と感じられやすくなります。
特に、背景や全面バナーで「原色に近い青」をベタ塗りする場合は注意が必要です。
ブランドカラーとUI要素の役割がごちゃつく問題
ブランドブルーを何にでも使ってしまうと、「どこがリンクで、どこがボタンで、どこがただの装飾か」がぼやけてしまいます。
「ブランドを感じさせる青」と「インタラクションを示す青」の役割を整理しておくことで、この問題はかなり解消されます。
【青の配色でよくある失敗と対処法】
| 失敗パターン | よくある状態 | 修正の方向性 |
|---|---|---|
| テキストが薄くて読めない | ライトブルーで本文を書いている | 文字色を濃い青か黒に変更し、ライトブルーは背景・装飾に回す |
| 画面がチカチカする | 高彩度の青を大面積で使用 | 面積を減らし、トーンを落とすかグレーを混ぜる |
| 役割がわかりにくい | すべての青が同じトーン | ブランド用・リンク用・アクセント用と、明度や彩度で役割分担する |
（出典：WebAIM）
※本内容は執筆時点。最新情報は公式サイト確認。
失敗しないコツ：
「読めるかどうか」「役割が判別できるか」を基準に配色を見直すと、色そのものの好みよりも、ユーザーにとっての使いやすさを優先しやすくなります。
まとめ
ここまで、Webデザインで扱いやすい青系カラーコードと配色の考え方を整理してきました。
あらためて、青を使いこなすときのポイントを振り返っておきます。
青を選ぶときは、まず#0066CC前後の標準的なブルーなど、軸になる1〜2色を決めておくと迷いが減ります。
そのうえで、白・グレーとのバランスや、オレンジ・イエロー系の差し色との組み合わせを調整していくと、業種やブランドに合わせた表現がしやすくなります。
アクセシビリティの観点では、本文テキストにはコントラスト比4.5:1以上を満たす濃さの青を使い、ライトブルーは背景や装飾に回すのが安心です。
- 軸になるメインブルーを1〜2色に絞る
- 背景は白〜薄いグレー、文字は黒〜濃いグレーを基本にする
- 装飾・アクセントにライトブルーやオレンジを少量足す
- コントラスト比4.5:1以上を満たしているかをツールで確認する
まずはこの記事のコード例を手元のデザインツールに登録して、実際の自分のサイトやプロダクトに合わせて微調整してみてください。
よくある質問（FAQ）
Q. Webデザインでまず登録しておくべき青のカラーコードはどれですか？
A. 迷わない軸としては#0066CCと#004C99の2色を登録しておくのがおすすめです。この2色があれば、ボタンやリンク、見出しテキストまで一通りカバーしやすくなります。
Q. ライトブルーを本文テキストに使っても大丈夫ですか？
A. 小さな本文テキストにはライトブルーは基本的に避けた方が安全です。コントラスト比が不足しやすいため、ライトブルーは背景や装飾、アイコンなどに回すのがおすすめです。
Q. 青いボタンとリンクテキストの色は同じでも問題ありませんか？
A. 見分けやすくするために、ボタンとリンクは色かスタイルを少し変えた方が安心です。ボタンはやや濃い青＋塗りつぶし、リンクは少し暗めの青＋下線、といった分け方が分かりやすいです。
Q. アクセシビリティのコントラスト比はどこまで意識すべきですか？
A. 通常の本文テキストでは4.5:1以上を満たすことを最低ラインとして意識するとよいです。大きな見出しやボタン文字でも、できるだけ3:1以上は確保しておくと、多くの人にとって読みやすくなります。
Q. ブランドカラーとして決まっている青が薄くて読みづらい場合はどうすればいいですか？
A. ブランドカラーはロゴや大きな面に残しつつ、テキストには濃い代替色を使うのが現実的な落としどころです。ブランドガイドラインに「Webでの代替テキストカラー」を追加しておくと、プロジェクト全体で再現しやすくなります。
参考文献・出典
- W3C「Web Content Accessibility Guidelines (WCAG) 2.2」
- ウェブアクセシビリティ基盤委員会（WAIC）「WCAG 2.2日本語訳」
- WebAIM「Contrast Checker」
- MDN Web Docs「CSSの値」
- MDN Web Docs「CSSの16進カラー値」
- Material Design 3「Color overview」
