【やらなきゃヤバい？！】モバイルSEOの必要性やモバイルファーストなサイトの作り方を解説！

今回はこんな疑問にお答えします。

「モバイルSEO」という言葉を聞いたことがあるけど、何のことかよくわからない人は多いのではないでしょうか。

結論から言うと、Web上にサイトを運営しているならモバイルSEOは必ず行うべき施策です。

というのも、今はスマホを始めとするモバイル端末は1人1台持っているのが当たり前の時代。それに伴って、Webサイトをスマホで閲覧する人も増えています。

そのため、モバイル端末でも見やすく、使いやすいWebページを作る必要があります。そういった施策をモバイルSEOを呼びます。

そこで今回は、既存ページがモバイル端末にとって最適な状態かどうかを確認する方法や、具体的な施策などを紹介します。

モバイルSEOに悩んでいる方は、ぜひ参考にしてくださいね！

【前提知識】モバイルSEOとは？

まずは前提知識として「モバイルSEOとは何か？」を説明しますね。冒頭でもお伝えした通り、モバイルSEOとはモバイル端末を使った人に見やすく、使いやすいサイトにする施策のこと。

そもそも、PCサイトとスマホサイトではユーザーの目線の動きが違います。例えばPCサイトから見た目線は、左上を視点にして右に移動し、徐々に下に向かうことから、アルファベットの「Z」型と言われています↓

一方、スマホサイトから見た場合、目線は上から下に一直線。そのためスマホユーザの目の動きはアルファベットの「I」型と言われています↓

また、上の画像を見ると分かる通り、PCとモバイル端末では目線だけでなく、1ページに表示されているコンテンツの数も異なります。モバイル端末から見ても違和感なく、利便性が下がらないページを作るためには、まず両者の違いを理解しないといけません。

他にも、モバイル端末には次のような特徴があります。

これらが考慮され、モバイル端末でも使いやすいように最適化されたページをモバイルファーストと呼びます。

モバイルSEOに取り組むべき理由2つ

では、モバイルSEOに取り組むべき理由を2つ紹介していきます。

1. PCよりスマホで検索する人が増えたから
2. モバイルファーストインデックスの移行が進んだから

それぞれ詳しく説明します。

1.PCよりスマホで検索する人が増えたから

1つ目の理由は、こちら↓のグラフの通りインターネットで検索する際、PCよりスマホを使う人が多くなったからです。

インターネット利用端末の種類

なので、検索エンジンが検索結果の順位を決める際に、利用者が多いスマホからの利便性が重視されるのは当然と言えます。

またスマホなら、場所を選ばずにどこでも気軽に検索できるのもメリットの一つ。例えばランチに迷ったらその場で「近くのランチ」と検索するだけで、周辺情報をもとにランチ候補のお店を教えてくれます。

もはやスマホは、生きていく上で欠かせない生活必需品ともいえるでしょう。

②モバイルファーストインデックスの移行が進んだから

2つ目の理由は、モバイルファーストインデックス(モバイル版サイトの内部要素を主に評価する仕組み)の移行が進んだからです。

モバイルファーストインデックスの移行が加速した背景には、スマホ利用者の増加があります。

もともとGoogleはPCサイト向けのコンテンツを検索結果を決める際の判断基準にしていたため、PCユーザに親切なサイトが検索上位を獲得しやすかった背景があります。しかしそれだと、スマホ利用者にストレスを与える可能性があります。。

理由は以下の通りです。

せっかく検索上位を獲得して読者がサイトを訪問してくれているのに、上記のような現象が起こるとユーザーの利便性が下がるのは明確。

またGoogleは2018年3月より、正式にモバイルファーストインデックスへの移行を開始したと公表しています。そのため、今後はWeb上の全サイトがモバイル端末で使いやすいように対応する必要があるでしょう。　

モバイルフレンドリーなサイトの条件4つ

次に、モバイルフレンドリー(スマホなどのモバイル端末で快適にサイトが見れる状態)なサイトの条件を4つ解説します。

それぞれ詳しく解説します。

1.ボタンやリンクがタップしやすい

1つ目は、ボタンやリンクがタップしやすいかどうかです。ボタンやリンクについて注意すべき点は以下の通り。

2.画像や装飾が見やすい

2つ目は、画像や装飾が見やすいレイアウトになっているかどうかです。装飾をしすぎるとどこが大事な部分かわからなくなるので、スマホから見やすいレイアウトを考慮して、魅せ方も工夫しましょう。

具体的には、次のような点に注意してください。

ちなみに、スマホの一行に表示される文字数は20文字前後。なのでPCでは3行程度の文章が、スマホで見ると10行近くになることもあります。

文字がギュッと詰まっていると、パッと見ただけで「読みにくそう」といった印象を与えるので読者が離脱しかねません。記事を書いた時はスマホサイズでプレビューするなどして、文字だらけにならないように調整しましょう。

目的と異なるページにリンクしてしまうと、読者にページを閉じたり元の画面に戻ったりといった手間をかけることになります。こういった読者が不便と感じる要素は、できるだけ避けましょう。

3.横スクロールしやすいように工夫されている

3つ目は、横スクロールしやすいように工夫されているかどうかです。

例えばランキングや比較表などを使う場合、縦長のスマホ画面に横幅の広い表があると見づらいです。

とはいえ、全ての横スクロールを排除するのは難しいでしょう。なので、表を使うときは以下の点に気をつけてください。

チェックすべきポイントは、横スクロールが必要最低限になっているかどうかや、タップ1回でスクロールできるようなデザインになっているかどうかなど。

また、縦に長すぎる表は1画面内に収まらない可能性があるので、表に入れる項目数はできるだけ少なくしましょう。

④再生できないコンテンツがない

4つ目は、再生できないコンテンツがないかどうかです。例えば、Flash( Adobe Flashが作っていた再生時に専門プレイヤー(Adobe Player)を必要とする動画)は既にサービスが終了しているため、今となっては見られないコンテンツですよね。

もし、Flashやそのほかの再生できないコンテンツを使っているページがあるなら、その部分を削除しましょう。代わりになるYoutube動画あったらそこへのリンクに変更してあげるとさらに親切です。

モバイルSEOに対応したサイトを作る方法3つ

続いて、モバイル端末に適したサイトを作る方法を3つ紹介します。

それぞれ詳しく解説します。

1.閲覧する人の画面サイズを考慮する

1つ目は、閲覧する人の画面サイズを考慮してコンテンツを表示する「レスポンシブWebデザイン」という方法です。

レスポンシブWebデザインは、PC用サイトとモバイル用サイトで同じHTMLを使えるのが一番のメリット。管理の手間もかからないうえに、クローラー（検索エンジンが検索結果を表示するためにWebサイトの情報を収集するロボット）を混乱させることもありません。

また、レスポンシブWebデザインはGoogleが最も推奨している方法でもあります。そんなレスポンシブWebデザインを適用するための方法は、こちらの3通り。

ちなみに、WordPressのテーマの中には、既にレスポンシブWebデザインを考慮して作られているものがたくさんあります。そういったものを利用すれば簡単に導入できるので、不安な方はWebサイトを WordPressで作り、レスポンシブWebデザインに対応したテーマを選んでください。

②接続端末に応じた画面表示をする

2つ目は、接続端末に応じた画面表示をする「ダイナミックサービング」という方法です。ダイナミックサービングとは、あらかじめPC用とモバイル端末用の2つのWebページを用意しておき、ユーザーの接続端末に応じて表示するページをサーバーが判断する仕組みです。

レスポンシブWebデザインと比べると、ダイナミックサービングは情報更新やGoogleアップデートに対する対応などを2つのWebページに対して行うなど、管理や運用の手間が発生するのが難点。

とはいえ、ダイナミックサービングに適したWebサイトも存在します。例えば、こちらのような目的があるなら、ダイナミックサービングを検討するのも良いかもしれません。

スマホでは多くの項目を入力させるとユーザーの負担になるため、モバイル向けのお問い合わせフォームでは必要最小限の項目に絞らざるを得ません。

しかし、ダイナミックサービングであれば、PC向けフォームには氏名・年代・居住地などの詳細項目を追加できるため、ユーザー体験を損なわずに必要な情報を取得できる点が大きなメリットです。

3.PC用とモバイル用のURLを分ける

3つ目は、PC用とモバイル用のURLを別々に分けてサイトを表示する方法で、セパレートURLとも呼ばれます。

ただ、セパレートURLはダイナミックサービングと同様、PC用とモバイル用の2サイトを作らないといけません。

これからWebサイトを構築する場合、セパレートURLは最も避けるべき方法です。しかし古くからモバイル用サイトを運営していた歴史あるWebサイトは、セパレートURLを採用している場合があります。Yahoo！は、その代表格です。

Yahoo！のPC用サイト

Yahoo！のモバイル用サイト

繰り返しにはなりますが、セパレートURLは今からWebサイトを作る人には正直向いていません。今後のことを考えて、サイトを1つにしてしまうほうが圧倒的に楽だからです。

PC用とモバイル用のWebページを分けて管理する場合、他にも以下のようなデメリットが発生します。

あなたのサイトはモバイルフレンドリー？確認方法2つ

最後に、モバイルフレンドリーなサイトかどうかを確認する方法を2つ紹介します。これらを用いると「モバイルフレンドリーなサイトか？」「モバイルSEOの対策において改善すべき点はあるか？」などを確認できます。

1. PageSpeed Insightsを使う

まずは、PageSpeed Insightsを行う方法です。PageSpeed Insightsとは、Googleが提供する無料ツールで、使い方はとてもシンプル。確認したいWebページのURLを入れるだけなので、1分もあれば簡単に確認できます。

試しに、当メディアにある「【完全網羅】オウンドメディアを運用する目的5つ！役割・始め方・注意点まで徹底解説」の記事をテストしてみます。

まず、テストしたいページのURLを入れ、「分析」をクリック。

「携帯電話」の「SEO」という場所を確認。ここが緑またはオレンジであればモバイルフレンドリーとなっています。

ちなみにここで点数が低く問題がある場合は、SEOの部分を押すと詳細が確認できます。その原因を改善していきましょう。

方法② Google Search Consoleを使う

次に、Google Search Consoleを使う方法です。 Google Search Consoleは、Googleのアカウントを取得すると使えるようになります。

まず、Google Search Consoleの「今すぐ開始」をクリックしてGoogleアカウントでログインしましょう。

次に、メニューバーの「モバイルユーザビリティ」をクリックしてください。

すると、問題のないときは「エラーは見つかりませんでした」と表示されます。一方、問題があったときはエラーの内容やエラーに該当するページが表示されます。

なお、これらの2つはどちらも同じ「モバイルフレンドリーかどうかを確認する方法」ですが、使う目的が少し異なります。

Webページ単体をチェックするならPageSpeed Insights、サイト全体を確認したいならGoogle Search Consoleと覚えておいてください！

モバイルのSEO対策に関してよくある質問

モバイルユーザーの検索行動の特徴は何ですか？

モバイルユーザーは、知りたいことを「すぐに」「短時間で」解決したい傾向が強いと言われています。

検索回数自体もPCより多く、移動中・隙間時間などでの検索が中心です。そのため、ページの読み込みが遅かったり、情報が分かりにくいとすぐに離脱されてしまいます。

さらに、音声検索や地図検索など、スマホ特有の検索方法を利用するケースも増えているため、スマホユーザーのニーズを踏まえたSEO対策の重要性がますます高まっています。

モバイルSEO対策を実施する企業はどのようなメリットがありますか？

モバイルSEOを強化することで、スマホユーザーからのアクセスを効率よく獲得でき、サイト全体の検索順位向上も期待できます。

検索エンジンはモバイル対応も重視しているため、モバイルフレンドリーなサイトは評価されやすく、結果的に自然検索からの流入が安定しやすくなります。

モバイルでのコンテンツ表示の工夫にはどんな方法がありますか？

モバイル画面はPCより小さいため、情報を短く・分かりやすく・見やすく表示する工夫が必要です。

たとえば以下のような施策が効果的です。

• 重要な情報は上部に配置する
• 1文を短くしたり箇条書きを活用したりして、読みやすくする
• 画像や装飾を最適化し、読み込み速度を低下させないようにする

これらを意識することで、ユーザーがストレスなく閲覧でき、SEO評価の向上にもつながるでしょう。