スマートフォンの画面下に「問い合わせ」ボタンを固定すると、いつでも連絡しやすくなります。一方、ボタンとその背景が本文を覆い、最後の行やリンクが読めないページもあります。優先するのは読み進めるための領域と、必要な操作が見えることです。その上で、固定して残す導線が本当に必要かをページごとに決めます。
どの場面で何が隠れるかを先に見る
ページの先頭だけでなく、本文中、見出しの直前、最後の段落、フォームの入力中を実機でたどります。固定ボタンの高さだけでなく、余白や影、同時に出るチャット・クッキー案内も含め、読める範囲がどれだけ残るかを見ます。本文末尾に余白を足しても、途中の見出しやリンクがボタンの下へ入り込むなら解決しません。
W3Cのリフローに関する解説は、狭い表示や拡大表示で固定要素が読むことを難しくする場合を説明しています。確認するときは一つの端末幅だけで済ませず、狭い画面、横向き、文字を拡大した状態でも本文と操作の位置を見ます。
残す導線は、今のページで必要な一つに絞る
電話、資料請求、問い合わせ、予約をすべて固定すると、短い画面では導線そのものが本文を押しのけます。サービス説明ページなら問い合わせ、電話で急ぎの対応をするページなら電話など、閲覧者がその場で使う行動を考えます。ほかの導線は本文中の適切な位置やページ末尾に置けます。固定が不要な記事では、通常の本文リンクに戻す選択もあります。
ボタンを小さくする場合も、読めない文字や押しにくい領域にしてはいけません。短い表示名にして意味が通るか、押し間違えないかを実機で確かめます。ページによって表示を切り替えるなら、記事・サービス案内・フォームのそれぞれで目的を確認します。
隠れない仕組みと、固定を外す条件を決める
下部に固定するなら、本文の最後までスクロールしたときに内容が隠れず、リンクや入力欄へ移ったときにも操作対象が見えるようにします。W3Cのフォーカス非隠蔽の解説では、固定フッターがキーボードで選択中の要素を完全に覆う問題が示されています。これは本文の一部が隠れる事例全体の適合判定を示すものではありませんが、ボタンの下へ操作対象が入らないかを確かめる根拠になります。
端末下部の安全領域も見ます。MDNの説明には、安全領域を使って固定要素が端末の操作部分に重ならないようにする例があります。ただし、安全領域を確保するほど固定部分が高くなる場合もあります。横向きや入力中に本文がほとんど残らないなら、その条件では固定を外すことを検討します。
修正後は、読み終えてから連絡する流れを試す
本文を上から読み、関連リンクを開き、ページ下部から問い合わせへ進むまで操作します。画面を拡大した場合、キーボードでリンクを移動する場合、フォームのキーボードが開いた場合も確かめます。ボタンが消える条件を設けたなら、問い合わせ先がほかの場所から見つかるかも確認します。固定を外しただけで連絡経路まで消してはいけません。
Bämの問い合わせが少ないサイトの改善案内では、問い合わせまでの導線を含めて相談できます。実際の画面で本文とボタンの重なりを確認し、閲覧と連絡の両方を妨げない形を選びます。
参考資料
- W3C WAI：Understanding Success Criterion 1.4.10 Reflow
- W3C WAI：Understanding Success Criterion 2.4.11 Focus Not Obscured (Minimum)
- MDN：env() CSS function
- Bäm：問い合わせが少ない。その理由から、一緒に考えます。
資料確認日：2026年9月26日。対象サイトの実画面と利用状況は未提示のため、固定表示の残し方は画面ごとの検証で判断します。
