パソコンで見ると普通なのに、スマホで開くと文字が虫めがねサイズになっている。これは古いホームページで最もよく起きていることです。しかも本人だけが気づいていない、ということが珍しくありません。専門知識もアプリも要らない確認方法から説明します。
まず、スマホで自分のサイトを開いてみる
いちばん確実なのは、実際に自分のスマホで開くことです。名刺やチラシに書いてあるアドレスを、そのまま打ち込んでみてください。このとき見るのは、次の3点だけで十分です。
- 指で広げないと文字が読めるか。開いた瞬間にページ全体が縮んで表示され、拡大しないと読めないなら、スマホ対応していません。
- 横にはみ出していないか。左右に指でスワイプできてしまう（横スクロールが起きる）なら崩れています。
- 電話番号を押して発信できるか。ただの文字として置かれていると、番号を覚えて電話アプリに打ち直す手間が発生します。ここで諦める人がいます。
この3つのどれかに当てはまったら、そのホームページはスマホから来た人にとって「読みにくい店」になっています。
パソコンだけで確認する方法
手元にスマホが無い、あるいは自分のサイトを客観的に見たい場合は、パソコンのブラウザだけでも確認できます。
ウィンドウを細くするだけでも分かる
ブラウザの窓を、マウスで右端をつかんで名刺くらいの幅までぐっと狭めてみてください。きちんと作られたサイトなら、狭くなるにつれて文字が縦に積み上がり、その幅でも読める形に組み直されます。一方、古いサイトは横幅が変わらないまま、右側が窓の外に消えていきます。これがスマホで起きていることと同じです。
Chromeの機能で実物に近い形で見る
Google Chromeをお使いなら、確認したいページを開いた状態で F12キー を押すと、画面の横か下に開発者向けの画面が出ます。その中にスマホの形をした小さなアイコン（Toggle device toolbar）があり、これを押すとスマホの画面幅で表示されます。閉じるときはもう一度F12です。難しそうに見えますが、押して見て閉じるだけなので何も壊れません。
なぜスマホで崩れるのか
技術的な理由はひとつではありませんが、古いサイトでは原因がだいたい決まっています。
viewport（ビューポート）の指定が無い
ホームページには「この画面幅で表示してください」とスマホに伝えるための、たった一行の設定があります。これが無いと、スマホは「パソコン用のページが来た」と判断し、幅960ピクセルほどのページを勝手に画面に押し込めて表示します。結果、全体が縮んで文字が読めなくなります。2010年前後までに作られたサイトには、この一行が入っていないことがよくあります。
表組み（テーブル）でレイアウトを作っている
昔は、文章や画像の配置を「表」の枠組みで固定して作るのが普通でした。表は幅が決まっているため、画面が狭くなっても縮みません。だから横にはみ出します。
Flashが使われている
動くメニューやオープニング画面にFlashという技術が使われている場合、そもそもスマホでは何も表示されません。Flashは2020年末に完全に終了しているため、パソコンでも今はもう映りません。トップページが真っ白、あるいは空白の四角が出るなら、これが原因のことがあります。
直すには、何が必要なのか
正直にお伝えすると、viewportの一行を足すだけでは直りません。表組みで固定されたレイアウトは、幅の指定そのものを解いて組み直す必要があるからです。「スマホ対応だけ安く追加」ができないのはこのためで、多くの場合は作り直しのほうが早く、結果的に安く済みます。
確認したあと、どうするか
崩れていることが分かったら、次に知りたいのは「直すといくらか」だと思います。費用の相場については別の記事にまとめました。また、当サイトでは今のホームページのアドレスを入れるだけで、スマホでも崩れない作り直し版がその場で表示されます。今のサイトと見比べる材料としてお使いください。費用はかかりません。