赤いボタンは本当に目立つ？CTAカラーを決めるときの考え方

赤いボタンは強く目に入ることがありますが、赤に変えれば必ず目立ち、申込みも増えるとは限りません。周囲の色やほかの強調表示によって見え方が変わるからです。映画上映会の座席予約ページを例に、赤いボタンが機能する配色と、赤だけでは埋もれる場面を比較します。

赤いボタンが目立つかは背景と役割で決まる

CTA（Call To Action）は、予約や購入など次の行動を促すボタンや案内のことです。CTAを目立たせたいなら、色の種類だけではなく、背景との明るさの差、周囲にある強調色の数、ボタンの大きさと位置をまとめて考えます。

赤いセール表示や「満席」の警告が並ぶページで予約ボタンまで赤くすると、どれが次の操作なのか分かりにくくなる場合があります。また、「目に入る」と「予約が完了する」は別の評価です。色だけで成果を決めつけず、ボタンの文言や予約の手順も確認しましょう。

上映会の予約ページで赤いCTAを比較する

ここではHEX（16進数でWEBの色を指定するコード）を使って、背景・本文・主要ボタンの役割を具体的に決めます。

淡いページ背景では深い赤を使う

• ページ背景：柔らかなオフホワイト ■#F7F7F4。見出しと本文：濃いブルーグレー ■#253544。文字と背景のコントラスト比は約11.71:1です。
• 「座席を予約する」ボタン：深い赤 ■#B4232C、文字：白 ■#FFFFFF。文字とボタンは約6.53:1、ボタンと外側のオフホワイト ■#F7F7F4は約6.08:1です。
• 補助の「上映内容を見る」：濃い青 ■#234E70を、同じオフホワイト ■#F7F7F4上の下線付きリンクにします。文字と背景は約8.17:1です。主な予約操作だけを塗りボタンにして優先順位を付けます。

赤みの強い案内帯では白い面を挟む

上映会の告知帯を暗い赤 ■#912B32にすると、先ほどのボタンの赤 ■#B4232Cと直接接する部分のコントラスト比は約1.24:1しかありません。白文字が読めても、ボタンの輪郭は帯に溶け込みやすくなります。

そこで、帯の中に白い予約カード ■#FFFFFFを設け、十分な余白を取ってから深い赤のボタン ■#B4232Cを置きます。カードと赤い帯 ■#912B32は約8.09:1、ボタンと白いカード ■#FFFFFFは約6.53:1です。カード内の説明文は濃いブルーグレー ■#253544にすると、白背景 ■#FFFFFFに対して約12.56:1です。

赤いボタン自体を変えるのではなく、すぐ隣の面を整理する方法です。帯にすでに赤い「満席」表示がある場合は、表示に「満席」の文字を添え、予約できる日程を別の位置で明確に示しましょう。

文字のコントラストと予約完了までの動線を確認する

鮮やかな赤 ■#DC444Aに白文字 ■#FFFFFFを載せると、コントラスト比は約4.23:1です。通常サイズの文字に必要な4.5:1には届きません。この例では深い赤 ■#B4232Cと白文字 ■#FFFFFFの約6.53:1を採用します。

ホバー（マウスを重ねた状態）ではボタンを暗い赤 ■#8D2A32に変えると、白文字 ■#FFFFFFとの比率は約8.37:1です。フォーカス（キーボード操作などでボタンが選ばれた状態）には、少し離した濃い青 ■#243C62の輪郭を加えます。輪郭は白 ■#FFFFFFに対して約11.07:1、オフホワイト ■#F7F7F4に対して約10.31:1です。

WCAG 2.2（Web Content Accessibility Guidelines：ウェブのアクセシビリティ指針）のAA水準では、通常サイズの文字と背景は原則4.5:1以上、操作や状態の識別に必要な非テキストの表示は隣接色と3:1以上が基準です。ただし、すべてのボタンに枠線が必須という意味ではありません。

赤が最適か迷ったら、同じ場所・同じ文言・同じ大きさで、赤 ■#B4232Cと濃い青 ■#234E70を比べるA/Bテスト（2種類の表示結果を比較する試験）が考えられます。濃い青と白文字 ■#FFFFFFのコントラスト比は約8.77:1です。クリック数だけでなく予約完了までを確認し、色の効果を実測せずに断定しないことが大切です。