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