DESIGNMAP

レスポンシブWebデザインについてのまとめ

記事公開日:2012年11月06日

雑記

端末の多様化がますます加速しています。ここ数ヶ月のニュースをみただけでも、AmazonのKindle、AppleのiPad mini、GoogleのNexus、MicrosoftのSurfaceなどの端末が紙面をにぎわしています。こうした端末「超」競争時代にどうやってWebサイトを構築したらよいのか。また、Twitterのように、モバイルユーザーがPCユーザーより増えているサイトも存在しています。

この対応策として、レスポンシブWebデザインという手法が生まれました。レスポンシブWebデザインは、1枚のHTMLで、あらゆる端末に適応させる手法です。一方で、従来から行われている手法に、最適化した専用サイトを用意する手法があります。

レスポンシブWebデザインをめぐる動き

2012年6月にGoogle ウェブマスター向け公式ブログで、『Google がお勧めするスマートフォンに最適化されたウェブサイトの構築方法』という記事で、レスポンシブWebデザインが推奨された。また、WordPressの標準テンプレート「TwentyEleven」、DreamweaverCS6の、ホームページ・ビルダー17がレスポンシブWebデザインに対応している。Firefoxは、バージョン15から、テストツールとしてレスポンシブデザインビューを標準搭載しています。

代表事例であるThe Boston Globe以降、ISO(国際標準化機構)マイクロソフトのような大規模サイトの事例がでてきました。

後述するErik Runyon氏のブログで、『HigherEd RWD Directory』というページがあり、レスポンシブWebデザインを導入している大学のリンク集があります。既に、多くの大学が採用していることに驚きます。

レスポンシブWebデザインとは

Ethan Marcotte氏が2010年に『A List Apart: Articles: Responsive Web Design』という記事を発表しました。フルードグリッド、フルードイメージ、メディアクエリーという3つのコア技術を組みあわせた手法です。Ethan Marcotte氏は、すでに、2009年3月に、A List Apartでフルードグリッドを(『Fluid Grids』)、2009年4月に、自身のブログでフルードイメージを発表しています(『Fluid Images』)。

フルードグリッドは、幅・マージン・パディングをピクセルで固定せず、%やemで指定して、比率をたもちながらも、ウインドウ幅に応じてレイアウトを伸縮させることができる手法です。フルードイメージは、CSSで画像に対して、「max-width:100%」を指定することで、画像を伸縮できるようにさせる手法です。

メディアクエリーはCSS3のモジュールのひとつで、CSS2のメディア別にCSSを振り分けるMedia typesを発展させたものです。ウインドウの幅・高さ、デバイスの幅・高さ・方向・解像度・対応カラー・縦横比によって、CSSを振り分ける技術です。W3Cで、2001年から仕様プロセスの議論がはじまり、2012年6月に最終段階である勧告(Recommendation)になりました。
W3Cでは、草案(Working Draft)、勧告候補(Candidate Recommendation)、勧告案(Proposed Recommendation)、勧告(Recommendation)という段階を経て、仕様が決められています。

レスポンシブWebデザインで、まず注意したいのは、新技術ではないということです。既にある技術をくみあわせたものに名前をつけたものです。この点においてAjaxと似ています。
もうひとつは、現状ではウインドウ幅にあわせて、レイアウトを変更させる手法と知られていますが、Webの特性であるフレキシブルを受け入れて、活かそうとするデザイン思想である点です。まだ完成された手法ではないことを念頭に置いてください。

最適化(専用サイトへの振り分け)のメリット、デメリット

メリットは、対象端末にあわせて、HTML、CSS、JavaScriptをつくるので、ファイル容量の最適化ができます。不要なコードや画像をダウンロードさせなくて済むため、スピード重視のサイトでは、振り分けが選ばれます。

デメリットは、人と時間と予算が必要な点です。リソースが必要です。開発、テスト、更新において、専用サイト分発生します。更新はCMSを導入して、複数のHTMLを自動生成させる必要があります。Amazonの場合、アプリから、モバイルサイト、PCサイト(リキッドレイアウト)とそれぞれ用意して最適化しています。これを真似するには、リソースが必要になります。

レスポンシブWebデザインのメリット、デメリット

メリットは、1枚のHTMLで対応させるため、統一的なユーザー体験を提供できる、またCMSなしでも更新できる点などが挙げられます。
デメリットは、不要なコードや大きめの画像をダウンロードさせてしまい重くなる、対象端末にあわせた最適化ができない、などが挙げられます。

例えば、Jeff Croft氏は氏のブログ『On "Responsive Web Design" and the mobile context』で、レストランのサイトを例にして、デスクトップユーザーは、お店の写真、完全なメニュー、お店の歴史を、モバイルユーザーは、住所と営業時間を欲する。概して、モバイルユーザーのサイトの目的と、デスクトップユーザーのそれとは異なるため、同じHTMLを提供する必要はないと主張しています。氏はレスポンシブWebデザインは、手法としてはユーザー体験を高めることに使えると認めつつも、モバイル向けとしては有効ではないという立場をとっています。

最適化とレスポンシブWebデザインのミックス手法

レスポンシブWebデザインのデメリットを乗り越える方法として、ベースは1枚のHTMLをレスポンシブWebデザインでつくりつつ、PHPなどを使いサーバー側で、コンポーネント単位でHTMLの出力を振り分ける方法があります。たとえば、モバイル用に最適化されたヘッダーとその他のヘッダーを用意しておき、出力を振り分けます(実装のイメージはLuke Wroblewski氏のブログの記事『RESS: Responsive Design + Server Side Components』を参照)。

この手法は、University of Notre Dameが有名な事例です。実際に、このサイトでユーザーエージェントをモバイル系のブラウザにきりかえると、サーバー側で検出して、出力するHTMLを大きく変わるようになっています。このサイトの実装を担当したErik Runyon氏によれば、モバイルかタブレット・PCかで、HTMLの出力をきりわけているそうです(『Implementing Responsive Design』P210〜211の同氏の寄稿を参照)。

コンテンツの優先順位が重要

レスポンシブWebデザインで一番重要になるのは、コンテンツの優先順位です。スマートフォンというわずか4インチ前後の大きさですと、一番、ユーザーにとって利益になるコンテンツは何かを追求せざるをえなくなります。

レスポンシブWebデザインでは、まずは小さな画面でのコンテンツを考えて、ワイヤーフレームをつくってゆくことをおすすめします。

参考文献のまとめ

今回の記事を書くために、参考にした本を、簡単なコメントともにまとめておきます。

Responsive Web Design
レスポンシブWebデザインの生みの親であるEthan Marcotte氏本人による小冊子。特に、理論部分であるCHAPTER1とCHAPTER5が必読です。私は、A Book Apartのサイトから直接購入しました。必読文献で、翻訳が待たれます。
Implementing Responsive Design
画像の振り分け方法、ブレイクポイントをemで実装する、RESSなど、実装レベルまでよくまとまっています。単なるレイアウトの変化の実装だけでなく、理論面、ワークフロー、コンテンツ戦略にもの多くの章を割いています。
レスポンシブ・ウェブデザイン標準ガイド
和書では初めてのレスポンシブWebデザインの専門書です。サンプルも十分にあり、読みやすいです。
ウェブレイアウトの教科書 PC・スマートフォン・タブレット時代の標準デザイン
2010年以降の、海外の膨大なWebデザイン関連の文献を読み込んで書かれた労作。理論面も含めて、よくまとまっています。
Web Designing 2012年10月号
レスポンシブWebデザインの特集。サンプル付きで分かりやすいです。
↑このページの上に戻る