デバイスにあったページを用意する

３種類の方法

  1. セパレートURL（Separate URL）
  2. 動的配信（Dynamic Serving）
  3. レスポンシブWebデザイン（Responsive Web Design）

セパレートURL

  • アクセスしてきたデバイスに応じてリダイレクトを行い、適切なページヘ誘導するように設定します
  • 複数のページとURLを管理する手間がかかる
  • リダイレクトに関するトラブルが生じやすい
  • ユーザーエージェントによる判別が必要
ページの関係を明示する
  • 「重複したコンテンツ」であると検索エンジンに認識されるのを防ぐ


PC用ページ（メインとなるページ）に追加する設定

  • 代替ページとしてモバイル用のページが存在することを明示します
<link rel="alternate" media="only screen and ( max-width: 599px)" href="http://m.example.com/">


モバイル用ページ（代替ページ）に追加する設定

  • メインとなるページとしてPC用のページが存在することを明示します
  • URL正規化タグ（link rel="canonical"）
<link rel="canonical" href="http://example.com/">
リダイレクトの設定
RewriteEngine On
RewriteCond %{HTTP_USER_AGENT} (iPhone|Android.*Mobile|Windows\ Phone) [NC]
RewriteRule ^(.*)$ http://m.example.com/$1  [R=302,L]

動的配信

  • Dynamic Servingを利用して、デバイスにあったページを１つのURLで配信します
ユーザーエージェントに応じて出力内容が変わることを伝える
  • Apacheサーバーを利用している場合、「.htaccess」ファイルに設定を追加します
  • Googleのモバイルガイドでは、「Vary HTTPヘッダー」の設定を推奨しています
  • Vary HTTPヘッダーに「User-Agent」という値が含まれていれば、「このページはユーザーエージェントに応じて出力内容が変わる」ということを伝えることができます
Header append Vary User-Agent
ブラウザに用意された機能でPC用ページに切り替える
  • iOS8以上とAndroidのブラウザには、PC用ページに切り替える機能が標準で搭載されています


iOSでPC用ページに切り替える

  • アドレスバーをタップし、表示されたブックマークを下にスワイプします
  • 「デスクトップ用サイトを表示」を選択します


AndroidでPC用ページに切り替える

  • メニューを開き「PC版サイトを見る」を選択します

レスポンシブWebデザイン

  • １つのページをCSSを変化させることによって、複数のデバイスに対応させていく方法
  • モバイル用のデザインは、画面の横幅大きくなってもレイアウトが大きく崩れることはありません
  • PC用のデザインは、画面の横幅がNexus7の600px以下になるとメニューの配置が崩れたり、読みづらくなるといった問題が生じます
  • 以上のことから、「768px以上」はPC用、「767px以下」はモバイル用のCSSに切り替え、どのデバイスでもレイアウトが崩れないようにします
メディアクエリを使ったCSSの記述
@media (max-width: 767px) {
　　/* モバイル用のCSSの設定を記述 */
}
@media (min-width: 768px) {
　　/* PC用のCSSの設定を記述 */
}


後から記述した設定の優先順位が高くなるため、次のように記述することも可能です。

/* モバイル用とPCで共通したCSSの設定を記述 */

@media (max-width: 767px) {
　　/* 共通の設定に追加・上書きする
　　モバイル用のCSSの設定を記述 */
}
@media (min-width: 768px) {
　　/* 共通の設定に追加・上書きする
　　PC用のCSSの設定を記述 */
}


ブレイクポイントの追加

  • 500pxにブレイクポイントを追加します
@media (min-width: 500px) and (max-width: 767px) {
　　/* ２段組のCSSの設定を記述 */
}