スマホサイトのCTAカラーはどう決める？小画面でも目立つ配色

スマホサイトのCTA（Call to Action、申込みなど次の行動を促すボタン）は、鮮やかな色にすれば目立つとは限りません。小さな画面では見出しや写真、メニューも近くに並ぶため、周囲との違いが分かることが大切です。ここでは体験講座の申込みページを例に、ボタンと背景の色を決める手順を紹介します。

CTAの色は「目立つか」より「周囲と区別できるか」で決める

最初に、ページで最も優先したい行動を一つ決めます。講座の詳細を読むことより「開催日と空き状況を見る」ことを促すなら、それを主なCTAにし、ほかのリンクは控えめにします。複数のボタンをすべて強い色で塗ると、どれを先に押すべきか分かりにくくなります。

ボタン色を選ぶ際は、単体の鮮やかさだけでなく、ページ背景、ボタンの中の文字、近くにある写真や案内枠を一緒に見ます。背景が淡ければ十分に濃い色を主なCTAに使い、同じ色を装飾や小見出しに広く使いすぎない方が、操作の目印を保てます。色だけでなく、動作が分かるラベルも必要です。

体験講座のスマホ申込みページで使う配色例

ページ背景を淡いブルーグレー ■#F4F8FA、講座情報を載せるカードを白 ■#FFFFFF にします。見出しと本文はダークネイビー ■#243247、開催日などの補足文はブルーグレー ■#526274 とすると、情報の強弱を付けられます。写真や講座名のすぐ下には、短い案内と申込み導線を置きます。

主なCTA「開催日と空きを見る」の背景は深いティール ■#075B63、文字は白 ■#FFFFFF にします。この組み合わせのコントラスト比は約7.82:1で、通常サイズの文字に求められる4.5:1以上です。ボタン面とページ背景 ■#F4F8FA の比も約7.32:1なので、ボタンの領域を識別しやすい組み合わせです。カードの白 ■#FFFFFF に対しても約7.82:1の差があります。

補足案内の背景には淡いミントグレー ■#DDECF0 を使い、文字はダークネイビー ■#243247 のままにします。文字と案内背景の比は約10.68:1です。二つ目の操作「講座の内容を読む」は、白 ■#FFFFFF のカード上で深いティール ■#075B63 の下線付きテキストリンクにすれば、主なCTAと役割を分けられます。

小画面では配置・タップしやすさ・表示状態も確認する

スマホでは、ボタンを横に何個も並べず、主なCTAを一つのまとまった幅で配置すると選びやすくなります。文字が折り返しても窮屈にならない余白を取り、指で押せる領域と隣のリンクとの間隔も確認してください。固定表示のCTAを使う場合は、フォームの入力欄や画面下部の案内を覆わないか、スクロール中やキーボード表示時にも確かめます。

色の確認では、WCAG 2.2（Webコンテンツのアクセシビリティ指針）の通常サイズの文字は4.5:1以上、大きな文字は3:1以上が基本です。操作部品を識別するために必要な視覚情報にも、原則として隣接色との3:1以上の基準があります。数値だけで操作しやすさが決まるわけではないので、実際のスマホ幅でラベル・余白・周囲の情報も合わせて見直します。

HueRollでは色の濃淡や白・黒とのコントラストを確認できます。ただし、任意の2色のコントラストを直接比較する機能はありません。ページ背景 ■#F4F8FA とCTA ■#075B63 のような組み合わせは、別の計算手段で確認したうえで採用しましょう。