ちょうど1年前に私が書いた記事（スマホ対応の新潮流「レスポンシブ・Webデザイン」とは？）を皮きりに、日本のWebメディアやブログでも「レスポンシブ・Webデザイン」が話題になっている。みなさんも一度はレスポンシブ・Webデザインについて聞いた、あるいは記事を目にしたことがあるのではないだろうか？
スマートフォン向けのWebサイトを提供する上で、レスポンシブ・Webデザインは有効な手段だという認識が海外で広がっているが、日本では「流行」「夢の世界」「現実的ではない」などと誤解している方が多いようだ。誤解を生む背景には、レスポンシブ・Webデザインの定義を勘違いしていたり、深く理解せずに言葉遊びとして捉えていたりする傾向があるように思う。
そこで、あらためてレスポンシブ ・Webデザインのメリットと今後の動向について紹介する。
レスポンシブ・Webデザインとは？
レスポンシブ・Webデザインについてご存知でない方もいると思うので、簡単に再定義しよう。レスポンシブ・Webデザインとは、ブラウザーのウィンドウ幅に合わせてCSSでWebページのレイアウトを変更する手法のことだ。技術的には「Media Queries（メディア・クエリー）」「Fluid Grid（フルード・グリッド）」「Fluid Image（フルード・イメージ）」という3つのテクニックを用いて実現する。
一見、バラバラと思われる3つの技術を、米国の開発者であるEthan Marcotte（イーサン・マルコッテ）氏が、2010年にテックブログ 「A List Apart」で「Responsive Web Design」として紹介したことでその名が広く知られるようになった。
もう1つの方法からレスポンシブ・Webデザインのメリットを知る
レスポンシブ・Webデザインをより知るために、Webサイトをスマートフォンに対応するもう1つの選択肢をみていくことにしよう。レスポンシブ・Webデザインと異なる従来の手法として、デバイス（端末）のユーザーエージェントを元にHTMLとCSSを振り分ける方法がある。
この手法は、フィーチャーフォンの時代に考え出されたマルチデバイスへのアプローチの1つで、Web閲覧端末として貧弱な機能しか持たず、制限が多かったフィーチャーフォンではベストとされ、一般的に利用されていた。
しかし、すでに時代はスマートフォン中心に移行しつつあり、振り分けをする必要がなくなっているという認識を持つことが重要だ。今まで一般的だった考えを変えることは難しいが、振り分けをするデメリットを理解することで、レスポンシブ・Webデザインのメリットを理解できるはずだ。
1.振り分けの受難「Android」
Androidの端末数が急速に増加している。2011年は国内で30種類程度だったAndroid端末が、この1年の間で100種類以上になり、つい先日もドコモから「らくらくフォン」を含む16機種ものAndroid端末が発表された。脅威の増え方だ。
解像度もOSのバージョンも異なる端末をユーザーエージェントで振り分けて個別のHTMLとCSSを提供することは難しく、たとえ現時点で実現できたとしても今後の更新作業などは対応しきれないだろう。設計が複雑になり、新しいデバイスの情報を収集するためのリソースを考えると、コストはますます膨れ上がる一方だ。
2.振り分けの受難「スマートTV」
これから普及するであろうスマートTVへの対応も困難だ。スマートTVとは、スマートフォンのようにWebを閲覧したり、アプリをダウンロードして楽しんだりできるテレビのことで、世界的には韓国のサムスンがリードしている（スマートTVという言葉自体を公にしたものもサムスンだ）。サムスンは今秋にも日本市場へスマートTVを投入するとされているが、遅かれ早かれ、スマートTVは日本でも定着するだろう。
だが、スマートTVのユーザーエージェントはメーカーによって社外秘扱いされていることがあり、公式情報として開示されるとは限らない。発売中のスマートTVをすべて調べるのは非現実的であり、ユーザーエージェントでは振り分けられない、と考えた方がよさそうだ。
W3Cの考え方「One Web」
レスポンシブ・Webデザインを理解するうえでもう1つ知っておきたいのが、HTMLやCSSなどのWeb技術の標準化を推進するW3Cの考え方だ。W3Cが2008年6月に発行した「Mobile Web Best Practice」では、ベストプラクティスとして「One Web」を推奨している（「Section.3.1」）。
"making, as far as is reasonable, the same information and services available to users irrespective of the device they are using"
どのデバイスを利用しているかにかかわらず、無理のない範囲で、同じ情報とサービスをユーザーが使えるようにすること。
つまり、あらゆるデバイスから1つの情報へアクセスできるレスポンシブ・Webデザインの考え方は、W3CのOne Webの考え方と共通の方向性といってよいだろう。
W3Cの今後の動き
レスポンシブ・Webデザインには、低解像度のデバイスにも高解像度の大きなサイズの画像を扱わせるのは無駄なコストではないかとの批判がある。しかし、W3Cのコミュニティグループとして発足している「Responsive Images Community Group」では、「picture要素」などの新しい要素や、head要素、meta要素を利用した解決方法が提案されている。picture要素についてはブラウザーベンダーなどが主導するWHATWGが賛同していないが、img要素へ新たにsrcset属性が提案されるなど、議論を巻き起こした。
いずれにせよ、レスポンシブ・Webデザインの1つの問題に対してW3Cがコミュニティを発足させ、HTML5の策定チームがリアクションしていることは、レスポンシブ・Webデザインが単なる流行りではないことを示していると言えるだろう。
レスポンシブ・Webデザインと他の手法の比較や、レスポンシブ・Webデザインに対するW3Cの動きを概観すると、レスポンシブ・Webデザインは現段階でWeb制作者にとって避けて通れない手法の1つであり、Webデザイナーが持つべきスキルの1つになってきているという世界的な流れが感じられるのではないだろうか。
レスポンシブ・Webデザインは流行りではない
モバイル端末が今後も増え続ければ、スクリーンサイズの多様化による制作者の悩みも増え続ける。スクリーンサイズ問題は避けようのない現実であり、レスポンシブ・Webデザインを外せない1つの理由だ。より早い段階でレスポンシブ・Webデザインへの関心を強め、実務レベルのスキルを身につけたほうがよいだろう。
商業サイトの実装コンセプトを紹介
6月9日に都内で開催されるイベント「SwapSkillsDoubbble(5) OneWeb」では、「商業サイトでのレスポンシブ・Webデザインを行なう上で知っておくべきコンテンツアウトの考えと仕組み」というちょっと長いタイトルで講演する。大企業のサイトでもレスポンシブ・Webデザインで実装するケースが増えているが、実装にはちょっとした工夫が必要。このセッションではプロとしての実装の工夫や商業サイトでレスポンシブ・Webデザインを採用する際の考え方を紹介したい。
Webサイトもスマートフォンアプリも
One Web
- 日時
- 2012年6月9日（土）13:00 〜 17:00（12:45受付開始）
- 場所
- きゅりあん
- 定員
- 250名
- 料金
- 8800円
- スピーカー
-
・長谷川 恭久氏 (Could)
・菊池 崇氏（WDE CEO）
・斎藤祐也氏（サイバーエージェント）
・白石俊平氏 (CAモバイル)
・佐々木 朋美氏(AQ)
詳細・申込みはSwapSkillsのWebページで。
今週末にはアプリ開発のための基礎知識が勉強できるマンスリー の SwapSkillsも開催される。合わせてチェックするのはどうだろうか？
SwapSkillls (28)
発注側も受注側もキチンと理解しておきべき
アプリケーション企画、設計のための基本知識 & 最新フレームワーク
- 日時
- 2012年5月26日（土）14:00 ～ 16:45
- 会場
- 大田区産業プラザ D会議室
- 定員
- 50名 (残席15名程度）
- 料金
- 3200円
- スピーカー
- ・對馬 正氏(スクウェア・エニックス・ホールディングス)
・原田光一氏(フォーディー・ジャパン)
詳細・申込みはSwapSkillsのWebページで。
著者：菊池 崇（きくち・たかし）
Web Directions East LLC代表。allWebクリエイター塾講師。米国にてマーケティングを専攻修了。貿易会社を経て、allWebにてXHTML+CSS基礎講座、XHTML+CSS中級講座、XHTML+CSS上級講座、microformats講座などの講師。オーストラリア、米国、カナダなどで開催されている世界的に有名なカンファレンス「Web Directions」の日本版である「Web Directions East」の発起人。
