リンク・ボタンなどのUIカラーとは?操作できる要素の色ルールを解説

基本の理解

まずはUIカラーがどんな役割を持っているのかを押さえましょう。

リンク・ボタンなどのUIカラーとは何か

リンク・ボタンなどのUIカラーとは、リンクやボタンなど、ユーザーが操作できる要素に使う色のルールのことです。

「この色は押せる・クリックできる」という認識を、色によって伝える役割を持っています。

色のルールが統一されていることで、ユーザーはページのどこが操作できる部分か直感的に判断できます。

サイト内でルールを一貫させることで、統一感のある操作感を提供できるという効果もあります。

なぜ色のルールが必要なのか

リンクやボタンが、普通の文章と同じ色をしていると、ユーザーはそこが押せる場所だと気づけません。

ユーザーは過去の経験から「青い下線付きの文字はリンクだ」といった一般的なルールを学習しており、その認識から極端に外れると混乱を招いてしまいます。

反対に、サイト内のリンク・ボタンの色が統一されていれば、ユーザーは色を見ただけで「これは操作できる要素だ」と覚えてくれます。

一度覚えてもらえれば、初めて開いたページでも迷わず操作できるようになります。

リンク・ボタンの色ルールの作り方

ここからは、リンク・ボタンなどのUIカラーを実際に決めるときのポイントを、5つに分けて見ていきましょう。

リンクは本文と違う色にして下線を残す

文章の中のリンクには、本文の文字色とは違う色を使い、さらに下線を残しておくのが基本です。

色は青系統が一般的で、多くのユーザーが「青い文字はリンク」と経験的に知っているためです。

本文は濃いグレー(#333333)、リンクは青(#1D4ED8)+下線にした例

下線を残すのは、色の違いだけでは見分けにくい人がいるためです。

実際、上の例の青と本文のグレーは、明るさの差(コントラスト比)が約1.9:1しかありません。

色の見え方には個人差があり、明るさの差が小さい2色は、人によってはほとんど同じ色に見えます。

下線のように色以外の目印も付けておけば、色を見分けにくい人にもリンクだと伝わります(考え方は色だけに頼らないデザインとは?で解説しています)。

ボタンにはアクセントカラーを使う

ボタンには、ページの中で一番目立つアクセントカラーを使います。

アクセントカラーとは、サイト全体で一番目立たせたい部分にだけ使う「差し色」のことです。

配色の基本では、画面の色を次の3つの役割に分け、面積の割合を「70:25:5」にするとまとまりやすいとされています。

役割	割合の目安	主に使う場所
ベースカラー	70%	ページの背景
メインカラー	25%	見出し・ヘッダーなど
アクセントカラー	5%	ボタンなど、一番押してほしい場所

アクセントカラーは、ほんの少ししか使わないからこそ、パッと目に飛び込んできます。

自分の好きな目立つ色を選べばよいわけではなく、背景やメインカラーとの差がはっきりあり、周りから浮き立つ色を選ぶのがポイントです。

背景(ベース)・見出し帯(メイン)を落ち着いた色にし、ボタンだけをオレンジ(アクセント)にした例

この例では、紺の反対側に近い色(補色に近い色)であるオレンジをボタンだけに使い、押してほしい場所がひと目で分かるようにしています。

3つの色の役割はベースカラー・メインカラー・アクセントカラーとは?、割合の決め方は色の割合とは?で詳しく解説しています。

メインボタンとサブボタンで色の強さを変える

「ボタンの色を統一する」といっても、サイト内のすべてのボタンを同じ色にするわけではありません。

同じ画面に「購入する」と「キャンセル」のような複数のボタンが並ぶとき、全部が同じ色だと、どれを押せばよいか迷ってしまうからです。

そこで、ボタンを役割で2種類に分け、色の強さを変えます。

• メインボタン(プライマリボタン):一番押してほしいボタン。
  例:「購入する」「申し込む」。
  アクセントカラーで塗りつぶします。
• サブボタン(セカンダリボタン):控えめでよいボタン。
  例:「キャンセル」「戻る」。
  白地に枠線だけ、のように目立ちすぎない見た目にします。

右のように色の強さに差をつけると、押してほしいボタンが迷わず分かる

統一すべきなのは「全部同じ色」ではなく、「メインボタンはこの見た目、サブボタンはこの見た目」という役割ごとのルールです。

1つの画面に置くメインボタンは、原則1つに絞りましょう(押してほしいボタンの作り方はCTAボタンとは?で解説しています)。

操作したときの色の変化(状態色)を決める

リンクやボタンは、操作したときに色を少し変えて「反応しましたよ」と知らせます。

このように、通常時・カーソルを乗せたとき・押したときなど、要素の状態ごとに割り当てる色を状態色といいます。

ボタンで最低限決めておきたいのは、次の3つの状態です。

• ホバー時:パソコンでマウスカーソルを重ねたとき。
  元の色より少し暗く(濃く)するのが定番です。
• 押した瞬間(アクティブ時):クリックやタップをした瞬間。
  スマホにはカーソルを重ねる操作がないため、タップした瞬間の変化が「反応した」合図になります。
• フォーカス時:キーボードのTabキーで選択したとき。
  マウスを使わずに操作する人のために、ボタンの周りに枠線を表示して「今どこを選んでいるか」を示します。

ホバー時は同じオレンジを暗くし、フォーカス時は青い枠線を付けた例

CSSでは、次のように書きます。

.button-primary {
  background: #c2410c;
  color: #ffffff;
}

/* ホバー時・押した瞬間は少し暗く */
.button-primary:hover,
.button-primary:active {
  background: #9a3412;
}

/* キーボードで選択したときは枠線を表示 */
.button-primary:focus-visible {
  outline: 3px solid #1d4ed8;
  outline-offset: 2px;
}

なお、ホバー時にボタンを薄くする(透明に近づける)方法もありますが、薄いボタンは「押せない状態(無効時)」と見分けにくくなります。

初めのうちは「ホバー時は暗くする」と決めておくと迷いません。

エラーや選択中など、ほかの状態の色は状態色とは?、1色から濃淡を作る方法はブランドカラーをWebに展開する方法とは?で解説しています。

背景との明るさの差を数値で確かめる

「識別しやすい色」かどうかは、自分の目で見やすいかだけで判断せず、数値でも確かめましょう。

背景とリンク・ボタンの明るさの差が小さいと、視力が弱い人や、屋外の明るい場所でスマホを見ている人には読めなくなってしまうからです。

この明るさの差を数値にしたものをコントラスト比といい、Webアクセシビリティの国際的なガイドライン(WCAG)では、次の値が目安とされています。

対象	コントラスト比の目安
リンクやボタンの文字と、その背景	4.5:1以上
ボタンの形や枠線と、周りの背景	3:1以上

左の薄い水色は、明るい場所ではほとんど読めなくなる

この記事の見本のオレンジのボタンは、白文字とのコントラスト比が約5.2:1、ホバー時の暗いオレンジでは約7.3:1で、どちらも4.5:1を満たしています。

コントラスト比の基準の詳しい内容と、無料で確かめられるツールはコントラスト比とは?で紹介しています。

実践のポイント

UIカラーを決める際に陥りやすい失敗と、よくある疑問をまとめます。

注意点・よくある間違い

• デザイン性を優先して、リンクの色を本文の文字色と近い色にしたり、下線を消したりしてしまい、リンクだと気づかれないことがあります。
  デザインより先に、識別しやすさを優先しましょう。
• ページによってボタンの色のルールがバラバラだと、ユーザーは都度どれが押せるボタンか探す必要が生じます。
  メインボタン・サブボタンそれぞれの見た目を決め、サイト全体で同じルールを使いましょう。
• ボタン以外の飾りや見出しにもアクセントカラーを使ってしまい、どこが押せるのか分からなくなることがあります。
  アクセントカラーは「押してほしい場所」だけに取っておきましょう。

よくある質問

• Q. リンクは必ず青色にしなければいけない?
  A. 必須ではありませんが、青系統は多くのユーザーにとって「リンク」として馴染みのある色です。
  別の色を使う場合も、本文の文字色とはっきり区別できる色を選び、下線も残したうえで、サイト内で統一しましょう。
• Q. ボタンだと分かってもらうために、色以外にできることは?
  A. 角丸の枠や影をつける、カーソルを乗せたときに色が変わる(状態色)、といった形状・動きの工夫を組み合わせると、色だけに頼らず操作できる要素だと伝えやすくなります。
  「購入する」「詳しく見る」のように、押すと何が起きるかが分かる文字をボタンに書くことも大切です。
• Q. 「削除する」のようなボタンも、アクセントカラーで塗っていい?
  A. 取り消せない操作のボタンは、アクセントカラーではなく、エラーなどの注意に使う赤系統の色にするのが一般的です。
  うっかり押されないよう、メインボタンとは見た目を変えておきましょう。

まとめ

リンク・ボタンなどのUIカラーとは、操作できる要素であることを色で伝えるためのルールです。

リンクは本文と違う色+下線、ボタンはアクセントカラーと決め、メインボタンとサブボタンで色の強さを変えれば、ユーザーが迷わず操作できるようになります。

あわせて、ホバー時などの状態色と、背景とのコントラスト比も確かめておきましょう。

デザイン性よりも、まずは「押せると分かるか」を優先して色を決めることが、使いやすいUIへの近道です。

まずは自分のサイトを開いて、リンクに下線があるか、1つの画面にメインボタンが1つだけになっているかを確かめてみてください。