Googleが提供するツールでモバイルのエクスペリエンスを向上させる

約半数がモバイルからのアクセス

スマホの普及によりモバイルからのアクセスは増加しています。このブログへのアクセス（UUベース）も2013年1月には10％に満たなかったモバイルユーザーが、2014年下期には45％と、半数近くがモバイルからのアクセスとなっています。

ブログのモバイル対応について考えてみた | 象と散歩 でモバイル（スマホ）でYoutubeと表を見やすくするための方法について記載しましたが、今やスマホで見やすいサイトであることは必須条件となってきています。

Googleではモバイルに対するユーザビリティに関してのレポートやツールを提供していますので、これらを有効活用してモバイル・ユーザーフレンドなサイトにしましょう。

モバイル対応を求めるGoogle

Googleはモバイルに対応したサイトを望んでいます。 下記はモバイル・ファーストインデックスの動画です。日本語字幕で見られます。

Google にとっては、モバイル フレンドリーなサイトが増えることが、結果、モバイルでの検索の増加、広告収入の増加に繋がるので当然ですが、利用者にとってもモバイル ユーザフレンドなサイトが望まれているのは利用者の立場からみて間違いありません。

[スマホ対応] ラベルって何？

2014年11月14日付のGoogleウェブマスター向け公式ブログの 検索ユーザーがモバイル フレンドリー ページを見つけやすくするために の中でモバイル版の検索結果に［スマホ対応］ラベルが表示されるという発表がありました。［スマホ対応］ラベルは下記の条件に合致する場合に適用されるとあります。

• 携帯端末では一般的でないソフトウェア（Flash など）を使用していないこと
• ズームしなくても判読できるテキストを使用していること
• ユーザーが横にスクロールしたりズームしたりする必要がないよう、コンテンツのサイズが画面のサイズと一致していること
• 目的のリンクを簡単にタップできるよう、それぞれのリンクが十分に離れた状態で配置されていること

【引用】検索ユーザーがモバイル フレンドリー ページを見つけやすくするために

日本語（左図）では[スマホ対応]、英語（右図）は[Mobile-friendly]と表示されます。

そして、「Googleではモバイル・フレンドリーの条件をランキング要素として使用することも実験中です。」という記載がありますので、近い将来には、”見やすさ” だけではなく、検索結果のランキングに影響しそうです。

モバイル対応を始めよう

Googleでは、サイトやブログのモバイル対応のガイダンスとして、 ウェブマスター向けモバイルガイド を提供してくれています。

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

この中にサイトやブログがモバイルに最適化されているかを確認するために モバイル フレンドリー テスト が用意されています。自分のサイトやブログをGoogleがモバイルに最適化されていると判断しているかを確認しましょう。

確認は簡単で、下記画面でURLを入力して「分析実行」ボタンをクリックするだけです。

問題がなければ下記のように「問題ありません。このページはモバイル フレンドリーです。」と表示されます。またGoogleがこのサイトを実際にどのように見ているのかがイメージとして表示されます。

このモバイル フレンドリー テストでお墨付きがもらえれば、前述したGoogleモバイル検索の結果で、[スマホ対応]ラベルが付加されます。

PageSpeed Insights でモバイルの操作性を向上させる

モバイル フレンドリー テスト で問題がなかったとしても、まだ改善できることは見つけられます。そのひとつが、PageSpeed Insights です。

PageSpeed Insights は、ページのパフォーマンス（表示速度）を測定し、改善点を指摘してくれるツールですが、PCとモバイルと両方の表示で測定を行ってくれます。（Google ウェブマスター向け公式ブログ: PageSpeed Insights を使ってサイトのモバイル操作性を向上させましょう）

1) PageSpeed Insights の実行

「ウェブページのURLを入力」欄にURLを入力して「分析」をクリックします。

2）PageSpeed Insights の実行結果

ブログのモバイル対応について考えてみた | 象と散歩 でチェックしてみましたが、58/100 点と思ったより点数が高くなりません。

改善できる点はないかと詳細を確認すると、「次のスクリプトの非同期バージョンを使用してください」という中に Google +1 のスクリプトが含まれていましたのでこちらを改善します。

Google +1のJavaScripitを非同期にする

Google +１のJavaScripitを非同期にする方法については、+1 ボタン - Google+ Platform の JavaScript の非同期読み込みに記載がありますので こちら を参考にしてください。

ヒント: パフォーマンスを最高にするには、このコードを最後の +1 タグの直後に配置します。

とありますが、</Body>タグの直前に記載すれば大丈夫です。

3) 修正後の再チェック

Google +1のJavaScriptを変更して再度、PageSpeed Insights で確認すると、58/100 → 60/100 へと2ポイント改善されました。

PageSpeed Insights のルール に日本語での解説もありますが、Bloggerを利用している場合には、これ以上の改善はできなそうです。

４）ユーザーエクスペリエンス

PageSpeed Insightsでは「速度」以外にも「ユーザーエクスペリエンス」についても評価してくれます。こちらは 96/100 で修正が必要な項目はありませんでした。

ウェブマスターツール

Googleウェブマスターツールでもモバイル ユーザビリティのチェックができます。チェックできる内容は以下の６点です。

• Flash が使用されています
• ビューポートが設定されていません
• 固定幅のビューポート
• コンテンツのサイズがビューポートに対応していません
• フォントサイズが小です
• タップ要素同士が近すぎます

詳細は、モバイル ユーザビリティ - ウェブマスター ツール ヘルプ で確認できます。

まとめ

Googleが強く推奨するだけではなく、モバイルからのアクセスは増え続けていますので、モバイル ユーザ体験の向上は今や必須です。

スマホで検索して、開いた途端に見る気が失せるサイトもまだ少なくありません。折角、Googleが無償でモバイル ユーザビリティ、表示速度など各種チェックツールと変更方法まで教えてくれているので、是非、修正可能な範囲で対応しましょう。

【おまけ】モバイル・ユーザの実態調査（Our Mobile Planet)

Googleが提供するモバイル向けのレポートとして、各国のモバイルユーザの実態をまとめた Our Mobile Planet があります。2013年のレポートなので鮮度は落ちてしまいましたが、モバイルユーザーの動向としては参考になります。

自分でグラフも作れる Our Mobile Planet

また Our Mobile Planet では、2011～2013年のデータを使って自分で簡単なグラフを作成することができます。

例えば、下記はスマホでどのくらいの頻度でウェブにアクセスをしているかを示したグラフで、83％のスマホ・ユーザーが毎日ウェブサイトにアクセスしていることがわかります。

各国との違いも比較できるので、2014年のデータも追加されることを願います。

ブログのモバイル対応について考えてみた

ここ数年でモバイルのアクセス数も随分と増えたと思い、Googleアナリティクスで確認をしてみると、1年の間でもモバイルは増加し、デスクトップとタブレットのカテゴリが減少しています。直近1ヶ月では4割がモバイルからのアクセスになっています。



自分がブログで使っているBloggerは、モバイルテンプレートを選択すればある程度は整形して表示してくれます。しかし、直近でエントリーした「検索エンジンでブログを検索対象とする方法」をiPhoneで閲覧すると画像は自動的にリサイズされていますが、Youtubeと表は、はみ出して、かなりカッコ悪い状態です。モバイルユーザーの経験価値を高めねば。

  

と、いうことで ”Youtube” と ”表（table）” のレスポンシブル対応について調べてみました。

Youtubeのレスポンシブル対応

参考にしたのは、下記のサイトです。タイトルはまさに「Youtube（その他iframeを使った動画）をレスポンシブにする方法」です。

How to make a YouTube (or other iframe) video responsive

スタイルシートの設定で簡単にYoutubeをレスポンシブルにできるとありますので早速試してみました。

Step1

サンプルではクラス名が ”video-container” でしたが、Youtube以外の動画も使わないので ”youtube” にしました。コツは56.25％です。56.25％は、5625/10000 となりますが、この比率は5で割っていくと 1125/2000 → 225/400 → 45/80 → 9/16となります。そうです、HD動画の16:9の比率なんですね。と、How do you convert a percentage (56.25%) into a fraction? にて説明されていました。

.youtube {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px; height: 0; overflow: hidden;
}

.youtube iframe,
.youtube object,
.youtube embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

Bloggerの場合

上記のスタイルシートがそのまま使えます。どこに記述すればよいかは、引用（blockquote）を格好よく表示する | 象と散歩 を参考にしてください。

Step2

Youtubeから取得した埋め込みコードを上記で作成したクラス名で囲むだけです。



これがサンプルのコードです。

<div class="youtube">
<iframe width="560" height="315" src="//www.youtube.com/embed/R_PWp3dEsmI" frameborder="0" allowfullscreen></iframe>
</div>

スマホでのYoutubeの表示確認

「検索エンジンでブログを検索対象とする方法」を修正して確認します。下図左がiPhone（Safari）で右がSurface（IE11） で表示しています。



素晴らしい、レスポンシブになった。

表のレスポンシブ対応

表（table タグ）は配置を変えられないのでレスポンシブにはならないと分かりつつも、世の中には賢い人がいるに違いにない、と、見つけたのが、「10+ Solutions for Responsive Data Tables 」という中にあった方法です。

The Basics

ベーシックで紹介されているのは、すごく簡単な方法でtableタグで表の幅（width）を設定せずにブラウザの表示にまかせるという方法です。

Before

<table border="1" cellpadding="2" cellspacing="0" width="720"><tbody>
<tr>
<td width="360">テスト１行目テスト１行目テスト１行目</td>
<td width="120">テスト２行目</td>
<td width="120">テスト２行目</td>
<td width="120">テスト２行目</td>
</tr>

After

<table border="1" cellpadding="2" cellspacing="0"><tbody>
<tr>
<td>テスト１行目テスト１行目テスト１行目</td>
<td>テスト２行目</td>
<td>テスト３行目</td>
<td>テスト４行目</td>
</tr>

しかし、幅を指定しないと、列が多い場合や文字が多い場合などは、フォーマットが崩れて反って読みづらくなってしまいます。

Mobile-Frendly Table

レスポンシブルではないけど表のフォーマット崩さない方法が、”Mobile-Friendly Table（モバイルにやさしい表）” で紹介されています。モバイルの場合に表を横にスクロールさせる方法です。

しかし、無知な自分にはサンプルコードの使い方がわかりません。

@media screen and (max-width: 640px) {
table {
overflow-x: auto;
display: block;
}
}

そこで似たようなことを試めされている方はいないかと探し、「tableをレスポンシブでも破綻しないようにする簡易的な手法 | webutubutu」 を参考にさせていただきました。

しかし、上記で紹介されているサンプルのスタイルシートではうまくいきませんでした。確かにスマホで、表の横スクロールが可能になりましたが、PCでもスクロールバーが表示されてしまいます。またメディアスクリーンで指定した「表は左右にスクロールできます」が表示されてしまいます。

下記がtableをレスポンシブでも破たんしないようにする簡易的な手法から引用したCSSの記載例です。

.table-wrap{overflow: scroll; position:relative;}
@media screen and (max-width: 1410px) {
.table-wrap:before{
content: "\008868\00306f\005de6\0053f3\00306b\0030b9\0030af\0030ed\0030fc\0030eb\003067\00304d\00307e\003059"; /* 文字化け対策のためUnicode変換 */
color:#fff;
font-size:12px;
background-color:#e07903;
position: absolute;
top:0px;
border-radius: 5px;
padding: 0.05em 0.5em;
}
}

スマホで表がはみ出してしまう場合の対応【完成形】

と、いうことで、先人たちの知恵を融合してtableのレスポンシブル対応の完成です。tableのスタイルでoverflowをautoにして、display block を追加することで、スマホだけで表をスクロールできるようになりました。

またメディアクエリの max-widthを640pxにすることでスマホだけで表上にメッセージを表示させることができました。640pxにする理由がわかりません。iPhoneでは350pxの表までははみ出さずに表示できたので max-width の値を350px前後にも変更してみましたがうまくいきませんでした。

スクロールを示唆する文言は、スマホ対応なのでスクロールではなく、「表は左右にスワイプ可」としました。

下記がサンプルのスタイルシートになります。

.table {
overflow: auto; display: block; position:relative;
}
@media screen and (max-width: 640px) {
.table:before{
content: "\08868\0306f\05de6\053f3\0306b\030b9\030ef\030a4\030d7\053ef"; /* 文字化け対策のためUnicode変換 */
color:#fff;
font-size:12px;
background-color:#e07903;
position: absolute;
top:0px;
border-radius: 5px;
padding: 0.05em 0.5em;
}

iPhoneでの表示は下記のようになります。

まとめ

今回は、ちょうど気になったYoutubeと表のレスポンシブル対応でしたが、スマホからのアクセスは、これからも増え続けていくと思います。適宜ユーザビリティ強化は図っていきたいと思います。

先ずは、モバイルでのアクセスが多いコンテンツから少しずつ修正していきたいと思います。

検索エンジンでブログを検索対象とする方法

久しくGoogleウェブマスターツールを覗いてみていなかったのですが、いつのまにか自分が使っている Blogger もサイトマップに対応していたので、Googleウェブマスターツールで登録を変更しました。

ウェブマスターツールでGoogleに検索をしてもらうようにするための方法は、BloggerでなくてもどのWEBサイトでもブログでも同じです。

Google検索の仕組み

Googleでは、スパイダー（クローラー）というソフトウェア（ロボット）が定期的にWEBページをクローリングして情報を収集してインデックスを作成しています。Googlebot がこのクローリングを行うためのロボットで、ボットとはロボットの略称です。

英語のクロール（CRAWL）という意味には、虫が這い回るという意味もあるので、まさにリンクをたどって這い回る蜘蛛（スパイダー）がクローリングなのです。



そして、誰かがGoogleで検索したときに、索引として参照されるのがこのインデックスです。逆に言えばインデックスに登録されていないWEBページは検索の対象になりません。

Goolgeの検索の仕組みついては、Googleが提供している「How Search Works」（日本語字幕あり）が、わかりすく説明をしているので参考にしてください。

クローラーの挙動を決める robot.txt

robots.txt ファイルについて - ウェブマスター ツール ヘルプ に説明がありますが、robots.txt には、クローラーが、サイトやブログにアクセスしたときにどのように振る舞ってもらいたいかが記載されています。最もシンプルなのは、クローリングを許可するか否かと、サイト構成（地図）が記載されているサイトマップの設置場所についての記載です。

robots.txtの表記例

項目名	説明
User-agent:	対象となるロボット名です。 * はすべてのロボットを対象にしているという意味になります。
Disallow:	クローリング対象外とするURLを記載します。
Allow:	クローリングの対象とするURLを記載します。 / はディレクトリ配下すべてを対象とするという意味になります。
Sitemap:	サイトマップが設置されているURLを指定します。

Blogger の robots.txt

Blogger の場合、何も設定しなくても下記の robots.txt がルートディレクトリに作成されています。自分のブログであれば、http://walking-elephant.blogspot.com/robots.txt です。独自に編集することもできます。

User-agent: Mediapartners-Google
Disallow: 

User-agent: *
Disallow: /search
Allow: /

Sitemap: http://walking-elephant.blogspot.com/sitemap.xml

User-agent: が Mediapartners-Google となっているのは Google AdSense です。Disallow: の指定がないので、すべてのディレクトリが対象となります。一方、通常の検索エンジンに対しては、/search をクローリング対象外としているので検索結果やラベル検索によるページについてはインデックスされませんが、広告は表示されるという設定になっています。

サイトマップとは

Googleなどの検索エンジンのクローラーは、リンクをたどってコンテンツの情報を取得していきます。サイトマップはその道しるべ（索引）です。サイトマップには、コンテンツの場所（URL）や最終更新日などが書かれています。

Blogger は、サイトマップに対応していなかったので、サイトマップ代わりにRSS/ATOMフィードを使わなければなりませんでしたが、いつのまにかサイトマップに対応して自動的に作成されるようになっていました。

下記は、自分のブログのサイトマップの例ですが、<URL>タグで1コンテンツを囲み、<loc>タグで場所（URL）と<lastmod>タグで最終更新日が記述されています。

<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
  <url>
    <loc>http://walking-elephant.blogspot.com/2014/12/2kg.html</loc>
    <lastmod>2014-12-23T16:30:27Z</lastmod>
  </url>
</urlset> 

sitemap.xmlの表記例

項目名	説明
<url>	<url>タグで1コンテンツを囲みます。 <url>~</url>の間に以下のタグでコンテンツの詳細を記載します
<loc>	【必須】 ページの場所（URL）を記載します
<lastmod	【オプション】 ページの最終更新日を記載します
<changefreq>	【オプション】 ページの更新頻度ですが参考値です（always,hourly,daily,weekly,monthly,yearly,never）
<priority>	【オプション】 サイト内の重要なページを知らせるための優先度（0.0-1.0） デフォルトの優先度は0.5です

ウェブマスターツールに登録しよう

Googleなどの検索エンジンは、下記の順番でサイトやブログのリンクをたどってインデックスに登録していきます。



しかし、世界中には数多のサイトやブログがありますので、自分のサイトやブログをクローリングしてもらうために、ウェブマスターツールに登録しておきましょう。Yahoo! の検索エンジンはGoogleなので、現在、WEBマスターツールを提供しているのは、GoogleとBingです。

・Goolge	ウェブマスターツール
・Bing	Webmaster Tools

Googleウェブマスターツールにサイトマップを登録しよう

Googleウェブマスターツールでのサイトマップの登録方法は下記の通りです。

① メニューからクロールの下にあるサイトマップを選択

② 「サイトマップの追加テスト」をクリック

③ ボックスにsitemap.xmlをタイプ

④ 「サイトマップをテスト」をクリック



⑤ テスト完了でエラーがないことを確認



⑥ ①-③と同じ手順で「サイトマップを送信」をクリック

新しく登録されたサイトマップでインデックスに登録されるまでステータスは保留となっています。



⑦ インデックスに登録されたら、以前に登録したRSS/ATOMフィードを削除

RSS/ATOMフィードでインデックスを登録していたときは、214登録／215送信でしたがXMLサイトマップに変更したら213登録／213送信と正しい213ページになりました。

Bing Webマスターにサイトマップを登録しよう

続いてBingのWebマスターツールへのサイトマップの登録です。サイトマップの送信ボックスにXMLサイトマップのURLを入力して送信ボタンをクリックすれば完了です。



以上でサイトマップの登録は完了です。