モバイルファースト時代のWebサイト、考え方とデザインのポイント

パソコンよりもスマートフォンの普及率が高いと言われる現在、Webサイトもスマホ対応が重要です。かつてはパソコン向けに作ったサイトをモバイル対応にするのが一般的でしたが、今は「モバイルファースト」が求められています。SEOにも影響するモバイルファーストについて、考え方とデザインのポイントなどを解説します。

モバイルファーストとは最初にスマホサイトを作ること?

2018年度版(平成30年)の「情報通信白書」(総務省)によれば、2017年におけるスマートフォンの普及率は75.1%とパソコン(72.5%)を上回っています。これは、電車の中を見回せば、ほとんどの人がスマホに目をやっていることからも実感できます。つまり、特別なケースを除いて、一般の人が見るWebサイトであればスマホ対応は必須になったと言っても過言ではありません。

かつては、Webサイトと言えばパソコン向けサイトのことを指し、企業もまずはパソコンで閲覧するためのサイトを作りました。その後、スマホの普及が進みモバイル対応が必要だと気付いた企業の多くは、すでにあるパソコン向けサイトをモバイル向けに改修しました。パソコンとスマホでは画面サイズが違うので、小さい画面でも見やすいように、不要な部分を削ってコンパクトにしたのです。

「ファースト」とは作る順番でない

それなら、スマホ向けサイトを先に作れば「モバイルファースト」なのでしょうか。実は、モバイルファーストの「ファースト」は、作る順番のことではありません。近いのは「お客様第一主義」と言う時の「第一」でしょう。

スマホに最適化され、スマホを利用するユーザーが最も快適な状態になることこそが「モバイルファースト」なのです。すなわち、スマホ向けサイトは、スマホユーザーにとって本当に必要な情報や機能は何かということを考えて作られなければなりません。そう考えれば、小さい画面に入りきらないからといって要素を削ったWebサイトでは、お客様第一主義にはならないということが分かるでしょう。

多様化するデバイスに対応したWebサイト作り

さて、話のメインをスマホにしましたが、ユーザーが使うデバイスは多様で、モバイル端末はスマホだけではありません。タブレットを持ち歩いている人もいますし、フィーチャーフォン(ガラケー)を使っている人もいるでしょう。もしかしたら、今後新しいデバイスが流行るかもしれません。それぞれに適したWebサイトを個別に作るのは非常に大変で、コストも更新の手間もかかります。そこで、モバイルファーストでは一つのソースから各デバイスに対応する「ワンソース・マルチデバイス」という考え方がポイントになります。

その手法の一つが、「レスポンシブWebデザイン」です。情報は一つのHTMLで、大きさや位置などの表示の指定はデバイスに応じたCSS(Cascading Style Sheetsカスケーディングスタイルシート)で指定してデザインを切り替えます。デザインが複数あっても情報は一つなので、修正や更新は一度で済みます。どのように切り替えるかはデザイナーの腕の見せ所ですが、元は一つのHTMLなので、スマホとパソコンでコンテンツの順番を変えるなど、大幅に見せ方を変えることはできません。

もう一つの手法は、CMS(コンテンツマネージメントシステム)でコンテンツを一元管理し、各デバイスに対応する方法です。CMSではコンテンツをテンプレートに分けて管理するので、デバイスに合わせたテンプレートを作れば、ユーザーは最適なデザインのWebサイトを見ることができます。

モバイルファーストのデザインとは

パソコンはどちらかといえば集中して見ていることが多いのに対し、スマホは他に作業をしながら見ていることも多いなど、両者はWebサイトを見るシチュエーションやニーズが異なります。また、スマホは片手で操作することも多いので、画面の上の部分がタップしにくいというような特性もあります。モバイルファーストのデザインでは、このようなスマホを使用するシチュエーションや特性を考慮しなければなりません。重要なのは、少ないクリックとシンプルな動線です。パソコンとスマホの違いや、気を付けるべき点を以下にまとめます。

画面サイズ

パソコンは大きな画面であるのに対し、スマホは小さな画面です。そのためスマホ向けでは、文字や要素が小さすぎるのは可読性が下がるのでNGです。

操作性

パソコンはマウスとキーボード、スマホはタップとスワイプが基本です。スマホでは、タップ要素が小さかったり、タップ要素同士が近すぎたりするとうまくタップできません。また、スマホで文字を入力するのが不得手な人がいる点にも留意すべきでしょう。

利用場所

パソコンは基本的には室内利用に対して、スマホは室内・屋外両方で使用するタイミングがあり、利用場所・環境も異なります。パソコンはデスクで座って見るのが基本ですが、スマホは移動しながら利用することもあります。

通信環境

有線接続をしているパソコンなどは通信が安定している一方で、移動しながら使う事の多いスマホは通信が不安定になるケースがあります。通信が切れた時に、ページの情報量が多いと表示の途中で再ダウンロードになるので、ページネーション(ページ送り)を工夫するなど、ダウンロードに時間がかからないデザインが求められます。また、スマホは通信費用が従量課金の場合もあるので、データ通信量を抑える工夫が必要になります。

その他

ある企業サイトに、一人のユーザーが複数のデバイスを使ってアクセスしているケースもあります。例えば、通勤途中にスマホで閲覧していたWebサイトを、出社後にパソコンで再度アクセスするといった行動です。その時、スマホ向けとパソコン向けで情報が異なっているというのはもってのほかです。また、すべての情報を一覧できるようなページを作っても、スマホではそれをじっくり見る余裕はないかもしれません。サイトにログインが必要で、そのユーザーが何度目にアクセスしたか分かるなら、毎回同じ情報を出すべきではないこともあるでしょう。

モバイルファーストインデックス(MFI)の影響

次に、モバイルファーストのSEOについて考えてみましょう。Googleは、2018年3月に「モバイルファーストインデックス(MFI)を開始する」と発表しました。これは、Googleの検索結果の順位を決めるために、「これまではパソコン向けサイトで判断していたのを、これからはスマホ向けサイトで判断する」ということです。Googleは1年半前からこの取り組みをアナウンスしていたので、急いで対応したという企業もあるかもしれません。

Googleは、Webサイトをインデックス(検索エンジンのデータベースに格納)して、順位付けしています。これまではパソコン向けサイトをインデックスしていたので、スマホでアクセスした時に「思っていたのと違う」ということが起きていました。それを改善するのが、MFIの目的です。2018年3月からすべてのWebサイトでMFIに切り替わったというわけではなく、順次切り替わるようです。

また、スマホ向けサイトしかランキングに出ないという意味ではありません。パソコン向けサイトしか作っていない場合はこれまで通りです。MFIによって明らかに悪影響があると考えられるのは、パソコン向けのWebサイトの情報を削って軽くしただけという場合でしょう。これまではコンテンツの充実したパソコン向けのサイトでランキングされていたのが、内容を省略したスマホ向けサイトでランキングされるようになると、検索順位が下がる可能性があります。

MFIによって影響を受けるWebサイトとは?

下記に、MFIによってどのようなWebサイトが影響を受けるのかを見ていきます。

パソコン向けだけでスマホ向けはない

影響は受けません。

レスポンシブWebデザイン

パソコン向けとスマホ向けの情報が同じなので影響は受けません。ただし、内容が同じためにスマホ向けの表示が重いという場合は影響があります。Googleは、ランキング要素において表示の軽快さも重視しているためです。

ほぼ同じ内容を同一URLで出し分け

CMSを使って、ユーザーのデバイスによって動的にWebサイトを出し分けているなど、内容に違いがなければ影響は受けません。

同一URLで出し分けているが、スマホ向けの情報が薄い

内容が薄いスマホ向けサイトでインデックスされてランキングが決まるので、パソコン向けが充実した内容でも評価が下がる可能性があります。

パソコン向けとスマホ向けを別URLで運用

Googleはスマホ向けをインデックスするので、内容が薄ければ評価が下がる可能性があります。

軽快に表示されるWebサイトが求められている

すべての場合に関係があると考えられるのは、表示の軽快さでしょう。スマホ向けサイトの表示が遅いとパソコン向けの評価にも影響してしまうので、表示に時間のかからないデザインの重要性がさらに増すことになります。Web担当者にしてみれば、「パソコン向けとスマホ向けの両方をインデックスして、それぞれで評価してくれればいいのに」と思うかもしれません。しかし、世界中のWebサイトをインデックスしているGoogleにとっては、それは難しいのです。つまり、SEOの観点からも、モバイルファーストのデザインが必要になっているということです。

マイクロモーメントという考え方

SEOの話題として、「マイクロモーメント」というキーワードがあります。SEOによってWebサイトの順位を上げるためには、ユーザーの検索意図を把握して、それに応じたコンテンツを作る必要があります。

検索意図は、インフォメーショナル(情報型=何かを知りたい、疑問を解決したい)、トランザクショナル(取引型=何かを購入したい、資料をダウンロードしたい)、ナビゲーショナル(案内型=特定のページにアクセスしたい)という3分類が一般的です。これに対してGoogleは、スマホ時代の検索意図はもっと刹那的だという立場を取り、スマホでの検索を以下の4つのマイクロモーメント(××したい瞬間)に分類しています。

①知りたい瞬間(I-want-to-know moment)

情報収集のための検索です。検索意図の分類ではインフォメーショナル(情報型)にあたります。知りたい気持ちに応えるには、従来からWebサイトに必要だと言われている「情報の網羅性」「視点の公平性」「情報の信頼性」が重要になります。

②行きたい瞬間(I-want-to-go moment)

特定の場所に行きたい時の検索です。施設名や「ランチ」などで検索すると、Googleは「検索者は行きたいと思っている」と判断します。その場合、検索結果画面に地図が出たり、スマホのGPS情報を使って近くの施設を上位に表示したりします。逆に言えば、検索者の現在地から遠いと良いサイトであっても表示されません。

③やってみたい瞬間(I-want-to-do moment)

やり方を知りたい時の検索です。Googleはユーザーが、何かの作り方やメンテナンス方法を知りたいから検索していると判断すると、「手軽・簡単」「手順・材料」「コツ・注意点」など、特定のワードが入っているコンテンツが高く評価されます。

④買いたい瞬間(I-want-to-buy moment)

買いたい時の検索です。検索者が買いたいと思っているとGoogleが判断すると、上位には広告が表示されます。広告以外では、実際に多くの人が買っているサイトやクチコミ要素などが重視されます。

CMSなどを活用してモバイルファーストを実現

検索者が何をしたいと思っているかによって、Webサイトに必要な要素やデザインが変わってきます。スマホでの検索は要求がより細分化されていて、いわゆる「良いWebサイト」の条件を満たしていることが、必ずしもSEO的に有効ではありません。自社のWebサイトをどのような人に見て欲しいかを考え、適切なWebサイトにすることが重要です。デバイスの多様化やユーザー行動の複雑化に対応したWebサイト作りが求められているのです。

いかにしてユーザーに情報を届けるかということを考えると、Webサイトのモバイル対応はもちろん必要です。さらにSEOの観点でも、モバイルファーストの重要性が増しています。多様なモバイルデバイスに対応するには、リソースや知識が足りないと考えている企業やWeb担当者もいるでしょう。そうした場合は、CMSで一括管理するという選択肢も視野に入れて、時代に即した「お客様第一主義」のWebサイトを作っていきましょう。