モバイルファーストを意識したサイトを作る理由と方法

この記事では、モバイルファーストを意識したブログ制作をする意味について書きます。まだ書ききれていない部分もあるので、参考程度に読んでいただけると幸いです。

モバイルフレンドリーが必要な理由
モバイルフレンドリーテストの例

モバイルフレンドリーが必要な理由

まずはじめに、モバイルフレンドリーとは、どういう意味かというと、IT用語辞典サバナビによると次のように書いてあります。

モバイルフレンドリーとは、WEBサイト・WEBページをスマートフォンや携帯電話などのモバイル端末での表示に最適化＝スマホ対応することを意味する。モバイルフレンドリーはGoogleが検索結果のランキング要素に用いている評価基準である（2015年4月21日導入）。
モバイルフレンドリーなWEBサイト・WEBページは、拡大しなくても読みやすいテキストサイズ、横スクロールの必要がない、リンクやボタンがタップしやすい、Flashを使用していないといった点が挙げられる。
(http://sabanavi.com/seo-term/mobile-friendly/)

今までは、デスクトップユーザが大半だったのですが、スマホの登場と普及により、モバイル端末でのインターネット利用者がデスクトップユーザを追い抜こう（追い抜いた？）状況になりました。だからGoogleがモバイル対応しているサイトを検索結果の上位に表示しようと検索エンジンのランキング手法を変えました。TF/IDFとかPageRankというアルゴリズムがありましたけど、今はどれくらいの優先順位で使われているかは不明ですね。今、モバイルフレンドリーがどれくらい大事かというと、Googleが次のようなことを考えているからです。

要約すると、Googleさんは、デスクトップ用の検索結果（ランキング）とスマホ用の検索結果（ランキング）を別々で管理して、今後スマホ用の検索結果を主とします。モバイルフレンドリーになっていないサイトは、スマホ用の検索結果から除外する可能性があります。Googleさんは、ユーザが入力したキーワードに関する最適なwebsiteを提供するのが一番のお仕事なので、スマホで検索して読みづらいwebsiteが出てこないようにしようということですね。自分のサイトがモバイルフレンドリーかどうかを確かめるには、どうしたら良いかというと、最初に紹介したモバイルフレンドリーテストをするのが一番簡単です。

モバイルフレンドリーテストの例

(1)https://search.google.com/test/mobile-friendly?hl=ja へアクセス

(2)URLを入力してENTER

(3)結果が表示される

結果は、「モバイルフレンドリー」、、、。よかった！ただし、一部不具合があるようです（赤波線）。

モバイルフレンドリーになるための要素

モバイルフレンドリーとはどういう項目かというと、それだけで本1冊ぐらい書けそうな感じがしますので、概要だけを書きたいと思います。私の持っている知識も2015年の初めくらいの知識ですので、調べながら書いてみます。しっかり書いてあるのは、Googleの開発者用のサイトの「モバイル SEO の概要 | Mobile Friendly Websites」が良いですね。一言で書くとレスポンシブウェブデザイン（RWD)にしてくださいと書いてあります。HTMLに詳しい人じゃないと厳しいですね。一番簡単なのは、WordPress等のCMSのテンプレートでレスポンシブウェブデザインに対応したテンプレートを導入することです。私の「イクメンSEのメモ」もCMSのテンプレートがレスポンシブウェブデザインに対応したものです。

自前で、レスポンシブウェブデザインを実装しようとすると、HTMLとCSSとレスポンシブWebデザインの3つの知識が必要になりますので、それなりに大変です。レスポンシブウェブデザインについては、どこかでまとめられたらと思います。

モバイルサイトになるために重要なことが、Google開発者用サイトに書いてあったので抜粋します。