このページの本文へ

レスポンシブWebデザインとは (2/5)

2012年06月04日 11時00分更新

文●菊池 崇/Web Directions East

  • この記事をはてなブックマークに追加
本文印刷

レスポンシブWebデザインによる解決

 こうしたさまざまな課題を解決する手法として注目されているのが、レスポンシブWebデザインです。レスポンシブWebデザインは、米国のデザイナー、イーサン・マルコッテ(Ethan Marcotte)氏が2010年5月に技術系のブログ『A List Apart(ア・リスト・アパート)』に投稿した記事で発表されました。

 マルコッテ氏は、2009年にW3CのWebサイトをレスポンシブWebデザインでリニューアルしたWebコンサルティングファーム「Happy Cog」のメンバーでもあります。2009年には、マルコッテ氏のブログ「Unstoppable Robot Ninja」で、レスポンシブWebデザインの核となる「フルードイメージ」と呼ばれる技術を紹介しています。

zu02.png

『A List Apart』にマルコッテ氏が投稿した「Responsive Web Design」(http://www.alistapart.com/articles/responsive-web-design/)

 OSやデバイスをUAで判別してそれぞれのサイトへ振り分けるアプローチに対して、レスポンシブWebデザインでは、あらゆるデバイスに対して単一のWebページ(HTML)を使い、スクリーンサイズ(画面幅)を基準にCSSだけを切り替えてレイアウトを調整します。小さいスクリーンに対しては小さいスクリーンで見やすく操作しやすいレイアウトを、大きいスクリーンに対しては大きいスクリーンに適したレイアウトを提供します。

zu03.png

レスポンシブWebデザインのイメージ

 レスポンシブWebデザインが注目されるのは、「シンプリシティ(simplicity=簡潔さ)」にあります。単一のHTMLを用意すればいいのでメンテナンスの負担が少なく、スクリーンサイズだけを基準にしてレイアウトを変更するため、新しいOSやデバイスが登場してもHTMLを修正する必要はありません。

 異なる複数のスクリーンサイズに対してひとつのHTMLで対応できるレスポンシブWebデザインは、さまざまなスクリーンサイズとOSを搭載したモバイル端末に対応するシンプルな方法なのです。

この連載の記事

一覧へ
Web Professionalトップページバナー

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

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