モバイルフレンドリーは欠かせないポイントとなっている
WEBデザインは、単に見た目が良くて魅力的なビジュアルを作れば良いというものではありません。
見た目だけを重視したサイトは、確かに美しく人を惹きつけるものとなりますが、機能性という面ではかなり落ちるからです。
画像や動画を多用することになりますので、容量が重くてページ読み込みが遅くなります。
また、どこにメニューがあるのか、リンクボタンはどこかとユーザーが困る仕様となり使いづらくなります。
こうしたことから、ユーザーのことを考えないデザインはSEO効果が低くなり、検索結果で順位を下げてしまうことになります。
この点で、WEBデザイナーが考えなくてはならないのはモバイルフレンドリー仕様となっているかということです。
スマホの普及によって、サイトの閲覧者の大半はスマホユーザーとなっています。
そのため、パソコンの大きな画面で表示させることを前提としたページだけでなく、小さなスマホ画面で見るためのサイト作りをする必要があるのです。
Googleではモバイルフレンドリーとなっているかどうかを評価の大きな指針としていて、対応していない場合は一気に評価が下がります。
そのため、いくら美しいデザインでもスマホ閲覧に適したサイズや容量でないと意味がないのです。
それだけにモバイルフレンドリー対応にすることは、SEO対策として欠かせない要素となっています。
UIを意識したデザインは必須
モバイルフレンドリーにするためには、UIを強く意識することが求められます。
たとえばテキストフォントの大きさで、スマホ画面は小さいので、フォントが小さいとイチイチ画面をピンチアウトするなどして拡大しないといけません。
この手間がないように、Googleではフォントサイズは16pxとなるように勧めています。
事情があってこのサイズにできないのであれば、最低でも12px以上とすべきです。
また、リンクテキストやリンクボタンなど、タップするパーツについては、周りに空白を作ることも重要な要素としています。
タップする時に、周りの画像や文章が近いとうまく押せないからです。
その目安としては、タップする部分が連続している場合は32px以上開けること、それ以外の場合は48pxとすると良いです。
テキストと画像の関係性
サイトの中にはテキストを画像にしているものがあります。
きれいな字体にしたいとか、強調したいという思惑があるからです。
しかし、少なくてもSEO対策という意味では避けるべきやり方です。
というのも、画像は検索内容に反映されないですし、スマホ閲覧だと見づらくなる危険が高いからです。
そのため、Webフォントを使ってテキスト表示させるように改善すると良いでしょう。
また、ナビゲーションについても画像ではなく、テキストを上手に使って表示できるようにプログラムする方が効果的です。