アイキャッチ画像: デスクの上でパソコンを使用している

こんにちは、森山です。 滋賀県は秋も深まりすっかり寒くなってきました。滋賀県には紅葉の見どころスポットもたくさんありますので、これからの紅葉の季節が楽しみです。

さて、今日のブログではこれからのスマホマーケティングには欠かせない「モバイルフレンドリー」について、おさらいしていきます。

「モバ・・?フレ・・・??なにそれ?おいしいの?」」という方も「最近よく耳にするけど詳しくは知らない・・」方もぜひ参考にしていただければ幸いです。

モバイルフレンドリーって?

「モバイルフレンドリー」とは、ホームページをスマートフォンなどのモバイル端末での表示に最適化( = スマートフォン対応)することを指します。

今年2015年の2月26日に、Googleは「モバイルフレンドリーなサイトをモバイル検索結果で優遇するようアルゴリズムを変更する」と発表、4月21日からすでに適用が開始されました。「モバイルフレンドリーであること」はGoogleが検索結果のランキング要素に用いる評価基準となっているのです。要するに「スマホ対応しているサイトの方が検索結果で上位に表示されやすい」ということです。

では、なぜGoogleはこのような変更をしたのでしょうか。また、モバイルフレンドリーな(スマートフォン対応している)サイトとは、具体的にはどのようなサイトでしょうか。

今回のブログではそれらについて、Googleが公式に発表しているモバイルガイドを参考に、簡単に分かりやすくお伝えしていきます。

まずはチェックしてみましょう

Googleは、ページ設計がモバイルフレンドリーであるかどうかをテストするための専用サイトを設けています。URLを入力するだけで簡単に確認できますので、自社サイトがモバイルフレンドリーかどうかまずは試してみてください。

モバイル フレンドリー テスト - Google

ちなみに弊社のホームページはもちろんモバイルフレンドリーです!

スタジオ・ウミサイト-モバイルフレンドリーテスト結果の画像

ウェブサイトをモバイルフレンドリーにする理由

そもそもなぜ、「モバイルフレンドリー」にする必要があるのでしょう?その答えは簡単です。ユーザーがモバイルからアクセスした場合も使いやすいサイトであることがWebビジネスではとても大切だからです。

というのも、スマホ対応していないPC版サイトはコンテンツを読むためにいちいちピンチやズームなどの操作が必要です。そのちょっとした面倒な動作が、ユーザーに「見づらいサイト」「使いづらいサイト」という印象を与えてしまうのです。もし同じ内容のサイトで見やすいサイトと見づらいサイトがあったら、もちろん見やすいサイトを見たいですよね。ユーザーがサイトを閲覧する際に不便さを感じれば感じるほどサイトの離脱率(サイトを閉じる、あるいは、別サイトに移動してしまう率)が高まってしまうのは明らかです。そのため、そうした面倒な操作を必要とせず、ストレスなくコンテンツを読むことのできるモバイルフレンドリーなサイトが求められるのです。

米国では、スマートフォン所有者の94%がローカル情報をスマートフォンで検索しています。また、モバイル検索の77%は自宅や職場で行われています。パソコンがある可能性が高いこれらの場所でもモバイル検索が行われているのは非常に興味深いことです。 ブログやWebサイトの運営、商品の販売など、ビジネスの種類を問わずBtoB企業でもモバイルは重要になってきており、今後もその重要性は変わらないとGoogleは考えています。

こういった背景からGoogleはモバイルフレンドリーなサイトを推奨しています。

モバイルフレンドリーの基本3原則

こちらはGoogleのモバイルガイド上で「モバイル向けサイトを構築する際に知っておくべき 3 つのこと」として紹介されている内容を簡単にまとめたものです。モバイルフレンドリーなサイトを構築するにあたっては、押さえなければいけない基本的な3つのポイントがありますのでぜひ参考にしてください。

1. ユーザーが快適に利用できるサイトを作成すること

モバイルフレンドリーであることの最大の目的は「ユーザーがスムーズに目的を達成できるようこと」です。

ユーザーがサイトを訪れた目的はなんでしょうか?ブログの記事を読むこと?お店の住所を調べること?商品のレビューを確認すること? ユーザーやサイトによってその目的はさまざまですが、サイトを訪れるほとんどのユーザーは何かしらの目的をもってサイトにアクセスしています。ユーザーがその目的を思い浮かべてからサイトにアクセスし、その目的をサイト上で達成するまでのプロセスの「全体」を考慮して、ユーザーがその目的を簡単に達成できるようにサイトを設計する必要があります。

そのために必要なこととして、Googleは下記の項目を挙げています。

  • まずはサイトの訪問者が行うと思われる手順の概要をまとめること
  • それらの手順をスマホやタブレットなどのモバイル端末でも簡単に行えるように設計すること
  • 設計の際はユーザーが必要な手順をできるだけ簡素化し、ユーザーインタラクションの回数を少なく抑えるようにすること

2. ユーザーが目的を簡単に達成できるかどうかを基準にWebサイトの有効性を測定すること

Googleはモバイルサイトの作成では、優先順位を付けることが必要といっています。 まず一番最初に考えないといけないのは、そのサイトにおけるスマホユーザーにとって一番大事な目的は何か、ということです。それが明らかになれば、その目的をユーザーに達成させることを最優先に設計を進めていきます。 モバイルサイトの使いやすさの基準は最終的には「ユーザーがいかにスムーズに目的を達成できるか」です。 使いやすくするためのデザイン手法もいろいろあります。どんな端末からアクセスしても一貫したUIで統一したエクスペリエンスを提供できるようにするとよいでしょう(こちらについて詳しくはGoogleが提唱しているマテリアルデザインについて書かせていただいたブログ記事近頃話題の「「マテリアルデザイン」についてまとめてみました」もご参考ください)。

Googleが引用している言葉に下記のようなものがありました。

「ユーザーはモバイル ショッピング サイトを利用する際に、使いやすさを最優先します。調査に回答したユーザーの 48% が、アクセスするモバイルサイトで最も重要視する品質は使いやすさである、と回答しています。」 (MediaPost(英語))

多くの企業がスマートフォンマーケティングに力を注ぎ始めている今、もっとも配慮すべきはその「使いやすさ」にあるといえそうです。

3. すべての端末で共通のテーマまたはデザインを選択する( = レスポンシブWebデザインの採用)

最後のポイントは「レスポンシブWebデザインを使いましょう!」ということですね! 「レスポンシブWebデザイン(RWD)」についてはこれまでのブログでも度々ご紹介させていただきましたが、改めて簡単に説明すると、PC・スマホなど端末に関係なく同じURL とコードを使用し、画面サイズに応じて表示を最適化する手法のことです。Googleは他のデザイン手法よりもレスポンシブWebデザインの採用を公式に推奨しています。 またレスポンシブWebデザインを採用することのメリットについてモバイルガイドで下記のように紹介しています。

RWD のメリットの 1 つは、サイトのバージョンを 2 つではなく 1 つ作成すれば済むという点です (つまり、サイトの PC 向けバージョンを www.example.com に作成して、モバイル バージョンを m.example.com に作成するという必要がなくなります。PC とモバイルの両方のユーザー向けに 1 つのサイト(www.example.com など)を用意するだけで済みます)。

レスポンシブWebサイトでは、前述の通り1つのURLだけで済みます。例えば www.example.com というURLをPC用に、モバイルには m.example.com、タブレットには t.example.com、とそれぞれの用意する必要がないのです。

Googleのモバイルガイドには下記のような引用もありました。

「Baines & Ernst では RWD を採用することで、複数のウェブサイトを作成せずに、様々な画面サイズにわたってサイトのエクスペリエンスを最適化することができました。ユーザーが一度のサイト訪問で閲覧するページ数が 11% 増加したほか、モバイルのコンバージョンが 51% 向上しました。」

コンバージョンとは、そのサイトのゴール(ユーザーが商品購入あるいは問い合わせなどの必要なアクション)を指す数のことですね。レスポンシブWebデザインの実装方法についてもgoogleの公式デベロッパー向けコンテンツに掲載されておりますので参考になさってみてはいかがでしょうか。

最後に

いかがでしたでしょうか? Googleが提供しているモバイルガイドはディベロッパー向けの内容となっているのでディベロッパー以外の方には少し分かりづらいと思います。本記事が少しでもモバイルフレンドリーなサイトを理解するための一助になればうれしいです。


共に働く新しい仲間を
募集しています

スタジオ・ウミは「Drupal」に特化したサービスを提供する Drupal のエキスパートチーム。
フルリモート&フレックス制だから、働く場所を選ばず時間の使い方も自由です。
そんなワークライフバランスの整った環境で、当ブログに書かれているような
様々な技術を共に学びながら、Drupalサイト開発に携わってみたい方を募集しています。
まずはお話だけでも大歓迎!ぜひお気軽にご連絡ください。