スマホで見たときに、崩れていませんか

ホームページを作るとき、パソコンの画面を見ながら作ります。
できあがったあとも、確認するのはパソコンです。
けれど、見に来る人の多くはスマホで見ています。

パソコンではきれいに見えているのに、スマホでは文字が切れている。
表がはみ出している。
こういうことは、珍しくありません。

見ているのは、ほとんどスマホ

お店や個人の事業のホームページでは、スマホから見る人が7割を超えることが多くあります。
業種によっては、もっと高くなります。

ご自分のサイトの数字は、Googleアナリティクスで見られます。
入れていない場合でも、順番だけ覚えておいてください。
スマホを先に確認して、パソコンを後にする。
これだけで、見落としがかなり減ります。

スマホは横幅が狭いので、幅を取るものが入るとそこだけ崩れます。
よく起きるのは、次の場所です。

パソコンでは1行に収まっていた見出しが、スマホでは3行になります。
文字が大きいぶん、崩れたときの見え方も目立ちます。
見出しは短くしておくほうが安全です。

料金表がいちばん多い例です。
列が3つ以上あると、スマホでは横にはみ出すか、文字が小さくなって読めなくなります。
列を2つに減らすか、表をやめて箇条書きにすると解決します。

画像で置いた電話番号は、タップしてもかかりません。
文字で置いて、タップで発信できるようにしておきます。
スマホで見ている人にとって、電話は一番近い連絡手段です。

横に長い画像は、スマホの幅に合わせて縮みます。
中に文字が入っていると、読めない大きさになります。
画像の中の文字は、できるだけ少なくしておきます。

入力欄が画面からはみ出していたり、送信ボタンが小さすぎたりすることがあります。
フォームは必ず、スマホで最後まで送ってみてください。
項目の決め方は問い合わせフォームに、何を書いてもらうかに書いています。

5分あれば終わります。
この順番でやるだけで、公開後に慌てることがなくなります。

スマホが手元にないときは、パソコンでも確認できます。
ブラウザの画面を、横幅が狭くなるように引っぱってみてください。
幅が狭くなったときの見え方が、スマホでの見え方に近くなります。

ただし、これは形を見るための方法です。
タップできるかどうか、指で押しやすいかどうかは分かりません。
最後は、必ず実物のスマホで見てください。

スマホで崩れているページは、直せば済みます。
問題は、崩れていることに気づかないままウェブ上にあることです。
「ちょっと、読みにくいな」はそのままそのホームページの印象につながります。

今すでに公開しているページがあれば、今日、自分のスマホで開いてみてください。
上から下まで一度なぞるだけで、直す場所が見つかります。