スマホとPCで表示が変わる所はどう確かめる？同じページの幅と操作を比べる方法

同じページ・原稿・用事を先にそろえる

比べる対象は、見た目が似た別ページではなく、同じURL・同じ原稿のページです。読者がそのページで終えたい用事を一つ決め、必要な説明と行き先を幅ごとに追います。

ここでは、小さな設備点検会社の兼務Web担当が、戻ってきたサービス案内を公開前に確かめる場面を考えます。会社・原稿・観測は説明用の架空設定です。「対象設備と地域の条件、準備写真の説明を読んで、相談先を選ぶ」という用事を固定します。実会社の点検対象、地域、写真の枚数や受付条件を決めた例ではありません。

開始前に対象URL、原稿の版、ブラウザーとその版、確認する表示条件を残します。公開前の確認用URLなのか、実際の公開URLなのかも分けてください。途中で原稿やブラウザーまで変えると、幅の違いで説明が見えなくなったのか、別の変更が影響したのかを調べにくくなります。

確認結果は「必要な説明が見えた」「ページが横にはみ出した」「相談先を選んで目的の画面へ進めた」に分けます。説明とリンクが見えることだけで、操作や受付まで成功したとは判断しません。

狭い幅と広い幅だけでなく、切り替わる前後を動かして見る

最初に狭い幅と広い幅を確かめ、並び方やメニューが変わる所を見つけたら、その境目の直前・境目・直後でも同じ用事を試します。決まった端末名の一覧を確認するだけでは、途中の幅で起きる問題が残る場合があります。

レスポンシブ表示は、ページを表示できる幅などの条件に応じて、配置や見せ方を調整する作り方です。配置を切り替える幅の条件は、一般にブレークポイントと呼びます。境目の数値や、境目ちょうどでどちらの配置になるかは、そのサイトのCSSなどの指定を制作担当と確認します。390や768が全サイト共通の切替値という意味ではありません。

Chromeで幅の条件を調べる場合は、開発者ツールのDevice Modeを開き、Responsiveで幅・高さを入力するか、枠の端を動かします。同じページをゆっくり狭く、広くして、説明の並びや操作部品が変わる所を見ます。必要ならShow media queriesでCSSの幅条件を表示し、制作担当と対象の指定を読み合わせます。Chrome公式のDevice Mode説明に操作と限界がまとめられています。

境目付近を確認するときは、幅だけを変え、原稿・ブラウザー・試す操作を保ちます。違いが出た幅を数値で残し、そこから幅を戻したときも同じ状態になるかを確かめてください。画面の高さ、向き、拡大率や端末種別の設定を変えた場合は、その変更も別に記録します。

Device Modeは実機の動作を近似する確認です。実スマホで動かした結果ではありません。ブラウザー上のタッチに似た操作と実機操作も区別し、実際の端末・OS・ブラウザーで残す確認を決めます。

必要な説明と横はみ出しを、別の結果として読む

説明が見えるか、ページが横へはみ出すか、相談先を選べるかは、一つずつ確かめます。ある幅で説明が見えたことを、別の幅の問題が直った証拠にはしません。

架空の390 CSS pxの観測では、案内の見出し・対象設備・地域の条件・相談リンクは見えていますが、準備写真の説明は見えていません。ページ全体の横はみ出しと、相談先を選んだ結果は未確認です。「説明が原稿から削除された」「CSSが原因だ」とまでは、この記録から言えません。

768 CSS pxの別観測では準備写真の説明も見え、ページの横はみ出しが記録されています。こちらも操作・原因・実機・修正後・公開先は未確認です。「切替境界近く」という架空の設定で、実際の境目が768と測定された記録ではありません。

図で考える問い：同じ原稿の説明を追ったとき、どの幅で何が見え、何がはみ出していますか。見えている相談リンクは、実際に選べたと確認できていますか。

原寸画像を開く

図の二つは別幅の観測です。片方を直してもう片方になったという順番や、成功の矢印では結びません。枠が外へ出る模式表現は、ページの横はみ出しを説明するためのものです。実サイトの原因となった部品を特定した画面ではありません。

次に制作担当へ確かめたいことは、「390の条件で準備写真の説明をどこから読めるか」と「768の条件でページの横はみ出しを再現できるか」です。二つを別の問いにして、同じ原稿・ブラウザーの条件と一緒に伝えます。

同じ操作を試し、期待と実際を制作担当へ渡す

幅ごとに同じ順番で読み、同じ入口を選びます。困った結果は、対象URL・原稿版・幅・ブラウザー・操作手順・期待した結果・実際の結果を一組にすると、制作担当が再現しやすくなります。

例の用事なら、見出しから対象と地域の条件を読み、準備写真の説明を探し、相談先のリンクを選ぶ順番です。メニューが折りたたまれる幅なら、開く操作と行き先の選択も分けて確認します。リンクが表示された記録、リンクを選べた記録、目的の画面に到達した記録を混ぜないでください。入力や実送信の確認が必要な場合は、組織で合意した別の手順と権限の範囲で扱います。

横にはみ出した場合も、「スマホ表示が変です」だけでなく、どの幅で、ページ全体か部品の枠内か、どの説明を読むために横移動が必要だったかを残します。文字や画像、表、メニューなど、疑わしい所の画面と、その前の操作を組にします。見た目の切れ方は観測、固定幅や余白などの理由は調べる仮説です。

制作担当への伝え方の例：「同じ『設備点検の案内』第1版を、390 CSS pxの条件で開き、対象・地域を読んで準備写真の説明を探しました。この記録では準備説明が見えていません。読める場所と再現条件を確認したいです。別の768 CSS px記録にはページの横はみ出しがあります。二つを修正前後にせず、それぞれ再現して確認してください。相談リンクを選んだ結果と実機結果は未確認です。」

これは架空記録の依頼文例です。実際に渡すときは、対象URL、ブラウザーの版、画面の高さや拡大率、画面と操作の記録を自分の確認条件で補います。未確認の欄を推測で埋めず、何を次に確かめるかを明記してください。

表の中だけ横移動が必要なときは、表の列と読み方を整える説明へ分けて考えられます。ここでの主題は表の作り直しではなく、どの幅と操作で何が起きたかを再現できる形にすることです。

修正後・実機・公開先は、同じ条件で別に確かめる

修正案が戻ったら、同じ原稿と用事で、問題が出た条件と切替境界の両側をもう一度確認します。その結果を実機と公開先の確認へつなげ、最初の図やエミュレーションだけで完了とはしません。

修正前に記録したURL・版・幅・ブラウザー・操作順を残し、変わった原稿や実装の版も記録します。準備写真の説明を読めるようになったかだけでなく、相談先やほかの必要条件が追えるかも確認してください。問題の幅だけ直って、別の切替条件で困る場合は、その条件を追加して制作担当へ戻します。

W3CのReflow解説は、縦に読むコンテンツを320 CSS px相当の幅で、情報や機能を失わず、二方向のスクロールを要求しないことを扱います。意味や使用に二次元の配置が必要な部分には例外があります。一枚の画像や、横はみ出しがあるという記録だけで、すべてのWCAG適合・不適合を決めるものではありません。

実機の確認では、合意した端末・OS・ブラウザーで同じ用事と操作を試します。公開した後は、公開URLに同じ版が出ているか、必要説明と行き先を追えるかを別に確認します。実機を用意できなかった条件、操作していない行き先、未確認の公開結果は、そのまま残してください。

スマホの見づらさをどう直すか、部分修正か作り直しかを相談する場合は、スマホ対応の直し方と制作会社への頼み方で範囲を整理できます。サイト全体の完成条件や受付までの依頼範囲は、Webサイトの要件定義へ分けます。本稿は、その中の一ページを幅と操作の条件ごとに確かめる方法です。

まとめ：同じページの切替前後を、同じ用事で確かめる

レスポンシブ表示を確かめるときは、同じページと原稿、ブラウザー、読者の用事をそろえます。狭幅・広幅に加えて、配置が切り替わる境界の前後で、必要説明・横はみ出し・操作を一つずつ確認します。

制作担当へは、URL・版・幅・ブラウザー・操作・期待・実際を組にして渡します。原因を決めつけず、修正後に同条件で確かめ、実機と公開先の結果を別に残してください。390と768の架空記録は全端末を保証する数値でも、修正後の成功例でもありません。

制作会社に渡す再現条件や、残す実機・公開先確認を整理したい場合は、対象ページと困っている操作、分かっている条件をDREEXYへお知らせください。支援範囲・費用・条件は個別に確認します。表示確認と制作担当への依頼を相談する