レスポンシブデザイン

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

スライドによる説明

• ■レスポンシブ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だけで実現できる。
• ・新しいデバイスに対応しやすい。

デメリット

• ・面倒くさい。
• ・コーディングの難易度が上がる。
• ・チェックする項目が増える。
• ・制作コストが増える。
• ・スマホで読み込む容量が増える。（表示スピードが落ちると離脱率が高まる）
• ・レイアウトやデザインの自由度が低い。
• ・デバイス毎のデザイン最適化やコンテンツ出し分けが難しい。

• ・緻密に設計しなければならない。
• ・スマホやタブレットで重い画像を読み込むことになる。
• ・通常の制作フローよりもコストがかかる。