ホームページがスマホで見にくいときの確認順｜文字・表・ボタン
「スマートフォンでは文字やボタンが見づらい。」
「PCの画面だけでは修正箇所を説明できない。」
ホームページがスマホで見にくいときは、対象のページと端末条件を記録し、文字、画像、表、メニュー、相談ボタンを順に確認します。画面からはみ出す原因と、情報が足りない原因を分けてください。拡大、縦スクロール、横に動く表、リンク先まで実際に操作して確かめます。修正依頼には問題の場所、再現条件、期待する状態を一組にします。
問題が起きるページと条件を固定する
見づらいという感想を、再現できる記録へ変えます。
URLと画面の状態を残す
問題があるページのURL、使った端末とブラウザ、画面の向き、表示の拡大状態を記録します。画像だけでは、どのページのどの操作後に起きたか分からない場合があります。最初に開いた画面、メニューを開いた画面、ページの途中など、状態を区別してください。PC側で画面幅を狭くした結果と実際のスマートフォンの確認は、同じ証拠として扱いません。確認した環境と、まだ確認していない環境を分けて記録します。
表示と内容不足を分ける
文字が切れる、重なる、横へはみ出す問題と、説明がないため判断できない問題を区別します。小さな文字を大きくするだけでは、サービス条件の不足は直りません。画像内の文字だけが読みにくい場合は、元画像と表示サイズを確認します。すべての画像を縮小する一律の変更を避け、主題を説明する部分が残るかを見てください。問題が複数あるときは、操作できない箇所と情報の読みにくさを別行にして修正へ渡します。
文字・画像・表を読む操作で確認する
画面へ収まることと、内容を理解できることを一緒に見ます。
文字を拡大して重なりを確認する
本文、見出し、注記、フォームの説明を実際に読み、文字を大きくしたときの切れや重なりを確認します。W3Cの予備確認資料は、拡大時にも文字や操作部が失われないかを点検する考え方を示しています。この記事の確認を通ったことだけで、サイト全体の適合を保証しません。本文が画面全体の横スクロールを必要とする場合は、どの要素が幅を広げているかを修正担当へ渡します。好みの大きさだけで原因を断定せず、再現した状態を記録します。
画像と表の必要な情報へ届くか見る
画像が小さくなると、文字や細部が読めなくなる場合があります。重要な説明は本文にもあるか、図のラベルが読めるかを見ます。表が横へ動く構成なら、動かせる案内と右端の列へ到達することを確認してください。左端の見た目だけで表全体を確認したと扱いません。注記と表の例、見出しの関係も読みます。画面全体が横へはみ出す問題と、表の中だけを意図して横に動かす設計を分け、情報を削らず直す方法を相談します。
メニューと相談ボタンを実際に操作する
表示された部品が使えるかを入口からたどります。
開閉と縦スクロールを確かめる
メニューを開き、項目を選び、閉じた後に本文を縦へ動かせるか確認します。画面を覆う部品が残り、記事を読めなくなる状態がないかを見てください。スクロールを阻む要素がある場合は、開いた操作と閉じた操作、止まる場所を記録します。ページの最上部だけで確認を終えず、目次から本文、表、末尾へ進みます。修正担当へは対象の操作を示し、CSSの原因やプラグインの問題を、調べる前に決めつけないようにします。
ボタンの文言とリンク先を照合する
相談や予約のボタンが画面に収まり、押した後の案内先が目的と一致するかを確認します。固定表示の部品が本文やボタンを隠していないかも見てください。電話、メール、フォームなどリンクの種類に応じて、現在の連絡方法と照合します。実際の送信や予約は表示確認と別で、担当者と試験条件を決めてから行います。ボタンが見えたことだけで問い合わせが届く、成果が増えると判断しません。リンクの到達と業務上の受信を分けます。
表が画面に収まらない場合は、左右に動かして確認できます。
| 対象 | 実際に行う確認 | 修正へ渡す内容 |
|---|---|---|
| 文字 | 拡大して切れ・重なりを読む | URL・条件・問題箇所 |
| 画像 | ラベルと必要な細部を見る | 元画像と期待する説明 |
| 表 | 右端の列まで動かす | 読めない列と操作 |
| メニュー | 開閉後に本文を動かす | 再現操作と止まる状態 |
| ボタン | 文言とリンク先をたどる | 目的と到達先の相違 |
架空の確認例です。見積り表の左側は表示されていましたが、右端の追加条件へ横に動けませんでした。表の内容を削らず、表内を動かせる構成と案内へ直す依頼を出し、同じ画面で右端を読めるか再確認します。実際のサイト改修や成果ではありません。
修正依頼と再確認を一組にする
見つけた問題を、完了を確認できる形で渡します。
現在の状態と期待する状態を書く
URL、操作、現状、期待する結果、画面の記録を一行にします。例えば表の右端へ動けない問題なら、右端の条件欄を読めるようにするという完成条件を示します。全部をいい感じにするという依頼だけでは、必要な情報を残すか分かりません。修正の優先は、操作不能、重要条件の欠落、重なりなどの影響へ合わせます。本文を短くする場合も、料金や期限、対象外の条件を削って解決したことにしないようにします。
同じ操作と隣接箇所を再確認する
修正後は、問題が起きた端末条件と操作で再確認します。メニューを直したなら本文のスクロール、表を直したなら前後の文章とボタンも見ます。変更していない全ページを何度も確認するのではなく、変更の影響範囲と未解決の問題へ絞って記録してください。Libera Worksへ相談する場合は、現在のサイト、問題のURL、端末条件、再現手順、期待する状態を用意します。表示の修正と構成の整理を分け、料金と対応範囲を着手前に確認します。
目的と現在のサイトを整理して制作を相談する
Libera Worksでは事業、対象者、提供内容、現在のサイト、素材、問い合わせ方法を確認し、構成、文章、デザイン、実装、公開と更新の必要な範囲を整理します。既存環境と権限、役割分担、料金と対応条件は着手前に確認してください。
【Q&A】サイト・LP制作を依頼する前の疑問
Q.画面に収まれば確認は終わりですか？
文字と画像の説明が読めるか、表の右端へ到達するか、メニューとリンクを使えるかも確認します。
Q.PCの幅を狭くすればスマホ確認になりますか？
確認した画面幅の証拠にはなりますが、実際の端末と同じとは限りません。確認環境と未確認の条件を区別します。
まとめ：問題が起きるページと条件を固定する
URLと端末、操作を固定し、文字、画像、表、メニュー、ボタンを実際に読み使って確認します。表示の問題と内容不足を分けてください。現状、再現条件、期待する状態を修正へ渡し、変更後も同じ操作と影響範囲で再確認します。
参考情報
確認表と例は編集上の提案です。特定端末の動作、問い合わせ増加、サイト全体のアクセシビリティ適合を保証していません。
Libera Works「サイト・LP制作」（構成・制作・公開・更新と既存環境の条件。2026年10月2日確認）
W3C WAI「Easy Checks」（文字拡大時の切れ・重なり・操作部を点検する予備確認の参考。全項目の適合判定ではありません。2026年10月2日確認）