知らないと手遅れ!?スマホ対応前に絶対知るべき5つのこと

<質問>

スマートフォンが流行っていますが、自社のWEBサイトではまだスマホ対応していません。
スマホ対応すべきでしょうか。またスマホ対応するとしたら、どのように考えるべきでしょうか。

<回答>

スマートフォン(以下スマホ)の普及やグーグルの動向を考えると、遅かれ早かれ対応したほうが良いでしょう。
ただし、スマホ対応と一言で書いても、いくつかの手段があります。
あなたのWEBサイトの目的や使用用途・運営状況などに応じて、あなたにとっての最適な手段は変わります。今日はそれを考えてみましょう。

スマホ利用の現状

年々増えるスマホ普及率

スマートフォンを持っていると回答した割合(2014)スマホ普及率は2014年末現在も伸び続け、この表のように約6割がスマホを所有しています。
若年層のスマホ利用率は7割を超えたと言われています。

また、スマホの普及率だけでなく、1日のうちにスマホを使用する時間も増加しました。スマホでWEBサイトを閲覧することも簡単にできるようになり、多くの人がスマホでWEBサイトを閲覧するようになりました。
別のデータでは、今までパソコンを使用してWEBサイトを閲覧していたユーザーが、スマホを使用して閲覧するようになったという傾向があります。

スマホが身近になったことにより、WEBサイト閲覧をする道具がPCからスマホに徐々に移行してきています。

あなたのWEBサイトに訪れるスマホユーザーの数を見る方法

では、実際にあなたのWEBサイトにスマホユーザーはどれだけ訪れているのでしょうか。
無料解析ツール「Google Analytics」を活用して、スマホユーザーの動向やセッションの推移を見ることができます。

GAで期間を指定する方法
①まず、レポートの期間を指定します。
GAの日別から月別に変更
②グラフの表示を日別から月別に変更します。
③新しいセグメントを追加する
③新しいセグメントを追加します。
④モバイルトラフィックを選び適用する。
④モバイルトラフィックを選択し、適用するボタンをクリックします。
モバイルユーザーの推移
⑤スマホを使用して閲覧したセッション数の推移がグラフで表示されます。

あなたのWEBサイトがスマホ対応できているか確認する方法

モバイルフレンドリーテストの画面Google提供の無料サービス「モバイルフレンドリーテスト」では、現状のWEBサイトのスマホ対応度合いを教えてくれます。
【モバイルフレンドリーテスト】
https://www.google.com/webmasters/tools/mobile-friendly/

「スマホ対応」に絶対必要な5つのこと

①PC用URLとスマホ用URLを統一して表示すること

もしもあなたのサイトのURLが「PC用URL」と「スマホ用URL」で別々の場合、こんな問題が起こります。
・URLのシェアをする時に困る
あなたはURLを友達に送ったりソーシャルで共有したりする際に、そのURLがスマホ用かPC用かを気にしますか?ユーザーは、今見ているURLをそのまま共有する方が楽なはずです。
・Google等の検索エンジンに対応
検索エンジン大手のGoogleはURLが1つであることを推奨しています。検索エンジンの結果をクリックした時に、PCユーザーもスマホユーザーも便利に閲覧できる環境が整います。

②スマホでもPCでも見やすいレイアウトに

スマホ用サイトでは、スマホ画面の大きさに合わせた幅・文字・画像が求められます。
また、フラッシュやジャバスクリプト等、一部のスマホでは表示できないメディアファイルは避けましょう。

③操作がしやすいこと

2つの点に気を着ける必要があります。
一つ目は、マウスがなくても使いやすいこと。「マウスオーバー」は、画像の上にマウスを載せただけで操作ができますが、スマホにはマウスがありません。従って、マウスオーバーは使えません。その他マウスがないと出来ない技術は避ける必要があります。また「ポップアップ」と良い、画像を新しいウィンドウで拡大して開く技術も、スマホでは好まれません。
二つ目は、スマホは指で操作をするということ。例えば小さなボタンが密集していると、誤って隣のボタンをタップしてしまうかもしれません。また、例えば、画面の大半をボタンで占めていると、画面スクロールする際に誤ってボタンをタップしてしまうかもしれません。

東京で電車に乗ると、車内で立ちながらスマホ画面を操作しているのを見かけます。そのような環境でも操作しやすいサイトデザインを意識すると良いでしょう。

④表示速度が充分に速いこと

ガラケーが流行っていた頃、インターネットを閲覧すれば閲覧するほど月額料金がかかる従量課金制の契約プランが主流でした。そのため、ガラケーを対象とした携帯サイトでは、画像をなるべく使わず、絵文字や文字を多く使用したサイト構成になっていました。
スマホでは、ダウンロードできる情報量が増え、スマホ用WEBサイトでも、画像や動画を埋め込むのが当然です。
しかし、ここでサイト管理者が気をつけるべき事は、WEBサイトを開いて最初の画面が表示されるまでの時間です。ユーザーの待ち時間が1秒を超えると「待機」しているとの印象を強くもちます。逆を言えば、最初の表示を1秒未満にすることができれば、快適なスマホサイトを提供できるわけです。
スマホサイトを設計する場合は、最初の画面の表示時間を短縮化することを考える必要があります。

サイトの表示速度を測定できるサイト【PageSpeed Insights】
https://developers.google.com/speed/pagespeed/insights/?hl=ja

⑤掲載コンテンツの注意点

一度PCから見たWEBサイトを、出先にスマホでも開こうとした経験はないですか?
この場合、ユーザーは、スマホで開く時も、PCで開いた時と同様の体験ができることを望んでいると推測できます。このように、ユーザーはWEBサイトを様々なデバイスで開き、それぞれで同じ体験ができることを望みます。従ってサイト管理者もそれを提供することが望ましいと言えるでしょう。
つまり、スマホサイトとPC用サイトの掲載する情報量を同等にし、また、特定のコンテンツを探しやすいようにカテゴリ分類をうまく設計することが求められます。

3つのスマホ用サイト制作方法とその比較

モバイルサイト制作方法3つ

従来型 スマホ用サイトの特徴とその問題点

ここで従来型と呼ぶのは、PC向けサイトとスマホ向けサイトがそれぞれ別個のURLで表示され、別個のページが表示されるものを指します。
ユーザーがWEBサイトにアクセスする際、使用するデバイスに合ったURLを選ぶことができれば、快適な閲覧が可能になり、各デバイスに合ったレイアウト・文字・デザインが表示されます。
しかし、URLを選ぶ事ができない場合もあります。Googleのような検索エンジンや、Facebook、Twitterのようなソーシャルネットワーキングサービスでは、URLが一つしか書かれていない事が多く、PC用・スマホ用との区別がありません。
すると、PCユーザーがスマホ用WEBサイトを見たり、その逆が起きたりする結果が起こりえます。この場合、もちろん各デバイスに合わないレイアウト・字体・デザインとなり、ユーザーは読みづらさを強いられることになります。
また、Googleが重複コンテンツと判断するリスクもあり、Googleが推奨していない制作方法でもあります。

従来型のスマホ対応

表示URLを1つにする「ダイナミックサービング」というスマホ対応の手法

PC向けサイトとスマホ向けサイトの全ページを1:1で同じURLにし、それぞれのヘッダーで「Vart:User-Agent」と記述すれば、動的配信が可能になります。
つまり、ユーザーがURLにアクセスしたら、ユーザーのデバイスがスマホならスマホ向けWEBサイトを表示し、ユーザーのデバイスがPCならPC向けWEBサイトを表示するというものです。
表示URLが一つでユーザーが混乱することも避けられる上に、Googleが重複コンテンツと判断されるリスクもなくなります。Google推奨の制作手法の一つです。

ダイナミックサービング

ダイナミックサービングのメリット:

・URLが統一されており、Google推奨の手法。
・PC用サイトとスマホ用サイトを別個に作り込むので、それぞれユーザーの使用環境に合わせた設計やデザインが可能。

ダイナミックサービングのデメリット:

・レスポンシブウェブデザインと比べ、運営の手間(コスト)がかかる(1.5~2倍程度)

コードが1つで、表示を変化させる「レスポンシブウェブデザイン」というスマホ対応の手法

前述のダイナミックサービングでは、PC用サイト・スマホ用サイトのそれぞれに設計・構築が必要になります。更新頻度が多いニュースサイトやブログでは、手間がかかりすぎ、運営の負荷が大きくなります。
そこで、PC用サイトもスマホ用サイトも本体となるコードを1つにまとめ、ユーザーのデバイスごとに表示の仕方を変えるという技術ができました。これをレスポンシブウェブデザイン(RWD:Responsive Web Design)と言います。

レスポンシブウェブデザインとは
もちろんURLが一つに統一されるのでユーザーが混乱することもありませんし、コードも一つに統一されるので更新や運営が過負荷になりづらいのが特徴です。Googleが推奨する制作手法で、重複コンテンツのリスクもありません。
ただし、サイトデザイン(見た目)においては注意が必要です。レスポンシブウェブデザインでは、デバイス事に作り込むわけではありません。どちらにも合ったデザインにしていく必要があるので、ある程度シンプルなデザインになりますし、最終的にスマホかPCのどちらを優先させていくかは制作に入る前に決めておく必要があると言えるでしょう。

世の中の流れとしてはモバイルファーストと言い、モバイルを最優先にして設計していくことが主流ですが、業界によっては、PCユーザーのコンバージョン(お問い合わせ申込みなど)が高い場合もあります。
いずれにしても、現状のアクセス解析に基づいて、モバイル対応を考えていくことが望ましいですね。

レスポンシブウェブデザイン

レスポンシブウェブデザインのメリット:

・運用が楽。(手間と費用を抑えられる)(1HTMLファイルの管理だけで済むため)
・URLが1つで、Google推奨の手法。

レスポンシブウェブデザインのデメリット

・複数の端末で読み込めるようにするため、デザインに制限がある。
・デバイス毎に作り込むよりも、訴求力が落ちる場合が結構ある。
・PC向けの古いブラウザには非対応

SEOの観点から考えるスマホ対応

スマホ対応している場合の検索結果画面

スマホ対応サイトが有利になっていく、検索エンジンへ

Googleで検索をすると、検索結果画面には「スマホ対応」ラベルが表示されるようになりました。従来の「スマホ対応」ラベルがない状態では、検索結果画面からスマホ対応しているWEBサイトか否かを確認するすべがありませんでした。しかし、このラベルが出来たことにより、スマホユーザーはスマホ対応しているページをより見つけやすくなります。
今後、世の中のWEBサイトのスマホ対応が進み、検索結果画面に「スマホ対応」ラベルが多く表示されるようになると、スマホ対応していないWEBサイトはクリック率が下がるかもしれません。

アメリカのスマホ検索事情

アメリカの検索エンジンをスマホで調べてみると、上位に表示されているサイトの多くがスマホ対応されていることに気付かされます。
例えば、「orthodontist nyc」(直訳すると、矯正歯科 ニューヨークシティ)で検索した時に1ページ目に表示されている10件中10件全てのページがスマホ対応しています。

一方で、「矯正歯科 東京」で検索した場合、1ページ目に表示されている10件中6件のページがスマホ対応していました。

スマホ検索結果の米国との比較

また、アメリカで起きた事が日本でも起きることを予想すると、早くからスマホ対応しておくに越したことはないでしょう。

[本記事中にあるGoogleの推奨については、下記のサイトを参考にしています]
Google Multi-Screen Resources(英語) http://www.google.com/think/multiscreen/start.html

 

Google Analyticsで見るべき8種類の必須レポート

WEBマーケターが、アクセス解析の現場でよく使うGoogle Analyticsレポートを紹介。
数多あるGoogle Analyticレポートの中から、比較的重要度の高いレポートを選びました。

<質問>

ホームページを制作した時に、Google Analyticsを設定したもらったものの、そのまま見ていません。
アナリティクスを見たほうがいいと聞きますが、何を見たらいいのでしょうか?

<回答>

Google Analyticsは無料で使えるアクセス解析ツールですが、その奥行きは広く、カスタムの仕方にとっては何百種類・何千種類ものレポートを表示させることができます。
実際にアクセス解析をする際は、現状を把握する時や、その後の改善プランに対する検証をする時に、Google Analyticsのレポートを使用するシーンが多いです。

今回はGoogle Analyticsの導入編として、Google Analyticsで見ることのできるレポートの一部を紹介します。
特に、うちのWEBマーケターが現場で高頻度で使用する重要レポートを紹介します。

大きく分けて、8タイプのレポートを紹介します。
1 大まかなアクセス状況がわかるレポート
2 訪問者のタイプを知るのに役立つレポート
3 WEBサイトへの流入元がわかるレポート
4 訪問者の閲覧行動がわかるレポート
5 リアルタイムレポート
6 コンバージョンレポート
7 ウェブマスターツールとデータを共有すると、見ることができるレポート
8 Google Adwordsと連携すると、見ることができるレポート

大まかなアクセス状況がわかるレポート

半年~1年のセッションレポート

比較的長期間のレポートを見れば、マクロな視点でサイトの全体像をつかむことができます。
中長期的なセッション数の推移

1ヶ月間のセッションレポート

1ヶ月間のレポートは、日頃チェックするのによく使用します。
デイリーで大きな変動があった場合、その原因を特定します。
セッション数の変動とアクセス状況の概要

訪問者のタイプを知るのに役立つレポート

時間帯別・曜日別のアクセスレポート

時間帯別・曜日別のアクセスから、訪問者がビジネスマン・主婦・学生などの職業やライフスタイルを推測することができます。
時間帯別アクセス数
曜日別アクセス数

地域別(国別・都道府県別・市区町村別)のアクセスレポート

店舗やイベントへの集客用WEBサイトの場合は、適切な地域のユーザーが閲覧しにきているのかを判断することができます。
都道府県別アクセス状況
市区町村別アクセス状況

スマートフォンとパソコンの割合がわかるデバイス別レポート

訪問者のデバイスを知る事で、最も適切なデザインや仕様を検討することができます。
デバイス別アクセス状況

組織別のアクセスレポート

大会社の場合、ネットワークドメイン上から会社名を推測できる場合があります。
ネットワークドメインからわかる組織別アクセスレポート

WEBサイトへの流入元がわかるレポート

流入元の全体像がわかるレポート

流入元の全体像を把握することは、アクセスアップの最初の一歩です。
チャネル別レポート

流入元別レポート

流入元の詳細を確認でき、また流入元別にアクセスの質を確認することができます。
流入元別レポート

流入キーワード別レポート

どんなキーワードで訪問されているのか、また、どんなキーワードで訪問したユーザーが質の良いアクセスかを確認できます。
流入キーワード別レポート

流入キーワードと流入ページがわかるレポート

カスタムレポートの設定をすれば、閲覧できるレポート。
検索キーワードと流入ページを1セットで考え、それぞれのSEOが適切かを判断できます。
SEOの優先順位も判断できます。
キーワードとランディングページがわかるレポート

訪問者の閲覧行動がわかるレポート

一番最初に流入するページと、そのアクセスの質

どんなにアクセス数が多くても、重要視すべきなのが、アクセス後のユーザーの行動です。
ここでは、アクセス流入ページ別に、ユーザーの行動を把握することができます。
ランディングページ別アクセス状況

最も多く訪問されているページや、訪問の入口と出口

よく見られているページ順に、各ページの閲覧行動を見ることが出来ます。
また、訪問の入口は「閲覧開始数」として、訪問の出口は「離脱率」より判断することができます。
<直帰率と離脱率の違い>
直帰率とは・・・閲覧開始ページの1ページのみにアクセスし、その他の行動をすることなく離脱した割合
離脱率とは・・・複数ページアクセスした後、サイトを離脱した割合
全てのページレポート

リアルタイムレポート

現在リアルタイムでのアクセス状況を把握することができます。
例えば、フェイスブックやツイッター等のSNSで拡散した後のアクセス状況をすぐ把握するのに便利です。
他にも、WEB広告出稿時のリアルライムアクセス状況や、新たにページを作成した時にアクセスログが正しく動作しているかの確認に使用することが多いです。
リアルタイム検索

コンバージョン

コンバージョンの完了数が判ります。
コンバージョンとは、訪問者が目的とする行動を定義したもので、様々なコンバージョンを定義できます。
・お問合せフォーム送信完了数
・通販サイトの購入完了数
・○ページ以上閲覧
など。

コンバージョン完了数の推移がわかる、コンバージョンレポート

コンバージョンレポート

そのうち、流入元が検索エンジンだったものがわかるレポート

検索トラフィックのコンバージョンレポート

コンバージョン完了までのプロセス達成度合いがわかるレポート

コンバージョンを、予約フォームの送信完了とした場合、
(1)予約フォームの閲覧 ⇒ (2)フォームの送信完了
のプロセス達成度合いを測定することができます。
コンバージョン達成度合いのプロセスがわかるレポート

ウェブマスターツールとデータを共有すると、見ることができるレポート

キーワード別・検索エンジン順位とクリック率が判るレポート

SERPの表示回数とクリック率

ページ別・検索エンジン順位とクリック率が判るレポート

ページ別の検索エンジン順位とクリック率が判るレポート

Google Adwordsと連携すると、見ることができるレポート

広告キーワード別・流入後の閲覧状況とコンバージョン完了数

広告グル―プ別・アクセス後の閲覧状況