このページの本文へ

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

スマホ対応の新潮流「レスポンシブ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」早割締切迫る!

SwapSkills doubbble vol.01|モバイルサイト制作に見る、次世代Webのカタチ[One Web]

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

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

SwapSkills doubbble01
モバイルサイト制作に見る、次世代ウェブのカタチ『One Web』

日時
2011年7月2日(土)13:00 ~ 18:00
会場
野村カンファレンスプラザ日本橋
定員
135名
料金
7500円(5月28日〜6月18日まで)、8500円(6月19日以降)
申込み
http://swapskills.info/2011/doubbble01.html
Web Professionalトップページバナー

この記事の編集者は以下の記事をオススメしています

ASCII.jp会員サービス 週刊Web Professional登録

HTMLリファレンス誘導バナー

CSSリファレンスサイト誘導バナー

Webディレクター江口明日香が行く

ランキング