share
  • >
  • ブログトップ>
  • 「スマホ対応」が検索結果に影響!モバイルフレンドリー対策まとめ

「スマホ対応」が検索結果に影響!モバイルフレンドリー対策まとめ

Googleは、スマートフォンに最適化されたサイトによって、検索順位の結果が変わることを発表しました。この変更は、2015年4月21日からの導入と予告されています。

0053_01

(引用:http://googlewebmastercentral-ja.blogspot.jp/2015/02/finding-more-mobile-friendly-search.html

以前から、Googleはスマートフォンに対応しているサイト構築を推奨してきました。というのも、インターネットユーザーがパソコン環境にあった場合でも、モバイル検索が行われている現状があるためです。

そのためGoogleは、例えばMobile Friendly Websiteを設けるなど、スマートフォン最適化への誘導をしてきました。モバイルフレンドリーとは、サイトがモバイルユーザーにとって利便性の高い設計がされた状態を言います。

0053_02

(引用:https://www.google.com/webmasters/tools/mobile-friendly/

このような対応が急務とされる中、今回は、スマートフォンに対応出来ているかのチェック方法と、出来ていない場合、どうすれば良いか対処法を紹介していきます。

スマホ対応のチェック方法

【モバイルフレンドリーテスト】

Webサイトが、スマートフォン向けに最適化されているかどうかを、確認するためには、上記で紹介したGoogleサイトにあるモバイルフレンドリーテストにてチェックが可能です。ウェブページのURLを入力すれば、分析結果が表示されます。

0053_03

(引用:https://www.google.com/webmasters/tools/mobile-friendly/

0053_04

モバイルフレンドリーの場合、「問題ありません。このページはモバイルフレンドリーです。」という結果が上がってきます。下記は、弊社のセルバスタッフブログ(検索URL:https://www.selva-i.co.jp/blog/)で試みたものです。

もし仮にモバイルフレンドリーでない場合、以下の内容が表示されます。

【モバイルフレンドリーではありません】
このページがモバイル対応ではない理由

  • ✕テキストが小さすぎて読めません
  • ✕モバイル用viewpoortが設定されていません。
  • ✕リンク同士が近すぎます

【モバイルユーザビリティ】

Googleウェブマスターツールで、「モバイルユーザビリティ」レポートを確認します。

0053_05

(引用:https://support.google.com/webmasters/answer/6101188?hl=ja

このページでチェックすると、サイト上でのエラーは、6つの項目で検出されます。どのページ上でエラーが発生したのかを、各項目ごとに確認することも可能です。

  • Flash が使用されています
  • ビューポートが設定されていません
  • 固定幅のビューポート
  • コンテンツのサイズがビューポートに対応していません
  • フォントサイズが小です
  • タップ要素同士が近すぎます

【モバイルユーザーエクスペリエンス】

またほかにもPageSpeedInsightsで、モバイルユーザーエクスペリエンス診断ができる機能もあります。

0053_06

(引用:https://developers.google.com/speed/docs/insights/rules?hl=ja

PageSpeedInsightsでは、以下の5項目につき、100点満点中何点か採点される仕組みになっています。

  • viewport の設定
  • コンテンツのサイズを表示域に合わせる
  • 判読可能なフォント サイズの使用
  • タップ ターゲットのサイズを適切に調整する
  • プラグインを使用しない

モバイルフレンドリーでない場合どうなるか

上記の方法で確認をした結果、モバイルフレンドリーでないサイトは、検索順位が下がります。2015年4月21日に、検索のアルゴリズムが変更になったとしても、パソコンからの検索では影響はないとされています。さらに、モバイルフレンドリーではなかったとしても、スマートフォンで表示され、関連性の高いサイトであれば検索結果として出てきます。

ポイントは、スマートフォンに最適化されているサイトが上位表示されるということです。すなわちスマートフォン向けのサイトを軸に構築する場合は、モバイルフレンドリーでないサイトは、不利な検索結果になると言えます。

モバイルフレンドリーでない場合の対処方法

モバイルフレンドリーではないサイトへの対応は、シンプルな話ではありますが、スマートフォン最適化をしていくのみと言えます。パソコンユーザーがメインのサイトであれば急務ではありませんが、モバイルユーザー度が高いサイトにもかかわらず、対応できていない場合は、とくに対応が求められるポイントです。

では、どのように最適化すればよいのでしょうか。モバイルフレンドリーテストや、モバイルユーザビリティ、モバイルユーザーエクスペリエンスで、エラーになった項目を解決することで、Googleが求める条件をクリアしていきます。

具体的には、コンテンツのサイズが問題であると考えられる場合、有効と考えられる対処の1つは、レスポンシブ・ウェブデザインです。これは、閲覧者の画面サイズにあわせた端末デザインで表示させる方法です。

ほかにもエラーが出た項目ごとに、対応をしてスマートフォンの最適化を目指していきましょう。またモバイルフレンドリーの評価は、サイト全体で評価されるのではなく、ページごとにみられるため、優先順位が反映されるページ設計をすることも大切です。

モバイルフレンドリー確認方法

方法サイトエラーの場合に表示荒れる内容

モバイルフレンドリーテスト Mobile Friendly Website 【モバイルフレンドリーではありません】
このページがモバイル対応ではない理由
✕テキストが小さすぎて読めません
✕モバイル用viewportが設定されていません。
✕リンク同士が近すぎます
モバイルユーザビリティ Google
ウェブマスターツール
・Flash が使用されています
・ビューポートが設定されていません
・固定幅のビューポート
・コンテンツのサイズがビューポートに対応していません
・フォントサイズが小です
・タップ要素同士が近すぎます
*どの項目でエラーになったかが表示される。
モバイルユーザーエクスペリエンス PageSpeedInsights ・viewport の設定
・コンテンツのサイズを表示域に合わせる
・判読可能なフォント サイズの使用
・タップ ターゲットのサイズを適切に調整する
・プラグインを使用しない
*項目ごとに、100点満点中何点か採点される。

今回のGoogleが行うアルゴリズムの変更は、ECサイトからオウンドメディアまで、様々なウェブサイトにおいて、スマホユーザーの方がPCより多い現在、当然といえば当然の変更といえます。モバイルフレンドリー対策はセルバでも積極的に行っていますので、お困りの方は当社までご連絡ください。

※下記ボックスにコメントすると、あなたのタイムラインに本記事へのリンクが投稿されます。

※下記ボックスにコメントすると、あなたのタイムラインに本記事へのリンクが投稿されます。

この記事を書いた人

投稿者
中山 健

株式会社セルバ代表取締役。学生時代にアルバイトでWEB製作会社に入りプログラムを覚える。大学卒業後SIerにて金融システムの開発に携わった後、再びWEB業界へ。

WEB系のプログラム言語とサーバー構築、さらにはCOBOLも出来ます!最近ではシステム開発だけでなく、SEOやマネタイズなどのグロースハックや企画を担当する事が多いです。

Twitter
Facebook

セルバではWEBシステム開発からスマートフォンアプリ開発、デザイン、企画/マーケティングまでいかにコストを掛けず、成果を高めるのか研究し実践しています。企業、店舗のWEBシステム/アプリ開発のお手伝いさせていただいておりますので「WEBシステムの開発」「アプリ開発を依頼したい」「既存サイトのアプリ化」「サイト/アプリからの集客を増やしたい」など新規開発やリニューアルにご興味のある方は、ご相談だけでも構いませんのでお気軽にお問い合わせください。

ご相談・お見積
ページトップ