固定ボタンが内容を隠すスマホサイトの確認手順

スマートフォンの画面下に相談ボタンを置いたところ、問い合わせフォームの同意欄が隠れてしまった。入力を始めると送信ボタンに届かず、キーボードを閉じても元の位置へ戻らない。こうした不具合は、ページを開いた直後の見た目だけでは見つけにくいものです。

固定ボタンの重なりを調べるときは、画面の幅に加え、見えている高さと操作の途中経過を記録します。「何が隠れたか」「何をすると起きたか」「そのまま操作を続けられるか」が分かれば、制作会社へ改修を依頼しやすくなります。本記事では、入力・同意・送信を妨げる重なりを再現し、直した後に確かめる手順をまとめます。

最初に、隠れる操作と覆う部品を特定する

固定ボタンは、ページをスクロールしても画面の端などに残るボタンです。相談先を見つけやすくする一方、本文とは別の層に重なって表示されると、下にある説明や操作部品を覆うことがあります。

まず問題のページを開き、入力欄から同意欄、送信ボタンまで順に進みます。覆っているものは相談ボタンだけとは限りません。上部の固定メニュー、Cookieの通知、チャットの案内、ページ先頭へ戻るボタンも一緒に見ます。一つずつなら収まっていても、複数が同時に現れると残りの空間が足りなくなるためです。

記録は「下が見えない」ではなく、「問い合わせの同意文の後半が、画面下の相談帯に隠れる」と書きます。送信ボタンの文字だけが隠れるのか、押せる場所も覆われるのか、スクロールで全体を出せるのかを添えます。表示の問題と、操作を完了できない問題を区別すると、優先度を決めやすくなります。

同じページでも、初回訪問と通知を閉じた後では状態が変わります。最初から通知がない画面だけで調査を終えず、初回の条件を再現できる環境を制作会社と用意します。実在する顧客情報は入力せず、送信まで試す場合は、テスト用の窓口や受信担当との段取りを先に整えます。

画面幅と、見えている高さを一組で残す

スマホ対応の確認を「幅390で問題なし」と記録しても、入力中や横向きでは結果が変わることがあります。同じ幅でも、ブラウザの操作バー、画面キーボード、表示倍率によって使える範囲が違うからです。端末名だけでなく、向き、ブラウザ、文字や表示の設定を残します。

MDNは、ページの配置を決める領域と、実際に画面で見える領域を区別しています。指で拡大した場合や画面キーボードを表示した場合、配置の領域を変えずに見える領域だけが小さくなることがあります。ブラウザごとの扱いにも違いがあるため、幅の縮小だけをキーボード表示の代わりにはできません。MDN VisualViewport

担当者が正確な寸法を取得できない場合は、無理に数字を推測しません。端末とOS、ブラウザの種類・版、縦横、設定、操作手順を伝え、必要な表示領域の値を制作会社に採取してもらいます。スクリーンショットの画像サイズと、ページ内の寸法として扱うCSSピクセルも同じとは限りません。数値には取得方法を添えます。

以下は確認項目のひな型です。実際の不具合を測定した結果ではありません。利用の多い環境と、問題が報告された環境を優先して、実測値と結果を追記してください。

確認する場面	残す表示条件	同時に出す固定要素	隠れやすい操作	結果に書くこと
縦向きでページ末尾へ進む	幅・高さ、通常表示	相談帯と上部メニュー	同意欄・送信ボタン	最後までスクロールして全体を出せるか
横向きへ切り替える	切替前後の幅・高さ	相談帯と通知	入力欄とその説明	内容を読む空間が残るか
文字を入力する	端末・ブラウザ、キーボード表示中	相談帯・チャット	入力位置・次の欄	入力中の文字と次の操作が見えるか
キーボードを閉じる	閉じる操作と直後の位置	残った固定要素	同意・送信	空白や重なりが残らず操作できるか
文字や表示を拡大する	設定の種類と倍率	複数行になった相談帯	同意文・エラー案内	改行後も内容と操作を追えるか
キーで順番に移動する	進む・戻る両方向	固定ヘッダーと下部帯	現在選択中の部品	選択先が隠れず位置を把握できるか

一度にすべての条件を変えると、発生のきっかけが分からなくなります。通常表示で試した後、横向き、入力、拡大と条件を一つずつ変えます。その後で「横向きかつ入力中」など、実際に起こる組み合わせを確認します。未確認の欄は合格にせず、未確認として担当と期限を残します。

各行には、問題が出た画面の位置も付けます。「ページ末尾」だけでなく、「同意欄の直前」「入力エラーが出た直後」のように状態を指定すると、再確認の出発点がそろいます。同じ通知を閉じたまま次の試験へ進むと条件が変わるため、通知の開閉状態も試験ごとに戻します。

入力の開始から、閉じた後まで続けて試す

キーボードが開いた瞬間だけを撮影しても、操作が止まる場所を十分には説明できません。フォームへ移動し、最初の欄を選び、次の欄へ進み、最後にキーボードを閉じるまでを一つの手順として試します。途中でページが自動的に動く場合は、その前後も残します。

特に確認したいのは長い入力欄です。数行の相談内容を入れると欄が広がる、エラー文が追加される、確認画面で文章が長くなるなど、最初とは高さが変わります。短い入力例だけで収まったことを理由に、長い文章でも問題ないとは判断できません。想定する文字量のダミー文で試します。

同意欄では、チェックを付ける小さな枠と、同意する内容の両方を確認します。枠だけ押せても、説明を読めなければ適切な判断を支えられません。リンク先を開いて戻ったときに、入力内容やチェック状態、表示位置がどうなるかも確認対象です。

記録用の動画を撮るなら、ページを開くところから問題が出るまでを短くまとめます。個人情報や通知が映り込まない環境を使い、動画には「三つ目の入力欄を選ぶと発生」などの説明を添えます。静止画は覆われた範囲を示すのに役立ち、動画は再現の順番を伝えるのに役立ちます。

数字の入力と文章の入力では、表示されるキーボードの種類が変わる場合もあります。電話番号だけで試して終えず、メールアドレスや相談内容など、実際の欄を順番に選びます。キーボードを閉じる方法も、完了キー、画面の別の場所、戻る操作など、試した方法をそのまま残します。

パソコン上のスマホ表示は、幅や改行を探る入口として使えます。ただし、実際の端末で開くキーボードやブラウザのバーの動作まで同じとは限りません。報告があった端末で再確認する工程を、表示幅の確認とは別に予定します。

拡大とキーボード移動は、別の条件として確認する

拡大には、端末の文字設定、ブラウザのページ拡大、指で広げる操作などがあります。すべてを「拡大あり」とまとめず、どの方法を使ったか記録します。文字が大きくなることで固定帯の説明が二行になり、通常時より本文を広く覆う場合もあるため、ボタン自体の高さも見直します。

キーボード操作では、Tabキーで次の部品へ、ShiftとTabで前の部品へ移動します。現在操作対象になっている部品をフォーカスと呼びます。下へ進むときだけでなく、前の欄へ戻るときに上部の固定メニューへ隠れないかも見ます。見えないままキーを押して先へ進める状態を、正常と扱わないことが大切です。

WCAG 2.2の達成基準2.4.11は、キーボードフォーカスを受けた部品が、制作者側のコンテンツによって完全に隠れないことを求めるAAの基準です。一部が隠れるだけで、この基準の不適合と即断はできません。一方、実務の改修条件としては、同意文を読めることや、操作の位置が明確であることも具体的に確かめます。W3C フォーカスが隠されない

この点検だけでサイト全体のアクセシビリティ適合を宣言することはできません。全体の優先順位を決めるときは、Webアクセシビリティの改善項目と進め方も参照し、今回の固定要素の改修範囲と、別途調べる範囲を明記します。

固定を続けるか、フォーム内では解除するかを決める

重なりが分かったら、まず、その場面で相談ボタンを常に表示する必要があるかを検討します。すでに問い合わせフォームに入った人に、同じフォームへ戻る相談帯を重ねる必要性は高くありません。フォームでは固定を解除する、通常の本文の流れに配置する、適切な条件で表示を控えるなどの案を比べます。

W3Cの技法C34は、表示領域の幅や高さに応じて固定ヘッダー・フッターを解除する方法を紹介しています。横向きや拡大によって内容を表示できる空間が少なくなる状況への対応例です。掲載された寸法をどのサイトにも当てはまる正解として使わず、自サイトの部品と表示条件に合わせて検証します。W3C 固定ヘッダー・フッターの解除

固定を残すなら、部品の高さと内容の余白を整え、ページ末尾や選択中の入力欄を隠さず表示できるか確かめます。前面に出す順番だけを変えても、今度は別の操作が覆われることがあります。ボタンを小さくしすぎる対処も、文字の読みやすさや押しやすさを損ねないか確認が必要です。

表示を消す条件を設ける場合は、操作途中に突然対象がなくならないかも見ます。固定を解除しても問い合わせ先へ進む経路は残し、どの条件で表示が変わるのかを仕様として共有します。クリック数の増減だけでなく、入力から完了まで進めることを改修の確認事項に含めます。

依頼書には、再現条件と直ったと判断する状態を書く

制作会社へ渡す記録は、対象URL、端末・ブラウザ、表示条件、操作手順、隠れる部品、画像や動画、期待する状態を一件にまとめます。「固定ボタンを修正」だけでは、どの画面で何を確かめればよいかが伝わりません。

例えば「問い合わせで長文を入力後、キーボードを閉じると相談帯が同意文に重なる。最後までスクロールしても全文を出せない。修正後は同じ手順で同意文を読み、送信操作へ進めること」と書きます。これは依頼文の例であり、特定サイトの不具合報告ではありません。

修正後は、発生した条件をまず再試験します。続いて通常表示、横向き、拡大、キー操作へ広げ、固定を解除した影響で他のページの窓口が使えなくなっていないかも見ます。修正前後の記録は同じ条件で並べ、確認日と担当者を残します。再現しなかった環境と、未確認の環境を区別すれば、残る作業も明確になります。

共通の相談帯を直す場合は、フォーム以外からも代表ページを選びます。短いページ、長い記事、別の通知があるページで確認すると、末尾の余白や重なり方の違いを拾いやすくなります。修正が反映されるページの範囲を確認し、外部の予約・問い合わせ画面は別の管理者への依頼が必要か整理します。

公開後に相談帯の文言を増やしたり、新しいキャンペーン通知を追加したりすると、高さや同時表示の条件が変わります。改修時の検証表を更新時にも使い、変更した部品が同意・送信・エラー表示に重ならないか確認します。固定要素を追加する際の担当と確認箇所を決めておくことが、同じ問題の再発防止につながります。

ボタンを見つけても押されない場合の情報や文言の検討は、ボタン改善の原因整理と依頼準備で扱っています。まずは、操作に必要な内容を固定要素が覆わず、入力から完了へ進める状態を確保しましょう。