NOANAVI

BLOG

WEBサイトをモバイルフレンドリー対応する必要性と構築方法とは?

モバイルフレンドリーとは、WEBサイトを閲覧するデバイスがパソコンよりもスマートフォンからの閲覧が上回っている為スマートフォンでのWEBサイトの表示を最適化することを表します。

モバイルフレンドリーのサイトは、GoogleのSEOの基準の大きな要因になっていますので必ず行いましょう。

お持ちのWEBサイトがモバイルフレンドリーに対応しているかは、
モバイル フレンドリー テスト – Google Search Consoleを実施してみましょう。

モバイルフレンドリーテストの使い方

モバイル フレンドリー テスト – Google Search Consoleにアクセスします。

URLをテストをクリック

お持ちのサイトのURLを貼り付け「URLをテスト」をクリックします。

mobile-friendly-test
モバイル フレンドリー テスト – Google Search Console

結果を確認します

当サイトでは問題なく「このページはモバイルフレンドリーです」と表示されましたので問題なくモバイルフレンドリーのサイトになっています。

mobile-friendly-test2.jpg
モバイル フレンドリー テスト – Google Search Console

モバイルフレンドリーの必要性

モバイルフレンドリーにしない場合ユーザーは画面を横にスクロールを行ったり、画像がはみ出てしまうため見にくいため不満を感じサイトを離れてしまいます。

このようにモバイルフレンドリーをしない場合サイトを訪問してくれたユーザーが快適に閲覧できないため良くないサイトになってしまいます。
そのためスマートフォンの方にも見やすいサイト設計にすることが必要です。

モバイルフレンドリー設計とは?

大きく分けると二点あります。

  1. サイトの読み込みを早くする
  2. レスポンシブデザインを行う

サイトの読み込み速度を早くする

スマートフォンはパソコンに比べ読み込み速度が早くないため、読み込み速度を気をつける必要があります。

画像の圧縮を行う

サイト内のコンテンツの中でも画像は容量が大きいため画像を圧縮し、表示する必要があります。
画像の圧縮については下記記事をご確認ください。

無駄なHTML、CSS、JavaScriptを削除する

無料テンプレートや、自身で作成したテンプレートでも利用していないフォントや不要な機能が
ある場合は削除することで読み込み速度が早くなりますので少し高度な技術にはなりますが行いましょう。

レスポンシブデザインとは

レスポンシブデザインを行うことで、スマートフォンとパソコンでデザインを変更することができます。

例えば下図のように
「ヘッダー」「二列二行のコンテンツ」「サイドバー」「フッター」という構成をPCとスマートフォンで分けることが可能です。

responsive2
responsive


このようにデバイスごとに見やすいサイト構成にしましょう。

まとめ

モバイルフレンドリーなサイトにすることはGoogleのSEO対策にも有効になりますので、
お持ちのWEBサイトはモバイルフレンドリーなサイトか確認してみましょう。

モバイルフレンドリーを目指すためには、「サイトの読み込み速度を早くする」「レスポンシブデザイン」で設計する。

技術的に難しい方は、是非当サイトのお問わせフォームよりお気軽にご連絡いただければと思います!