最近話題の「レスポンシブ・ウェブデザイン」。仕事柄ウェブ制作にも触れるので、勉強がてらまとめてみました。






レスポンシブ・ウェブデザインとは?



ウィンドウサイズに合わせて、自動的にページのデザインを最適化する技術を「レスポンシブ・ウェブデザイン」と呼びます。

これは実例を見て頂いた方が分かりやすいでしょう。例えばGoogleのAboutページ

ウィンドウが最大の状態では、このようなデザインになります。

Ihayatoblog 2012 05 18 8 50 21

ウィンドウを狭めると、こんなデザインに自動的に変化します。スマホで見てもこのデザインになります。

Ihayatoblog 2012 05 18 8 50 44




他にはこんなサイトも。ウェブ制作会社のサイトです。


フルスクリーンだとこんな感じ。

Ihayatoblog 2012 05 18 8 52 29

ウィンドウを狭めるとこんな感じに。同じURLです。「OUR WORK」というナビゲーションが自動で追加されますね。

Ihayatoblog 2012 05 18 8 53 13





こちらのサイトもすごい。

大。

Ihayatoblog 2012 05 18 8 55 13

中。

Ihayatoblog 2012 05 18 8 55 36

小と変わります。

Ihayatoblog 2012 05 18 8 55 42




導入のメリット



代表的なメリットをまとめてみました。

運営の負担が軽くなる



Rriver » レスポンシブWebデザインを採用した4つの理由という記事では、運営負荷の軽減がメリットとして挙げられています。

現在、いわゆるデスクトップ向けウェブサイトとは別に携帯(ガラケー)向けのウェブサイトを運営しているのですが、2つ運営するサイトがあると単純に更新作業が2倍になるだけでなく、チェック作業も2倍、アクセス解析も2倍といったように、すべてが2倍になります。

(中略)

ワンソースで複数の端末の表示に耐えうるサイトが作れる「レスポンシブWebデザイン」という手法は、リスクを負う価値のある魅力的なものでした。

Rriver » レスポンシブWebデザインを採用した4つの理由






コンテンツの一貫性



ツイッターなどで共有されているリンクを踏むと、PCで見ているのにモバイルUIで表示されることってたまにありますよね。BlogosとかよくLite版で表示されます(lite.blogos.com)。

Ihayatoblog 2012 05 18 9 02 45
(PCなのにモバイル版で表示)

URLを分ける必要がない「レスポンシブ・ウェブデザイン」ならこうしたユーザーの混乱を防ぐことができます。








他には

・CSSだけで実装するのでフロントエンドで開発が完結すること
・他のデバイスへの拡張性が高いこと(将来普及するスマートTVやスマートカーなどのデバイスにも対応可能)
・スマートフォン非対応のCMSでもCSSの調整だけで対応できること

ASCII.jp:スマホ対応の新潮流「レスポンシブWebデザイン」とは?



・単一のURLで対応できるため、SEO的にもメリットがある

SEO Benefits of Responsive Web Design | Practical eCommerce


といったメリットが挙げられています。





導入のデメリット・注意点



デメリットと注意点を調べてみました。




「表示」の最適化にすぎない



レスポンシブ・ウェブデザインは、あくまで表示をウィンドウサイズに合わせて最適化する技術であって、各デバイスの利用シーンに合わせて詳細に最適化するわけではありません。

例えばLinkedinは「モバイルとPCでは利用シーンが違うため、レスポンシブデザインは採用できない」と語っています

モバイルとPCで大きくユーザーの利用シーンが変わる、アプリに近いウェブサイトには、レスポンシブデザインは向いていないと言えるでしょう。




サイトが重くなる



場合によってはサイトが重くなるケースもあるようです。ブログのように、テキストベースのページの場合は問題なさそうですね。

デメリットはPC用の画像・CSSをPCサイトと同様に読み込むため(読んだ上で表示しないという仕組み)、サイトが重くなる

レスポンシブ・ウェブ・デザインについて CSS Nite Vol.59





広告



モバイル用とPCで広告を出し分けている場合は、対応が難しいようです(参考)。






小一時間調べた感じだと、こんなところが情報として得られました。僕はデザイナーではないので見落としている視点もあると思います。もしよろしければコメント欄にてご指摘ください。





ちなみにGoogleはレスポンシブデザインを推奨している感じです。深読みしすぎかもしれませんが、SEO的には確かにレスポンシブの方がメリットが強くなっていくのかも。




海外の記事ですが、こちらのリンク集がものすごくまとまっています。より詳しく知りたい方はぜひ。

The ultimate responsive web design roundup