メニューを飛ばして本文へ

Cialis Online

プリント

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

掲載日: 2012年01月27日

スマートフォン普及によりこれまでとWebサイト制作のトレンドが変化している。レスポンシブWebデザインという言葉を聞く機会も出てきたのではないだろうか。

スマートフォンのWebブラウジングは基本的にPC向けブラウザと同等の挙動であり、スマートフォンからWebサイトを見ることはPC向けサイトを見ていることと変わらない。
スマートフォンに最適化しているというのは(単なる見た目の問題であれば)、そのスマートフォンの画面に適した文字の大きさやレイアウトで見えるように調整しているということで、そのためにWebサイトによって見た目がバラバラになる。ヤフー!トピックスなどをスマートフォンで見ていて関連リンクを辿ったらいきなりPC向けWebサイトを縮小して見ることになる、というのはそのためだ。
ブラウザによってHTML5+CSS3対応は異なるが、スマートフォン向けのWebサイトを別途用意するのではなく、スマートフォンから閲覧したときに最適化した見え方でサービス提供するという考え方がトレンドとなった。
その動きでレスポンシブWebデザインという言葉が出てきた。基本的にはブラウザの表示幅の違いをサイト側で対応して表示順序や大きさを調整するものだ。メディアクエリによってCSSを場合わけしている。

http://www.alistapart.com/d/responsive-web-design/ex/ex-site-FINAL.html
このサイトは有名な例だが、実際にブラウザの幅を変えて試してみていただきたい。PCで見ているような画面の大きさであれば気づかない工夫が随所にある。

20120127_flexible1.jpg

20120127_flexible2.jpg

20120127_flexible3.jpg

20120127_flexible4.jpg

ウインドウ幅を小さくしていくと、画像があわせて縮小したり、2ペインが1ペインに変化したりする。だんだんと必要最低限の表現になっていき、タイトル画像が消えたりする。一番幅が狭い状態がスマートフォンでの見え方と同じになる。

先ほど「単なる見た目の問題であれば」と書いたのは、モバイルファースト的な、まずスマートフォンに対応しようというプチリニューアルであれば単にCSSの調整だけである。このレスポンシブWebデザインの重要なところは、Webサイトの機能を見直す機会になっていることだ。スマートフォンでアクセスするということは、どういうシーンなのか?どういうコンテンツが最低限として必要なのか?という絞込みから始まる。3G回線などでアクセスしたユーザに重いクリエイティブは必要なのだろうかということを考える。
そうすると、スマートフォン向けに最低限必要なコンテンツを絞り、そこからブラウザ幅を広げてPC向けWebサイトということで機能を拡張するやり方がある、ということになる。

クロスメディア研究会2月のセミナーではこのレスポンシブWebデザインについて。実際にどういう案件が多いか、どういう提案が効くかなども踏まえて検討する。
スマートフォン向けWebサイト構築のポイント

また、PAGE2012カンファレンスではスマホ関連のWebソリューション事例に加えて最近のトレンド、アプリ動向など周辺ビジネスも俯瞰できる内容となっている。こちらもご参加いただきたい。
スマートフォンの急速な普及によりコミュニケーションインフラがどう変容するか


木下

 

 

 


研究会+研究調査
電子書籍、デジタル印刷、色、スマートフォンなど、JAGAT研究会でテーマとして取り上げている情報を掲載。定期的に開催している研究会セミナー開催情報もこちらをご覧ください。
・Twitter:http://twitter.com/jagat_labs


2012年06月29日(金)
NEW 講談社『VOCE』のソーシャルアプリ「美プリ!」ができるまで
~出版社が手がけるスマートフォン活用事例を知る
講談社 山口志門氏 氏


2012年05月18日(金)
NEW 電子書籍ビジネスの新潮流
~ソーシャルプラットフォームの構築と、アプリ販売ヒットの裏側
美術出版ネットワークス 竹内寿氏/アドベンチャー 西川剛司氏
関連記事


2012年04月20日(金)
スマートフォン業界と関連分野の最新動向2012
情報通信総合研究所 岸田重行氏
関連記事1 関連記事2


2012年03月26日(月)
最新iPad活用マーケティングのポイントを学ぶ
アイフリーク 谷内ススム氏/五反田電子商事 原田充氏
関連記事1 関連記事2


2012年03月16日(金)
AR(拡張現実)活用事例と関連技術の今
レイ・フロンティア 田村建士氏/アララ 石古暢良氏/キャドセンター 西謙次氏/ビー・ユー・ジー 大橋哲也氏/アンビエントメディア 町田聡氏
報告記事


2012年02月27日(月)
スマートフォン向けWebサイト構築のポイント
エイチツーオー・スペース(H2O Space.) たにぐちまこと氏


2012年01月27日(金)
最新AR活用ソリューション事例を学ぶ
ナレッジワークス 亀山悦治氏/クウジット 末吉隆彦氏


2011年12月16日(金)
デバイスとコンテンツの2011年を総括し、2012年以降のトレンドを予測する
電通総研 美和晃氏/アスキー総合研究所 遠藤諭氏


2011/11/25(金)
(PART I)電子書籍ビジネスの現実解を再検討する
CMパンチ 佐々木康彦氏/スピニングワークス 白形洋一氏
関連記事


2011/10/28(金)
電子書籍のビジネスチャンスと収益化
三和書籍 高橋考氏/モバキッズ 田村健太郎氏/方正 河田京三氏/ハーレクイン 本間頼子氏
関連記事1  関連記事2 報告記事


2011/10/21(金)
スマートフォン向けサイト制作のポイントと、HTML5の可能性を理解する
~今後のトレンドの大本命「HTML5でWebアプリケーション化」について~
H2O Space. たにぐちまこと氏/エル・カミノ・リアル 木寺祥友氏


2011/9/15(木)
今後のスマートフォン周辺のビジネス機会を理解する
~情報通信最新動向2011 ITとコミュニケーションの重要キーワード解説~
情報通信総合研究所 山本耕司氏/宮下洋子氏
関連記事


2011/9/2(金)
電子書籍アワード受賞社に聞くアプリ制作の実際
ムームー 森川幸人氏



2011/8/5(金)
解説・スマートフォン時代のSEM
~検索連動広告の変化について~
アイレップ 紺野俊介氏


2011/7/22(金)
クロスメディアビジネスの可能性を探る
トランスコスモス 萩原雅之氏/ビューテックラボ 松井功氏/シリウステクノロジーズ 関治之氏/ナレッジワークス 亀山悦治氏/クロスコ 飯村哲哉氏/ドットNET分散開発ソフトピア・センター 牧隆司氏


2011/7/13(水)
フラッシュマーケティングの基礎知識と市場動向を知る
~リアルタイム+位置情報+ソーシャルの破壊力について~
イノベーティブプラットフォーム 谷内ススム氏
関連記事1   関連記事2


2011/6/17(金)
スマートフォンは誰が使っているのか
~ユーザ像とスマートフォンアプリ制作の今後~
エル・カミノ・リアル 木寺祥友氏
アスキー総合研究所 遠藤諭氏
関連記事


2011/6/2(木)
Facebookを使って儲かるのか?を考える
~国内および海外の利用事例から学ぶソーシャルメディアの実態~
情報通信総合研究所 水野秀幸氏
関連記事


2011/5/13(金)
Xover Night
「本屋大賞」の仕掛け人が語る、アイデアのつくり方
~メディアを活用した課題解決とは~

博報堂ケトル 嶋浩一郎氏


2011/4/22(金)
Google Analytics活用の基礎を学ぶ
~アクセス解析についての考え方とツールの使い方~

株式会社クロス・フュージョン 衣袋宏美氏

2010年度年間スケジュール
2009年度年間スケジュール