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.

レスポンシブWebデザイン ワークフロー

13,075 views

Published on

Published in: Design
  • Be the first to comment

レスポンシブWebデザイン ワークフロー

  1. 1. RESPONSIVE WEB DESIGN WORKFLOW レスポンシブWebデザイン ワークフロー 2013.02.20 ADC OnAir / 小川裕之13年2月21日木曜日
  2. 2. 従来のWebデザインのワークフロー 1つの工程が完了したら次の工程へ進むウォーターホール式 情報 画面 デザイン カンプ 実装 テスト 設計 設計13年2月21日木曜日
  3. 3. レスポンシブWebデザインをウォーターホールで進めると… 問題 発生 情報 画面 デザイン カンプ 実装 テスト 設計 設計 修正13年2月21日木曜日
  4. 4. レスポンシブWebデザインをウォーターホールで進めると… 問題 修正 修正 修正 発生 情報 画面 デザイン カンプ 実装 テスト 設計 設計 修正13年2月21日木曜日
  5. 5. レスポンシブWebデザインで問題が生 じやすい理由 - マルチデバイス対応 - ピクセルパーフェクトではない - 比較的新しい手法なので実績や情報量が少ない13年2月21日木曜日
  6. 6. 実際にテストしてみないと分からない ことが多々ある13年2月21日木曜日
  7. 7. 生じやすい問題 - 画面サイズでレイアウトが崩れる13年2月21日木曜日
  8. 8. 13年2月21日木曜日
  9. 9. その他の問題 - デバイスによってJavaScriptが動かない - サポートしてないCSSやHTML5がある - 読み込みに時間がかかる13年2月21日木曜日
  10. 10. いつ対応するかが重要。13年2月21日木曜日
  11. 11. リスクを最小限におさえるために - 早めにテストをして問題に早期に対応する - 各工程を細かく分割し何度もテストを重ねる13年2月21日木曜日
  12. 12. 工程を分割し何度も回す プロト 画面 タイプ 設計 (テスト) プロト 情報 画面 タイプ 設計 設計 (テスト) 実装 デザイン (テスト) カンプ 主要な要素を検証13年2月21日木曜日
  13. 13. 情報設計13年2月21日木曜日
  14. 14. 情報設計 - 最低のスペックであるモバイルから考えること でそれ以上のデバイスにも容易に対応できる - すべての環境それぞれに完璧を目指すのではな く、対応させるくらいの気持ちで13年2月21日木曜日
  15. 15. 画面設計(ワイヤーフレーム)13年2月21日木曜日
  16. 16. 構成が分かる程度にザックリで構わない13年2月21日木曜日
  17. 17. 画面設計(ワイヤーフレーム) - 構成が分かれば大まかで構わない - 動きのないワイヤーフレームでは完全なものは 作成できない - いち早くプロトタイプを作成して検証する (動きのあるワイヤーフレームを作るイメージ)13年2月21日木曜日
  18. 18. プロトタイプ13年2月21日木曜日
  19. 19. 検証・問題の洗い出しのための試作モデル13年2月21日木曜日
  20. 20. プロトタイプ - テストを重ねて問題を洗い出し、早期に対応す ることが目的 - レスポンシブWebデザインの制作においては、 プロトタイプを作成することを第一に目指す - すぐに作成できるツールが数多くある13年2月21日木曜日
  21. 21. Bootstrap http://twitter.github.com/bootstrap/13年2月21日木曜日
  22. 22. Foundation http://foundation.zurb.com/13年2月21日木曜日
  23. 23. THE SEMANTIC GRID SYSTEM http://semantic.gs/13年2月21日木曜日
  24. 24. デザインカンプ13年2月21日木曜日
  25. 25. 主要な部分のみしっかり作成し、その他はザックリと13年2月21日木曜日
  26. 26. デザインカンプ - レスポンシブWebデザインではピクセルパーフ ェクトのデザインカンプは実用性が低い - 完成イメージではなく、ビジュアルイメージを 決定することを念頭に - Style Tiles&Style Guideという方法も13年2月21日木曜日
  27. 27. Style Tiles http://styletil.es/13年2月21日木曜日
  28. 28. サイトのビジュアル要素を一つにまとめたもの http://styletil.es/13年2月21日木曜日
  29. 29. Style Guide http://bit.ly/IR3lHF13年2月21日木曜日
  30. 30. スタイルのガイドライン、モジュール、パターンライブラリ https://github.com/styleguide/css13年2月21日木曜日
  31. 31. スタイルのガイドライン、モジュール、パターンライブラリ http://twitter.github.com/bootstrap/13年2月21日木曜日
  32. 32. Style Tile&Style Guide - デザインの方向性がブレない - 大規模・大人数のプロジェクトでもクオリティ を一定に保てる - 修正に対応しやすい - 実装の際に効率的13年2月21日木曜日
  33. 33. 実装(Designing in the browser)13年2月21日木曜日
  34. 34. ブラウザでデザインをしていく13年2月21日木曜日
  35. 35. Designing in the browserの利点 - 最終的なアウトプットであるブラウザで直接デ ザインを行うので、間違いがない - CSS3やWebフォントで適用できるものをラフ に起こす手間が省ける - 変更や修正に比較的簡単に対応できる13年2月21日木曜日
  36. 36. まとめ - テストを重ねて問題に早めに対応できるワーク フローで進める必要がある - 各工程も従来のサイト制作とは方法や考え方が 異なる点が幾つかある13年2月21日木曜日
  37. 37. プロトタイプを使用したテストを重ねる ことで、リスクを減らし、安全で効率的 なワークフローを。 プロト 画面 タイプ 設計 (テスト) プロト 情報 画面 タイプ 設計 設計 (テスト) 実装 デザイン (テスト) カンプ13年2月21日木曜日

×