スマホで相談ボタンまで迷わせない。ホームページの導線を自分で確かめる

ボタンは見える。それでも押す理由が足りない

架空の出張撮影サービスで、利用者が移動中にスマホを開いたとします。画面下には「お問い合わせ」が常に表示されています。しかし撮影地域と納品までの流れが見つからず、自分の希望日程を相談してよいか分かりません。この状態ではボタンだけを目立たせても、判断の途中にある迷いは残ります。

点検するのはボタン一個ではなく、用事が終わるまでの道筋です。「近隣で家族写真を撮ってもらえるか知り、候補日を相談する」と一つ決めます。自分のサービスなら、普段来る具体的な相談に置き換えてください。ページごとの見栄えは、その用事を通して確認します。

実際のスマホで、五つの場面をたどる

できれば社内説明を受けていない人にも、同じ用事を試してもらいます。操作を誘導せず、止まった場所と言った言葉を記録します。テスト送信は管理者と取り決めた方法で行い、実際のお客様の相談と区別してください。

1. 入口を開く：検索や紹介リンクから来た想定で、そのサービスを扱っていると分かるか見る。トップからの経路だけに限定しません。
2. 条件を探す：地域、対象、費用条件、相談後の流れを確認する。メニューを開き直した場所や、前のページへ戻った場所を残します。
3. 相談先を選ぶ：ボタンの言葉と移動先を確認する。「見積もり相談」と書いて予約確定になるなど、期待とのずれがないか見ます。
4. 入力する：キーボードを表示した状態で、項目名、説明、エラー、送信ボタンが見えるか試す。長い社名や文章も入力してみます。
5. 結果を確かめる：送信できたことが分かるか、前へ戻って入力が消えないか、完了後にどの案内が出るかを確認します。

押しやすさと、読める幅を別々に見る

W3CのWCAG 2.2には、操作対象の最小サイズを24×24 CSSピクセルとする基準があり、間隔などの例外条件も示されています。 W3C WAI：Understanding SC 2.5.8 Target Size (Minimum) ↗ これは画面上で見た目の幅を測るだけで適合判定できるという意味ではありません。制作側には、隣のリンクを誤って押さない大きさ・間隔も含めて確認を依頼します。

文字が読めても、料金表を左右に動かさないと条件を追えなければ確認に手間がかかります。W3Cはリフローについて、原則として幅320 CSSピクセル相当で情報や機能を失わずに表示できることを示しています。地図などには例外があります。 W3C WAI：Understanding SC 1.4.10 Reflow ↗ スマホ確認に加え、文字を拡大した場合の点検も制作側へ伝えましょう。

• 固定ボタンが本文、入力欄、エラー説明を隠していないか。
• 電話・メール・フォームの選択肢が、使える時間帯や用途と一緒に説明されているか。
• メニューを閉じる、前へ戻る、入力を直す操作が分かるか。

修正依頼は「スマホで見づらい」を具体化する

端末名だけでは、何が起きたかが伝わりません。問題が起きたURL、操作、期待した結果を一緒に渡すと、制作側が同じ場面を再現しやすくなります。画面写真を添える場合は、入力した氏名などを消してください。

修正を頼むときは、すべてを同時に変える前に、用事を妨げている箇所から優先します。例えば固定ボタンの重なりを直したら、入力から完了までをもう一度試します。端末によって違いが出る場合は、その条件も記録してください。

確かめた用事：
開始したURL：
端末・ブラウザ：
迷った／押せなかった場所：
その直前にした操作：
本来分かりたかったこと：
実際に起きたこと：
入力・完了まで確かめた範囲：
優先して直したい一点：

【考察・見解】選択肢を置く位置にも意味がある

情報を読み終える前に複数の相談先を選ばされると、どれが自分向けか考える負担が生じる可能性があります。主要な相談方法を条件説明のあとに示し、別の方法も探せる形をまず試す価値があります。ただし、急ぎの連絡が多い業種では電話が優先されるなど、利用場面によって適切な順番は変わります。

押しやすさを直しても問い合わせ増加は確約できません。修正後に同じ用事を再度試し、迷いが残る箇所を確かめます。Web制作の相談では、現在のURLと確認メモを共有してください。ページの追加が必要か、既存ページの並び替えで足りるかから整理できます。