レスポンシブサイト制作に効く デザインTipsあれこれ
•
78 likes•56,986 views
2015年11月11日に開催されたAdobe Live Best of MAX」にて、crema design 黒野明子が発表した資料です。
レスポンシブサイト制作に効く デザインTipsあれこれ
- 1. レスポンシブサイト制作に効く デザインTipsあれこれ 20151111 / Best of MAX crema design 黒野明子
- 3. 書籍 連載
- 4. 本日の流れ ● レスポンシブウェブデザインとは？ ● Photoshop でのレイアウトデモ ● アートボードの利用 ● 12 グリッドベースのレイアウト ● 横に伸び縮みするコンポーネント ● モバイル対応のメニュー設計 ● iPhone で即確認 ● タッチデバイスにやさしいリンク設計
- 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におけるデザイン手法
- 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
- 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. コンポーネント＝部品
- 27. Preview CC で確認
- 28. ● タッチデバイスでは hoverを使えない active と focus のデザインに気を配る タッチデバイス向けリンクデザイン ● ボタンサイズ44px 文字 14px 上下の余白 15px ずつ
- 29. Thanks a lot :-) @crema