レスポンシブデザイン

レスポンシブデザインについてのまとめページです。

スライドによる説明

• ■レスポンシブWebデザインの基礎

http://www.slideshare.net/HiroyukiOgawa/rwd-basic

• ■レスポンシブWebデザイン ワークフロー

http://www.slideshare.net/HiroyukiOgawa/web-16662445

• ■レスポンシブ・ウェブデザイン基礎

http://www.slideshare.net/gaspanik/ss-13291115

• ■レスポンシブWebデザインのサイトを作る前に

http://www.slideshare.net/yukinakane16/web-28316264

ウェブ記事

• ■レスポンシブデザインを制作するなら頭に入れておくべき基本事項7つ

http://liginc.co.jp/web/design/78072

• ■レスポンシブWebデザインで成功するUI／UXのポイント5つ

http://www.aiship.jp/knowhow/archives/14719

• ■レスポンシブWebデザインのウェブサイトを半年運営してみて思ったこと

http://parashuto.com/rriver/responsive-web/maintaining-responsive-web-design-website

レスポンシブデザインのサイト実例

• ■NHKスタジオパーク

http://www.nhk.or.jp/studiopark/

• ■すぐ禁煙

http://sugu-kinen.jp/

• ■NTTデータ

http://www.nttdata.com/jp/ja/

• ■NTT東日本

http://www.ntt-east.co.jp/

• ■レオパレス21

http://www.leopalace21.co.jp/

• ■IMJ

http://www.imjp.co.jp/

• ■ミツエーリンクス

http://www.mitsue.co.jp/

• ■関西大学

http://www.kansai-u.ac.jp/index.html

• ■神奈川大学

http://www.kanagawa-u.ac.jp/

• ■シルクバックチル工房

http://swwwitch.com/mycom/Dw55/HTML/

• ■デザインリサーチ

http://research.creativesurvey.com/

• ■三菱商事

http://www.mitsubishicorp.com/jp/ja/

• ■ニチレイ

http://www.nichirei.co.jp/

• ■肌研（ハダラボ）

http://www.hadalabo.jp/

• ■こころまち

https://www.cocoromachi.jp/

• ■大分健生病院

http://www.oita-min.or.jp/

レスポンシブの特徴

メリット

• ・1ソースで一元管理できるため、ページ更新が簡略化できる。
• ・URLが一つになる。SEO的なメリットも出る。(Googleも推奨）
• ・ユーザーエージェントを判別せずに見た目を調整できる。
• ・サーバーサイドプログラムに頼らず、CSSだけで実現できる。
• ・新しいデバイスに対応しやすい。

デメリット

• ・緻密に設計しなくてはならず、通常の制作フローよりも工数やコストが増える。
• ・デザインとコーディングの制約が一気に増えるので難易度が上がる。
• ・デバイス毎の細かい配慮、デザインの最適化、コンテンツ出し分けなどが難しい。
• ・スマホやタブレットでの読み込み容量が増えるので、表示速度が落ちる。
• ・IE8以下では上手く動かない恐れがある。