Web サイトのモバイル対応の手法に関連する調査をしたついでのメモです。
最近のインターネット利用状況のデータ
ニールセンの調査による 2014年日本のインターネットサービス利用者数ランキングから、
インターネットの平均月間利用者数は、
- PC : 約 5210 万人 (-8%)
- スマホ : 約 4260 万人 (+34%)
Facebook や Twitter のような SNS 系は当然としても、昨年は、楽天や Amazon のようなショッピングサイトでもスマホからのアクセスの方が多くなった。
今年も同じペースならば 2015 年にはスマホからの利用者数が PC からの利用者数を上回る。
サイトのモバイル対応を実現する手法
調べた範囲で見つかった、クライアントサイドの技術を使った手法
- レスポンシブデザイン
CSSを使って表示デバイスに合わせた表示に切り替える - JavaScript による処理の振り分け
JavaScript で表示デバイスの特性を判別し、実行する処理を切り替える - 動的な JavaScript の読み込み
実行デバイスに応じて異なる JavaScript ファイルを読み込み、表示を変更 - 専用 URL
PC とモバイルそれぞれに専用のアクセス先を用意する
サーバー側の機能が利用可能な場合は、更に 2 つのタイプが追加。
- サーバー側で動的に切り替え
アクセス元のエージェント情報に応じて配信する HTML/CSS を変更 - JavaScript とサーバー側切り替えの組み合わせ
JavaScript でデバイス情報を取得、サーバー側で配信内容を決定
Google の SEO 関連の記事には、「モバイル対応に JavaScript を使用する場合 2 の方法が推奨」 と書かれているので、3 と 6 は無視するとして、とりあえず残り 4 つの選択肢。手法それぞれについて、PCサイトとモバイルサイトの差を (細かい点は無視してとりあず) 表にすると、
URL | HTML,CSS,JS | 描画の振舞い | |
レスポンシブ | 同じ | 同じ | 同じ |
JSで振り分け | 同じ | 同じ | 異なる |
サーバが判別 | 同じ | 異なる | 異なる |
専用URL | 異なる | 異なる | 異なる |
全世界が対象のデータでは、オンラインショッピングサイトの 87% がモバイル向けに専用 URL を提供している。この調査ではモバイルからのアクセスが 55% となっており、ニールセンの日本市場の調査結果とと近いことから、日本市場でも多少は参考になりそう。
一方、1 年ちょっと前の数字ながら、モバイルユーザーからの売り上げの 79% が PC 用サイトからというデータもあり。デバイスの制約に対する単純な妥協としてのモバイル専用サイトはあまり効果的でない?
モバイル対応手段の簡単な定義
この記事で必要な範囲だけ、各々の手法を簡単に定義。同じ言葉で違うものを指す記述を見かけるので念のため。
1.レスポンシブデザイン
- どのデバイスに対しても同じ HTML を使用するが、画面サイズに応じて表示が異なる
- viewport メタタグを使用してブラウザーにコンテンツの表示基準を指示
<meta name="viewport" content="width=device-width, initial-scale=1">
- メディアクエリーを使用して、画面の幅や向きに応じたスタイルを適用
2.JavaScript による処理の振り分け
- どのデバイスに対しても同じ HTML, CSS, JavaScript を使用
- JavaScript が実行環境の特性を判断して描画時の振る舞いを決定する
- PC用とモバイル用に異なる広告を挿入したりという使い方も
if (screen.width < 780) { ... }
3.サーバー側で動的に切り替え
- どのデバイスからでもアクセス先の URL は共通
- サーバーがユーザーエージェントを判別して、配信する HTML/CSS を動的に切り替える
- Vary HTTP ヘッダーにより異なるコンテンツが配信されることを示す
HTTP/1.1 200 OK Content-Type: text/html Vary: User-Agent ...
4.専用 URL
- 同じページに、PC 用とデバイス用 2 種類の HTML/CSS コードを用意、異なる URL から配信
- rel="canonical" と rel="alternate" を使用して 2 つの URL の関係を示す
- (オプションとして) ユーザーエージェントを使って自動的に適切な URL にリダイレクトする
アダプティブという言葉について
アダプティブ (adaptive) は日本語だと 「適応」 と訳される。デバイス画面にサイトデザインを合わせることも 「適応」 なので、モバイル対応の手法を探していると 「アダプティブ」 または 「アダプティブデザイン」 という言葉がしばしば登場。
「適応」 させる際、「何を」 「何に」 「どのように」 次第で、具体的に意味するところが変わる。実際、以下のような記述が存在。
- 上の表の 1 番目で相対値によるサイズ指定をしない場合をアダプティブと呼ぶもの
- 2 番目をアダプティブと呼ぶもの → JavaScript アダプティブ、クライアント側アダプティブ
- 3 番目をアダプティブと呼ぶもの → サーバー側アダプティブ
(ついでに、モバイル利用時のユーザーの行動に合わせたデザインをアダプティブデザインと定義するものも)
2 番目と 3 番目の使い方はしばしば登場 (それぞれの固有な呼び方は上記リスト参照)
CSS か JavaScript か
4 つの手法のうち、最初の 2 つ (レスポンシブと JS アダプティブ) の基本的な違いは、表示の切り替えに CSS を使うか JavaScript を使うか。
レスポンシブ、つまり CSS 中心のアプローチの優位性が高まっているというのが一般的な認識の模様。背景として、
- CSS3 Media Queries が大半のブラウザー環境で利用可能な状況になった
- Sass, Less さらには Bootstrap や Foundation のようなフレームワークの存在
レスポンシブデザインに CSS の補助として JavaScript を使用するのが一般的に行われている。IE 8 以前への対応や、画像の読み込みなど。厳密に JS アダプティブを独立した手法として区別することの意味はだんだん薄くなるのかも。
レスポンシブ + JS アダプティブ組み合わせの例:画面の解像度や幅に応じて無駄なオーバーヘッド無しで最適な画像を表示したい
- Srcset 属性または Picture タグに対応した環境の普及はまだまだ
- MS の最近の動向からは、IE が Srcset, Picture を搭載する可能性はなさそう
- 企業ユーザーの IE から Spartan への移行は進むか?
状況的に、画像の読み込みの最適化は、当面 JS ライブラリへの依存が続きそうな分野の一つ。
レスポンシブデザインのサイトは重いか
レスポンシブデザインに対してよくある否定的な意見:
- つくりが複雑になる。一つのファイルで複数デバイスに対応させるため重い
- こなれた制作手法が存在しない。新しいスキルやリソースが必要
- 専用 URL に比べてユーザーエクスペリエンスの最適化が制限される
下の 2 つについてはつくり手の慣れや制作環境の問題も。モバイル専用サイトにするだけでユーザーエクスペリエンスが向上するわけではないですし。
レスポンシブデザインのサイトは重いのかについては約 9 ヶ月前のこんなデータ。
- 調査したサイトの約 10% がレスポンシブ、25% がモバイル専用
- 平均値では、レスポンシブはモバイル専用サイトの約 2 倍のデータサイズ
- しかし、描画完了までの時間ではレスポンシブが約 5% 高速
若干ながら専用 URL のサイトが遅かったのには、「PC サイトにアクセス → モバイルサイトにリダイレクト」 のオーバーヘッドが発生したことも影響。最初のデータ到着後からの時間の比較だと、専用 URL の方が 9% 高速。ただし、このあたりは接続環境次第で大きく変わりそう。
ここから言えそうなことは、
- レスポンシブだからというだけで極端に表示が遅くなるわけではない
- 単一の URL であることがパフォーマンス上の利点となる場合がある
モバイル対応と SEO
Google より、「4 月 21 日からはモバイルフレンドリーさをサイトの検索ランクに反映」 という発表あり。デバイスからの検索時には、モバイル対応していないサイトは表示されにくくなる模様。
レスポンシブデザインのサイトは Google ボットが自動的に判別するため、特に対策は不要。
専用 URL の場合は alternate と canonical を使ってページ間の関係を記述。関係が見つかった場合と見つからない場合で検索ランクに差が出る。
PC 用のページから対応するモバイル用ページへの注釈を記述した例。PC 用ページには、
<link rel="alternate" media="only screen and (max-width: 640px)" href="http://m.example.com/page1" >
モバイル用ページ、
<link rel="canonical" href="http://www.example.com/page1" >
モバイル用ページから PC 用ページへの関係も記述して、双方向の注釈を記述することも可。サイトとして統一したポリシーであること。
専用 URL サイトで避けた方がよいこと
- PC 用のページがモバイル用に存在しいない
- 関連付けられたページとは別のページにリダイレクトする
- モバイル用のページ内から PC 用のページへのリンク (またはその逆)
サーバー側アダプティブでも簡単な対応は必要。今後、レスポンシブがモバイル SEO の観点から優位になるのかはちょっと注目。
コメントする