結論
ボタンの色に一般解はありません。
「通販は緑」「セミナーはオレンジ」といった対応表が今も出回っていますが、これは背景色を無視した話です。同じ緑でも、白い背景なら目立ち、薄緑の背景なら埋もれます。効いているのは色の種類ではなく、周囲との差です。
そして色より先に決めるべきものが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 長いコピー」の答え
これも一般解はありません。ただし、元の議論より使える整理があります。読者を分けることです。
- 今すぐ申し込みたい人 — 説明は要らない。すぐ押せるボタンが要る
- まだ判断できない人 — 説明が要る。読んだうえで押したい
短いコピーと長いコピーのどちらかを選ぶのではなく、両方が同じページに存在すればよいわけです。上部にすぐ押せるボタン、本文で説明、読み終わりにもう一度ボタン。これで両方の読者が進めます。
当メディアの記事では、この考え方を行動意図別の出口として実装しています。「まず理解したい」「根拠を確認したい」「比較したい」「相談したい」で、リンク先を変える形です。
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をまとめて見直すなら、当社の広告運用（アドキタ）では、計測が正しく取れているかを確認したうえで、どこから直すかの順番を決めています。
