スマホの追従バナーで、本文やボタンを隠していませんか

画面の下にずっと出ている電話ボタンや予約バナーは、すぐに問い合わせたい人には便利です。しかし、Cookieの案内、チャットの起動ボタン、キャンペーン表示まで重なると、本文やフォームが見えなくなることがあります。

担当者のパソコンでは問題がなくても、スマートフォンの小さな画面や、文字を拡大した状態では使いにくい。追従バナーの良し悪しは、見た目の目立ち方だけでなく、読む・入力する・移動する操作を邪魔しないかで確認しましょう。

一つずつは便利でも、重なると邪魔になる

予約、電話、チャット、Cookieの選択画面。それぞれ別の会社やプラグインが追加していると、画面全体で何個重なっているかを誰も把握していない場合があります。ログイン中はCookieの案内が出ず、初めての訪問者だけ狭い画面になっていることもあります。

確認するときは、スマートフォンの縦向きだけでなく横向きも試します。新しいブラウザの状態、文字を大きくした状態、フォームへ入力してキーボードが出た状態を見てください。重要な操作ができるかが判断基準です。

ページの途中が読めても、最後の同意チェックや送信ボタンが隠れていれば問い合わせは完了しません。フッターの会社情報やプライバシーポリシーへのリンクが押せなくなっていないかも確認します。

下に余白を足すことが有効な場合はありますが、それだけで解決とは限りません。バナーの高さが文章の折り返しで変わる場合や、キーボード表示で画面が狭くなる場合もあります。決め打ちの余白だけに頼らず、実際の表示と操作を試す必要があります。

スマートフォンの見た目だけでなく、Tabキーでリンクやボタンを移動したときの位置も確認します。選択中の要素が追従バナーの裏に入ると、今どこを操作しているのか分からなくなります。

W3CのWCAG 2.2の失敗例では、固定されたヘッダーやフッターによって、キーボードフォーカスを受けた要素が完全に隠れる問題が説明されています。「押せるHTMLになっているから問題ない」ではなく、選択中の場所が見えることも重要です。

最初に、何を常に表示する必要があるかを決めます。電話、予約、見積依頼をすべて同じ強さで並べるのではなく、そのページを読む人の主な用事に合わせます。フォームの入力中に別の問い合わせ導線を重ねる必要があるかも見直しましょう。

画面の高さが小さいときは固定を解除する、フォーム上では表示を抑える、必要なときだけ開ける形にする、といった対応が候補です。W3Cの固定ヘッダー・フッターに関する技法も参考になります。どの方法も、実装した後の操作確認が必要です。

画面を広くするために、必要な選択肢を見えなくしたり、同意だけを押しやすくしたりしてはいけません。閉じる操作が何を意味するのか、拒否や設定変更ができるのかも含めて設計します。必要な表示や同意の扱いは、利用するサービスや適用されるルールによって確認が必要です。

チャットのボタンも、閉じたはずの案内が毎ページ開き直したり、Cookieの選択肢に重なったりしないようにします。プラグイン単体のプレビューではなく、実際のサイト上で全体を見てください。

主要ページだけでなく、問い合わせ、予約、資料請求など完了までの画面を確認します。特定のブラウザだけでなく、自社サイトの訪問者が使っている環境も踏まえて試したいところです。

制作担当へ修正を依頼するときは、端末名、ブラウザ、画面の向き、どの操作で隠れたかを添えます。顧客情報を入れた画面をそのまま共有せず、テスト用の入力へ置き換えて再現すると、安全に状況を伝えられます。画像一枚だけで分からなければ、再現する順番を短く記録しましょう。

押しやすさについては、スマートフォンのボタンの大きさと間隔の記事も合わせて確認できます。隠れないことと、狙ったボタンを押せることの両方が必要です。

追従バナーのクリックが増えても、その裏でフォーム送信が難しくなっていれば、サイト全体として改善とは言えません。クリック数と合わせて、入力を終えられるか、相談や予約まで進めるかを見ましょう。

便利なボタンを増やすほど、お客様にとって便利になるとは限りません。必要なものが見え、押したいものを押せる画面を保つことが、問い合わせ導線の基本です。