タブレットの中間幅だけ崩れるサイトを調べる｜幅・向き・共通部品の記録方法

パソコンとスマートフォンでは問題がないのに、タブレットで見るとメニューとロゴが重なる。横向きでは商品カードが細くなり、ボタンの文字がはみ出す。こうした中間幅の不具合は、両端の画面だけを確認していると見逃しやすいものです。

制作会社へ「タブレット対応をお願いします」と伝える前に、崩れる幅、向き、操作中の状態、同じ部品を使うページをそろえてみてください。原因を自分で決めなくても、崩れない条件と比べた記録があると、調べる範囲と修正後の確認方法を具体的に相談できます。

この記事では、自社サイトの表示改善を依頼するWeb担当者に向けて、中間幅の調査記録の作り方を説明します。掲載する表や数値は記入方法を示す設計例です。特定の幅をすべてのサイトの切替基準にしたり、実機を確認せずタブレット対応済みと判断したりするものではありません。

タブレットという名前から、実際の表示条件へ進む

最初に残すのは、不具合が起きたページのURLと、見ていた端末・ブラウザです。タブレットの機種名だけで終えず、縦向きか横向きか、画面いっぱいにブラウザを開いていたか、別のアプリと画面を分割していたかを添えます。同じ端末でも、ページを表示できる領域が違えば見え方は変わります。

サイトの表示に使える領域は、ビューポートと呼ばれます。本稿の「幅」は、主にこの表示領域の横幅を指します。端末の仕様に載る画素数や、保存した画像ファイルの横幅と同じものだと思い込まないようにしてください。計測方法が分からない場合は、分かる情報と分からない情報を分け、制作会社に確認を頼みます。

文字を大きくする設定やページの拡大率も、変更していれば残します。「普段の設定」とだけ書くと、別の人の環境で再現できません。最初は問題が起きた状態を記録し、その後に標準の表示へ戻して比較します。先に設定を戻してしまうと、報告された現象が消え、手掛かりを失う場合があります。

確認条件を増やすときは一つずつ変えます。向きとブラウザを同時に変えて直ったとしても、どちらが関係するか分かりません。まず同じ端末・同じブラウザで向きを変える、その後に別の環境で比べる、と順番を決めます。更新日や確認時刻も記録し、古い状態と修正済みの状態が混ざらないようにします。

崩れる幅と崩れない幅を一組で残す

中間幅の確認は、代表的な寸法で一枚ずつ画面を撮るだけでは足りないことがあります。広い状態から少しずつ狭めて、どのあたりでメニューが折り返すか、カードの文章が詰まるかを見ます。症状が現れたら、その前後の幅を比べて記録します。

MDNの解説では、特定の機種の寸法へ一律に合わせるより、内容の表示が崩れる箇所でデザインの切替を考える方法が示されています。この切替点はブレークポイントと呼ばれます。発注側が数値を決め打ちするのではなく、何が収まらなくなるかを材料に制作会社と相談する考え方です。MDNの解説

たとえば「幅を狭めると相談ボタンがロゴへ重なる」と記録するなら、重なる状態だけでなく、直前まで重ならなかった状態も残します。二つの画像でページ位置、メニューの開閉、表示する文面が同じなら、違いを読み取りやすくなります。画面全体と該当箇所の拡大を一組にして、どこを見ればよいかも示します。

ブラウザの開発者向け機能では、任意の幅と高さを指定して模擬表示できます。Chromeの公式資料にも、この設定方法が案内されています。一方、同資料は模擬表示が実際のモバイル端末そのものではないことを説明しています。社内で幅の候補を探す作業と、実機で操作を確かめる作業は区別してください。Chromeの公式資料

幅を縮める途中で見つけた症状は、その幅でページを開き直した場合にも起きるかを確認します。最初から狭い状態で開いたときと、広い画面から変更したときで違いがあれば、その違いも報告材料です。「中間幅では必ず起きる」とまとめず、再現した操作を残します。

メニューとカード列を操作しながら確かめる

ページを開いた直後に収まっていても、メニューを開くと画面外へはみ出す場合があります。中間幅では、横並びのメニューが残るのか、開閉式のメニューへ切り替わるのかを確認します。見た目だけでなく、開く、項目を選ぶ、閉じる、本文へ戻るまでを試してください。

メニューを開いたまま向きを変える、広い表示に戻すなど、状態が変わる場面も対象です。背景だけが暗いまま残る、閉じるボタンが見えなくなる、メニューは消えたのに本文を動かせない、といった症状は静止画一枚では伝わりにくいため、短い手順を添えます。操作前後の二枚でも、状態の変化を説明できます。

商品や事例を並べるカードでは、何列になるかと、一枚の中身を分けて見ます。列数が変わらず窮屈なのか、列は減ったが画像やボタンに幅の固定が残るのかでは、調べる場所が異なる可能性があります。ただし、見た目から原因を確定せず、観察した事実として記録してください。

カードの検査には、見出しが長いもの、説明が短いもの、画像の縦横比が違うものなど、掲載中の内容から代表例を選びます。短い仮原稿では収まっていても、実際の商品名でボタンの位置が変わることがあります。都合のよい一枚だけを見て、カード全体が問題ないと判断しないようにします。

縦並びになったこと自体は不具合とは限りません。読み順が保たれ、必要な情報を読めて、次の操作へ進めるなら、幅に合った切替かもしれません。「PCと同じ三列へ戻す」より、「商品名が欠けず、詳細ボタンを選べる」といった期待する状態を先に書くと、修正案を比較しやすくなります。

再現表で状態と手順を固定する

調査表には、幅と向きだけでなく、操作した順番を入れます。横向きで起きた問題でも、最初から横向きで開いたのか、縦向きでメニューを開いてから回転したのかで条件が違います。表の各行で、開始状態から結果までを追えるようにしてください。

次の数値と症状は、記入方法を説明する架空の例です。実際の依頼では自社サイトで確認した値に置き換え、未確認の欄を埋めたことにしないで残します。端末名・ブラウザ・日時・URLは、表の上に共通情報として記載しても構いません。

確認する幅・向き	対象と開始状態	再現する手順	結果と依頼する確認
幅1,100・横長の模擬画面	ヘッダー、メニューを閉じた状態	ページを開き直す	重なりなし。比較元として保存
幅920・横長の模擬画面	同じヘッダー、同じ文面	広い幅から徐々に狭める	ロゴと項目が重なる範囲を調べる
幅780・縦長の模擬画面	開閉式メニュー	開く、項目を選ぶ、閉じる	閉じる操作と本文への復帰を確認
実機を縦から横へ回転	メニューを開いた状態	開いたまま向きを変える	表示領域と残る部品を記録
同じ中間幅の一覧ページ	長い見出しを含むカード列	詳細ボタンまで見る・選ぶ	列数、文字欠け、選択できる範囲を確認

幅は数字だけにせず、何を使って測ったかを併記します。模擬画面の入力値なのか、実機で制作会社が確認した表示領域なのかが分かれば、条件の取り違えを避けられます。画面保存のファイル名にも行番号を付け、別のページの画像と混ざらないようにします。

また、「重なる」「押せない」「横に動く」は別の現象として書きます。見た目は重なっていても操作はできる場合と、透明な部品が覆って操作できない場合を同じ一件へ押し込むと、修正後に何を確かめるかが曖昧になります。読めない箇所と完了できない操作を、それぞれ具体的に記録します。

一ページの症状から共通部品の範囲を調べる

ヘッダーやカードのように、複数ページで同じ作りを使う部分を共通部品と呼びます。一つのページで症状を見つけたら、同じ部品を使う代表ページを探します。全部のURLを手当たり次第に見る前に、トップ、サービス詳細、一覧、記事などのページの型を制作会社とそろえると、確認対象を決めやすくなります。

たとえばヘッダーが重なる場合、短いメニュー名のページだけでなく、追加のボタンや告知が出るページも比べます。カードなら、同じ見た目でも別の仕組みで作られている場合があります。「似ているから一度直せば全部直る」とはせず、どの部品を共有しているかを制作会社に確認してもらいます。

報告では「全ページで発生」と書く代わりに、「この三つのURLで同じ症状を確認、残りは未確認」と範囲を示します。確認済みと推測を分けると、追加調査が必要な場所が見えます。共通の修正で対応する範囲と、ページ固有の調整を行う範囲も、見積もりや作業計画で分けて相談できます。

外部から埋め込んだ予約画面や地図などがある場合は、サイト側の枠と、その中の表示を区別します。自社側で直せる箇所か、提供元への確認が必要かを先に整理してください。中間幅で崩れるからといって、ページ全体の幅設定だけを変更すると決めつけないことが大切です。

修正後は境界前後と実機を分けて確認する

修正後は、報告した幅で収まったことに加え、その少し広い側と狭い側を確認します。切替点を動かした結果、別の幅でメニューが二つ出たり、必要なボタンが両方消えたりしていないかを見ます。最初に保存した比較画像と同じ位置・状態へ戻して試すと、修正の前後を比べられます。

共通部品を変更した場合は、代表ページにも戻ります。一覧でカードが直っても、トップの同じ部品では画像が切れている、といった別の影響がないかを確かめます。確認するページと条件を作業前に決めておくと、担当者ごとに「確認済み」の意味が変わることを防ぎやすくなります。

模擬表示の結果と実機の結果は、記録の欄を分けてください。社内に対象端末がなければ、未確認と書き、制作会社へ実機確認を含めて依頼するかを決めます。幅の調整ができたことだけで、タッチ操作やブラウザ固有の挙動まで確認できたことにはしません。

最後は、見た目の比較だけで終えず、利用者の行動を一つ通します。メニューからサービスを選び、カードで内容を比較し、問い合わせの入口まで進むなど、自社で重視する流れを試してください。ページ全体の公開前確認については、発注側の受入テスト手順で対象を広げて整理できます。

改修依頼は原因の断定より確認材料を渡す

依頼時には、対象URL、発生条件、崩れない条件、再現手順、画像、期待する状態をまとめます。原因が分からなくても問題ありません。「幅の切替が原因」と断定するより、「この範囲でロゴと項目が重なり、この操作ができない」と伝えた方が、制作側は調査結果を根拠に修正方法を選べます。

調査と修正を同時に頼む場合も、調査で分かることと、確認後に決める改修を分けます。共通部品の調整で済むのか、メニュー構成やカードの情報量まで変えるのかは、調査後に判断する場合があります。修正案ごとに、読み順や操作がどう変わるかを見せてもらうと、社内でも選びやすくなります。

スマートフォン全般の見にくさも併せて相談する場合は、スマホで見にくいサイトの確認手順と対象を分けて整理します。今回の中間幅の表を一般的な症状一覧に埋めず、境界前後の条件が分かる資料として渡してください。

「どのタブレットか」に加えて、「どの幅で、何をしたときに、どの部品がどうなるか」を残すことが、改修範囲を決める出発点です。直ったと判断する条件も同じ表に置き、制作会社との確認を最後までつなげましょう。