増え続けるデバイス対応の切り札になるか

スマホ対応の新潮流「レスポンシブWebデザイン」とは？

2011年06月17日 10時00分更新

菊池崇

ツイートする

　スマートフォンの普及を背景に、「レスポンシブWebデザイン」（Responsive Web Design）という制作手法が海外で注目を集めている。レスポンシブWebデザインとはどのようなアプローチなのか？　実例で解説する。


スマートフォンやタブレットの登場で多様化するスクリーンサイズ。中央の濃い青はモバイル、外側の薄い水色はテレビのサイズで、これだけのスクリーンサイズに対応するには従来の方法では難しい

ウィンドウサイズを基準にデザインを調整

　レスポンシブWebデザインとは、デバイスごとに複数のデザインを用意するのではなく、ブラウザーのウィンドウサイズに合わせてデザインをフレキシブルに調整する制作手法だ。モバイルサイトの制作では、デバイスやスクリーンサイズごとにページを振り分ける方法が一般的だが、レスポンシブWebデザインではHTMLはそのままに、CSS3のメディアクエリーを利用してスタイルシートだけでデザインを変更する。

　レスポンシブWebデザインは、2010年5月、米国のイーサン・マルコッテ氏によって提唱され、海外では企業サイトを含む多くのWebサイトで採用されている。

　たとえば、2009年にリニューアルされたW3CのWebサイト（マルコット氏が所属していたHappy Cog が制作した）は、ウィンドウ幅が480ピクセル以下になるとレイアウトが自動的に変更される。これがレスポンシブWebデザインの一例だ。


1240pxのウィンドウサイズで閲覧したW3Cのウェブサイト


ウィンドウ幅480ピクセルを境にロゴのサイズなどが変わる

一般企業でも進むレスポンシブWebデザイン

　世界的に有名なカメラメーカーの「Leica（ライカ）」は、キャンペーンサイト「Leica Explorer」でレスポンシブWebデインを採用している。ブラウザーのウィンドウ幅を狭めていくと、以下のようにページレイアウトが変わっていく。


ライカのキャンペーンサイト「Leica Explorer」

　WWF（野生動物保護基金）のキャンペーンサイトでも、レスポンシブWebデザインは利用されている。「Leica」の例と同様に、ウィンドウサイズを小さくするとレイアウトが変わっていく。


WWFのキャンペーンサイトでも採用されている

　このように、レスポンシブWebデザインは机上の空論ではなく、すでに有名企業や組織も採用している制作手法なのだ。

マルチスクリーン時代の最新のコンセプトと技術を学ぶ
「SwapSkills doubbble01」早割締切迫る！

　本稿で紹介した「レスポンシブWebデザイン」や、海外で広まりつつある「モバイルファースト」など、マルチスクリーン時代のWeb制作のコンセプトと技術を学ぶセミナーイベント「SwapSkills doubbble01」が、7月2日、東京都内で開催されます。

　Webデザイナーの長谷川恭久氏、Yahoo! JAPANでスマートフォン版のUI設計を担当した藤木裕介氏／伊東宣之氏、HTML5/CSS対応を進めるハンゲーム（NHN Japan）の馬場宣孝氏など豪華スピーカー陣による充実の5時間です。6月18日までの申込みなら参加費が1000円引き！　ぜひお早めに申込みください。