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