みなさんこんにちは。
合同会社リードの金子です。
会社の売上UPや集客UPを目指すなら、ホームページのスマホでの見え方はめちゃくちゃ重要ポイントですよね。
いまやスマホでの観覧率は70％近くまで上昇しており、これからさらにスマホでの観覧率は上がってくると思われますから、もうパソコン画面でのデザインを気にするのではなく、スマホでどう見えるか？
これが今後はさらに加速をしていくと思います。
では、そんなスマホでも見やすいホームページにするには一体どうしたらいいのか？
それを今回は５つのチェックポイントで詳しく解説していきたいと思います。
これから会社のホームページ作りに役立つと思いますので是非参考にしてください。
目次
スマホで見やすいホームページに欠かせない8つのチェックポイント
パソコン画面でいくらデザインが良くてもスマホで見たときに画像がずれていたりしていると、残念なホームページになってしまいますのでスマホでのチェックは必須です。
そのスマホチェックをするポイントを８つ紹介します。
1.重要なポイントは上部に配置する
2.電話はクリックして発信できるようにする
3.ページ速度を測定する
4.フォントの大きさや文章の改行をチェックする
5.リンク同士が近すぎないか
6.メニューやクリックボタンは右手で操作が可能な位置
7.画像サイズはスマホ用にする
8.縦長になりすぎないようにコンテンツを工夫する
では、順番に具体的なチェック方法を紹介していきます。
1.重要なポイントは上部に配置する
ホームページのコンテンツ全てを見てもらいたい気持ちは、痛いほど分かりますし、わたしも上から下まで見て欲しい！！という想いは常にあります(笑)
しかし、
ほとんどの閲覧者はホームページの下まで読み進んでくれることなく離脱をしてしまうというデータがあります。
そのデータがこちら。
これは私が個人で情報発信しているサイトなのですが、赤系色の部分はよく見られていて、青系になればなるほど、見てくれている人が少ないという解析データになります。
もちろん、この解析データはそのホームページによって結果はある程度違ってくるとは思いますが、ほとんどのホームページでは下にいけば行くほど、閲覧者に見られることなく離脱をされてしまいます。
つまり、会社の大事なポイントや、伝えたいことは、出来る限りホームページの上部に配置をしておけば、多くの人に伝えることが可能となります。
2.電話はクリックして発信できるようにする
電話番号などには、スマホからすぐに発信が出来るようにリンクをしておくのがベストです。
これはパソコンからでは出来ませんが、スマホならではの機能でもあるので、この機能を使わない手はありません。
電話番後のところにHTMLコードで【tel:000-000-000】と
このように記述をしてあげることで、スマホでタップしたときに電話をかけることが可能となりますので、閲覧者の利便性を高めるためにも実施しておいた方が良いでしょう。
ちなみに、このHTMLコードですと、パソコンでもクリックが出来る状態にもなり電話はかけることは出来ませんが、ちょっと使い勝手が。。。という方はCSSなどをいじれば出来るようなので「電話番号スマホのみ」という感じで検索をすれば、参考サイトが出てくると思いますので参考までに。
3.ページ速度を測定する
ページ速度は閲覧者に不快を与えてしまうばかりでなく、SEO評価も悪くなってしまうので要注意です！
パソコンとスマホでの表示速度は一緒ではないので、パソコンからサクサク動いているからOK！という判断ではなく、一度スマホの表示速度を制作に測定をされた方がおすすめです。
無料でスマホの表示速度を測定できるのがこちら。
Googleが提供している無料で測定できるツールです。
こちらに自社の測定したいページURLを入れて
分析をクリックすれば、あとは自動でスマホとパソコンの表示スピードを分析していくれます。
【パソコン表示速度】
【スマホ表示速度】
このように、パソコン表示とスマホ表示ではサイトの表示スピードが違ってくるのでスマホでの表示速度は必ずチェックしておくべきです。
このサイトでは、スマホで「64」。。。まだ改善ができる部分があるのですが、ひとまず中間レベルまでになっていればOKかと思います。
要注意なのが「0～49」の赤色レベルです。
この場合には、改善ポイントも丁寧に記載をされているので、そこを順番に改善していけば表示スピードは改善されるはずです。
ちなみに、ページスピードでもっとも原因として多いのが「画像データ」です。
ここを圧縮してあげるだけでも、かなり改善されますのでおすすめです。
あまりページ速度にこだわりすぎて、画像データを落としすぎたり、コンテンツ自体を省いたりしてしまうと、ホームページ自体が見えにくい、伝わらないホームページになってしまいますので、やり過ぎないようにほどほどに改善をした方が良いと思います。
表示スピードの改善方法も以前の記事で紹介しておりますので参考にしてください。
4.フォントの大きさや文章の改行をチェックする
これも結構ありがちで、私もたまに自分のホームページでやってしまうのですが、パソコン表示ではなんら不自然ではないフォントの大きさや文章の改行なのですが、スマホで見たときに、こんなところで改行されている！？
というのが、たまに見かけられます。
例えばこんな感じ
「ら」だけが改行されて、なんか。。。あ～もう～っ！！てなりませんか？
いっそのこと、一行にそろえたほうが見やすいのは間違いないですし、どう見ても不自然です。
フォントの大きさを調整するか、もしくはタイトルを少し変えてみるかで、1行でまとめられると思います。
こういった部分が1箇所だけなら、まだ許せるかもしれませんが、タイトルや文章でも、連続して違和感がありすぎる改行になってしまうと、閲覧者が読みづらいばかりではなく、このホームページ、なんか適当な感じだな。。。
という印象を与えてしまいかねませんので、必ずフォントの大きさや文章の改行などもスマホでチェックした方が良いでしょう。
5.リンク同士が近すぎないか
リンク同士も近すぎて、スマホユーザーが押し間違えてしまうホームページもたまにみかけます。
スマホでは、親指でのタップがほとんどなので、どうしてもタップする範囲が広くなりがちです。
細かすぎるリンクが、ズラーっと並んでいたら、押し間違える確率が増えてしまいスマホユーザーにも不快な体験をさせてしまうことにもなります。
スマホでは、出来る限り文章リンクだけではなく、画像などのアイキャッチと並ばせて配置してあげることで、タップの範囲を広げてあげることが出来ますし、複数のリンクが並んでも押し間違える確率を減らすことが可能です。
6.メニューやクリックボタンは右手で操作が可能な位置
スマホユーザーのほとんどが右手での操作になる確率が多いので、右手操作だけでクリックが出来る配置を意識してレイアウトやデザインを考えたほうがベストです。
これを無視して、わざわざ左寄りにしてしまうと、左手でスマホを持って右手でタップするようになってくるので両手が塞がってしまうので、ユーザーによっては片手操作しかできない状態の場合もあると思います。
クリックボタンは幅が広いボタンにしたり、メニューをタップしたら右手の親指だけでストレスなく操作が出来る位置がベストです。
たまにメニューをタップすると左からメニューが表示される仕様があるので、わざわざこういった仕様にする必要はないかと思います。
7.画像サイズはスマホ用にする
画像などもパソコン表示と別々にした方が良い場合も出てくると思います。
特に何かのデータ画像やグラフ画像などは、その項目自体が小さくなりがちなので、スマホで見たときに、一体なんのグラフなのか分からない！？
という画像もしばしば見かけます。
その他には、画像が大きすぎてスマホのレイアウトを大きく崩してしまっていたり。
画像が横幅全部が表示されていなくて途中で切れてしまっていたらり。
こういったことはよくあるので、私もたまにやらかします(笑)
なので、必ずスマホでの画像チェックを行い、見えにくい場合やデザインが崩れている場合にはパソコン用とは別にスマホ用にサイズ調整をした方が良いでしょう。
8.縦長になりすぎないようにコンテンツを工夫する
スマホでの表示はどうしてもパソコンと違って縦長になりがちです。
パソコン表示では、それほど気にならないコンテンツ量でも、スマホで表示すると、かなり縦長になっており最下部までが遠い。。。
こうなってくると最下部のコンテンツが見れることなく離脱をされてしまうので、スマホでのコンテンツを工夫する必要があるかと思います。
パソコン表示で使用されている画像部分をスマホではアイコン表示などにして、コンテンツタイトルと横並びに表示をさせてあげたり。
タップしたら下に開く仕様にして折り畳みが出来る表示を採用したりなど。
パソコンとは違ったコンテンツ表示を考えてスマホでの縦長表示をコンパクトにしてあげることも必要です。
新着記事やコンテンツ追加した際には必ずスマホチェック！
ここまでで8つのスマホチェックポイントを紹介してきましたが、ホームページ制作の段階では見直しもして進めていくので、この８つのポイントを確認しながら制作していけば、スマホ表示で失敗することは無いと思います。
しかし、それ以外に、一番やってしまいがちなのか新着記事やコンテンツを追加した場合です。
これは私も未だにやってしまうのですが(笑)ついつい何かを新しく追加したときってパソコン作業なので、パソコンだけの確認で済ませてしまい、そのままアップ！！
というアホなことをしてしまいます。
会社のホームページをチェックするときって業務上の都合もあって何かとパソコン画面だけの確認になりませんか。
新しいコンテンツや新着記事などをアップしたときにパソコン画面だけをチェックしてOK。
これで何回もスマホ表示で失敗というか、めちゃくちゃデザインが崩れていることは何度もあるのですが、ほんとに恥ずかし！！って思うくらいヤバイ状態になっているんです。。。
私が個人的に購読している情報サイトでも、たま～にスマホでデザイン崩れているときがあります。
これを見て「ホッ」ってなるんですが、マズイですよね(笑)
そういえば昨日アップした記事もスマホ確認していないな。。。やば。
なので、スマホ表示は必須です！（説得力ゼロですが！）
スマホ表示は見落としがちですが是非一緒に見直していきましょう！
あっ！もしも、このサイトでスマホ表示が崩れていた場合にはご連絡ください！
何かお礼しますので(笑)
それではまた！
