パソコンでは読めるのに、スマートフォンでは文字が小さい、表がはみ出す、メニューが押せない。こうした問題があっても、すぐにサイト全体を作り直すと決める必要はありません。見づらさが特定の部品にあるのか、複数のページに共通する仕組みにあるのかを確かめると、改修する範囲を絞れます。

ただし、「スマートフォンだけの修正」だから小さな作業になるとも限りません。同じ設定を多くのページが使っている場合は、一か所の変更が広く影響します。直す場所と、変更後に確認するページの範囲を分けて考えることが大切です。

まず、見づらい場面を一つ具体的にする

「スマホ対応をお願いします」だけでは、何を直せばよいかが定まりません。「料金表の右端が読めない」「画面下の固定ボタンが本文を隠す」「メニューを開いても閉じられない」のように、困る操作と場所を伝えます。

相談時は、該当ページのURL、画面の画像、使った端末とブラウザを用意します。画像だけでは、横へ動かせるのか、押しても反応しないのかまでは分からないため、何をしようとして困ったかも短く添えると伝わります。

同じページを別のスマートフォンでも見て、問題が同じかを確かめます。特定の端末でしか起きなくても無視してよいわけではありませんが、端末による違いが分かると調査の手掛かりになります。

一つの表や画像に限られるなら、そこから直す

例えば、サービス紹介の文章は読めるのに、料金表だけ画面の外へ出る場合です。表の幅や表示方法を直せば、今の文章やページ構成を残せる可能性があります。

横に並べて比較する必要がある表なら、表の部分だけを横へ動かせるようにする方法があります。一方、項目が少なく縦に読んでも意味が変わらないなら、スマートフォンでは縦に並べることも考えられます。どちらでも、料金と対象の対応が分かるかを確認します。

W3Cのリフローに関する解説では、文章を画面幅に合わせて折り返す考え方と、表など二方向の配置が必要な部分を区別しています。表に合わせてページ全体の文字を縮めたり、必要な列を見えなくしたりすることが、読みやすさの解決になるとは限りません。

画像に細かい説明が書かれている場合は、表示サイズの変更だけでは読めないことがあります。その説明を本文へ移す、図を分けるなど、内容の見せ方を直す必要があります。これは一枚の画像周辺で済む場合もあり、サイト全体の再制作とは分けて検討できます。

料金表だけの問題は表の表示方法、各ページ共通の問題は共通レイアウトを調べる切り分け図
問題が見える場所を起点に、同じ仕組みを使うページも調べます。

同じ症状が複数ページにあるなら、共通部分を調べる

会社案内、サービス紹介、お知らせのどこでも本文が画面より広いなら、各ページの原稿より、共通レイアウトの設定に原因があるかもしれません。画面上部のメニューや下部の問い合わせボタンも、多くのページで同じ部品を使うことがあります。

共通部分の修正で複数ページを改善できる場合でも、確認は一ページだけで終えません。短い見出しでは収まっても、長いサービス名では折り返しが崩れることがあるためです。表があるページ、写真が多いページ、入力欄があるページなど、内容の違う代表例を選びます。

反対に、同じように見えるページでも、作られた時期や使っている機能が違い、別の設定になっている場合があります。「全部同じように直る」と見積もる前に、どのページ群が同じ仕組みかを制作会社に調べてもらいます。

画面に収まることと、目的の操作ができることを分ける

はみ出しが消えても、電話番号を押せない、入力欄に文字を入れると案内が隠れる、閉じるボタンが画面外にある状態では、使いやすくなったとはいえません。実際に行ってほしい操作まで確認します。

例えば問い合わせページなら、ページを読むだけでなく、入力欄を選んだとき、エラーを直すとき、確認画面へ進むときの表示を見ます。試しに送信する必要がある場合は、受信する担当者とテスト方法を決めて行います。

スマートフォン向けの修正がパソコン表示に影響しないかも確かめます。共通のボタンや表を変更した場合は、広い画面でも文字が欠けず、クリックできる範囲が適切かを見ます。機種を増やすだけでなく、変更した部分に関係する読み方と操作を選ぶことが重要です。

全体の見直しは、直す箇所の多さと今後の使い方で判断する

一つの料金表や共通メニューが主な問題なら、部分改修から検討できます。多くのページで別々の調整が必要で、更新するたびに同じ崩れ方を繰り返す場合は、共通の仕組みを整え直す案も比較したいところです。

さらに、事業内容が変わり、ページの分け方や文章そのものも合わなくなっているなら、表示の修正と構成の見直しを一緒に進める意味があります。サイトの年数やスマートフォンでの一つの不具合だけで、全面リニューアルが必要とは決めません。

既存の原稿、写真、URLをどこまで残せるかも確認します。画面の仕組みを変更することと、これまでの内容をすべて捨てることは同じではありません。部分改修と全体の見直しを、残すもの・変更するもの・確認するものの三つで比べると判断しやすくなります。

改修の相談で、残す内容、変更する部分、確認する画面を分けて伝える図
修正箇所の数だけでなく、残せる内容と確認の範囲をそろえて比較します。

Bämのリニューアルか部分改修かの相談・サービス案内では、今のサイトと管理状況を確認し、必要な改修範囲を整理します。気になるページと操作を起点に、残せる内容を生かす方法と、共通部分から見直す方法を検討できます。

参考資料