4-1
なぜレスポンシブ Web デザインなのか
マルチデバイス時代の到来
さまざまな画面解像度を持つスマートフォンやタブレットなどのタッチデバイスが急速に普及しています。ブラウザーの同期機能などを利用し、自宅のパソコンで閲覧していた Web サイトを外出先や移動中にタッチデバイスで引きつづき閲覧する、つまり、ひとつの Web サイトを閲覧するにもユーザーが複数のデバイスをシームレスに使い分ける時代になりました。
また、若い世代を中心に、パソコンや固定のインターネット接続回線を持たず、スマートフォンのみで Web サイトを閲覧するユーザーが増加

This Is Not The Web.「これが Web ではない。」
http://bradfrostweb.com/blog/post/this-is-the-web/

しています。
スマートフォンやタブレットに限らず、たとえば、携帯ゲーム機やテレビには、すでにWebブラウザーの機能が組み込まれています。ディス
プレイさえあれば、たとえば、それがカーナビゲーションシステムや冷蔵庫であってもブラウジングできるようになるかもしれません
今後の Web 制作では、いまあるデバイスへの対応だけでなく、未知のデバイスへの対応を視野に入れなければなりません。

This Is the Web.「これが Web である。」
http://bradfrostweb.com/blog/post/this-is-the-web/

This Will Be the Web.「これが Web になる。」
http://bradfrostweb.com/blog/post/this-is-the-web/164ユーザーの閲覧環境は「可変」と考える
これまでは画面解像度 1024 × 768px のパソコンのディスプレイで最適に表示されるように、幅 960px 前後での固定レイアウトが一般的でした。
しかし、現在は、さまざまな画面サイズ、画面解像度のデバイスでも閲覧される、つまりユーザーの閲覧環境は「可変」の前提で Web デザインを考Google アナリティクスの画面あるサイトがどの画面解像度で閲覧されているかを示している。スマートフォンやタブレットの普及によって、画面解像度が急速に多様化している

現状ではおおよそ、画面解像度やブラウザーのウィンドウサイズの幅が4レスポンシブ Web デザイン

えなければなりません。

480px 以下（主にスマートフォン）、960px 以上（主にパソコン）、そして、これらの中間（主にタブレット）のデバイスがあります。
加えて、スマートフォンとタブレットにはデバイスの縦向き（Portraitモード）と横向き（Landscape モード）があることを覚えておきましょう。

165

Google アナリティクスの画面。あるサイトがどのようなデバイスで閲覧されているかを示している
スマートフォンやタブレットの普及、特に Android 端末の種類の多さが目立つ

デバイス振り分けの限界
Web 制作におけるマルチデバイス対応は、いまにはじまったことではありません。過去、そして現在でも一部の Web サイトやサービスは、フィーチャーフォン
（従来の携帯電話）用のサイトを提供しています。
フィーチャーフォンには、デバイスごとの性能、HTML や CSS の仕様実装の差異が大きいこと、JavaScript がほぼ使えないこと、さらにキャリアごとの独自仕様があります。
そのため、デバイスごとに最適化した静的な Web ページ、またはテンプレートを用意しておき、アクセスしたデバイスのユーザーエージェント名や IPアドレスをサーバーサイドで確認し、振り分けて対応せざるを得ません。
しかし、すでに触れたように、カーナビゲーションシステムや冷蔵庫までもが Web サイトにアクセスするデバイスになると仮定すると、それら未知のデバイスにも振り分け処理で対応していくのは難しいでしょう。現在でもスマートフォンやタブレットには多種多様な機種があり、振り分け処理には限界があります。
そこで、振り分けによる表示最適化の限界を乗り越えるために注目を集めている手法が、1 章でも触れた「レスポンシブ Web デザイン」です。

166

HTML

CSS

HTML

フィーチャーフォンA用
静的ページ

CSS

……

HTML

フィーチャーフォンB用
静的ページ

CSS

HTML

スマートフォンA用
静的ページ

……

CSS

スマートフォンB用
静的ページ

HTMLCSS

HTML

タブレットA用
静的ページ

CSS

……

HTML

タブレットB用
静的ページ

CSS

パソコン用
静的ページ

PHPや.htaccess

Webサーバー

User AgentHTML

User Agent

CSS

フィーチャーフォンA用
静的ページ

HTML

User Agent

CSS

HTML

スマートフォンA用
静的ページ

User Agent

タブレットA用
静的ページ

スマートフォン

フィーチャーフォン

CSS

HTMLCSS

パソコン用
静的ページ

タブレット

パソコン

CSS

Webサーバー
HTMLCSSHTML@media screen and (max-width: 480px){/* 適用するスタイル */}@media screen and (min-width: 481px)
and (max-width: 959px){/* 適用するスタイル */}@media screen and (min-width: 960px){/* 適用するスタイル */}HTMLCSSCSS@media screen and (max-width: 480px){/* 適用するスタイル */}@media screen and (min-width: 481px)
and (max-width: 959px){/* 適用するスタイル */}@media screen and (min-width: 960px){/* 適用するスタイル */}

4

HTML

レスポンシブ Web デザイン

デバイスごとに最適化した静的な Web ページを用意し、振り分ける例
サーバー上の PHP スクリプトや .htaccess ファイルで User Agent を判別し、それに応じた Web ページ（HTML・CSS ファイル）をデバイスに送る@media screen and (max-width: 480px){/* 適用するスタイル */}@media screen and (min-width: 481px)
and (max-width: 959px){/* 適用するスタイル */}@media screen and (min-width: 960px){/* 適用するスタイル */}スマートフォン

タブレット
パソコン

レスポンシブWebデザインでは、デバイスの画面解像度やブラウザーのウィンドウサイズに応じて適用すべきスタイルを判定し適用する。HTML ファイルは基本的に共通、CSS ファイルは Media Queries（メディア・クエリー）を利用し、共通で適用したいスタイルはすべてのデバイスに、個別に適用したいスタイルは個々のデバイスに適用する

167

レスポンシブの本当の意味
タッチデバイスのブラウザーは、パソコンのブラウザーと同等に HTML やCSS、JavaScript をサポートしています。レスポンシブ Web デザインではそれらの技術を利用し、画面解像度やウィンドウサイズに応じて Web サイトのレイアウトや装飾の変更、コンテンツの表示順序の変更などを行います。しかし、レスポンシブWebデザインは、画面解像度やウィンドウサイズでレイアウトを変える、あるいは、HTML をワンソースで済ませることのみを目的とした制作手法ではありません。
「レスポンシブ」とは「環境の変化に対して柔軟に対応する」ことを意味します。つまり、Web サイトがどのようなデバイスでアクセスされても、また、近い将来、未知のデバイスからアクセスされたとしても、少なくともコンテンツが閲覧できることを担保するという含意があります。
デバイス振り分けに限界がおとずれたなかで、「最適化」ではなく「汎用化」を目指すのがレスポンシブ Web デザインです。実はこの点が、かなり誤解されているようです。
単にいま、ユーザーが手にしているタッチデバイスへの対応だけではなく、これから登場するであろう未知のデバイスへの対応も含め、マルチデバイス対応のひとつの手段として、レスポンシブ Web デザインに取り組む価値があることは確実です。

168

4-2
レスポンシブ Web デザインに大切な考え方
コンテンツ・ファーストで考える
従来の Webデザインでは、パソコンでの表示を念頭に置き、幅 960pxでレイアウトを考えてきました。その大きな箱のなかに、運営側が意図する、ときにはエゴにもとづく、たくさんのコンテンツを詰め込むのが一般的でした。Web サイト全体としてページ数に制限はないため、長い運営期間のなかであれもこれもとコンテンツを追加した結果、管理が行き届かずにところどころが破綻しているサイトも見受けられます。
このようなサイトでレスポンシブ Web デザインを採用する場合、タッチデバイス用の設計やレイアウトを検討する段階で、いかに「コンテンツを端折る具体的には「一部のコンテンツを非表示にしたり、リンクを表示しないことで動線を消す」というアプローチです。あるいは、レスポンシブWeb デザインではなく専用サイトを提供する場合、スマートフォン用のコンテンツしか用意していない Web サイトも多いようです。

HeaderHeaderMain Content

Main Content

Content 1

Content 1

4

コンテンツや動線を削除してしまうと、スマートフォンユーザーはコンテンツを見れなくなってしまう

レスポンシブ Web デザインか」という思考に陥りがちです。

Content 2FooterSide NavFooter

パソコン

スマートフォン

169どちらの場合も、ユーザーのコンテキスト（背景や文脈）をふまえてコンテンツを取捨選択しているケースがほとんどでしょう。航空会社のスマートフ
ォン用のWebサイトが、運行状況、時刻表、予約確認などのコンテンツのみを用意するといった例です。

デルタ航空

http://www.delta.com/
パソコン用の Web サイトへアクセスしなければ手に入れられないコンテンツが多数ある例

しかし、ユーザーがスマートフォンでアクセスしたからといって外出中とは限らず、まさにいま空港で時刻表や予約状況を確認したいとも決めつけられません。リビングでくつろいでいるときに、手元のスマートフォンやタブレットでアクセスしているのかもしれません。
このようなサイトからは、緊急性の高い情報ではなく、じっくりと見たい情報を、ユーザーが手に入れられないことが想定されます。パソコン用サイトに抜けるリンクを用意しておくのもひとつの方法ですが、見やすさや操作のしやすさが保証されているわけではありません。
つまり、ユーザーのコンテキストは簡単に割り切れないと考えるべきでしょう。ユーザーが「スマートフォン用ではなく、パソコン用のサイトが見たい」と口にする場合、コンテキストを無理に狭めてコンテンツの取捨選択を行った結果、見たいコンテンツが見られなくなってしまっていることが大きな理由です。必ずしも、スマートフォン用サイトが使いにくいわけではなさそうです。

170

モバイル・ファーストで考える
ユーザーは主にパソコンを使い、スマートフォンは補助的に使う、あるいは、パソコン用がメインで、スマートフォン用サイトはサブである、という認識が正しいかどうか、もう一度考え直す必要があります。具体的には、
モバイル・ファースト、つまり「まずスマートフォンでの利用を前提に Web サイトをデザインする」と考えることです。
画面サイズ、画面解像度、性能、通信環境などスマートフォン特有の制約を考えれば、コンテンツの取捨選択が必要であるのは変わりありません。
しかし、その結果、残すと判断したコンテンツこそが、Web サイトに本当に必要なコンテンツといえます。
表現を変えれば、スマートフォン用サイトで提供しないコンテンツは、ほぼ不要といえるでしょう。もちろんパソコンの表示領域の広さや処理能力の高さを活かしたコンテンツには必要性がありますが、あくまで例外であって、まずモバイル環境での閲覧を想定してコンテンツやレイアウトを設計することが大切です。

たいと考えています。スマートフォンでの軽快な動作を前提にナビゲーションなどの UI を実装すれば、不要な装飾が省かれ、自然と洗練された状態になるでしょう。
このように、コンテンツ・ファーストやモバイル・ファーストは「ユーザー・ファースト」につながる発想であり、マルチデバイス時代の Web デザインでは必須の考え方といえます。

レスポンシブ Web デザイン

モバイルユーザーは、より速く、より少ない手順でコンテンツを手に入れ

44Gamer.net（ゲーム情報を提供するサイト）
http://www.4gamer.net/

PlayStation Vita でアクセスした場合は最適化された専用サイトが表示される

171

レスポンシブ Web デザインに向くサイト、向かないサイト
そもそもレスポンシブ Web デザインは必要か
新規の Web サイト制作であれば、目的や方針、想定ユーザーなどから、レスポンシブ Web デザインが、さらにいえばマルチデバイス対応が必要なのかを考えましょう。リニューアルであれば、アクセス解析データなどで現状を確認し、タッチデバイスなどのアクセス割合などをもとに、採用の適否を決めましょう。
いずれの場合も、今後、タッチデバイスからのアクセスが増加するビジネス展開を予定しているのであれば、レスポンシブWeb デザインは有力な選択肢となるでしょう。該当しない場合は、無理にレスポンシブ Web デザインを採用する必要はありません。レスポンシブ Web デザインを採用したからといってコストが安くあがるとは限りませんし、Web サイトの立ち上げやリニューアルの目的に貢献できなければ本末転倒です。
ほぼスマートフォンだけからアクセスされる、あるいは、専用デバイスのユーザー用の Web サイトなどであれば、パソコン用サイトも兼ねるレスポ
ンシブ Web デザインではなく、専用サイトを提供するほうが、ユーザーへの効果的な情報伝達、コストの削減、効率的な運用につながります。
単に流行だからという理由だけで、あるいは、制作者や担当者の興味本位でレスポンシブWebデザインを採用することは避け、ユーザーにメリットがあるか、ビジネス・メリットにつながるかを考えましょう。

理解のないクライアントには勧めない
クライアント企業の規模が大きければ、何度も社内会議にかけられ、その都度、担当者が上司や役員、関係者に説明する必要が出てくるでしょう。
担当者のレスポンシブ Web デザインに関する知識はもちろん、メリットやデメリットをうまく説明するスキルが求められます。
担当者が十分に説明していると考えられるならば、無理にレスポンシブWeb デザインを勧める必要はありません。すでにメリットとデメリットが役員にもわかっているはずだからです。企業の方向性の理解、最終責任の所在という点でも、役員の判断を待つしかありません。
もし担当者が十分な理解を得ていないならば、同席して詳しく説明するとよいでしょう。会社の Web サイトの活用方針を確認しながら、採用の適否をアドバイスすることができます。
ただし、担当者がスマートフォンを使っていない、上司も使っていないという場合、議論が空転する恐れがあります。自分で日ごろから使ってこそのデバイスですので、すぐにスマートフォンに切り替えるのは難しくても、比較的安価なタブレットの購入を勧めるなど、タッチデバイスを身近に感じてもらうことから提案するのもよいでしょう。
172