画面サイズ別の表示確認：列、文字、写真のチェック

はみ出しがないページでも、読みにくい場合があります。変更を公開する前に、比率、長い内容、操作を確認します。

2026年10月4日

イラスト · 架空の場面

再現できる六つの確認

代表的なページを選ぶ
トップ、カテゴリ、記事、サービス、フォーム、表を確認します。長い見出し、右から左へ読む言語、複数の写真を含めます。
列を比較する
幅320、390、768、1280、1440、1920 pxで配置、読む順番、余白を確認します。はみ出しを隠して不具合を見えなくしないでください。
文字を拡大する
文字を200 %にし、幅320 CSSピクセルで内容の再配置を確認します。情報と操作を維持し、表には独立したスクロール領域を使えます。
写真を確認する
切り抜き、被写体、寸法、クレジットを確認します。隣の文章に合わせて写真を引き伸ばさず、見える内容を説明し、ストック写真を明示します。
操作を試す
メニュー、絞り込み、FAQ、フォームをキーボードで操作します。実際の問い合わせを送信せず、フォーカス、エラー、入力内容の保持を確認します。
証拠を残す
URL、言語、幅、ブラウザ、不具合、修正後の結果を記録します。十分な利用データがあれば、実験室測定を実利用の測定で補います。

作業方法であり、適合証明ではありません。範囲を調整し、例外を記録してください。

小さい画面では表を横にスクロールしてください。キーボードでは表にフォーカスを移し、矢印キーを使います。

状況	意味すること	有効な確認
文字を200％にすると操作部品が消える。	拡大後に作業を完了できない。	レイアウトを調整してキーボードで再確認する。
パソコンで写真が伸びる、または大きな空白ができる。	比率が周辺の内容との均衡を崩している。	サイズ制限と読み順を確認する。
overflow: hiddenで表が切れる。	データが隠れている。	表専用のキーボード操作可能なスクロール領域と折り返すセルを設ける。
別言語の翻訳見出しが切れる。	一言語の確認だけでは不十分。	長い文言、RTL言語、実際の言語切替を試す。

架空のサービスページは1,440ピクセルでは正常です。320では長い翻訳見出しが切れ、文字200％ではFAQの操作部品を使えません。

写真の大きさを制限し、列が縮まり文字が折り返せるようにします。320、390、768、1,440ピクセルで文字拡大とキーボードを使って作業を繰り返します。残る不具合を記録し、修正後に再確認します。

画面の画像だけで十分ですか？

いいえ。一つの状態を示すだけです。長い内容、キーボード操作、展開、絞り込み、エラー状態も確認します。

すべてに適した文字サイズはありますか？

ありません。読みやすさ、行の長さ、拡大、コントラストを評価します。サイズだけでは利用しやすさやバランスを保証できません。

Core Web Vitalsはどう解釈しますか？

良好な体験の基準は75パーセンタイルでLCP ≤ 2.5 s、INP ≤ 200 ms、CLS ≤ 0.1です。読み込み、応答、安定性を測りますが、表示確認の代わりにはなりません。

すべての端末の画面画像が必要ですか？

主要なページ種類、有用な作業、差異が見られたブラウザーを選びます。少数の画像ですべての端末の動作は証明できないため、確認範囲の限界も記録します。

表示の修正をどう優先しますか？

まず作業の阻害、隠れた情報、読みにくさを直します。次に比率、配置、余白を改善し、他のページの機能も確認します。