パソコンの画面できれいでも、スマホで崩れることがあります
ホームページを作るとき、多くの場合パソコンの大きな画面で作業します。私も普段はMacでコードエディタを開いて、文章や写真の配置を確認しながら組んでいます。
パソコンの画面は横に広く、文字も写真も余裕を持って並びます。作っている側からすると、この状態で「きれいにできた」と満足してしまいがちです。ただ、実際にそのページを見るお客さんには、スマホから開く方が多くいます。屋根の修理やリフォームを探している最中に、その場で検索して開く、という場面もあります。
ここで問題になるのが、パソコンの画面とスマホの画面は「別物」だということです。単に画面が小さくなるだけではありません。文字の折り返し位置が変わり、横に並んでいた要素が縦に積み重なり、余白の取り方も変わります。パソコンで見て気持ちよかった配置が、スマホでは文字が詰まって読みにくくなったり、逆に間延びして間の抜けた印象になったりします。
なぜ「パソコンで作って終わり」がうまくいかないのか
よくあるのが、パソコンの画面だけを見ながらデザインを決めて、スマホでの見え方を最後に軽く確認するだけ、という進め方です。これだと、次のようなことが起こりやすくなります。
- ボタンが小さすぎて、指で押しにくい
- 見出しの文字が大きすぎて、2行で改行され読みにくい
- 横に並べた写真がスマホでは縦に潰れて見える
- 電話番号や問い合わせボタンが画面の外に隠れてしまう
これは作り手の技術が低いという話ではありません。パソコンとスマホでは「見え方の基準」がそもそも違うため、片方だけを基準に作ると、もう片方でズレが出やすくなります。だからこそ、パソコンで作りながらも、こまめにスマホでの見え方を確認しながら進める必要があります。
私ならこう見ます。屋根の現場でも同じことが起こります。地上から見上げて「きれいに葺けた」と思っても、実際に屋根の上に登って角度を変えて見ると、板金の重なりが甘い場所が見つかることがあります。見る位置が変わると、見えるものも変わる。ホームページも同じで、作る側の画面と見る側の画面は違う場所にあります。
スマホで実際に開いて確認する、という当たり前のこと
私たちがホームページを作るとき、パソコンでの見た目を整えたあとに、実際のスマホでも開いて確認するようにしています。画面上のシミュレーターだけでなく、実機で指を使って操作してみることが大事だと考えています。ボタンが本当に押しやすい大きさか、文字が詰まって読みにくくなっていないか、電話番号のタップで発信できるか。こうしたことは、パソコンの画面をどれだけ眺めても分かりません。
特に職人会社のホームページの場合、見に来る方の年代も幅広く、60代・70代の方がスマホで開くことも想定しておく必要があります。文字が小さすぎたり、ボタンの間隔が狭すぎて隣のリンクを押してしまったりすると、それだけで問い合わせにたどり着く前に離れてしまうことがあります。せっかく検索から来てもらえても、スマホでの見え方が悪いと、そこで終わってしまう可能性があります。
確認しておきたい3つのポイント
自社のホームページがスマホでどう見えているか、次の3点だけでも確認してみることをおすすめします。
1. 電話番号やLINEのボタンが、指で迷わず押せる大きさか
小さすぎるボタンは、押し間違いや押しにくさにつながります。指の腹でも余裕を持って押せる大きさになっているかを確認します。
2. 見出しや本文が、スマホの横幅で読みやすく折り返されているか
パソコンでは1行だった見出しが、スマホでは3行に折り返されて間延びしていないか。逆に文字が詰まりすぎて読みにくくなっていないか。
3. 施工写真が、スマホでも大きく見えるか
パソコンでは横に3枚並んでいた写真が、スマホで小さく縮小されて何が写っているか分かりにくくなっていないか。屋根や外壁の工事は、写真の見え方が信頼につながる部分でもあります。
この3点は、実際に自分のスマホでページを開いて、指で触りながら確認すれば分かります。特別な知識は要りません。まずは自社のページを、パソコンではなくスマホで開いてみることから始めてみてください。
私たちが気をつけていること
ホームページを作る側としては、パソコンの大きな画面で作業する時間がどうしても長くなります。だからこそ、意識してスマホでの見え方を確認する工程を挟むようにしています。パソコンで組んで、スマホで確認して、直す。この往復を省略しないことが、結果的に問い合わせにつながる形を作ることだと考えています。
これは屋根の工事とも似ています。地上での準備をどれだけ丁寧にやっても、最後は屋根の上で実際に確認しないと仕上がりは分かりません。ホームページも、パソコンでの準備とスマホでの確認、どちらも欠かせない工程だと思っています。
