これから会社ホームページや個人ブログを構築しようと考えている方へ。

あとあと後悔したくなければ、必ずスマホ対応(モバイル対応)で制作してください。

これをしないと、最悪誰もあなたのサイトに訪問してくれなくなる可能性があります。

この記事でわかること
  • インターネット環境の多様化「PC→モバイルへ」
  • モバイルファーストの本当の意味
  • 知らないと大損するモバイルファーストインデックスとは
  • 実データ公開:このブログへの端末ごとのアクセス率

【結論】Webサイトはスマホ対応(モバイルファースト)で構築すべき

これからホームページやブログなどのWebサイトを作成していこうという方は、必ずスマホ対応で構築していきましょう。でないと、あとあと後悔することとなります。その理由はこの記事をご覧いただくことで十分ご理解いただけると思います。

インターネット環境は多様化している【PC→モバイルへ】

近年、インターネットを利用するユーザーの環境は多様化してきています。スマートフォンが普及する前までは、インターネットと言えばパソコンの前に座って行うものでした。ですが今では、スマートフォンをはじめとするモバイル端末からインターネットにアクセスする人が増えました。

参考までに、総務省のHPで公開されている、「インターネットの利用動向-情報通信機器の保有状況」のグラフを以下に示します。

(出典:総務省HP-情報通信機器の世帯保有率の推移

2017年までのデータですが、赤く囲んだ「モバイル端末全体」の世帯保有率は94.8%であり、パソコン保有率は72.5%となっていますね。

保有率から見ると、スマートフォンを始めとするモバイル端末が、パソコンを大きく抜いてしまっています。それに応じて、インターネットへのアクセス状況も、モバイル端末からのアクセスが増えているわけです。

ということは、Webサイトの制作者もモバイル端末でも快適に利用可能なサイトを構築して運用していく必要が高まりますね。

今ではほとんどのホームページやサイトがモバイル端末に対応していますが、いまだに対応できていないサイトもちらほらあります。

スマートフォンで閲覧していると、PC用のサイトで表示されてしまい、文字や画像が小さすぎて何が何だかわからないです。わざわざ拡大しながら見なければ閲覧できないサイトなんて、当然すぐ離脱しますよね。

皆様もこんな経験があると思います。

下の画像を見て下さい。もし僕が管理するブログ(このブログです)がスマートフォンでこんな表示のされ方をしたら、たぶん秒で「戻る」ボタンを押されています。

<拡大しないと見えないサイトの例>

ここで超重要なキーワードとして、「モバイルファースト」という言葉をご紹介します。Webサイトを制作していく上で、必ず知っておかなければならない概念です。

【超重要】モバイルファーストの本当の意味

これからの時代、Webサイトを作るためには、モバイルファーストで制作していかなければなりません。そもそもモバイルファーストという言葉を聞いたことがあるでしょうか。

意味を直訳すると、スマートフォンなどのモバイル端末向けのシステムから先に(ファースト)制作していく、、という感じになります。

ですが、モバイルファーストとはこういう意味ではないんですね。モバイルサイト→PCサイトというようにWebサイト制作の順番を言っているわけではありません。

僕もモバイルファーストについて色々調べた結果、モバイルファーストとは次のような意味だと理解しました。

  • ユーザーのニーズやサイトへのアクセス環境に合わせて、ユーザー視点で利便性の高いサイトを構築していくこと

今では大多数の人がスマートフォンなどのモバイル端末からネットへアクセスしています。ということは、Webサイトの制作者もユーザー視点に立って、最も利用者の多いモバイル端末でより快適に表示されるWebサイトを制作していく必要性が高まります。

今はスマートフォンといったモバイル端末がアクセスの主流となってますが、将来はどのような端末が登場しているかはわかりません。

ですが、そんな未来が来ても、やっぱりWeb制作者はその時のユーザーの利便性を考え、最適なWebサイトを構築していく必要がありますよね。

モバイルファーストとは、こういうWeb制作者にとっての心得のようなことを表していると言えます。

知らないと大損!Googleのモバイルファーストインデックス(MFI)とは?

Webサイトを構築して公開するのであれば、Googleのモバイルファーストインデックスについても知っておかなければなりません。理由は、自分が公開するサイトの検索エンジンでの順位に影響してくるからです。

モバイルファーストインデックスとは、これまでGoogleのクロール、インデックス、ランキングシステムなどが主にデスクトップ版(パソコン版)のコンテンツを対象にしてきたのを、これからはモバイル版のサイト(ページ)をインデックスやランキングに使用していくことです。

me

クロール”とはGoogle検索エンジンで管理されているロボット(クローラーと言う)が自分のWebサイトに来ることです。クローラーはWebサイトの情報を集めて持ち帰ります。するとWebサイト(ページ)がGoogleに登録(インデックスという)されます。

以下をご覧ください。

本日、Google は 1 年半の慎重な実験とテストの結果、モバイル ファースト インデックスのベストプラクティスに準拠したサイトの移行を開始したことを発表します。

これまで、Google のクロール、インデックス、ランキング システムでは、主にデスクトップ版のコンテンツが使用されてきました。そのため、その内容がモバイル版と大きく異なる場合、モバイル検索ユーザーに問題が発生する可能性がありました。 モバイル ファースト インデックスとは、モバイル版のページをインデックスやランキングに使用し、主にモバイル ユーザーが探しているものを見つけやすくすることを意味します。

(出典:ウェブマスター向け公式ブログ

つまり、GoogleはこれまでWebサイトの評価をするとき、パソコン向けのサイトを評価対象としてきました。インターネットアクセスをパソコンからするユーザーがメインだったためです。

ですが、その後はスマートフォンなどのモバイル端末からインターネットアクセスするユーザーが増え、パソコンからのアクセスを抜いてしまったので、これからはモバイル向け、つまりモバイルファーストで構築されたサイトを評価の基準とします、、ということです。

ということは、これからWebサイトを構築してGoogleで上位表示を狙うのであれば、当然モバイルファーストでサイトを構築しなければなりません。

これが、モバイルファーストインデックスの仕組みです。

【鉄則】Webサイトはモバイルフレンドリーで構築しよう!

モバイルフレンドリーとは、モバイルに友好的なWebサイト、つまりモバイル端末向けに最適化されたサイトであることを表します。

2015年4月21日にGoogleが全世界で実装したアルゴリズムです。これにより、スマートフォンに対応したWebページは検索順位が優遇され、逆に未対応のページは順位の引き下げに影響することになりました。

以下、Googleの記事を引用します。

モバイルによって世界は変わりつつあります。今日では、誰もがスマートフォンを持ち歩き、常にコミュニケーションをとったり情報を探したりしています。多くの国で、スマートフォンの数がパソコンの数を上回っており、モバイル フレンドリーなウェブサイトは、オンラインでの存在感を高めるうえで欠かせないものとなってきました。
お持ちのウェブサイトがまだモバイル フレンドリーでなければ、ぜひモバイル フレンドリー サイトにしてください。おそらく、サイトを訪れるユーザーの大半がモバイル端末を使用しているでしょう。

(出典:Google-モバイルに対応する理由

Googleのモバイルフレンドリーテストを行うことで、そのWebサイトがモバイルフレンドリーであるかどうかが判別できます。参考までにこのブログで実行すると、次のような結果が出ます。


WebサイトのURLを貼りつけるだけでチェックできるので、ぜひ試してみてください。

【実データ公開】Webサイトへの訪問者はモバイル端末からのアクセスが断トツです

ここまでモバイルファーストとか、保有率がパソコンを上回ったとかモバイル対応への重要性を説明してきましたが、実際のアクセス数は本当にモバイル端末がパソコンを上回っているのか、気になると思います。

なので、参考までにこのブログへのアクセスで一番使われているデバイスがわかる図を以下に示します。

このブログでは、過去28日間のアクセス状況が、モバイル:78.3%、パソコン:18.4%、タブレット:3.3%でした。

僕のブログでは、モバイル→パソコン→タブレットの順番にアクセスが多いです。圧倒的にモバイル端末からのアクセスが多いことがおわかりいただけると思います。

大切なWebサイトをモバイル対応で構築することの必要性がご理解いただけたでしょうか。

モバイルファーストなWebサイトを作る!⇒レスポンシブWebデザイン

ここまでさんざんWebサイトはモバイルファーストで作ろう、、と伝えてきたわけですが、ならいったいどうしたらモバイル向けのサイトができるのでしょう。

方法として考えられるのが2つ。

  • パソコン版サイトとモバイル版サイトを分けて2つ作る
  • パソコン版とモバイル版で共通のサイトだが、デバイスごとにデザインを変える

まず1つ目の方法だと、ユーザーが使用するであろうデバイスごとに複数のページを作らなければなりません。こういう管理の仕方だと、修正が必要となったときに、すべてのファイルに変更を加える必要があり、けっこう面倒です。おすすめできない方法かと。

2つ目の方法は、パソコン版とモバイル版で共通の1つのページだけれども、見る端末によってデザインを変更するものです。

パソコンの画面は大きいですが、スマートフォンは画面が小さいので、それぞれ同じページでもデザインを変えてあげる必要がありますからね。

これを一から自分でやろうとすると、Webページのスタイルを指定するためのプログラミング言語であるCSS(Cascading Style Sheets)の知識が必須となります。

PCやスマートフォン、タブレットなど、各端末ごとにデザインをCSSで指定します。イメージとしては、次のような感じ。

このように、どんなサイズの画面でも見やすく表示させることを、レスポンシブWebデザインといいます。

プログラミング経験のない初心者の方にはけっこうハードルが高いかと。

なので、一番手っ取り早くモバイルファーストなWebサイトを構築する方法は、レスポンシブWebデザインに対応したテンプレートを使用することです。有料版、無料版とあるので、好みに応じて使ってみてください。

ちなみにこのブログもレスポンシブWebデザイン対応のテンプレート「賢威」を使っています。余計なことを考えずともモバイルファーストなサイトが作れるので、かなり便利です。

まとめ

Webサイトを構築する上で重要なモバイルファースト、モバイルファーストインデックス、モバイルフレンドリーについて解説してきました。Webサイトを作る目的は、より多くのユーザーにアクセスしてもらうことです。そのためには、ユーザーにとって快適なサイトでなければいけません。必然的にモバイル対応のWebサイトを構築していく必要が生じるのですね。