2015年11月11日に開催されたAdobe Live Best of MAX」にて、crema design 黒野明子が発表した資料です。

1. レスポンシブサイト制作に効く
デザインTipsあれこれ
20151111 / Best of MAX
crema design 黒野明子

2. 黒野明子
crema design くれまでざいん
くろのあきこ

3. 書籍 連載

4. 本日の流れ
● レスポンシブウェブデザインとは？
● Photoshop でのレイアウトデモ
● アートボードの利用
● 12 グリッドベースのレイアウト
● 横に伸び縮みするコンポーネント
● モバイル対応のメニュー設計
● iPhone で即確認
● タッチデバイスにやさしいリンク設計

5. RWDレスポンシブウェブデザイン

6. ところで、レスポンシブサイトの
制作経験はありますか？
YES
NO

7. 1ソースで様々な画面サイズの
デバイスに対応

8. https://en.wikipedia.org/wiki/Responsive_web_design#/media/File:Content-is-like-water-1980.jpg
Content is like water

9. CSS
フレキシブルなグリッド フレキシブルな画像 メディアクエリの使用
Ethan Marcotteさんの定義によると

10. RWDにおける一般的なメディアクエリ利用
/* デフォルトの記述 */
div.box { background-color: #660099 }
@media screen and (max-width: 479px) {
/* 479px 以下用（スマホ用）の記述 */
div.box { background-color: #ff9900 }
}
デバイスのウィンドウ幅に応じて読み込ませる CSS の内容をフィルタリング

11. メディアクエリひとくちメモ
● デバイスの特性に基づいて適用するスタイルを切り替える
● 印刷用のスタイルシートなども（@media print）
● 現在策定中のメディアクエリレベル 4 では、
端末の置かれている環境光によってスタイルの適用を
変更できるようになるかもしれない（light-level）

12. RWDのメリットとデメリット
更新の手間が 1 度になる
同一 URLで PC と
モバイル両方に対応
SEO への対応がラク
CSS の記述ミスによっては
レイアウト崩れが生じる
モバイル閲覧時にも余分な
データを読み込んで遅くなるかも

13. RWDにおけるデザイン手法

14. ブレイクポイントに応じた
レイアウトバリエーションの作成
480px 768px 992px 1200px

15. Photoshopのアートボード機能を利用

16. 本日のデモ

17. 12 グリッドベース
Photoshop CC Preview CC
メニュー設計 リンクデザイン
登録する

18. 本日の作例
PC 向け モバイル向け（480px 未満）

19. 12 グリッドをベースにしたデザイン
12
6
4
3 3 3 3
4 4
6
102
3
4
5 7
8
9

20. Bootstrap も12 グリッドが基本

21. Photoshopでレイアウト

22. アートボードの作成

23. 新規ガイドレイアウトの作成
1200
1300
1170
30(15+15)
1 2 3 4 5 6 7 8 9 10 11 12
15
50
15
50

24. コンポーネント＝部品

25. 1 カラムでも成立するコンポーネント
12
6+6
4+4+4

26. レスポンシブ対応のメニュー設計
● ドロップダウンメニュー
● スライドメニュー／ドロワーメニュー
● ヘッダメニュー

27. Preview CC で確認

28. ● タッチデバイスでは hoverを使えない
active と focus のデザインに気を配る
タッチデバイス向けリンクデザイン
● ボタンサイズ44px
文字 14px 上下の余白 15px ずつ

29. Thanks a lot :-)
@crema