【Google公式】モバイル向けサイト改善のためのチェックリスト

投稿日：2013年12月12日 by 

[対象: 上級]

Googleは、モバイル向けサイトを改善するために役立つチェックリストと動画を公開しました。

チェックリストの完全版を日本語に訳しました。
いずれ日本語版が出てくるかもしれませんが、早く知りたい人は参考にしてください。

なおチェックリスト中の参照先ページは、日本語ページがあるものは日本語ページヘ、ないものはそのまま英語のページへリンクしています（リンク先の日本語訳まではさすがに厳しい）。

ステップ1: ユーザーをいらいらさせないようにする

邪魔になる余分なウィンドウをすべてのモバイルユーザーエージェントから取り除く

[Googleの推奨 / 関連記事]

  • 閉じるのが難しいJavaScriptのポップアップ
  • オーバーレイ。特に、アプリのダウンロードを勧めてくるもの（代わりとして、iOS 6以上の Smart App Bannersのようなバナーやそれに準ずるものや、サイドバーのナビゲーション、メールマーケティングなどを利用する）
  • やりたいことが完了する前のアンケートへの回答依頼

デバイスに適した機能性を提供する

  • ユーザーが使用しているデバイスでは利用できないプラグインや動画を必要とする機能を取り除く（例: AdobeのFlashはiPhoneやAndroidのバージョン 4.1以上では再生できない）
  • タブレットユーザーにはPC版を提供する（もしくは利用可能ならタブレット版）[調査結果]
  • モバイル端末からでも完全なPC体験を利用できるか確認しておく。ユーザーが選択した場合は、完全なPC版での表示をそのセッションの間はずっと保っておく（ページを表示するたびに「PC版」をユーザーに選択させてはいけない）[調査結果]

トラフィックが多く、ユーザーエクスペリエンスが悪いモバイル向けページを修正する

  • 望ましくないあるいは想定外のユーザー行動が見られるページを特定する
    • 異常なくらい直帰率が高い、よく見られているモバイル向けページをチェックする
    • PC版へ切り替えるためのクリックの数が非常に多いモバイル向けページを見つける — こういったページは、モバイル向けページの機能拡張をユーザーが求めていることを示している。たとえば、Googleアナリティクスの行動フローとイベントの情報を利用する。
  • 改善を行う
    • サイトの速度レポートを参照しながら遅いページを高速化する
    • 重大なユーザビリティの問題を改善する
      • ユーザーが嫌うことの原因を見つけるためにユーザーが使っているのと同じタイプの端末でページを利用してみる
      • Chromeのデベロッパーツールでデバイスをエミュレートしてみる
    • ユーザーのニーズを満たすようにコンテンツを改善する

[Googleアナリティクスの直帰率とイベントによって、ユーザーエクスペリエンスが悪い、トラフィックが多いモバイル向けページを素早く発見する方法とそのほかの問題を改善する方法を解説した動画とスライド]

 

手早くできるパフォーマンス改善（競合に遅れをとっているなら継続する）

[ケーススタディ]

[モバイルサイトのパフォーマンスを手早く修正する方法と競合との比較方法を解説する動画とスライド]

 

別URLのモバイル向けサイトを持っているなら追加のテストを行う

  • 意図したとおりにリダイレクトが動いているかチェックする — 間違ったリダイレクトを引き起こす可能性がないかを知るためにウェブマスターツールのクロールエラーを参照する（鈴木補足: スマートフォン固有のクロールエラーを見られるようになりました）
  • デバイスに関係するリダイレクトは301ではなく、302を使う（鈴木補足: 301でも302でもどちらでもよかったはずなのですが、調べてみます）
  • モバイルユーザーのPC向けページへのアクセスが、対応するモバイル向けページへリダイレクトできているか確認する。404を返したりトップページへリダイレクトしてはいけない [ケーススタディ]
  • リダイレクトの繰り返しを排除する
    • 最終のURLに直接リダイレクトする
    • 優先しないページがモバイル向けページに直接行くようにする
      • 良くない構成: http://example.com/page.html が http://www.example.com/page.html に302リダイレクトされその次に http://m.example.com/page.html に302リダイレクトされ、200を返す
      • 良い構成: http://example.com/page.html が http://m.example.com/page.html にリダイレクトされる（ユーザー側でキャッシュされるとなお良い）
  • 考慮の余地があるならレスポンシブ・ウェブデザインにサイトを変更したときのメリット・デメリットを検討する

 

ステップ2: タスクの完了を促進する

クロールとインデックス、検索ユーザー体験を最適化する

[ケーススタディ]

  • robots.txtで拒否しているリソース（CSS、JavaScript）のブロックを解除する
  • モバイル対応を前提として検索エンジンに向けたベストプラクティスを実行する（鈴木補足: 日本語ページにはそれぞれのセクションにidがふられていないため直接飛ばせません。自分で該当セクションへスクロールしてください）

自分のサイトに最も多いモバイルユーザーの動きに最適化する

  • サイトに訪れるユーザーの意図を洞察する
  • モバイルの指標を精練する
    • よく起こるモバイルのタスクに基いてモバイル中心の指標（とマイクロコンバージョン）を作成する
  • ユーザーの動きを改善する
    • 各地点のユーザー体験を向上するために、ユーザーが使っているのと同じ端末を使って最も多いモバイルのタスクを通しでやってみる（タスク完了までの図表を作る）
    • 適切なフォントサイズのようにユーザビリティのベストプラクティスに従う
    • もっとも重要なタスクを完了するのに必要な動作（クリックの数やスクロール）を最小にする

 

ステップ3: ユーザーをファンに変える

モバイルアプリと検索を統合するタイミングを考慮する

[公式アナウンス/関連情報]

クロスデバイス（デバイス横断）での動きを調査するまたは追跡しようとする

[ケーススタディ]

  • 同一ユーザーが異なる端末でログインしているときの行動を分析する。特にコンバージョンに至るまでの過程
  • デバイス間で続けて起こる、「カートに入れる」や「お気に入りに追加」の訪問・再訪問を調査する

価値を提供する新たなやり方をブレインストーミングして考えだす

  • たとえば来店して購入する人のような、モバイルユーザーのためにサイトを作る ［ケーススタディ］
  • スマートフォンのGPSやカメラ、加速度計を有効活用する
  • ソーシャルでの共有や行動を増やす ［ケーススタディ］
  • スワイプとシェイク、タップを直感的で楽しく操作できるようにする

以上です。
あなたが運用するサイトのモバイル対応に役立ててください。