OWNED MEDIAウェブ制作に役立つコンテンツを発信中!

「そのサイトはスマホでも綺麗に見れますか?」ウェブサイトのモバイル対応チェック

最終更新日:2018.6.1 Update!!
近年、インターネット通信の割合でついにスマホがPCを上回ったと言われるようになりました。つまり、半数以上はPCからではなくスマホでウェブサイトを見られるケースが多いということでしょう。ですので、これから先のことも考えるとスマホ対応はほぼ必須であると言えます。   そこで今回は、現在のウェブサイトがきちんとスマホ対応できているかどうかをチェックする方法についてまとめていきたいと思います。  
現在のウェブ環境を取り巻く現状
その前に、まずはどれだけスマホ対応が重要とされているかを見るために、現在のウェブを取り巻く現状から考えていきたいと思います。先ほどにもある通り、すでに全世界の半数以上のアクセスがPCではなくスマートフォンなどのモバイル端末からというデータが出ているところもあるようです。   これにはスマートフォンが急速に普及してきたというのはもちろんですが、スマートフォン自体の性能も上がり、いろんなアプリが登場してきたというのも考えられます。特にFacebookやTwitter、InstagramといったSNSの利用が浸透するようになってきてからは、若年層を中心にSNSが生活の中心になるといっても過言ではないかと思います。   そのため、キーワード検索からの流入に加えてSNSやアプリ経由でのウェブサイト流入も増えてきており、今後この傾向はより強くなってくると言われています。そこでグーグルもSEOの評価としてきちんとモバイル対応ができているかどうかを判断するようになってきました。  
グーグルが発表したモバイルファーストインデックスとは
SEOの新たな評価基準としてグーグルが2018年の3月から「モバイルファーストインデックス」という指針を発表しました。これは具体的にいうと、検索エンジンのクローラーがPCサイトを基準にした評価だったのが、モバイルサイトを基準にする評価に変更するということです。   つまり、モバイルサイトが優先的にインデックスされるようになります。ですので、SEO対策のポイントとなるコンテンツもモバイルサイトの内容が重視されるということです。したがって、PCサイトを充実させていても、モバイルサイトのコンテンツが薄い場合にはSEO上で不利になるという可能性も出てきますね。   ウェブサイトがしっかりとモバイルに対応しているかどうかが、これからのウェブサイトの評価軸として重要になってきます。  
スマホ対応がきちんとできているかをチェック
そこで、運用中のウェブサイトがモバイルサイトとして対応できているかを確認して見ましょう。今回はグーグルが提供しているモバイル対応確認サービスの「モバイルフレンドリーテスト」を利用していきます。もちろん無料で使えます。   ページにアクセス(https://search.google.com/test/mobile-friendly?hl=ja)すると中央に調査するサイトのアドレスを入力するフォームが表示されるのでURLを入力し「テストを実行」ボタンをクリックします。   「そのサイトはスマホでも綺麗に見れますか?」ウェブサイトのモバイル対応チェック   サイトの分析が始まりますのでしばらく待ちましょう。   「そのサイトはスマホでも綺麗に見れますか?」ウェブサイトのモバイル対応チェック   少し経過すると分析結果が表示されます。画面上に「このページはモバイルフレンドリーです」と表示されていればひとまず問題ありません。その下にはより詳細の分析について確認できる項目があるのでそこをクリックしてみます。   「そのサイトはスマホでも綺麗に見れますか?」ウェブサイトのモバイル対応チェック   するとサーチコンソールにリダイレクトされますので、対象となるプロパティを選択します。画面が切り替わり、ここではサイト全体におけるモバイルユーザビリティの確認項目が表示されます。UIに問題がある部分が指摘されるので改善するようにしましょう。   「そのサイトはスマホでも綺麗に見れますか?」ウェブサイトのモバイル対応チェック    
モバイル対応の具体的な対応策は
もし、モバイルフレンドリーテストで不合格になった場合や、そもそもウェブサイトがモバイル対応していない場合にはどうすればいいのでしょうか?   まず、ベストプラクティスとして考えられるのが、「レスポンシブデザイン」でウェブサイトを構築することです。レスポンシブデザインは1つのサイトのリソースをディスプレイ幅でレイアウトが切り替わるようになっているもので、これによりPCとモバイル両方で表示の最適化が実現できます。   これが難しい場合には、PCサイトとは別にモバイルサイトを作成し、アクセスした端末でPCサイトかモバイルサイトを切り替えて表示する仕組みを取り入れます。ただしこの場合はPCサイトとモバイルサイトが別になるので、サイトメンテナンスのコストが上がるのがデメリットです。   上記2点を行なっているにもかかわらず、モバイルフレンドリーに合格しない場合には分析結果の表示にある項目をチェックするようにしましょう。   具体的にはこのような項目が多いのではないでしょうか。つまり、画面の小さいスマホでも操作しやすいように、ボタンやテキストが適正なサイズで表示されている必要があったり、画面幅を取得するビューポートと呼ばれる設定も正しく記述しなければなりません。   「そのサイトはスマホでも綺麗に見れますか?」ウェブサイトのモバイル対応チェック   より詳しくはこちらのグーグルデベロッパー向けの記事を参考にするとわかりやすいので、こちらもご覧ください。   「そのサイトはスマホでも綺麗に見れますか?」ウェブサイトのモバイル対応チェック  
  いかがでしょうか、このようにウェブサイトのスマホ対応はユーザーの為だけでなくSEOの観点からも重要になってきています。今はほとんどのサイトが対応している現状ですが、まだ出来ていないところはそろそろ対応しておかないと、いよいよこれから出遅れてしまうかもしれませんね、、
  • はてなブックマーク
  • Pocket
  • Linkedin
  • Feedly

この記事を書いた人

Twitter

SPONSORED

    KEYWORD SEARCH

    RECENT POSTS

    合同会社デザインサプライ -DesignSupply. LLC-

    サイト制作・開発 / 各種デザイン制作 / ウェブプロモーション企画

    合同会社デザインサプライ(DesignSupply. LLC)

    Office:大阪府大阪市天王寺区清水谷町3-22
    Email:info@designsupply-web.com
    • Twitter
    • Github
    CONTACT USSCROLL TO TOP
      • Facebook
      • Twitter
      • Github
      • Instagram