*

レスポンシブ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 を今後とも宜しくお願い致します。

Web Meister

関連記事

no image

HTML5対応CMSの条件

HTML5の話題が出ない日はないぐらいになっているが、Web屋としてH...

記事を読む

no image

【株式会社サイズ】Facebookページはじめました 2011年5月ニュースレター

3月11日に発生した東日本大震災によりビジネス環境が大きく変化した業種...

記事を読む

no image

法政大学オフィシャルサイトをリニューアル、CMS- Web Meister を導入しました。

「自由と進歩」を基礎に、15学部を擁する日本有数の総合大学として、リー...

記事を読む

no image

Webサイトのスマートフォン対応で思うこと

Webサイトのスマートフォン対応 7つの基本ルール | Web担当者F...

記事を読む

新着記事

no image

HTML5対応CMSの条件

HTML5の話題が出ない日はないぐらいになっているが、Web屋としてH...

記事を読む

no image

株式会社サイズ4年目を迎えることができました

お世話になっております。 株式会社サイズ代表取締役糟谷です。 ...

記事を読む

no image

【株式会社サイズ】Facebookページはじめました 2011年5月ニュースレター

3月11日に発生した東日本大震災によりビジネス環境が大きく変化した業種...

記事を読む

no image

法政大学オフィシャルサイトをリニューアル、CMS- Web Meister を導入しました。

「自由と進歩」を基礎に、15学部を擁する日本有数の総合大学として、リー...

記事を読む

コメント/トラックバック

現在、この投稿へのトラックバックは受け付けていません。

この投稿のコメント・トラックバックRSS




管理人にのみ公開されます

no image
HTML5対応CMSの条件

HTML5の話題が出ない日はないぐらいになっているが、Web屋としてH...

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

SwapSkills さんが日本に紹介して急速に広まりつつあると思う「...

no image
株式会社サイズ4年目を迎えることができました

お世話になっております。 株式会社サイズ代表取締役糟谷です。 ...

no image
【株式会社サイズ】Facebookページはじめました 2011年5月ニュースレター

3月11日に発生した東日本大震災によりビジネス環境が大きく変化した業種...

no image
法政大学オフィシャルサイトをリニューアル、CMS- Web Meister を導入しました。

「自由と進歩」を基礎に、15学部を擁する日本有数の総合大学として、リー...

→もっと見る

  • あわせて
PAGE TOP ↑