SEOで重要！モバイルファーストなサイト制作とは？

最近、「モバイルファースト」という単語をよく聞きませんか？

サイトをはじめとしたウェブ上のコンテンツを管理しているIT企業大手「Google」は、スマホに対応したサイトを優先的に表示する施策を次々と発表しています。

このような状況で、適切な手法でサイトを制作し検索エンジンに評価されやすくする、つまり「SEO（検索エンジン最適化）」対策も含めてモバイルファーストでサイト制作を行う動きが主流になっています。

しかしウェブ制作初心者がモバイルファーストインデックスやらモバイルファーストやらと言われても、意味が理解できない場合もあるかと思います。

今回はSEOで重要なモバイルファーストについてご紹介します。自力でサイト制作を行いたいという方にも、外注してサイト制作を考えている方にもぜひ読んで欲しい内容になっています。

モバイルファーストの考え方

モバイルファーストとは？

モバイルファーストとは、スマホでサイトを閲覧しているユーザー（モバイルユーザー）のことを最優先にしてサイトを制作する考え方です。パソコンよりスマホでサイトを閲覧するユーザーが圧倒的に多い現状に即した考え方といえます。

モバイルファーストの思想を実現する際は、まずスマホ向けのデザインを考え、それをパソコン版にも落とし込んでいくといった手法がとられることが多いです。もちろんパソコンでサイトを閲覧するユーザーのこともおろそかにしてはいけません。

スマホ向けのデザインを最優先に考えながら、パソコン版でも使いやすいように工夫し、どんなときでもユーザーがサイトを見やすく、分かりやすい環境を作るのがモバイルファーストの本質といえます。

モバイルファーストの考え方がウェブ制作者の間で必須になったのは、検索エンジンを提供しているGoogleの動向も大きく影響しています。

Googleの最近の動向

Googleでは2015年4月に「モバイルフレンドリーアップデート」（サイトの検索順位を決めるアルゴリズム）を発表しました。これは当時スマホでのサイト閲覧ユーザーの増加に伴いGoogleが開発したアルゴリズムで、スマホ版サイトを重視するGoogleの姿勢がはっきり表れています。

モバイルフレンドリーの仕組みでは、スマホでサイトを閲覧するユーザーのUX（ユーザーがサイトを利用するときの体感）を高められる評価基準を規定しています。デザインがスマホ対応になっていないなど、スマホに適した内容のサイトではない場合、検索エンジンでの順位は良くなりません。

また、従来Googleではパソコン版のサイトを中心に評価を行い検索結果を表示していましたが、スマホでネットを閲覧しているユーザーが多くを占める現状には則さない評価方法になっていました。

こういった状況を改善するためにGoogleが2018年3月に実装を発表したのがモバイルファーストインデックスです。

モバイルファーストインデックスは、モバイル版のサイトを中心に評価を行い、Google検索エンジンの検索結果として表示します。これによって、よりモバイル版に適したコンテンツをユーザーが見つけやすくなったといえます。

モバイルファーストインデックスによって既存のパソコン版サイトがGoogleから評価されずに順位が落ちるということはありませんが、Googleが検索結果を決める要素としてモバイル版サイトを第一と考え、スマホなどのモバイル端末で閲覧しやすいサイトを評価する方針であることからモバイル端末に適したサイトの制作は優先課題といえます。

モバイルファーストはスマホでサイトを見るユーザーが圧倒的に多い現代では合理的な考え方です。ウェブ制作現場でもモバイルファーストを主軸にサイトを制作してSEO対策を行う動きが当たり前になりつつあります。

▼関連記事

モバイルファーストを行わないとどうなるの？

ここまででモバイルファーストの概要についてはご理解いただけたかと思います。では、モバイルファーストを行わないと、どのような問題が起こるのでしょうか？

次のようなことが考えられます。

• スマホ環境でサイトが見にくく、ユーザーが離脱してしまう
• Googleから評価されにくく、順位低下などの影響がある
• 企業イメージの低下につながる

サイトが見にくく、ユーザーが離脱してしまう

これは一番イメージしやすい問題です。

例えばスマホの小さい画面で、横幅が画面からはみ出してしまうパソコン版のサイトを閲覧するとどうでしょうか？「画面に収まらないし、横に目を動かさないといけなくて見るだけで疲れる・・・」と思う方も多いと思います。

このようにパソコンにしか対応していないサイトだと、スマホユーザーのユーザビリティ（サイトの使い勝手）が下がってしまいます。スマホでサイトを閲覧するユーザーはサイトが見づらいと離脱してしまい、それは、見やすいサイトであれば商品情報を確認できて気に入れば購入してくれたであろう見込み客を逃がしてしまうことにもつながります。

特に20代～30代のユーザーはスマホでサイトを見ることがほとんどです。20～30代のユーザーをターゲットにしてサイトを公開している場合は、ユーザーがサイトからの離脱するのを防ぐためにもモバイルファーストでサイトを作り直すのが急務と言えるでしょう。

Googleから評価されにくく、順位低下などの影響がある

前述したように、Googleではモバイルフレンドリーによってスマホに対応できていないスマホサイトを評価しない方針を取っています。スマホに対応していない見にくいサイトのままですと、他のスマホ対応サイトと比べて検索結果の表示順位が下がってしまいます。

また、Googleでは定期的にアルゴリズムの見直しを行っています。将来、スマホでサイトを閲覧するユーザーの増加に伴い、モバイルフレンドリーの評価基準がさらに厳しくなる可能性があります。モバイルファーストインデックスが完了してしまってから慌てるのではなく、スマホ非対応のサイトは今のうちに対策を実施することをおすすめします。

企業イメージの低下につながる

モバイルファーストで制作されていないサイトはスマホで見にくく、またSEO対策としても不十分です。モバイル端末で閲覧する場合、当然ユーザーはスマホに対応していないサイトより対応しているサイトの方を好むので、例えばコーポレートサイトなら、「まだスマホに対応していない古臭いサイトを提供しているんだな」と企業イメージの低下につながりかねません。

将来的にも、既存のサイトがまだスマホ対応していない場合は、モバイルファーストの考えに基づき、スマホに対応したアップデートを行っておくべきです。

モバイルファーストでサイトを制作するには

ここからは、実際にモバイルファーストに則ってサイトを制作する方法をご紹介します。サイト制作時の参考になればと思います。

次の2つのポイントをみていきましょう。

• 既存のサイトでの対策
• 新しく制作するサイトでの対策

既存のサイトで対策

既存のサイトは、特に少し前の技術で制作されたサイトは表示が固定されていてパソコンに適したレイアウトになっているものが多く、スマホサイトでどう対応すればよいか迷うのではないでしょうか。

ここで紹介する方法で、モバイルファーストに対応したサイトにアップデートしましょう。

レスポンシブデザイン用のCSSファイルを追加する

レスポンシブデザインとは、「ウェブサイトの閲覧環境によりウェブサイトのデザインを適宜変更して最適なデザインにする」技術です。既存のサイトのディレクトリ（サイト内のファイル構造）にこのレスポンシブCSSファイルを埋め込んでサイトとリンクさせれば、モバイルファーストに沿ったスマホで見やすいサイトが作成できます。

ただしレスポンシブCSSファイルを記述する際はCSS（サイトを装飾する技術）の知識が必要になってきます。自由度の高いデザインを既存のサイトに実装したいときは、レスポンシブCSSファイルの新規作成が適しているでしょう。

弊社サイトでレスポンシブCSSファイルの詳しい実装方法を紹介しているので、ぜひこちらもご参考ください。

モバイル版のサイトを新規作成する

パソコン版のサイトのみの場合、モバイル版のサイトをサーバーの仮想ディレクトリに別途新規作成してスマホに対応させる方法もあります。

ただし、パソコン版とモバイル版のサイトで同じ情報を別々に更新しなければならないため、保守および運用に手間がかかるのが難点です。

「HTML4」など旧式の言語で作成されている古いサイトがあるときは、保守・運用の手間も考えて古いサイトを閉鎖してモバイル版のサイトを新規作成して公開するといった手法もあります。しかし、この方法では今まで獲得したアクセス数がリセットされて0になってしまうリスクもありますので、既存のサイトをレスポンシブ対応させた方が得策です。

読み込み速度を意識する

即時に情報を閲覧できるようにすることが、スマホ版のサイトでは重要になってきます。モバイルファーストを実践するときは、パソコンより処理能力が劣ることを念頭にスマホページの読み込み速度をより意識したサイト制作を心がけましょう。

一般的には読み込み時間が3秒を超過するとサイトの直帰率（ユーザーが他のページを見ずにサイトから離脱してしまう割合）が一気に増えます。少なくともスマホ版サイトを制作するときは3秒、出来れば2秒前後でページを読み込んで表示できるようにしておきましょう。読み込み速度が速いサイトはGoogleの検索エンジンからも評価されやすく、読み込み速度を上げるのはSEO対策にも有効です。

新しく制作するサイトでの対策方法

新しく制作するサイトは、モバイルフレンドリーやモバイルファーストインデックスを常に意識して、次のポイントを考慮しましょう。

• レスポンシブデザインに対応させる
• PC版とモバイル版、2種類のサイトを別々に作成する（※非推奨）

レスポンシブデザインにする

新しく制作するサイトの場合、前述したレスポンシブデザインの対応を心がけましょう。

コーディング（サイトを決まった形式でプログラミング言語を使って作成する）する場合は、無駄な記述を省いてセマンティック（検索エンジンから見ても分かりやすい効率的な構造）なサイトを制作しましょう。セマンティックなサイトというのはレスポンシブも実装しやすく、構造自体も検索エンジンから評価されやすいため、SEO対策に有益なサイトです。

一からコーディングをしなくても、サイト制作サービスを使えば簡単にサイトを作ることができます。

おすすめは「WordPress」。世界中で最もシェアが高いCMS（コンテンツ・マネジメント・システム）であるWordPressは、テーマ（サイトの金型）を選んで簡単にサイトを制作できます。

また、テーマは無料で取得でき、すでにレスポンシブデザインに対応しているテーマも多いので、モバイルファーストに対応したサイトも簡単に作成できます。有料のテーマを使えば、本格的なデザインのサイトを制作できます。コーディングに自信がない、またはサイト制作に時間を掛けずにモバイルファーストに対応したい場合はWordPressなどのCMSサービスの利用がおすすめです。

PC版とモバイル版、2種類のサイトを別々に作成する（※非推奨）

PC用のサイトと、スマホ用の2つのサイトを別々に作成する方法もあります。しかし、パソコン版とスマホ版サイトでユーザーに体験して欲しい内容が違うなど、明確な目的がない限りはレスポンシブ対応でサイトを制作すべきです。

まとめ

本稿では、SEOで重要になるモバイルファーストとモバイルファーストに対応するサイトの制作について解説してきました。

スマホでサイトを閲覧するユーザーの数が増加していることを考えると、スマホに対応していないサイトを公開していると、アクセス数が下がるなどサイト運営していくうえでトラブルが発生します。レスポンシブデザインなど、モバイルファーストを意識したサイト制作を行って、Googleとユーザーに評価され、多くの人に閲覧されるサイトを制作していきましょう。

▼関連記事