1. レスポンシブ
Web デザイン
による開発効率化
サイボウズ株式会社
門屋 亮 @r yokdy
1

2. Agenda
• レスポンシブWebデザインとは
• レスポンシブWebデザインの利点
• レスポンシブWebデザインを使ったサイト
• レスポンシブWebデザインの要素
• レスポンシブWebデザインをやってみる
• レスポンシブWebデザインをdisる
2

3. レスポンシブWebデザインとは
モバイル用のサイト
どうしてますか？
3

4. こたえ１
男らしくアプリのみ
4

5. こたえ２
モバイル用サイト
を別につくる
5

6. User-agentで判定するのは
ちょっとしんどい
●iPhone
Mozilla/5.0 (iPhone; U; CPU iPhone OS 5_0 like Mac OS X) AppleWebKit/534.46
(KHTML, like Gecko) Mobile/9A334 Safari/7534.48.3
●iPod Touch
Mozilla/5.0 (iPod; CPU iPhone OS 5_0_1 like Mac OS X) AppleWebKit/534.46
(KHTML, like Gecko) Version/5.1 Mobile/9A405 Safari/7534.48.3
●iPad
Mozilla/5.0 (iPad; CPU OS 5_0_1 like Mac OS X) AppleWebKit/534.46
(KHTML, like Gecko) Version/5.1 Mobile/9A405 Safari/7534.48.3
●Android
Mozilla/5.0 (Linux; U; Android 4.0.1; ja-jp; Galaxy Nexus Build/ITL41D)
AppleWebKit/534.30 (KHTML, like Gecko) Version/4.0 Mobile Safari/534.30
●Internet Explorer
Mozilla/5.0 (compatible; MSIE 9.0; Windows NT 6.0; Trident/5.0)
●Google Chrome
Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/535.7 (KHTML, like Gecko)
Chrome/16.0.912.75 Safari/535.7
6

7. こたえ３
今あるページをどんな
デバイスでも
見られるようにする
7

8. どうやって？
スクリーンの
幅に応じて見せ方を
変える
8

9. 見たほうが早い
Useful CSS Tricks for Responsive Design
http://webdesignerwall.com/tutorials/5-useful-css-tricks-for-
responsive-design
デモ
http://webdesignerwall.com/demo/responsive-css-tricks/
9

10. 利点
• デバイスごとに作る必要がない
• 少ない工数と費用で対応が可能
• 見え方をブラウザで確認できる
10

11. レスポンシブな
Webサイトの例
11

12. Earth Hour
http://earthhour.fr/
12

13. テンプル大学
http://www.tuj.ac.jp/jp/index.html
13

14. Simble Grid
http://thisisdallas.github.com/Simple-Grid/
14

15. スタジオパーク(NHK)
http://www.nhk.or.jp/studiopark/
アニメーションがすごい
15

16. レスポンシブ
Webデザイン
の要素
16

17. Fluid Grid
スクリーンの幅によって
レイアウトを変える
17

18. Media Query
幅によってスタイルを変える
<link rel="stylesheet" media="screen and (min-width:480px) and
(max-width: 768px)" href="tablet.css" />
@media screen and (min-width:480px) and (max-width: 768px){
/* style */
}
18

19. Relative Value
幅を相対指定する
div.wrapper {
width: 940px;
}
↓
div.wrapper {
width: 90%;
}
19

20. Responsive Image
画像を幅によって縮小表示する
img {
max-width: 100%;
height: auto;
}
20

21. レスポンシブデザインを
やってみる
21

22. まずはviewportの設定から
iPhoneではデフォルトで
width=980になるので本来の幅（320px)
にする。
<meta name = "viewport"
content = "width = device-width, initial-scale = 1>
22

23. どのサイズでレイアウトを
切り替えるか決める
レイアウト３つもしくは４つ
http://coliss.com/articles/digress/device-diagram-responsive-
design-planning-by-metaltoad.html
23

24. デバイスに応じた見え方を
確認できるサイト
http://www.responsinator.com/
24

25. レスポンシブWebデザインをdisる
• イメージをリサイズして小さくしてもダウンロードするサイ
ズはPCと同じ。
• イメージをリサイズするのにCPU/メモリを使う。
• PC版とほぼ同じリソース（HTML, CSS, JSなど）をモバイル
でもダウンロードさせている。
• すべてのデバイスのためのコードを処理する必要がある。
• PCと同様のDOMツリーをモバイルでも構築している。
• すべてのモバイルデバイスがMedia Queryをサポートしている
わけではない。
25

26. まとめ
• レスポンシブWebデザインを活用する
と少ない工数でモバイル用のサイトを
構築できる。
• モバイルに最適化されたサイトと比べ
ると重いので用途を見極めたうえで利
用するのがよい。
26