organizing-minimal-scrum-design-team-with-a-marketer

Transcript

1. 企画とチームプレーでUIデザインする⽅法
2. UIをデザインするときの 合意形成の難しさ
3. A. 好き放題⾔われる B. 事なかれ主義 C. 鶴の⼀声 D. 「スピード重視で！」 合意形成の難しさ
4. A. 好き放題⾔われる 企画 < ブランドイメージの⾊を使ってほしんだけど サポ < 我々のお客様のリテラシーでは使えない。ボタンを⾚くして！ 開発 < こんな変えたらバックエンドも作り直しになるよ。元のUIを使ってね 役員 < なんか違うな〜。私のイメージと違うからやり直して 仲間はずれのUI が増える 合意形成の難しさ •◦◦◦
5. B. 事なかれ主義 企画 < ....（誰かが⾔うのに合わせればいいか） サポ < ....（開発がよければいいや） 開発 < ....（どうせ役員くんが決めるんでしょ） 役員 < ....（前回参加してないしよくわかんないや） 解像度が低いデザインが提供される 合意形成の難しさ • • ◦ ◦
6. C. 鶴の⼀声 企画 < ....（誰かが⾔うのに合わせればいいか） サポ < ....（開発がよければいいや） 開発 < ....（どうせ役員くんが決めるんでしょ） 役員 < なんか違うな〜。私のイメージと違うからやり直して 合議制の機能不全 合意形成の難しさ • • • ◦
7. D. 「スピード重視で！」 合意形成の難しさ • • • •
8. D. 「スピード重視で！」
9. D. 「スピード重視で！」
10. D. 「スピード重視で！」
11. D. 「スピード重視で！」
12. D. 「スピード重視で！」
13. どんどん遅くなる リカバリ速度 D. 「スピード重視で！」
14. D. 「スピード重視で！」
15. ある局⾯から、 ⼿戻りの量が激増する D. 「スピード重視で！」
16. 以上の図のように、スピード重視で 効率よくゴミを量産しても仕⽅ない 合意形成の難しさ • • • • D. 「スピード重視で！」
17. まとめ：合意形成の難しさ
18. 好き放題⾔われる 仲間はずれのUI が増える 事なかれ主義 解像度が低いデザインが提供される 鶴の⼀声 合議制の機能不全 「スピード重視で！」 効率よくゴミを量産しても仕⽅ない まとめ：合意形成の難しさ
19. これらが起きると… 振り回されて提供すべき価値をどうやって実現するかにフォーカスしづらい 周りは感想を⾔うに過ぎないので、全体の⼀貫性まで責任は追わない でもうまく⾏かなかったらUIデザインの失敗でしょ デザイナーが責務を全うしづらい まとめ：合意形成の難しさ
21. どんな状態なら責務を全うできる？
22. 新しい案件でやった挑戦 1. 企画と当事者意識を共有する 2. デザインの⼀貫性を守る 3. 実現⽅法の追求 どんな状態なら責務を全うできる？
23. 新しい案件でやった挑戦 どんな状態なら責務を全うできる？
24. 1. 企画と当事者意識を共有する
25. よくある企画の⼈の働き⽅ 予実管理が中⼼になってプロダクトから疎外された状態 問題が起きたり気が変わったときに、⼤きく調整できるのは期間くらい ⼯程1つが終わっても、全体でどうなっているか最後までわからない 1. 企画と当事者意識を共有する
26. よくある企画の⼈の働き⽅ 予実管理が中⼼になってプロダクトから疎外された状態 管理できるもの 実質的できないもの 期間 期⽇ 当初計画の仕様 全て作業が終わるまでの作業内容 着⼿してから発⾒される開発上の不都合 1. 企画と当事者意識を共有する
27. プロダクトから疎外された状態とは プロダクトの良し悪しを⼀番気にしそうな職域なのに： デザイナーやエンジニアが何してるのかわからん 終わるまでずっと待たされる 終わったか終わってないか不明瞭だから、あとで気になっていじりたくなる 他⼈事のような… でも責任あるからなんか⾔いたい… 1. 企画と当事者意識を共有する
28. ハンドリング感を得る 「私達がプロダクトの良し悪しをハンドリングしてるんだ」 ←この実感を得られる環境作り 取り決め ⼀度にあれもこれもやらず、常にひとつのUIデザインに集中 1つ終わらないと次に⾏けない 代わりに⼩刻みにレビュー シングルタスクを徹底する 1. 企画と当事者意識を共有する
29. 2. デザインの⼀貫性を守る
30. 最初は⼿数が物を⾔う。プロトタイピングしまくるしかない 2. デザインの⼀貫性を守る
31. 「ミッキーマウスっぽい」って何？ 企画が最初に⾔っていたコメント。冗談かと思っていた。 2. デザインの⼀貫性を守る
32. 2. デザインの⼀貫性を守る
33. ...。 2. デザインの⼀貫性を守る
34. 「ミッキーマウスっぽい」か らわかったこと デザイナーでなくても「なんか違う」は ⼤抵正しい デザイナーが考えてもいない事を画⾯か ら感じている クールな雰囲気にしたい 2. デザインの⼀貫性を守る
35. じゃあクールな雰囲気って？ プロトを沢⼭作って、会話の内容をグラフィックの法則として具現化した。 2. デザインの⼀貫性を守る
36. 会話の内容を具現化 ⾯の表現は⾓を尖らせる ダイアログ 通知 メニューリスト 2. デザインの⼀貫性を守る
37. 会話の内容を具現化 ユーザーが押せるものは⾓を丸める ボタン ラジオボタン セレクトメニュー 丸っこさはクールと遠いが、⼀般的なUIに⾒ 慣れたユーザーのメンタルモデルに配慮す る。 2. デザインの⼀貫性を守る
38. 会話の内容を具現化 トランジションのルール ⼤きさ UIのタイプ 遷移が始まる位置 2. デザインの⼀貫性を守る
39. ブランドの⾚ってどれ 「ロゴの⾚と既存UIの⾚が違う！」マンセルを使⽤したカラーパレットが超不評 予想以上に利害関係者のこだわりが強く、1週間くらいかけて調整した。 2. デザインの⼀貫性を守る
40. ⼿を動かしまくって、共通のフィーリングを発⾒する 共通のフィーリングから全体の法則を⽣み出す 双⽅で知恵を絞って決めるからこそ、守る理由になる 2. デザインの⼀貫性を守る
41. 3. 実現⽅法の追求
42. 内容の濃いコミニュケーションをする 「なんのため」に作るか明⽂化し、共通認識を得る UI1つづつに対して、そのUIがあるとユーザーにどんな「価値」があるか⾔葉にする。 ◦ やること ・アイコン付きのボタンを⾒て、確信を持って送信が押せる。 ◦ 何のため？ ・⽂字をよく読まずに操作できる。 ・アイコンに固有の意味をもたせ、どこで⾒ても何が起きるかわかるようにする。 3. 実現⽅法の追求
43. 内容の濃いコミニュケーションをするための⼯夫 何のため？ 企画がどうしたいかを理解して、デザイナーが具現化する 作るたびに、どうしたいか？に合致しているか企画と話す 事実に基づくスケジュール 週ごとに、先週実績から今週の⾒積と戦略を練る ユーザーの価値と⼯数バランスから1 直線の⼯程を作る 3. 実現⽅法の追求
44. 無駄な⼿戻りを防ぐための⼯夫 プロトを元に、先回りして企画が他の利害関係者と調整
45. 無駄な⼿戻りを防ぐための⼯夫 デザイナーは価値の実現⽅法に集中できる
46. 計画より戦略
47. 絵に書いた餅よりも臨機応変な戦略 例） 重要でもリスクの低いものを後回し、価値が低いが簡単なものをこなして全体の遅延を防ぐ 周りの状況やボトルネックも優先順として戦略に反映する 「あと３⽇しかないならどの順でやる？」 状況や制約を反映して、すぐ組み替えられる戦略を作る 計画より戦略
48. 例 1 重要でもリスクの低いものを後回しにし、 価値が低いが簡単なものをこなして 全体の遅延を防ぐ 計画より戦略
49. 例 2 ボトルネックも優先順として戦略に反映する 来週できないものはその週に気にかける必要はない 計画より戦略
50. 例 3 「あと３⽇しかないならどの順でやる？」 わざとエクストリームな状況を想像して、トリアージの助けにする 計画より戦略
51. ビジュアル全体の最適化⽅法は？ ⼀つづつ作っていると、ぎこちないUIも出てくる 好きなタイミングで全体を整える作業を差し込む 計画より戦略
52. UIデザインに対するマインドの変化 デザイナー： どうやったら企画の思うブランドイメージに近づくだろうか 企画のビジョンだけ信⽤して、実現⽅法を編みだすことに集中する 企画： どのデザインが（エゴではなく）ユーザーにとって価値ある改修か 納期が迫り要件をそぎ落とさないといけない時、ユーザへの「価値」を強く意識する 計画より戦略
53. もし最初に全部UI設計してたら？ デザイナーが勢いと思い込みで作り、⼀旦は形になる 短納期のため、デザイナーは揉めた箇所は適当に⾔われたとおりに作ろうと思っていた 設計に時間をかけたあと変更があると、実装でデザイナーが追い詰められる デザイナー以外が納得せず何度も作り直す UIの抜け漏れに後で気づいて直す ⼀気に仕様を説明しても、企画が全部把握して納得することは難しい
54. 全体の結論 今回の役割分担 企画が「あるべき姿」の⽅⾓へリードする デザイナーが「あるべき姿」の実現⽅法を考える 計画より戦略 ⼀本道の⼯程を組み替えて、変化し続ける「あるべき姿」に追従する 仲間外れUIの抑制 優先順位に基づいて、本当に必要なものを先に作る
55. ご清聴ありがとうございました