結論
ボタンの色に、これが正解という色はないんです。
「通販は緑」「セミナーはオレンジ」といった対応表をよく見かけますよね。ただ、これは背景色を無視した話です。同じ緑でも、白い背景なら目立ちますが、薄緑の背景だと埋もれてしまいます。効いているのは色の種類ではなく、周囲との差のほうです。
なので、色より先に決めておきたいものが3つあります。コントラスト・サイズ・位置です。うれしいことに、この3つは感覚ではなく数値で確かめられます。
色より先に決める3つ
色を選ぶ前に決めておきたいのは、背景との差・指で押せる大きさ・置く位置の3つです。どれも数値で確かめられます。
いずれもW3Cのアクセシビリティ基準（WCAG 2.2）に数値が定められているので、好みの言い合いにならずにすみます。
1. コントラスト — 数値基準がある
W3Cのアクセシビリティ基準（WCAG 2.2）には、次の数値が定められています（日本語訳）。
| 対象 | 必要なコントラスト比 | 達成基準 |
|---|---|---|
| ボタン内の文字 | 4.5:1 以上 | 1.4.3 コントラスト（最低限） |
| サイズの大きな文字 | 3:1 以上 | 1.4.3 |
| ボタンの境界・背景など | 隣接した色との間で 3:1 以上 | 1.4.11 非テキストのコントラスト |
いずれもレベルAAの達成基準です。「見やすいと思う」ではなく、測って判断できます。
つまり考えるべきなのは「何色にするか」ではなく、背景に対して3:1、文字に対して4.5:1を確保できる色かどうかです。こう考えると、答えは背景色ごとに変わってきます。
実例: このサイトのボタンを測ると
当メディアのボタンを、実際に測ってみた値です。
| 測った箇所 | 実測値 | 必要 | 判定 |
|---|---|---|---|
| 黒ボタンの黄色い文字 | 9.24:1 | 4.5:1 | OK |
| 黄ボタンの黒い文字 | 9.24:1 | 4.5:1 | OK |
| ボタンの黒枠 × 白背景 | 15.13:1 | 3:1 | OK |
| 黄色い面 × 白背景 | 1.64:1 | 3:1 | 枠で担保 |
2026-08-27に実測。黄色い面だけを見ると白背景と1.64:1しかありませんが、3pxの黒い枠が15.13:1あるため、ボタンの範囲は識別できます。
見てほしいのは最後の行です。黄色は、白の上ではほとんど目立ちません。 それでも基準を満たせているのは、3pxの黒枠がボタンの範囲を示しているからなんです。1.4.11が求めているのは「コンポーネントを識別するために必要な視覚的情報」で、面の色そのものではありません。
薄い色のボタンを使いたいなら、枠線か影で境界を作れば基準を満たせます。わざわざ色を変えなくても大丈夫です。
2. 色だけで伝えない
WCAG 2.2 の達成基準 1.4.1「色の用途」（レベルA）は、色が、情報を伝える・動作を示す・反応を促すための唯一の視覚的手段として使用されていないことを求めています。
色覚の特性によっては、赤と緑の区別がつきにくい人もいます。なので「赤いボタンが申し込み」という作りだと、その人には伝わりません。色のほかに、次のような形でも示しておくと伝わります。
- 文言で示す。「申し込む」「無料で相談する」など、押した後に何が起きるかを書く
- 形で示す。ボタンらしい角丸・枠線・影をつける
- 位置で示す。本文の流れの中で、次に押す場所に置く
3. サイズ — こちらも数値基準がある
| 基準 | サイズ | レベル |
|---|---|---|
| 2.5.8 ターゲットのサイズ（最低限） | 24 × 24 CSS ピクセル以上 | AA |
| 2.5.5 ターゲットのサイズ（高度） | 44 × 44 CSS ピクセル以上 | AAA |
スマホのタップ領域は、2.5.8がAA、2.5.5がAAAです。実務では44×44を目安にすると迷いません。
ボタンが小さいと、色を変えても押してもらえません。シンプルに、押せないものは押されないということです。
スマホはボタンを下に置く
スマホでは、ヘッダーよりフッターにボタンを置いたほうが反応しやすいです。理由はシンプルで、スクロールしても見えているからです。
今は position: fixed の固定ボタンがよく使われていますが、置くときは次の点に注意が要ります。
- 本文を隠さない高さにする。読むのを邪魔してしまっては元も子もありません
- セーフエリアを確保する（
env(safe-area-inset-bottom)）。iPhoneのホームバーと重なると押せなくなります - 本文の下に余白を足す。最後の段落が固定ボタンに隠れないようにしておきます
「短いコピー vs 長いコピー」の答え
これも、どちらが正解ということはありません。ただ、もっと使いやすい考え方があります。読者を分けて考えることです。
- 今すぐ申し込みたい人 — 説明は要らない。すぐ押せるボタンが要る
- まだ判断できない人 — 説明が要る。読んだうえで押したい
なので、短いコピーと長いコピーのどちらかを選ぶ必要はなく、両方を同じページに置けば十分です。上のほうにすぐ押せるボタン、本文で説明、読み終わりにもう一度ボタン。こうしておけば、どちらの読者も先へ進めます。
ボタンが複数あるとき、どれを目立たせるか
店舗のページだと、予約・電話・LINE・問い合わせが並びがちですよね。ただ、全部を同じ強さにすると、どれも押されにくくなってしまいます。
| 役割 | 見た目 | 例 |
|---|---|---|
| 主役（1つだけ） | 塗りつぶし。ページで最も濃い色 | 予約する |
| 次点 | 枠線だけ。背景は白 | 電話する |
| その他 | テキストリンク | よくある質問 |
1ページに主役は1つ。残りは形を変えて弱くします
もし主役を決められないなら、ページの役割がまだ決まっていないのかもしれません。1ページに「予約してほしい人」と「まず相談したい人」の両方を同じ強さで置くと、読む人もどちらにも決めきれなくなります。
色より先に直すもの
まだ規模が足りずA/Bテストができないうちは、効果の大きい順に直すのが近道です。色は最後で大丈夫です。
- 押した後に何が起きるかを文言にする — 「送信」より「無料で見積もりを依頼する」
- 主役のボタンを1つに絞る — 上の表のとおり
- 最初の画面に主役を置く — スクロールしないと見えないなら、そこが最大の損失
- タップ領域と間隔を確保する — 44×44px。隣のボタンと近すぎると誤タップになる
- 色を決める — ここまで終わってから。基準を満たす範囲で選ぶ
1〜3は、コントラスト比の話とは関係なく効いてきます。色を変えても数字が動かなかったときは、原因は上のどれかにあることが多いです。
A/Bテストは、規模がないと成立しない
「迷ったらデータが正しい」という姿勢は、とても大事ですよね。ただその前に、データが出るだけの規模があるかを見ておく必要があります。
色の違いのような小さな差を統計的に見分けるには、それなりの件数が要ります。月のコンバージョンが数十件のサイトで色をA/Bテストしても、出た差が偶然かどうか判別できません。 判別できない数字で決めるのは、勘で決めるのとあまり変わりません。公開してから比べられないものは、公開する前に少人数へ直接聞いてみるほうが早いです。名前で同じことをやる手順は商品名の決め方。
| 月のコンバージョン数 | 現実的な進め方 |
|---|---|
| 数件〜数十件 | A/Bテストはしない。基準（コントラスト・サイズ・位置）を満たすことに集中する |
| 数十件〜数百件 | 大きな変更（ページ構成・オファー・見出し）を1つずつ変えて前後比較する |
| 数百件以上 | A/Bテストが機能しはじめる。ただし色より先に構成・オファーを試す |
規模に合わない検証をするより、基準を満たす設計にしてから、効果の大きい要素を直すほうが早く進みます。
前後で比べるなら、計測が正しく取れていることが前提になります。クリックをコンバージョンとして数えていると、比べること自体が成り立たなくなってしまいます。
確認項目
色を決める前に、この順番で見ていきます。
- ボタン内の文字と背景のコントラスト比が4.5:1以上ある
- ボタンの背景・境界が、隣接する色と3:1以上ある
- 色以外（文言・形・位置）でもボタンだと分かる
- タップ領域が44×44px以上ある（最低でも24×24px）
- スマホで固定する場合、本文を隠さずセーフエリアを確保している
- 押した後に何が起きるかが文言に書いてある
- A/Bテストをする前に、自社の月間コンバージョン数を確認した
次にやること
今日やることは1つだけです。自社のLPをスマホで開いて、申し込みボタンの文字と背景のコントラスト比を測ってみてください。 開発者ツールで要素を選べば数値が出ます。もし4.5:1を下回っていたら、色を考えるより先にそこを直すほうが効きます。
一度基準を決めてしまえば、あとは崩れていないかを見るだけで保てますよ。
広告のLPをまとめて見直すなら、当社の広告運用（アドキタ）では、計測が正しく取れているかを確認したうえで、どこから直すかの順番を決めています。
