Downloaded 147 times
![[CCL web vol.6] 2014年のWebデザイントレンドと 本当に必要とされるデザインと手法](https://cdn.slidesharecdn.com/ss_thumbnails/cclslide20140708-140717040232-phpapp01-thumbnail.jpg?width=640&height=640&fit=bounds)
レスポンシブWebデザイン ワークフロー
- 1. RESPONSIVE WEB DESIGNWORKFLOW レスポンシブ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日木曜日
- 6.
- 7. 生じやすい問題 -画面サイズでレイアウトが崩れる 13年2月21日木曜日
- 8.
- 9. その他の問題 -デバイスによってJavaScriptが動かない - サポートしてないCSSやHTML5がある - 読み込みに時間がかかる 13年2月21日木曜日
- 10.
- 11. リスクを最小限におさえるために -早めにテストをして問題に早期に対応する - 各工程を細かく分割し何度もテストを重ねる 13年2月21日木曜日
- 12. 工程を分割し何度も回す プロト 画面 タイプ 設計 （テスト） プロト 情報 画面 タイプ 設計 設計 （テスト） 実装 デザイン （テスト） カンプ 主要な要素を検証 13年2月21日木曜日
- 13.
- 14. 情報設計 -最低のスペックであるモバイルから考えること でそれ以上のデバイスにも容易に対応できる - すべての環境それぞれに完璧を目指すのではな く、対応させるくらいの気持ちで 13年2月21日木曜日
- 15.
- 16.
- 17. 画面設計（ワイヤーフレーム） -構成が分かれば大まかで構わない - 動きのないワイヤーフレームでは完全なものは 作成できない - いち早くプロトタイプを作成して検証する （動きのあるワイヤーフレームを作るイメージ） 13年2月21日木曜日
- 18.
- 19.
- 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 GRIDSYSTEM http://semantic.gs/ 13年2月21日木曜日
- 24.
- 25.
- 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 thebrowser） 13年2月21日木曜日
- 34.
- 35. Designing in thebrowserの利点 - 最終的なアウトプットであるブラウザで直接デ ザインを行うので、間違いがない - CSS3やWebフォントで適用できるものをラフ に起こす手間が省ける - 変更や修正に比較的簡単に対応できる 13年2月21日木曜日
- 36. まとめ -テストを重ねて問題に早めに対応できるワーク フローで進める必要がある - 各工程も従来のサイト制作とは方法や考え方が 異なる点が幾つかある 13年2月21日木曜日
- 37. プロトタイプを使用したテストを重ねる ことで、リスクを減らし、安全で効率的 なワークフローを。 プロト 画面 タイプ 設計 （テスト） プロト 情報 画面 タイプ 設計 設計 （テスト） 実装 デザイン （テスト） カンプ 13年2月21日木曜日