スマートフォンでホームページのメニューが開かないときはどこで止まるか確かめましょう

「スマートフォンでメニューを押しても、予約ページが見つからない」と連絡が来たのに、事務所のパソコンで開くと正常に見える。こうしたときは、最初に連絡をくれた人が入ったページと、止まった操作を確かめます。メニューを開くことと、そこから目的のページへ進めることは、別々に確かめる必要があります。

WordPressの公式サポートフォーラムの投稿には、パソコンのブラウザーでスマートフォン幅にした場合はメニューが動くのに、実際のスマートフォンでは開かないと報告した質問があります。返信ではサイトの動作に関するエラーを確認し、原因を切り分ける提案がされていました。この質問から分かるのは、確認に使った環境によって症状が違って見えることです。ご自身のサイトでも同じ理由で起きているかは、実際に見て判断します。

まず、お客様が行こうとしたページを聞く

同じ「メニューが使えない」という連絡でも、目標は人によって違います。サービス内容を読みたかったのか、アクセスを見たかったのか、空き状況を確認したかったのかで、急いで確保する案内も変わります。来訪者に尋ねられるなら、最初に「どのページを開こうとしていましたか」と聞きます。最初の聞き取りでは、目的と、分かる範囲で入口だけを聞き、操作の再現と条件の記録はサイト担当が行います。

予約しようとした方へすぐに返事ができるなら、公開されている正しい予約ページのURLを案内します。連絡先が分かっている場合はその人への対応を先に済ませ、サイト側の確認を並行して行います。別の受付方法を案内するなら、営業日や受付時間を現場に確かめてください。つながらない電話や受付を止めている窓口へ誘導すると、訪問者は同じ用件をもう一度説明することになります。

サイト担当者の確認では「どの画面を開いたときに問題が出たか」「どの機能まで動いたか」「誰でも使う経路に影響するか」を記録します。この三つが分かると、メニュー全体の改修が要るのか、特定ページの予約リンクを直せばよいのか、確認する範囲を狭められます。

トップページだけで判定しない

検索結果やSNSからホームページを見る人は、必ずしもトップページを通りません。サービスの詳細ページ、過去のお知らせ、店舗情報などに直接入り、そこからメニューを開くことがあります。担当者がトップページだけ確認して正常と判断すると、来訪者が実際に使った入口を取りこぼします。

まず、連絡を受けたURLを開きます。分からなければ、自社でよく案内するページを一つ選び、トップページと並べて試します。例えば、電話で「施術のページから予約できなかった」と言われた場合、施術紹介ページとトップページからそれぞれ予約まで進みます。一方でだけ起きるなら、サイト全体のメニュー機能が停止していると決めつけず、入口ページによる違いをそのまま残します。

地域で複数の店舗や事業を案内しているサイトでは、見た目の似たページから別の窓口へ飛ぶこともあります。予約のボタンを押せたというだけで完了にせず、画面上の店舗名やサービス名を読みます。複数店舗の選択画面が正しい入口なら、意図した店舗を選べるところまでを確認の終点にします。受付フォームでテスト送信する必要がある場合は、制作担当とテスト方法を先に決め、顧客の予約枠を使わないようにします。

スマートフォンの実機で同じ順に操作する

自分のスマートフォンでサイトの管理画面にログインしている場合は、訪問者と条件が違います。確認用の別ブラウザーを使うなど、管理画面へログインしていない状態で公開URLを開きます。管理者向けの画面上部の表示や編集用の仕組みが、訪問者の環境と同じとは限らないためです。最初から設定を変えると元の症状が再現しなくなることがあるので、変更の前に一度記録します。

端末とブラウザーは、最初からすべて揃える必要はありません。まず手元の一台で、入口URL、縦向きか横向きか、ページの一番上か下へ移動した後か、メニューを一度押した結果を控えます。ほかの端末が使えるなら、同じURLで同じ順番を試します。一台で見られなかった現象は「この端末では再現せず」と残し、すべての端末で直ったとは判断しません。

パソコンで画面幅を変える確認にも出番があります。実機で症状をつかんだ後に、画面の幅を狭めるとどのあたりでボタンが出るか、文字が重なるかを確認できます。実機のタッチ操作とブラウザーでの表示をそれで置き換えず、実機とは別の条件として記録します。ページが開き終わる前だけボタンが反応しない場合は、読み込み後も同じかを見て、その違いをメモします。

メニューのどの段階で止まったかを分ける

止まった場所	画面で確認すること	記録の例
入口が見つからない	メニューの位置、別の帯や画面の端で隠れていないか	詳細ページの最上部にメニューボタンが見当たらない
押しても開かない	タップ後に何が変化するか、他の入口ページでは開くか	アイコンはあるが、一度押しても項目一覧が出ない
開くが目的の項目が出ない	子項目の開閉、一覧の下にあるリンクまで移動できるか	サービスの親項目は表示、下の予約リンクへ進めない
リンクが押せるが行き先が違う	画面上の名前と遷移先URL、店舗やサービスが一致するか	個別相談を選ぶと、終了済みの申込ページが開く
目的のページに着くが戻れない	戻る操作の後にページやメニューを操作できるか	戻った後に覆いが残り、本文のリンクが押せない

症状を決めるときは、連続で何度も押す前に、一回の操作で何が変わったかを見ます。押した瞬間に色が変わるが一覧が出ない場合と、そもそも押せない場合では、制作側の調べ方が違います。メニューの背景だけが出たのか、文字の一覧は見えるが下へ動かないのか、開いた後に閉じられるかも、説明できると原因調査の手掛かりになります。

さらに、一覧の一番下まで指で動かせるかも確認します。項目数が多いと、最初に見える三項目は選べても、画面の下にある予約や問い合わせには手が届かないことがあります。ブラウザーの下部の表示や固定の案内帯と重なる場合は、重なっている位置を記録します。閉じるボタンが見つかるか、閉じた後に元のページを読み続けられるかも合わせて試します。

「メニューを直してください」を再現票に置き換える

制作担当へ渡すときは、原因の推測から始めず、第三者が同じ操作をできる説明にします。たとえば「予約が押せません」だけでは、ページ上部のメニューにある予約、本文の予約ボタン、外部サービスの予約画面のどこなのか分かりません。入口から押した順に書いておけば、電話で長く説明しなくても調査を始められます。

次は架空の再現票です。「未確認」を残しても構いません。同じ端末を借りられない場合、別の端末で代用したことを記入します。動画や画面の記録が必要なら、公開画面だけを短く撮り、通知、アカウント名、顧客情報が映らないよう確認してから渡します。

再現票の欄	記入例
目的と入口	個別相談の予約。SNSに案内している https://example.com/services/ から開始。
日時・条件	11月4日午後。スマートフォン機種A、OS版X、通常ブラウザーB・版Y、縦向き、未ログイン。SNSアプリ内の表示は未確認。
した操作	公開URLを直接開く。ページ上部へ戻り、右上のメニューボタンを一度押す。
期待と実際	サービスや予約への項目が出るはず。押すとボタンの色は変わるが一覧は出ない。
比較した入口	同じ端末でトップページからは一覧が出て、期待した https://example.com/book/ へ移動できた。
暫定対応と確認先	公開されている予約URLを受付担当から案内。改修後はサービス紹介とトップの両方から確認する。

制作担当に渡す補足は、発生直前にどのページや設定を変更したか、公開した担当者、既知の変更日時です。発生直前に変更がなかった場合や不明なら、そのまま書きます。変更の時間が近いだけで原因は確定しません。後から日時が分かったら票を追記し、最初に観察した画面の記録を上書きせず残します。

来訪者全員に起きたかは、問い合わせ一件では判断できません。サイト担当が記録するなら「申告一件・手元の実機で再現・別の端末は未確認」など、分かっている範囲を伝えます。担当者に依頼する際は、障害が重大かという判断を来訪数だけで行わず、問い合わせや予約に進める別の道があるか、業務に必要な期限に間に合うかも伝えます。

再現した条件によって次の確認を変える

同じスマートフォンで、トップページ、サービス紹介、お知らせのどれからも開けない場合は、個別のページ本文に限らず共通のメニューに調査範囲を広げます。どの入口でも開けないと分かった時点で、主要な受付先への直接リンクを置ける場所を探します。公開画面を急いで変える権限がなければ、来訪者へ返事をする窓口で確認済みの受付先を案内し、制作担当には試した入口を複数渡します。

SNSアプリの中で開いたときだけ止まる場合は、同じスマートフォンの通常ブラウザーで同じ公開URLを開きます。通常ブラウザーでは進めると確認できたら、その操作を一時案内として伝えられます。通常ブラウザーに移したことがきっかけで、予約が最初からになる場合もあるため、個人情報の入力を始める前に案内します。制作担当にはアプリ名と確認日も渡し、画面幅だけを変えたテストで完了にしないよう依頼します。

報告のあった条件を用意できない、あるいは同じ操作でも再現しない場合は、利用者の操作ミスと決めつけず、確認できた条件と確認できない条件を区別します。再現しない間も、用件を受け付けられる別の道を示し、次に同じ連絡があったらどの入口と操作を聞くかを受付担当と決めます。制作担当にURLを共有するときは公開ページを対象とし、予約の識別子、ログイン用トークン、個人情報を含むURLや画面記録は除いてから共有します。そうした値が発生条件に関わる可能性がある場合は、値そのものを送らず、担当者と確認用の条件を作ります。

制作担当の調査と現場の応急対応を分ける

WordPressの公式文書は、Navigationブロックでメニュー項目や子項目を管理し、対応環境では小さい画面での表示方法を設定する例を示しています。ただし、自分のサイトのメニューが同じブロックで作られているか、テーマ側が別に表示しているかは、構成や版によって変わります。管理画面の項目名だけを頼りに操作せず、どこで作られているメニューかを制作担当に確認します。

フォーラムに似た症状と対処が載っていても、公開中のサイトでプラグインを一つずつ止めると、予約、フォーム、表示など別の機能にも影響する可能性があります。機能を停止して切り分ける必要があれば、元に戻せる構成で制作担当が範囲を決めます。設定変更前の控えと戻し方を用意し、確認に使える環境で試してから公開側に反映します。現場担当が先に必要なのは、症状の記録と来訪者が使える案内です。

急ぐ場合の候補は、問題が起きるサービスページ本文に、確認済みの予約ページへの直接リンクを置くことです。サイトを編集できる担当者が、編集できる範囲と元に戻す手順を確認したうえで行います。メニューを経由しなくても進めるようになったかを、同じスマートフォンで試します。既存のリンク先と異なる窓口があるときは、受付担当者とも照らし合わせます。

一時的な案内には、いつ、どのページに入れたかを控えます。メニューを直した後も、本文の予約リンクが訪問者にとって自然な導線なら残す判断ができます。受付期限を載せた臨時案内なら、期限や担当者を決めて点検します。応急対応は直るまでの橋渡しです。暫定リンクが機能していることを、メニューも修正済みという記録にしないようにします。

修正後は元の入口から目的まで通して確認する

制作担当から「修正しました」と連絡が来たら、最初の再現票を使います。同じ公開URL、未ログイン、同じ画面の向きで、止まっていた操作を試します。メニューが開いた段階で終わらず、項目を選び、正しい予約・問い合わせページの見出しを確認します。次にトップページなど比較した入口を開き、以前動いていた経路も確かめます。直した場所だけを見ると、別の入口に影響が出ても気づきにくいためです。

ボタンを押す方法にも違いがあります。スマートフォンの実機ではタッチで開閉し、制作担当と確認できる場合は、キーボードで順に移動したときに今いる位置が見えるか、開閉とリンク選択ができるかも確かめます。W3Cのナビゲーション例は、サイトのリンク一覧と開閉の操作を分ける作りを考える参考になります。実装例をそのまま貼っただけであらゆる環境に対応したとは扱わず、使う端末や支援技術に合わせて制作担当と確認します。

小さい画面で文字を拡大した状態でも、メニューが画面の外にはみ出さないか、目的の項目まで進めるかを確認します。例えば、最初は縦向きで見えた予約項目が、横向きでは画面内に入らないことがあります。利用者と同じ条件が手元で再現できない場合は、テストした端末や設定だけを完了として記録し、連絡をくれた方に負担の少ない範囲で案内が使えたか尋ねます。

完了の記録には、修正日、確認した公開URL、端末、到達できた画面、未確認の条件を書きます。制作担当の作業画面で直っていても、公開ページに反映される前なら来訪者は旧画面を使っています。公開反映後に実機で確かめた日を分けると、再度連絡が来たとき、どの段階で確かめたかをたどれます。

ページを追加したときの確認に組み込む

島田市で来店や相談につなげるホームページを運用する場合、検索で読まれるページや季節の案内を追加するたび、本文とメニューの両方から主要な受付先へ進めるかを見ると、点検の対象を決めやすくなります。まずは集客に使う入口を二つ、到達先を一つ選びます。実機で開く、表示された項目を選ぶ、到達先を読む、戻るという短い操作を担当者で共有します。

定期点検は、項目数を増やすことより、同じ到達先まで確認した記録を更新することに意味があります。受付方法を変更した週は、その案内を出したページを優先します。デザインを変えた週は、メニューが出る位置、長い一覧、戻る操作を追加して確認します。店舗や教室などで担当を交代する場合も、画面のどこを見るかと完了地点を再現票に残しておけば、前任者の端末を借りられなくても、現担当が確かめられる条件から続けられます。

表示の問題を直した後に問い合わせ件数が変わっても、時期や案内内容など他の影響があります。最初の目標は、連絡のあった入口で、来訪者が予約先へたどり着けることです。確認した範囲を積み上げると、メニューの仕組みを直すべきか、ページの本文からも案内を置くべきかを、実際の経路に沿って判断できます。

公開後の動線点検やホームページの改善については、LIFESEEDSのホームページ制作・改善支援をご覧いただき、お問い合わせからご相談ください。

アイキャッチは説明用に生成したイメージです。