スマホのスクロール中もCTAを目立たせる色の使い方
イベント紹介ページをスマホで読み進めると、写真、白い日程表、淡い色の案内、濃い色の会場情報が次々に現れます。そこで「参加を申し込む」ボタンが周囲の背景に埋もれると、申し込み先を探し直すことになります。スクロール中もCTA（Call to Action：申し込みなどの行動を促すボタンや案内）を見つけやすくするには、ボタンの色だけでなく、ボタンの周囲にある面をどう保つかが重要です。
背景が切り替わってもCTAの色と役割を変えすぎない
白いセクションで目立つボタンも、似た明るさの背景に移ると輪郭が弱くなります。濃いセクションでは逆にボタンと背景が一体化する場合があります。スクロール位置ごとにボタンの色を変える前に、ボタンを置く帯を不透明な単色にして、色の組み合わせを一定に保つ方法を検討します。
コントラスト比は、2色の相対的な明るさの差を表す数値です。WCAG 2.2（WEBコンテンツのアクセシビリティ指針）のレベルAAでは、通常サイズの文字は背景に対して原則4.5:1以上が必要です。また、操作部品の存在や状態を識別するために必要な図形などは、隣接色と原則3:1以上が基準になります。単に鮮やかな色を選ぶのではなく、実際に隣り合う色を確認します。
イベントの長い案内ページで試す配色例
ワークショップの紹介ページを想定します。日程表は白#FFFFFF、持ち物の案内は淡いグリーン#E9F4ED、会場紹介は濃いネイビー#24394Bに分けます。HEXは、WEBで色を指定する16進数のカラーコードです。以下の比率は指定した色同士を計算した値です。
- 追従する帯：画面下部の申し込み欄は白#FFFFFFの不透明な背景に固定します。白い日程表と接すると色差がないため、上端に青灰#6B7E91の線を置きます。線は白に対して約4.18:1、淡いグリーン#E9F4EDに対して約3.71:1です。濃いネイビー#24394Bの上では、白い帯自体が約11.92:1の差で区別できます。
- 申し込みボタン：帯の白#FFFFFFに対して、濃い青緑#165D72のボタンを使うと約7.39:1です。ボタン内の「参加を申し込む」という白#FFFFFFの文字と矢印も、青緑#165D72との比が約7.39:1になります。ボタンの文字と形の両方で操作を示します。
- 短い補助文：帯の白#FFFFFFに置く「申し込みページへ移動します」の文字は、落ち着いた青灰#41556Bで約7.67:1です。小さな文字だけを極端に薄くせず、ボタンより控えめな配置と文字量で補助情報にします。
- 本文中にもCTAを置く場合：青緑#165D72のボタンは白#FFFFFF上で約7.39:1、淡いグリーン#E9F4ED上で約6.55:1ですが、濃いネイビー#24394B上では約1.61:1に下がります。濃いセクションでは同じボタンを直接置かず、白#FFFFFFの面を挟むなど、周囲を変えて見分けられるようにします。
ここでは本文の背景色が変わっても、追従欄の白とボタンの青緑は変えません。色を毎回切り替えるより、申し込み操作の位置と見た目を一定にする考え方です。
スクロール時の見え方と本文への重なりを確認する
写真が背後を流れる場所では、半透明の帯を使うと文字やボタンの周囲の色が変わります。固定したHEX同士のコントラスト比をそのまま当てはめられないため、まず不透明な帯で確認する方が確実です。また、帯を大きくしすぎると日程や注意書きを覆ってしまいます。本文の末尾にも十分な余白を取り、スマホの下部操作領域や別の通知と重ならないか確かめましょう。
CTAを常時表示すれば必ず申し込みが増えるわけではありません。本文を隠さず、申し込む前に確認したい情報を読めることが優先です。キーボード操作でフォーカスした項目が帯の陰に完全に隠れないかも確認します。
HueRollではHEXで候補色を調整し、選択色と白・黒とのコントラストを確認できます。ただし、任意の2色同士の比較やWCAGのAA・AAA自動判定には対応していません。青緑と淡いグリーンなどの実際の組み合わせは別途計算し、スクロール中の表示も実機相当の幅で確かめましょう。