スマホの固定ボタンに合う色は？コンテンツを邪魔しないCTA配色

スマホの画面下に固定するボタンは、長いページでも申込み先を見つけやすくする一方、色や大きさによっては本文や写真を邪魔してしまいます。CTA（Call to Action、予約や申込みなど次の行動を促すボタン）を固定表示する場合は、ボタンだけでなく周囲の固定バーの色と境界も一緒に決めることが大切です。

固定バーは控えめにして、ボタンだけを目立たせる

画面下部の固定バーを白や淡い無彩色に近い色にし、押してほしいボタンだけを濃い色にする方法があります。バー全体を鮮やかな色で塗ると、写真や見出しよりも固定領域が目立ち、読み進める妨げになりかねません。操作ボタンの位置が常に見えているなら、色の強さを必要以上に上げる必要はありません。

本文と固定バーの明るさが近い場合は、上端に境界線を設けて区切ります。バーを半透明にすると、背後の写真や文字によって見え方が変わり、コントラストの確認も難しくなります。固定バーは不透明にし、主な操作を一つに絞ると整理しやすくなります。

宿泊施設の客室紹介ページで考える配色例

客室の写真と設備情報が続くページを想定します。ページ背景はアイボリー ■#FAF7F2、本文と見出しは暗いスレート ■#26343B にします。文字と背景のコントラスト比は約12.01:1です。写真を引き立てる淡い背景に、長い説明文も濃い文字で配置します。

画面下の固定バーは白 ■#FFFFFF とし、上端にグレーブルー ■#707C83 の細い線を入れます。境界線と白いバーのコントラスト比は約4.29:1、ページ背景 ■#FAF7F2 に対しては約4.01:1です。バーとページの色が近くても、線によって領域を区別できます。

固定ボタンの背景は落ち着いたプラム ■#693A57、ボタン内の「空室と料金を確認」は白 ■#FFFFFF にします。この文字と背景のコントラスト比は約8.96:1で、通常サイズの文字に求められる4.5:1以上です。ボタンと白い固定バー ■#FFFFFF の差も約8.96:1あります。短い補足文を付けるなら、白いバー ■#FFFFFF 上にブルーグレー ■#50616B の文字を配置できます。この組み合わせの比は約6.44:1です。

固定バーを白系にして、押す部分だけに濃いプラムを使えば、大きな色面の主張を抑えながら操作の場所を示せます。ブランド色に合わせてボタン色を替える場合も、文字色とバー背景とのコントラストを再確認しましょう。

画面下の余白と表示状態まで含めて調整する

固定ボタンを設置するときは、ページ末尾のキャンセル規定や問い合わせ案内がバーの下に隠れないよう、本文側に固定領域の高さに応じた下余白を確保します。端末の下端に操作用の領域がある場合も考慮し、狭い画面や文字拡大時にボタンの文言が折り返しても使えるか確認してください。

予約フォームの入力中は、表示されたキーボードと固定ボタンが重なることがあります。入力欄や送信ボタン、キーボードで選択中の位置（フォーカス）が隠れないようにし、必要ならフォーム内では固定バーを非表示にします。色が適切でも内容を覆う配置では使いやすくなりません。

WCAG 2.2（Webコンテンツのアクセシビリティ指針）では、通常の文字のコントラスト比は4.5:1以上、操作部品を識別するのに必要な視覚情報は原則3:1以上が基準です。操作対象の大きさは原則24×24 CSSピクセル以上（Webページ上の寸法単位。例外あり）です。これを下限の確認材料とし、押しやすい余白も取ります。

HueRollでは選んだ色と白・黒とのコントラストを確認できますが、任意の2色の直接比較や基準の自動判定はできません。固定バーの白 ■#FFFFFF とボタンのプラム ■#693A57、境界線 ■#707C83 など、隣接する色同士は別の方法でも比を確認しましょう。