PCで整って見える商品紹介ページでも、スマートフォンでは文字が折れ、画像が小さくなり、操作が難しくなることがあります。
単に画面全体を縮小するのではなく、読む順番と情報の関係を保つ必要があります。
このレッスンでは、画面幅、文字の拡大、キーボード操作を変えて見本を確認します。
すべての端末での品質を一度に保証することはできません。
試した条件と未確認の条件を分け、見つけた不具合を具体的に修正する方法を学びます。
この記事で学ぶこと
- 画面幅に合わせて読む順番を保つ。
- 拡大表示とキーボード操作を確認する。
- 画像・文字・操作の不具合を直す。
幅が変わっても読む順番を保つ
まずPC、タブレット程度の幅、スマートフォンの幅を順に見ます。
今回の検査では1280px、768px、390px、320pxを使います。
これは確認する条件の例で、全端末を代表する保証ではありません。
横に並んでいた画像と説明が縦に変わるとき、見出し、画像、注記の関係が保たれているかを確認してください。
小さくなるほど重要な説明が離れていないかがポイントです。
三条件は狭い画面では一列に並びます。
番号と名前、説明が一組で読めれば、PCと同じ横並びである必要はありません。
ページの順番を見た目の都合だけで入れ替えると、画像の注記が次の章へ流れることがあります。
HTMLの順番と画面上の順番が大きく違わないようにし、キーボードで移動したときにも自然にたどれる構造を目指します。
最も狭い幅だけでなく、横並びから縦並びへ切り替わる前後も見ます。
境界の少し手前で文字が窮屈になる場合は、切り替える幅を調整します。
「スマートフォン対応」と書かれているだけで判断せず、実際の長い見出しや条件文で検査します。
今回の原稿が収まっても、自社の商品名が長い場合は再確認が必要です。
横溢れと文字の見切れを探す
ページを右へ動かさないと読めない箇所がないかを確認します。
原因は固定幅の画像、長いURL、横並びの操作欄、改行できない文字列などです。
画面幅より大きい要素を隠して見えなくするだけでは、必要な情報が失われる場合があります。
どの要素がはみ出したかを特定し、幅、折り返し、並び方を修正してください。
見出しは、意味のまとまりが一文字だけ残っていないかも見ます。
本文は小さくして詰め込まず、読みやすい行幅と行間を保ちます。
無料条件や架空例の注記も本文と同様に確認します。
重要な文が画像の一部になっている場合は、画像を拡大しないと読めない状態を避け、近くのHTMLの文字で意味を補ってください。
ブラウザーの文字拡大やズームも試します。
大きくしたときにボタンが重なる、説明が枠から消える、固定の操作欄が本文を覆う場合は修正が必要です。
今回の見本では読者向けの固定ボタンを設けず、自然なスクロールで読める形を選びます。
固定する機能が必要な案件では、画面の高さと入力時のキーボードも含めて確認してください。
キーボードで主要な行動をたどる
マウスや指だけでなく、Tabキーでリンクやボタンへ移動し、Enterキーで操作してみます。
いま選ばれている場所が枠などで見えること、順番が自然であること、PDFへ進めることを確認します。
見た目だけを理由に選択状態の枠を消すと、操作位置が分からなくなります。
独自の形を作る場合も、標準のリンクやボタンの動きを保ってください。
ページ内には、本文へ移動するリンクも用意します。
繰り返しの上部要素を毎回たどらずに内容へ進めるためです。
質問欄は開閉できる標準の仕組みを使い、開いた状態と閉じた状態を確認します。
クリックできる文字をただの装飾として作らず、意味のある要素を使うことが、操作と読み上げの両方を支える土台になります。
キーボードで動いたことだけで、すべての利用者に使いやすいと断定はできません。
画面読み上げ、別のブラウザー、実機など未確認の条件は記録します。
画像の代替説明も、ファイル名ではなく内容を短く書きます。
今回なら「教材用の架空10件を分類した資料の見本」のように、実績と誤解しない説明へそろえてください。
色と画像に依存しすぎない
リンクは色だけでなく、下線や枠で操作可能だと分かるようにします。
選択状態や注意も、赤や緑の違いだけに頼らず文字で意味を添えます。
本文と背景の明暗差が小さい場合、明るい環境や小さな画面で読みづらくなることがあります。
見た目の柔らかさを保つために文字を薄くするより、背景や余白で調整する方法を検討してください。
画像が読み込めない場合も、資料の約束、三条件、受取リンクが分かるかを見ます。
今回のプレビューは内容確認の補助なので、本文でも要点を説明します。
画像の高さと幅を先に指定し、読み込み後にリンクが急に動かないようにします。
大きな画像を遅れて表示する場合は、読者が押そうとした場所を動かしてしまわないかも確認が必要です。
動きを追加した場合は、端末の動きを減らす設定でも意味が通るようにします。
今回は大きなアニメーションを使わず、操作時の状態変化に留めます。
演出がなくても内容と行動が伝わるかを先に確認すると、不要な複雑さを減らせます。
見栄えのために機能を追加する前に、読者の判断や操作をどのように助けるかを説明してください。
不具合を再現条件付きで直す
検査記録には、画面幅、ブラウザー、操作、期待した状態、実際の状態、修正後の結果を書きます。
「スマホで崩れる」だけでは、AIも担当者も同じ問題を再現できません。
「320pxで上部の保存ボタンが右へはみ出す」のように場所と条件を指定します。
公開用には操作欄がないため、編集用と公開用のどちらの問題かも分けてください。
修正したら、同じ条件で問題が消えたことを確認し、隣の幅でも大きな崩れがないかを見ます。
見出しの大きさを変えた場合は、原稿の意味や注記の読みやすさが保たれたかも確認します。
すべての検査を毎回最初から繰り返す必要はありませんが、変更が影響する範囲は再確認します。
小さな修正で別の重要な情報を隠していないかを見るためです。
最後に試した条件と残る未確認をまとめます。
PCのブラウザーで幅を変える検査と、実際のスマートフォンで指を使う検査は同じではありません。
実機で確かめていないなら、その状態を正確に残します。
未確認を埋めるために機械検査の合格を広く言い換えず、どこまで確認したページかを次の担当者が判断できる記録にしてください。
実践課題
実践課題：四つの幅とキーボードで検査する
完成見本か自分で生成した商品紹介ページを用意し、1280px、768px、390px、320pxで表示します。
横溢れ、改行、画像と注記、資料リンクを確認し、TabとEnterで受取まで進みます。
文字を拡大した状態も試してください。
実機が使える場合は指での操作も追加し、使えない場合は未確認と書きます。
検査結果は画面の見た目だけでなく、操作した事実を残します。
- 320pxからPC幅まで表示する。
- TabとEnterでリンクを操作する。
- 文字拡大と横溢れを検査する。
記録例は「390px、本文と画像は一列、資料リンクへTabで到達、EnterでPDFを確認」です。
失敗例は、はみ出す条件文を非表示にして見た目だけ直すことです。
折り返しや並びを調整し、条件を残します。
自己確認では、情報が欠けていないか、操作位置が見えるか、画面幅が変わっても同じ資料へ進めるかを見ます。
修正後は該当幅とその前後を再確認し、次の工程へ進めます。
自己確認
- 画面幅に合わせて読む順番を保つ。
- 拡大表示とキーボード操作を確認する。
- 画像・文字・操作の不具合を直す。
まとめ
スマートフォン対応は、PCの縮小ではなく、情報の順番と関係を保つ設計です。
幅、文字拡大、画像の状態、キーボード操作を変えて確認し、不具合は再現条件と一緒に修正します。
試した環境と未確認の実機を分けて記録しましょう。
表示が整ったら、次は資料を受け取る動作と、計測できること・できないことを区別して確認します。
- 画面幅に合わせて読む順番を保つ。
- 拡大表示とキーボード操作を確認する。
- 画像・文字・操作の不具合を直す。
