2012年11月21日水曜日
スマートフォン向けに最適化されたウェブサイトの構築について、
Google がお勧めする方法
を公開して以来、ウェブマスターの皆さんから「タブレット端末はどう取り扱うのがよいのか」という質問をよくいただきます。これは Android 向けアプリのデベロッパーの皆さんが直面する問題とよく似ていますので、「
Building Quality Tablet Apps （高品質なタブレット用アプリの構築方法）
」 （英語）に関するガイドをお読みいただくことから始めるとよいでしょう。
タブレット向けに最適化された、検索エンジンと相性の良いウェブサイトの構築方法については、Google からは具体的にお勧めしていることはありませんが、スマートフォンとタブレット両方のユーザーに対応するウェブサイトの構築方法に関してはいくつかアドバイスがあります。
タブレットからサイトにアクセスするユーザーのことを考えるとき、端末のことだけでなく、ユーザーが何を期待しているかを考慮することが大切です。スマートフォンに比べ、タブレットは大きなタッチ スクリーンを持ち、通常は Wi-Fi 接続を使用します。タブレットはデスクトップ PC やノート PC と同等の充実したブラウジング体験を、持ち運びやすく軽量で、通常、より使いやすい形態で提供するものです。 つまり、タブレット向けに最適化されたコンテンツを提供している場合を除き、ユーザーはスマートフォン版のサイトではなく、PC 版のサイトが表示されることを期待しているのです。
Google では、スマートフォン向けに最適化されたサイトに関して、 レスポンシブ ウェブ デザイン (英語) を使用すること、すなわち、あらゆる端末に対応する 1 つのサイトを用意することをお勧めしています。皆さんのサイトが、この推奨に従ってレスポンシブ ウェブ デザインを採用している場合は、さまざまなタブレット端末上でサイトの表示をテストし、タブレット端末も適切に対応されていることを確かめてください。スマートフォンの場合と同様に、さまざまな端末サイズや画面解像度でテストする必要があります。
このほかよく用いられるのは、PC 向けとスマートフォン向けに別々のサイトを用意し、ユーザーを該当する方のサイトにリダイレクトするという構成です。この構成を採用している場合は、タブレット ユーザーを誤ってスマートフォン版のサイトにリダイレクトしないように注意してください。
まとめると、ユーザー エージェントに「Mobile」が含まれていない Android 端末はすべてタブレット（あるいはその他の大きな画面を持つ） 端末ですので、PC 版サイトで対応するのが良いでしょう。
例えば、Galaxy Nexus スマートフォン上の Chrome が提供するユーザー エージェント文字列は次のとおりです。
Mozilla/5.0 (Linux; Android 4.1.1; Galaxy Nexus Build/JRO03O) AppleWebKit/535.19 (KHTML, like Gecko) Chrome/18.0.1025.166 Mobile Safari/535.19
また、Galaxy Nexus 上の Firefox が提供するユーザー エージェントは次のようになります。
Mozilla/5.0 (Android; Mobile; rv:16.0) Gecko/16.0 Firefox/16.0
Nexus 7 上の Chrome が提供するユーザー エージェントは次のようになります。
Mozilla/5.0 (Linux; Android 4.1.1; Nexus 7 Build/JRO03S) AppleWebKit/535.19 (KHTML, like Gecko) Chrome/18.0.1025.166 Safari/535.19
同じく Nexus 7 で、Firefox の場合は次のとおりです。
Mozilla/5.0 (Android; Tablet; rv:16.0) Gecko/16.0 Firefox/16.0
Galaxy Nexus のユーザー エージェントには「Mobile」が含まれているため、スマートフォン向けのサイトで対応し、一方 Nexus 7 には PC 版のサイトを表示させます。
皆さんが、タブレット向けに最適化されたより高品質なウェブサイトを構築するのに、この記事がお役に立てば幸いです。ご質問がありましたら、 ウェブマスター ヘルプ フォーラム までお寄せください。
タブレット向けに最適化された、検索エンジンと相性の良いウェブサイトの構築方法については、Google からは具体的にお勧めしていることはありませんが、スマートフォンとタブレット両方のユーザーに対応するウェブサイトの構築方法に関してはいくつかアドバイスがあります。
タブレットからサイトにアクセスするユーザーのことを考えるとき、端末のことだけでなく、ユーザーが何を期待しているかを考慮することが大切です。スマートフォンに比べ、タブレットは大きなタッチ スクリーンを持ち、通常は Wi-Fi 接続を使用します。タブレットはデスクトップ PC やノート PC と同等の充実したブラウジング体験を、持ち運びやすく軽量で、通常、より使いやすい形態で提供するものです。 つまり、タブレット向けに最適化されたコンテンツを提供している場合を除き、ユーザーはスマートフォン版のサイトではなく、PC 版のサイトが表示されることを期待しているのです。
The NY Times は閲覧端末がモバイルか、より大きなサイズの Android デバイスのどちらであるかを認識し、タブレット端末に最適化したページの表示を行っています。
Google では、スマートフォン向けに最適化されたサイトに関して、 レスポンシブ ウェブ デザイン (英語) を使用すること、すなわち、あらゆる端末に対応する 1 つのサイトを用意することをお勧めしています。皆さんのサイトが、この推奨に従ってレスポンシブ ウェブ デザインを採用している場合は、さまざまなタブレット端末上でサイトの表示をテストし、タブレット端末も適切に対応されていることを確かめてください。スマートフォンの場合と同様に、さまざまな端末サイズや画面解像度でテストする必要があります。
このほかよく用いられるのは、PC 向けとスマートフォン向けに別々のサイトを用意し、ユーザーを該当する方のサイトにリダイレクトするという構成です。この構成を採用している場合は、タブレット ユーザーを誤ってスマートフォン版のサイトにリダイレクトしないように注意してください。
Android スマートフォンとタブレットを識別する
Android 端末については、ブラウザが提供するユーザー エージェント文字列を使えば、スマートフォンとタブレットとを容易に識別できます。Android のスマートフォンとタブレットのどちらも、ユーザー エージェント文字列には「Android」という単語が含まれていますが、ユーザー エージェント文字列に「Mobile」が含まれているのはスマートフォンの場合のみです。まとめると、ユーザー エージェントに「Mobile」が含まれていない Android 端末はすべてタブレット（あるいはその他の大きな画面を持つ） 端末ですので、PC 版サイトで対応するのが良いでしょう。
例えば、Galaxy Nexus スマートフォン上の Chrome が提供するユーザー エージェント文字列は次のとおりです。
Mozilla/5.0 (Linux; Android 4.1.1; Galaxy Nexus Build/JRO03O) AppleWebKit/535.19 (KHTML, like Gecko) Chrome/18.0.1025.166 Mobile Safari/535.19
また、Galaxy Nexus 上の Firefox が提供するユーザー エージェントは次のようになります。
Mozilla/5.0 (Android; Mobile; rv:16.0) Gecko/16.0 Firefox/16.0
Nexus 7 上の Chrome が提供するユーザー エージェントは次のようになります。
Mozilla/5.0 (Linux; Android 4.1.1; Nexus 7 Build/JRO03S) AppleWebKit/535.19 (KHTML, like Gecko) Chrome/18.0.1025.166 Safari/535.19
同じく Nexus 7 で、Firefox の場合は次のとおりです。
Mozilla/5.0 (Android; Tablet; rv:16.0) Gecko/16.0 Firefox/16.0
Galaxy Nexus のユーザー エージェントには「Mobile」が含まれているため、スマートフォン向けのサイトで対応し、一方 Nexus 7 には PC 版のサイトを表示させます。
皆さんが、タブレット向けに最適化されたより高品質なウェブサイトを構築するのに、この記事がお役に立てば幸いです。ご質問がありましたら、 ウェブマスター ヘルプ フォーラム までお寄せください。