レスポンシブデザイン

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

レスポンシブの基本記事

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

• ■レスポンシブ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

レスポンシブの特徴

メリット

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

デメリット

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

レスポンシブのサイト集

• ■Responsive Web Design JP | 日本国内の秀逸なレスポンシブWebデザインを集めたギャラリーサイト

http://responsive-jp.com/

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

• ■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/

• ■キリン一番搾り

http://www.kirin.co.jp/products/beer/ichiban/

• ■プレイステーション

http://www.jp.playstation.com/