レスポンシブWebデザインの使い道って？

SwapSkills さんが日本に紹介して急速に広まりつつあると思う「Responsive Web Design：レスポンシブ・ウェブ・デザイン」についてまとめてみました。

「Responsive Web Design：レスポンシブ・ウェブ・デザイン」
過去においてはリキッドデザイン（サイズ可変デザイン）と呼ばれ、主にPCの画面幅に応じて横幅が拡大・縮小するHTMLレイアウトのこと。
過去のリキッドデザインとの違いは全ての横幅で同一のレイアウトではなく、CSS3 Media Queries によって横幅指定でレイアウトが変更できるようになったこと。

以下を順番に読んでいくとレスポンシブWebデザインの大枠を理解できると思います。

スマホ対応の新潮流「レスポンシブWebデザイン」とは？
http://ascii.jp/elem/000/000/613/613028/
レスポンシブ・ウェブデザインって何？
http://all-web-blog.blogspot.com/2011/03/blog-post_09.html
WebサイトをiPhoneに対応させる -レスポンシブ・デザイン-
http://designblog.ecstudio.jp/design-2/responsive-design.html
iPhoneやiPad等にもWebサイトを最適化するレスポンシブWebデザイン構築に役立つフレームワークやTipsいろいろ
http://kachibito.net/web-design/responsive-web-design-resource.html
Media Queries （レスポンシブ・デザインを採用したWebサイト集）
http://mediaqueri.es/

レスポンシブWebデザインの使い道

これだけ見るとレスポンシブWebデザインのWebサイトを一つ用意すれば全てのデバイスに最適化できるように思えますが基本的にはPC向きであってモバイル向きではないと思います。

[翻訳]モバイル向けの CSS Media Queries は見掛け倒しである
http://unformedbuilding.com/articles/css-media-queries-for-mobile/

• 核となる前提：モバイルにおいてスピードはより重要である
• 画像のスケールをブラウザ任せにするのはバッドアイディアである
  • 最大サイズの画像＝不必要に大きなファイルのダウンロード
  • ブラウザによるリサイズは CPU とメモリに負荷がかかる

要するにデータ受信量はPCサイトを見るのと変わらないということです。モバイル対応において固定幅のPCサイトには勝るがモバイル専用サイトには及ばないというのがレスポンシブWebデザインということになります。

固定幅PCサイト＜レスポンシブWebデザイン＜モバイル専用サイト

それでは固定幅PCサイトとモバイル専用サイトでいいではないかということになりますが
facebookページのようにiframeでWebサイトを呼び出すようなものがあります。

レスポンシブWebデザインでつくっていれば別途、横幅に合わせたWebサイトをつくる必要がありません。モバイルの為ではなくPCサイトのスキンに合わせる為の柔軟性が増すと思われます。

PCで見るのがメインのレスポンシブWebデザインサイト＋モバイル専用サイトが今後の主流になっていくのではないでしょうか？

固定幅PCサイト＋モバイル専用サイト
レスポンシブWebデザイン＋モバイル専用サイト

のどちらでも管理可能な CMS – Web Meister を今後とも宜しくお願い致します。

関連記事

新着記事