Successfully reported this slideshow.
Your SlideShare is downloading. ×

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

Ad

RESPONSIVE WEB DESIGN WORKFLOW
                    レスポンシブWebデザイン ワークフロー




                       2013.02.20 ADC OnAir / ...

Ad

従来のWebデザインのワークフロー

  1つの工程が完了したら次の工程へ進むウォーターホール式



              情報   画面   デザイン
                         カンプ   実装   テスト
 ...

Ad

レスポンシブWebデザインをウォーターホールで進めると…

                                           問題
                                           発生
...

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Check these out next

1 of 37 Ad
1 of 37 Ad
Advertisement

More Related Content

Slideshows for you (18)

Viewers also liked (20)

Advertisement

レスポンシブ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/IR3lHF 13年2月21日木曜日
  30. 30. スタイルのガイドライン、モジュール、パターンライブラリ https://github.com/styleguide/css 13年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日木曜日

×