Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

レスポンシブサイト制作に効く デザインTipsあれこれ

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

  • Be the first to comment

レスポンシブサイト制作に効く デザインTipsあれこれ

  1. 1. レスポンシブサイト制作に効く デザインTipsあれこれ 20151111 / Best of MAX crema design 黒野明子
  2. 2. 黒野明子  crema design くれまでざいん くろのあきこ
  3. 3. 書籍 連載
  4. 4. 本日の流れ ● レスポンシブウェブデザインとは? ● Photoshop でのレイアウトデモ ● アートボードの利用 ● 12 グリッドベースのレイアウト ● 横に伸び縮みするコンポーネント ● モバイル対応のメニュー設計 ● iPhone で即確認 ● タッチデバイスにやさしいリンク設計
  5. 5. RWDレスポンシブウェブデザイン
  6. 6. ところで、レスポンシブサイトの 制作経験はありますか? YES NO
  7. 7. 1ソースで様々な画面サイズの デバイスに対応
  8. 8. https://en.wikipedia.org/wiki/Responsive_web_design#/media/File:Content-is-like-water-1980.jpg Content is like water
  9. 9. CSS フレキシブルなグリッド フレキシブルな画像 メディアクエリの使用 Ethan Marcotteさんの定義によると
  10. 10. RWDにおける一般的なメディアクエリ利用 /* デフォルトの記述 */ div.box { background-color: #660099 } @media screen and (max-width: 479px) { /* 479px 以下用(スマホ用)の記述 */ div.box { background-color: #ff9900 } } デバイスのウィンドウ幅に応じて読み込ませる CSS の内容をフィルタリング
  11. 11. メディアクエリひとくちメモ ● デバイスの特性に基づいて適用するスタイルを切り替える ● 印刷用のスタイルシートなども(@media print) ● 現在策定中のメディアクエリレベル 4 では、   端末の置かれている環境光によってスタイルの適用を   変更できるようになるかもしれない(light-level)
  12. 12. RWDのメリットとデメリット 更新の手間が 1 度になる 同一 URLで PC と モバイル両方に対応 SEO への対応がラク CSS の記述ミスによっては レイアウト崩れが生じる モバイル閲覧時にも余分な データを読み込んで遅くなるかも
  13. 13. RWDにおけるデザイン手法
  14. 14. ブレイクポイントに応じた レイアウトバリエーションの作成 480px 768px 992px 1200px
  15. 15. Photoshopのアートボード機能を利用
  16. 16. 本日のデモ
  17. 17. 12 グリッドベース Photoshop CC Preview CC メニュー設計 リンクデザイン 登録する
  18. 18. 本日の作例 PC 向け モバイル向け(480px 未満)
  19. 19. 12 グリッドをベースにしたデザイン 12 6 4 3 3 3 3 4 4 6 102 3 4 5 7 8 9
  20. 20. Bootstrap も12 グリッドが基本
  21. 21. Photoshopでレイアウト
  22. 22. アートボードの作成
  23. 23. 新規ガイドレイアウトの作成 1200 1300 1170 30(15+15) 1 2 3 4 5 6 7 8 9 10 11 12 15 50 15 50
  24. 24. コンポーネント=部品
  25. 25. 1 カラムでも成立するコンポーネント 12 6+6 4+4+4
  26. 26. レスポンシブ対応のメニュー設計 ● ドロップダウンメニュー ● スライドメニュー/ドロワーメニュー ● ヘッダメニュー
  27. 27. Preview CC で確認
  28. 28. ● タッチデバイスでは hoverを使えない   active と focus のデザインに気を配る タッチデバイス向けリンクデザイン ● ボタンサイズ44px   文字 14px 上下の余白 15px ずつ
  29. 29. Thanks a lot :-) @crema

×