スマホの表示崩れは、ページURLと表示条件を揃えてから修正担当へ伝えます。パソコンで見た画面と比べる時も、横スクロール、文字の拡大、画像の切れを一つの「スマホ非対応」にまとめないようにしましょう。再現条件を残す記入票を使い、原因がまだ分からないことも分けて渡します。
この記事は、地域ビジネスのWeb集客を支援するCRAFTが運営しています。「作っただけ」で終わらない、集客に直結するLP・HP制作をマーケティングコンサルとセットで提供しています。
CRAFTのサービス詳細を見る →表示が違う時、まず何を残しますか？ 5つの再現条件です
最初に残すのは、URL、端末とブラウザ、表示設定、困る箇所、操作の順番です。下の票を複製し、実際に確認した範囲だけを書いてください。空欄を異常なしの意味で使わず、調べていなければ「未確認」と書きます。
| 記入欄 | 何を書くか | 未確認の扱い |
|---|---|---|
| 1. ページURL | 困った表示が出たページのURL、確認日 | トップページのURLで代用しない |
| 2. 端末とブラウザ | 端末名、OS、ブラウザ名。分かればバージョンと縦横の向き | 分からない項目は推測しない |
| 3. 表示設定 | 通常表示か文字拡大か、操作した設定名と倍率。把握できる場合は画面幅 | 端末の物理的な横幅とCSSピクセルを混同しない |
| 4. 困る箇所 | 切れる文章、横へ動く範囲、押せないボタンの文言 | ページ全体か表や画像だけかを分ける |
| 5. 再現手順 | 開いた後、何を押し、どこまで移動すると起きるか。担当と次の確認日 | 一度だけの現象は再現未確認と残す |
これは記事が提案する記録票です。実在の店舗で不具合を検証した結果ではなく、この票の記入だけでアクセシビリティ基準への適合や、問い合わせの増加を証明するものでもありません。
通常表示と文字拡大は分けますか？ 別の条件として記録します
まず普段の表示で対象ページを開き、次に文字を拡大した条件を別の行へ書きます。どの設定を変えたかが分かる形にすると、担当者が同じ条件を試しやすくなると考えられます。
- URLを開いて、見出し、本文、画像、メニュー、ボタンの順に読みます。切れる語や重なる要素があれば、その場所を記入します。
- ページを横へ動かした時、本文全体が動くのか、表や地図の中だけが動くのかを記録します。横移動があるという一語で終わらせないようにします。
- 文字拡大を行える環境なら、使った設定名と倍率を控え、同じ箇所を読み直します。操作できない環境では未確認とし、担当へ確認を依頼する項目にします。
- メニューを開いた後やページ内リンクで移動した後も確認します。実際の予約やフォーム送信は別の検証として条件を決め、表示確認のつもりで送信しないようにします。
- 確認画面を残す場合は、氏名、予約内容、管理画面の情報が映らない範囲にします。端末や設定が違う結果は、同じ行を上書きせず追加します。
パソコンでブラウザの幅を変えた確認と、手元のスマホでの確認は、方法の欄を分けて残してください。画面幅を変えた結果だけから、すべての端末やブラウザで同じ表示になるとは結論づけないようにします。
制作方法を選ぶ段階なら、CRAFTの制作サンプルを確認するところから、相談したいページと気になる表示を整理してみてください。
横スクロールは不合格ですか？ 範囲と内容を分けて確認します
横に動くという現象だけで、ページ全体を一律に不合格と決めないでください。W3CのReflowの説明では、縦に読むコンテンツは幅320 CSSピクセル相当で、情報や機能を失わず二方向のスクロールを要しないことを扱っています。一方、利用や意味のために二次元の配置が必要な部分には例外があります。地図、図、データ表などが例に挙げられていますが、表の各セルまで無条件に例外になるわけではありません。
記録票では「料金表の中だけ横に動く」「本文を一行読むために左右へ往復する」のように範囲を書き分けます。引用元の条件はW3CのReflowの説明で確認できます。320という数だけを抜き出して、スマホの機種名や画面解像度と同じ意味では扱わないでください。
ここで決めるのは修正箇所そのものではなく、担当者に確かめてほしい対象です。表の列を削る、画像を小さくする、ページ全体を作り直すといった手段は、必要な情報や操作が残るかを担当者と確かめてから選びましょう。
文字を拡大した時は何を見ますか？ 内容と操作の保持です
文字が大きくなったかだけでなく、途中で切れた文や使えなくなった操作がないかを書きます。W3CのResize Textの説明は、キャプションと画像化された文字を除き、支援技術なしで200%まで文字を拡大しても、内容や機能が失われないことを扱っています。
拡大後にボタンの文言が切れる場合は、画面と設定を記録して担当へ渡してください。文字拡大と画面幅の確認は関連しますが、同じ検査として一つのチェックで済ませず、実施した操作を区別します。条件の詳細はW3CのResize Textの説明を参照してください。
上のW3C資料は達成基準を理解するための解説であり、資料自体が適合を保証するものではありません。この記録票もサイト全体の適合判定を代行しません。確認していないページ、文字拡大の途中段階、他の機能について、合格したように記入しないでください。
修正担当へ何を渡しますか？ 結果と未確認事項をセットにします
記入票を渡す時は、「確認した条件」「困った表示」「まだ分からない条件」をセットにします。原因を断定するより、同じ状態を確かめられる材料を揃える提案です。
依頼文は「このURLを、この端末と表示設定で開くと、本文の右端が切れました。別のブラウザは未確認です。再現するかと修正の対象を確認してください」のように、実際に観測した範囲へ限定します。これは文面の例であり、特定の店舗の事例ではありません。
見出しやリンクの目的も分かりにくい時は、見出しとリンクの点検票を別に使えます。ページ全体の見直しを考える時は、ホームページリニューアルの考え方と照らし、表示の修正と改修の目的を分けてください。
未確認があっても相談できますか？ 確認済みの範囲を添えれば進められます
設定名や原因が分からなくても、確認できたURLと表示を記録して相談できます。分からない項目を想像で埋める必要はありません。
スマホで見えたら、文字拡大の確認は不要ですか？
通常の表示と文字を拡大した状態は分けて確認する提案です。実施した設定と、確認できなかった範囲を票へ残してください。
表示が崩れたら、すぐ全面リニューアルしますか？
この票だけで改修範囲は決まりません。再現する条件と対象箇所を担当へ渡し、部分修正で扱えるかを確かめてから選びましょう。
CRAFTの制作サンプルを確認する前に、気になった一ページの再現条件を記録しておく方法を提案します。