[対象: 中〜上級]
Googleは、スマートフォン向けサイトでありがちな設定ミスとそれを回避する方法を説明したドキュメントを公開しました。
日本語版がいずれ公開されるはずですが、早く知っておくに越したことはないし早く知っておくべき情報なので僕が日本語に訳します。
参考にしてください。
スマートフォンサイトにありがちな設定ミス
再生できないビデオ
多くの動画がスマートフォン端末では再生できません。これはスマートフォンがサポートしていないソフトやデバイスを必要するためだったりライセンスの制限のためだったりします。動画を採り入れるならHTML5の標準タグを利用することを勧めます。すべてのモバイル端末がサポートしているとは限らないFlashのようなフォーマットのコンテンツを使わないようにします。
とにかく、できる限り多くのデバイスで動画が確実に再生できるようにするために、最善の体験をスマートフォンユーザーに提供するように取り組まなければなりません。
間違ったリダイレクト
多くのサイトが、スマートフォンに最適化した専用のURLを提供しUser-Agent（ユーザーエージェント）に基いてスマートフォンユーザーをリダイレクトしています。よくある間違いとして挙げられるのは、デスクトップ向けサイトのURLにアクセスしようとしたユーザーをスマートフォン向けサイトの関連性のないURLにリダイレクトしてしまうことです。
よくあるのは次のような例です。
- 本来リクエストしたURLにかかわらず、スマートフォン向けサイトのトップページにスマートフォンユーザーを転送するようにデスクトップ向けサイトのサーバーが構成されている。リダイレクトするデスクトップ向けページに対応したページがモバイル向けサイトに存在するのにこのような構成にしてしまう。
- 動的に生成されパラメータが含まれるURLを持つデスクトップ向けのURLとそれに相当するモバイル向けURLが適切に対応付けされていない。たとえば、特定の日の電車の時刻表をデスクトップ向けサイトでユーザーが探していたら実際の検索結果ではなくてスマートフォン向けサイトの全体の時刻表ページにリダイレクトされてしまう。
デスクトップ向けURLに対応するスマホ向けURLがあるのなら、探しているページに最終的にユーザーが行き着けるようにリダイレクトを正しく構成することを推奨します。 - リダイレクトするモバイル端末とリダイレクトしないモバイル端末が存在する。たとえば、Androidユーザーだけをモバイル向けサイトにリダイレクトし、iPhoneとWindows Phoneユーザーをリダイレクトしないサイトがある。
スマートフォンだけに404
URLにアクセスしたデスクトップユーザーにはコンテンツを提供するけれどスマートフォンユーザーにはエラーページを表示するサイトがあります。
ユーザーエクスペリエンスを最大に高めるには次のことを確実に実行します。
- モバイル端末からデスクトップ向けページにユーザーが訪問していることを認識し、対応するスマートフォン向けページを異なるURLで提供している場合は、404やソフト404を返すのではなくそのURLにリダイレクトする。
- スマートフォンに適したフォーマットでコンテンツを準備していないときはデスクトップ向けページを代わりに見せる。ユーザーが探しているコンテンツを見せるほうがエラーページを見せるよりユーザーエクスペリエンスにずっと優れている。
アプリダウンロードのインタースティシャル
多くのウェブマスターがサイトの訪問者にサイト専用アプリをプロモーションしています。プロモーションにはいくつもの方法がありますが、なかには、スマートフォンに最適化したコンテンツのインデックスに問題を起こしたり訪問者のサイト利用に混乱を生じさせたりするものがあります。
こうしたさまざまな状況を考慮し、ページのなかでアプリをプロモーションするシンプルなバナーを設置することを勧めます。次のような手段を利用して実装できます。
- iOS6のSafari向けのSmart App Bannerをサポートする純正のブラウザやオペレーティングシステムを利用する。
- 一般的にある小さな広告と同じようなHTMLの画像を使い、アプリストアの適切なダウンロードページヘリンクしておく。
※鈴木補足: インタースティシャルでのアプリのプロモーションについてはこちらの記事も参照
不適切なクロスリンク
スマートフォン向けコンテンツを別のURLでユーザーに提供するサイトによく見られる手段として、デスクトップ版ページへのリンクを張ることが挙げられます。同様に、デスクトップ版ページからスマートフォン版ページへリンクを張ることもあります。よくある間違いは、スマートフォン向けページをデスクトップ向けのトップページにリンクしてしまうように、不適切なページにリンクを向けてしまうことです。
そういったリンクを追加するのであれば、対応する適切なページにリンク先を必ず向けるようにします。
ページ速度
スマートフォンが接続しているモバイルデータの通信ネットワークの特性から考えると、スマートフォンに対するページの表示速度を最適化することは特に重要です。初めに参考にしてほしい情報をいくつか示します。
- Make your mobile pages render in under one second
- Make the mobile web faster
- Optimize for mobile
- サイトのページの読み込み時間を解析するためにGoogle PageSpeed Insightsを利用する
以上です。
昨年の6月にスマホ向けウェブサイトにおける推奨構成をGoogleは公開しました。
しかし理解するにはそれなりの知識が必要だしそもそも読んでいないサイト管理者も多いはずで、この記事で説明したようなモバイルサイトの設定ミスがたくさん発生しているのでしょう。
日本語版はつい先日公開されたばかりです。
したがって、特に、日本語サイトにはこういった間違いが多そうな気がします。
この記事を参考にして、自分が管理するスマホサイトが適切に構成されているかをチェックしてください。