パソコンで見ると整っているホームページが、スマートフォンでは文字が小さかったり、写真の大切な部分が切れていたり、ボタンが押しにくかったりすることがあります。
教室やサロンの案内を探す方がスマートフォンで見ることも多い今、公開後の確認は大切な作業です。
この記事では、どのページから、どの順番で確かめればよいかを、実際に画面を触る流れに沿って整理します。専門的な道具は使わず、手元のスマートフォン一台から始められる内容です。
スマートフォン確認は重要なページから始める
ホームページをパソコンで整えたあと、スマートフォンでも同じように見えるか気になる方は多いでしょう。
画面が小さくなると文章や写真の並び方が変わり、メニューが折りたたまれたり、ボタンの位置が動いたりします。
確認する範囲は広く感じられますが、すべてのページを一度に調べる必要はありません。初めて訪れた方が使う可能性の高いページから始めるのがおすすめです。
- トップページ
- サービスや講座の案内
- 料金や日程の案内
- アクセス案内
- 予約や問い合わせのページ
ページを選んだら、一つの目的を決めてたどってみてください。
たとえば、トップページから講座内容を読み、日程を確認し、問い合わせへ進む流れです。一枚ずつ眺めるより、利用者が進む順番で見る方が、途中で迷う場所を見つけやすくなります。
多くのホームページには、画面の大きさに合わせてレイアウトを変える「レスポンシブWebデザイン」という仕組みが入っています。Googleのweb.devが挙げる例は、スマートフォンでは一列、広い画面では複数列という並べ替えです。
ただ、この仕組みがあっても、内容がすべて読みやすく収まるとは限りません。長い見出しや横長の写真、後から追加したボタンなど、ページごとの中身は公開画面で確かめる必要があります。
最初に画面全体の収まりを見る
文字を細かく読む前に、まずページを上から下までゆっくり動かして、左右にずれる場所や画面からはみ出す要素がないかを見ます。
細かな点に入る前に全体をつかんでおくと、あとの確認が楽です。
横へ動かさないと読めない場所を見る
文章を読むたびに左右へ動かす必要があると、行の続きを追いにくくなります。次の点を確かめてみてください。
- 長い見出しやURLが画面の外へ出ていないか
- 写真や動画が画面幅を越えていないか
- 表だけでなくページ全体が横へ動いていないか
- 予約部品や地図が周囲の文章を押し出していないか
地図や表は、その部分だけ横に動かす操作が必要な場合があります。その部品だけの動きなのか、ページ全体がずれているのかを分けて記録しておくのがおすすめです。
重なりと固定表示を見る
画面の上部や下部に固定された案内が、本文やボタンを隠していないかも確認します。閉じるボタンがある場合は、実際に指で押して、元の内容が読めるようになるかを見てください。
メニューを開いたときに文字が重なっていないか、閉じたあとに画面が元へ戻るかも大切なところです。
拡大できるか確かめる
小さな文字を拡大して読みたい方もいらっしゃいます。指で画面を広げたとき、文字が読めるか、ボタンを操作できるかを試してみてください。
Web技術の解説サイトMDNは、利用者による拡大を無効にすると、見えにくさのある方が内容を読みにくくなると注意しています。
拡大したあとに内容が重なったり、重要な案内が画面から消えたりしないかも見ておきましょう。
文字と写真を読む目線で確かめる
画面全体の収まりを見たあとは、利用者になったつもりで文章を読み進めます。編集した本人は内容を知っているため、多少読みにくくても意味を補ってしまいがちです。
初めて読むつもりで、次の点を確かめます。
- 見出しと本文の区別が分かるか
- 一行が極端に短くなっていないか
- 文字が背景に埋もれていないか
- 行間が詰まりすぎていないか
- ページの途中で読む場所を見失わないか
文字の大きさだけで判断せず、文章のまとまりとして読めるかがポイントです。背景写真の上に文字を置いている場合は、写真の明るい部分と文字が重なる場所も確認してください。
写真の大切な部分が残っているか
パソコンでは横長に見える写真が、スマートフォンでは左右を切って表示されることがあります。人物の顔、商品の中心、入口の目印など、伝えたい部分が残っているかどうかが確認の中心です。
写真の選び方や切り抜かれ方については、「小さな事業のホームページ写真はどう選ぶ？用途別の考え方」でも扱っています。この記事で扱うのは、写真だけでなくページ全体の表示と操作です。
画像の中に文字を入れている場合は、拡大しなくても読めるかを見てください。
料金や日程のような重要な情報は、画像だけに載せるのではなく、通常の文章でも確認できる状態が望ましいです。
読み込み中の変化も見る
ページを開いた直後に、文章やボタンが大きく動かないかも見ておきます。写真の表示に時間がかかる場合、その間に別のボタンを押してしまわないか、という観点です。
読み込みの速さは通信環境によって変わります。一度遅かっただけで原因を決めず、確認した時刻とページ、使った環境を記録しておいてください。
メニューとボタンを指で操作する
見た目が整っていても、押したい場所を指で選びにくいことがあります。パソコンのマウスではなく、スマートフォンで実際に触れて確かめるのが確実です。
運営者が確認するときは、数値を測るより先に、次の操作を試してみてください。
- メニューを一回で開けるか
- メニュー項目を間違えずに選べるか
- 前後のボタンを誤って押さないか
- 電話番号や地図のリンクを選べるか
- 閉じるボタンが見つかるか
- ページを下へ動かしても固定ボタンが邪魔にならないか
文章中の小さな文字リンクと、予約へ進む大切なボタンでは役割が違います。重要な操作ほど、位置と押しやすさを丁寧に見ておきたいところです。
問い合わせまでの流れを通して見る
ホームページの役割は、情報を表示することだけではありません。地図を開く、電話をかける、予約方法を読む、問い合わせ内容を入力するなど、次の行動へつながるページもあります。
そこで、一つの流れを最初から最後まで実際に操作してみましょう。
最初の画面で、何の事業か、次にどこへ進めばよいかが分かるかを見ます。
案内ページへ迷わず移動でき、内容を最後まで読み進められるかどうかがここでの確認点です。
表や一覧が画面に収まり、数字を読み取れるかを見てください。
地図や予約の案内が表示され、必要なリンクを選べるかを確かめます。
入力欄が画面に収まり、項目名を読めて、次の操作へ進めるかがポイントです。
ここで意識したいのは、「画面が開くこと」と「目的を果たせること」を分けて見ることです。
問い合わせフォームの送信テストまでは別の話になりますが、入力欄の見え方や次の操作へ進めるかどうかは、この段階で確認できます。
入力中の画面を見る
入力欄を押すと、画面の下半分にキーボードが表示されます。そのときに、入力中の欄や次へ進むボタンが見えているかを確かめてください。
選択肢を開いたあとに閉じられるか、入力エラーの案内が画面の外に出ていないかも見ておきます。
外部サービスへ移動した後を見る
地図や予約サービスを開くと、別のアプリやサイトへ移動することがあります。移動先で自分の事業名や対象サービスを見分けられるか、戻る操作で元のページへ戻れるかを確認します。
外部サービスの画面は提供元の変更で見え方が変わることもあるため、表示が以前と違うというだけで、ホームページ側の問題と決めつけないようにしましょう。
向きと端末を変えて違いを記録する
一台のスマートフォンで問題が見つからなくても、すべての利用者に同じ表示になるとは限りません。画面の大きさ、基本ソフト、ブラウザ、文字サイズの設定などで見え方は変わります。
まずは手元で無理なく試せる範囲を決めましょう。
- 縦向きと横向き
- 普段使うブラウザ
- 可能なら画面の大きさが異なる端末
- 通常表示と文字を拡大した表示
W3Cの解説では、向きが本質的に必要な内容を除き、表示や操作を縦向きか横向きの一方に制限しないことが基本とされています。
縦向きでは問題なく読めても、横向きにすると固定表示が本文を覆ってしまうことがあるため、両方を試す価値があります。
すべての機種をそろえる必要はありません。確認できた環境を書き残し、確認していない環境まで「問題なし」と広げないことが大切です。
家族や担当者に協力を頼める場合は、目的だけを伝えて操作してもらう方法もあります。押す場所を先に教えすぎず、迷った場所を記録すると、案内の分かりにくさが見えてきます。
一人で判断しにくいと感じる場合は、同じ立場の方と一緒に画面を見るのも一つの方法です。
ライフデザインアカデミーでは、教室やサロンなど小さな事業を営む方向けに、ホームページやSNSの活用を学ぶ講座を開いています。
見つけた問題を安全に伝える
表示の崩れや押しにくい場所を見つけても、その場で公開中のページを変更する必要はありません。まずは、同じ状態をもう一度確認できるだけの情報を残すことから始めます。
記録したい項目は次のとおりです。
- ページの名前とURL
- 問題がある見出しやボタンの名前
- 確認した日時
- 端末とブラウザ
- 縦向きか横向きか
- 文字サイズや拡大の状態
- 期待した動きと実際の表示
画面の画像を残す場合は、通知や名前、メールアドレスなどが写り込んでいないかを確認してください。入力途中の画面を共有するときも、テスト用以外の情報を含めないよう注意してください。
問題を分けて整理する
一つの一覧の中でも、表示の問題と操作の問題は分けておきましょう。
- 文章や画像が画面からはみ出す
- 写真の大切な部分が切れる
- メニューやボタンが重なる
- ボタンを押しにくい
- 移動先が意図と違う
- 入力中に項目や案内が見えない
こうして分けておくと、文章の修正で対応できるのか、写真を見直すのか、制作担当者へ依頼するのかを判断しやすくなります。
修正後も同じ流れで確かめる
制作担当者が修正したあとは、問題があった場所だけでなく、その前後も見直します。写真を小さくしたことで文字との間隔が変わるなど、別の場所へ影響が出ることがあるためです。
変更前の記録と同じ端末、向き、操作で確認し、そのうえでトップから問い合わせまでの流れをもう一度たどっておくと安心です。
まとめ
スマートフォンでの確認は、重要なページを選び、順番に見ていくと整理しやすくなります。
- 画面全体の収まりを見る
- 文字と写真を読む目線で確かめる
- メニューとボタンを指で操作する
- 問い合わせまでの流れを通して見る
- 環境と操作を記録して担当者へ渡す
一台での結果をすべての利用者に当てはめず、公開中のページを急いで直すのでもなく、小さな範囲から確かめながら整えていく。それが、運営者にとって無理のない進め方です。
ライフデザインアカデミーでは、プロフェッショナル講師による各種講座を開講しています。対面講座からオンライン講座まで、学習環境に合わせて受講できます。
→ 講座一覧とお申し込みはこちら
上記に掲載していない限定講座（非公開講座）も定期的に開講していますので、学びたいことのご相談はお問い合わせよりお気軽にご連絡ください。
