スマートフォンの普及に伴い、モバイルフレンドリーの重要性はますます高まっています。モバイルフレンドリーはSEO対策においても重要であり、検索順位を上げるためには必須の施策といえるでしょう。
本記事では、モバイルフレンドリーの概要やSEOとの関係、Webサイトをモバイルフレンドリーするための具体的な方法を解説します。「自社サイトをモバイルフレンドリーにしたいが、なにから手をつければ良いか分からない」とお悩みの方は、ぜひ参考にしてみてください。
目次
モバイルフレンドリーとは、Webサイトの表示をスマートフォンやタブレットなどのモバイル端末用に最適化することです。パソコン画面用に作成されたWebサイトをモバイル端末で閲覧すると、ページの拡大・縮小が必要だったり、文字が小さくて見えづらかったりと、なにかと不便が生じることがあります。
総務省の「通信利用動向調査（2022年）」によると、個人がインターネットを利用する際に用いる端末はスマートフォンが最も多いという結果になりました。パソコンやテレビに次いで、タブレット型端末でインターネットを利用している人の割合も高く、モバイルフレンドリーの重要性は高まっていると言ってよいでしょう。
モバイルフレンドリーはモバイル端末の利用者に配慮したものですが、実はSEO的な観点からも重要度の高い取り組みです。
Googleが2015年に行ったアップデートにより、スマートフォンでの閲覧を考慮していないページは、検索順位が下がるようになりました。さらに、2019年にはクローラーをスマートフォン用のものに変更し、モバイル用ページの情報を優先的に集める「モバイルファーストインデックス（MFI）」を採用しています。
※クローラーとは…検索エンジンが検索順位を決定するための情報を集めるロボット
もちろん、現在のアルゴリズムにも組み込まれているため、SEO対策を実施するうえでモバイルフレンドリーは必須要素と言ってよいでしょう。もしもモバイルフレンドリーへの対応を怠った場合、Webサイトの検索順位に深刻な影響が及びかねません。
自社のWebサイトがモバイルフレンドリーかどうか確認する方法はいくつかありますが、今回はGoogleが提供する機能を使用したものを紹介します。
Googleは、「モバイルフレンドリーテスト」というツールを提供しています。以下の手順で判定したいWebページを入力し、モバイルフレンドリーになっているかどうかチェックしましょう。
テストしたURLがモバイル端末で正しく表示される場合は、「このページはモバイルフレンドリーです」と表示されます。一方、Webページに問題がある場合は「このページはモバイルフレンドリーではありません」と表示され、修正すべき内容がメッセージとして表示されます。
（例）
モバイルフレンドリーテストで「不合格」となった場合は、上記のようなメッセージを一つひとつ確認し、改善策を講じましょう。
次に紹介するのは、Google Search Console（サーチコンソール）の「モバイルユーザビリティ」という機能を用いたチェック方法です。Googleサーチコンソールとは、検索エンジンにおけるサイト状況の分析ツールです。無料でさまざまな機能を利用できるため、Webサイトを運営するうえでは欠かせないツールといえます。
使い方は簡単で、Googleサーチコンソールにログイン後、メニューから「モバイルユーザビリティ」を確認するだけでOKです。モバイルフレンドリーテストとは異なり、Webサイト内のページを一括でチェックできるというメリットもあります。
エラーの詳細になにもメッセージが表示されていなければ、そのWebサイト内のページはモバイルフレンドリーに対応しているということです。
一方、改善すべき内容がある場合は、「モバイルユーザビリティレポート」に詳細な内容が表示されます。前述のモバイルフレンドリーテストと同様に「クリック可能な要素同士が近すぎます」「テキストが小さすぎて読めません」といったメッセージが表示されるので、指摘に従って改善策を講じましょう。また、それぞれのメッセージをクリックすると、対象となるWebページのURLを確認できます。
Webサイトをモバイルフレンドリーにする方法としては、次の3つが考えられます。
具体的な手順をそれぞれ解説していますので、ぜひ参考にしてください。
レスポンシブデザインとは、ユーザーが使用している端末のサイズに合わせてWebサイトの表示を最適化するデザインのことです。ユーザーが使用する端末は多岐にわたり、それぞれ画面サイズが異なります。たとえば、同じApple社から販売されているiPhoneやiPadでも、世代をまたぐと画面サイズは大きく異なります。Androidの場合は統一の規格がなく、さまざまなメーカーが独自に製品を開発しているため、なおさらです。
レスポンシブデザインを採用すれば、ユーザーが使用している端末に合わせて、レイアウトを自動的に最適化できます。画面サイズに合わせて複数のページを用意する必要はなく、共通のデザインでWebサイトを制作できるため、ページの管理や修正も容易です。
レスポンシブデザインの実装方法としては、主に以下の2種類があります。
HTMLやCSSといったプログラミング言語の知識がある場合は、次の2つのステップでレスポンシブデザインを実装しましょう。
WebサイトをHTMLファイルで作成した場合は、すべてのHTMLファイルのヘッダー部分に以下のコードを記述します。
<meta name=”viewport” content=”width=device-width,initial-scale=1.0″>
すると、Webページを訪問したユーザーが使用しているデバイスの画面サイズを読み取り、パソコン用・モバイル用のページのどちらを表示すべきか判断できます。
なお、WebサイトをWordPressで作成している場合は、上記のコードを「header.php」に記述しましょう。
メディアクエリとは、ユーザーの画面環境に合わせて、Webページのスタイルやレイアウトを調整する機能です。CSSファイルにメディアクエリを記述することで、パソコン用とモバイル用のWebページを切り替えられるようになります。
まずは、パソコン用ページを表示する値を以下のように指定しましょう。
@media screen and (min-width: 最低画面幅の数値px
たとえば、最低画面幅の数値を481pxに設定すると、ユーザーの利用端末の画面幅がそれ以上の数値だった場合はパソコン用ページが表示されるようになります。
次に、モバイル用ページにおける最高画面幅の数値を設定します。
@media screen and (max-width: 最高画面幅の数値px)
これにより、指定した画面幅以下の画面サイズでは、モバイル用ページが自動的に表示されるようになります。
WordPressでWebサイトを作成した場合は、プラグインを利用する方法もあります。
WordPress向けのプラグインは多岐に渡り、なかにはレスポンシブデザインを手軽に実装できるものもあります。たとえば、「WPtouch」というプラグインが有名です。
ただし、複数のプラグインを利用すると、コンテンツの表示に問題が生じる場合があるため注意しましょう。
ダイナミックサービングとは、パソコン用とモバイル用にそれぞれページを用意し、ユーザーが利用している端末に合わせてデザインやレイアウトを変更して表示させる方法です。
レスポンシブデザインが「1つのデザインを画面サイズに合わせて自動的に調整する」のに対し、ダイナミックサービングは「それぞれの画面サイズに合わせて作成したページを、自動的に表示させる」という違いがあります。
ダイナミックサービングを利用したページは、レスポンシブデザインのページと比べて、表示速度が速いというメリットがあります。これは、パソコン用とモバイル用のページで、それぞれ表示するコンテンツの内容を変えられるためです。たとえば、パソコン用のページでは画像や動画を配置してリッチにしつつ、モバイル用のページでは画像は必要最低限に抑えるといったこともできます。
ページの表示速度はGoogleの評価ポイントのひとつでもあり、SEO的にも重要な要素です。
ただし、ダイナミックサービングを実装するためには、サーバーサイドの知識が必要となります。そのため、レスポンシブデザインと比べて導入や管理のコストがかかりやすく、自社での対応が難しい場合は別途外注費も発生するでしょう。
パソコン用とモバイル用で、それぞれ別々のURLのページを作成するという方法もあります。ただし、Googleは1つのコンテンツを2つ以上のURLで運用することを推奨していないため注意しましょう。SEOで不利にならないためには、クローラーに両者が同一のコンテンツであることを知らせるための設定が必要です。また、CSSも分けて作成する必要があるので、多くの手間がかかってしまいます。そのため、基本的にはレスポンシブデザインかダイナミックサービングのどちらかの方法を選択するのがおすすめです。
モバイルフレンドリーとは、スマートフォンやタブレットなどのモバイル端末でWebページを快適に閲覧できるようにすることです。Googleの方針によって、モバイルフレンドリーに対応していないページは検索順位が下がりやすいとされています。SEO対策の一環として、モバイルフレンドリーに取り組みましょう。
社内リソースでの対応が難しい場合は、SEO施策の専門家に相談するのがおすすめです。
アイオイクス 株式会社では、お客様のWebサイト運営を支援する伴走型のコンサルティングサービスを展開しております。さまざまなSEOプロジェクトに携わってきた経験を活かし、貴社の事業目的や「伝えたいこと」に合わせたサポートを提供いたします。
SEO施策に関する課題やお悩みがございましたら、まずはお気軽にご相談ください。
2002年設立から、20年以上に渡りSEOサービスを展開。支援会社は延べ2,000社を超える。SEO/CRO（コンバージョン最適化）を強みとするWebコンサルティング会社。日本初のSEO情報サイトであるSEO Japanを通じて、日本におけるSEOの普及に大きく貢献。
SEO最新情報やセミナー開催のお知らせなど、お役立ち情報を無料でお届けします。
