最近自分が仕事でやってるUIデザインプロセスについてまとめました。

1. 最近の
UIデザインプロセス
UXデザインチーム 勝島真悟

2. 1.話を聞きながら
ラフを描く

4. 1.話を聞きながら
ラフを描く
• その場で描く（席に持ち帰ったらだめ）
• あのゲームのあの画面みたいな？
• アイデア出し的な感じで雑に描いて決める
• これは？じゃあこれは？と矢継ぎ早に描く
• 決定したら写真撮ってグループチャットにアップ

5. 2.ペーパー
プロトタイピング

7. 2.ペーパー
プロトタイピング
• なんか気分が盛り上がる(^o^)
• 画面遷移はどんな感じで？
• 画面に入るか
• 実装可能か
• 時間内にできそうか
• 何回でも簡単に作り直せる

8. 3.Prottで
フィードバックをもらう

10. 3.Prottで
フィードバックをもらう
• まさかり飛んでくる
• 使い勝手はどう？
• メンバーに聞きたいこと
• エンジニア：実装可能？実装コストは高い？
• ディレクター:企画の意図通りになってる？
• デザイナー:絵のレギュレーションは大丈夫？
• 運営:コンプライアンス問題ない？
• QA:ユーザーから問い合わせ来そうなのはどこ？
• グラフィックを描き進めたらProttを更新する（常にProttを一元情報として共有）

12. 4.Sketchで
ワイヤーフレームを描く

14. 4.Sketchで
ワイヤーフレームを描く
• 画面を俯瞰で見れるから情報設計も同時に
• 詳細を詰める
• ボタンの大きさ、グリッドなどを決める
• 文字、画像が入るか

15. 6.Photoshop で
モックを描く
• Skala Preview 便利
http://bjango.com/mac/skalapreview/
• Web書き出しアクションをつくる
• 誰でも編集可能なpsdにする（しないやつを叩く）
http://photoshopetiquette.com/

16. 8.実装する
• HTML & SCSS で書く
• KSS スタイルガイドにパーツを追加する

17. 気をつけていること
• 隣にいる人によく見てもらう（1時間に2∼3回）
• 「どう？かっこ良くない？」「ださい？」
• 途中でも見せる（やる気がもたない）
• 絶対にPCで見せずにスマホで見てもらう
（主にProttにあげてから）
• 共有するときは決定権のある人にまず見せる