プロトタイピングツール投入のケーススタディ

Transcript

1. プロトタイピングツー ル投入のケー ススタディ 2016/08/25 ｜Design‑JP 第 1 回 勉強会 : プロトタイピングの回 伊原 力也 / BA 1
2. @magi1125 BA IA プロトタイピング アクセシビリティの書籍出しています 2
3. BA 受託のデザイン会社 Web サイトのリニュー アルから運用まで アプリの新規立ち上げ、 リニュー アル、 継続改善も 3
4. プロトタイピングツー ルって いつ / どこで / 誰が / なにを / どのように / 使うと良い？ 事例をもとに考えてみる 4
5. ツー ル遍歴 HTML / CSS / JS PowerPoint Keynote Google スライド InVision Prott Adobe XD Axure RP Pixate ( 練習中 ) 5
6. 今日は特に Prott と XD にフォー カス Prott Adobe XD 最近よく使っている / 周りで使われている 概要は…… 会場に詳しい人が居そうです 6
7. 本日の流れ 1. アウトプットに合ったツー ルを 2. チー ムに合ったツー ルを 3. ポイントを絞って投入を 7
8. 1. アウトプットに合ったツー ルを 8
9. 1‑1. 会社概要ペー ジの新規デザイン提案 1 分でわかる感じにしつつ未来感も演出したい 9
10. 誰が ? いきがかり上、 伊原が どの局面で ? デザイナー がデザインを起こし終わったあとに 何を使って ? Prott を使って画面遷移イメー ジを作成 10
11. 作ったらどうなった ? 「1 分でスッと伝わってくる感じがしない」 11
12. 学び RFP より推察できる方向性 / コンセプトをカバー できるツー ルを選択する必要があった コンペのデザイン提案なのでそれなりに期待感が持てるインタラクションが必要だった 止まった画面で詰めてから最後に繋ぐのではなく、 動きによる印象の伝わり方をベー ス に検討を進めるべきだった 12
13. 1‑2. 決済アプリの全体リニュー アル 初期リリー ス後に建て増し続けたツギハギ状態を解消したい KPI に寄与している機能をより全面に出したい 13
14. 誰が ? IA とデザイナー が どの局面で ? ユー ザー 調査後にコンセプト立案 ペー パー プロトでパター ン検討後 何を使って ? Sketch + Prott + After E ff ects 14
15. 作ったらどうなった ? 「 機能のまとめ方の方針がよくわかった」 「 演出の必然性がよくわかった」 ぜひ引き続き詳しく…… 15
16. 学び 画面を作って繋いでいくツー ルでは、 用意されたインタラクションしか表現できない 連続性を適切に伝えるためには、 それに向いたツー ルによる組み合わせが必要 16
17. 2. チー ムに合ったツー ルを 17
18. 2‑1. 運用におけるサー ビス告知ペー ジ作成 詳細が決まってない状態だが、 進められる部分から着手 役員までの社内承認を順次取っていく必要がある 18
19. 誰が ? IA 兼デザイナー が どの局面で ? 構成・ 原稿・ 図版をクライアントとキャッチボー ルする中で 何を使って ? 最初のワイヤー は Google スライドで 中盤は PowerPoint によるワイヤー＋ 原稿テキストで 後半は作業効率化のため、 制作側の判断で XD に移行 19
20. 作ったらどうなった ? 後半、 忠実度が上がった状態で手直しが頻発し、 作業効率が低下 クライアントが「 これはデザインなのか？ 原稿なのか？」 と混乱 クライアント側でもいじるため、 パワポ版が必要になり、XD からパワポに「 逆移植」 20
21. 学び 発注側も編集に参加するフロー なのであれば、 そもそも（ 環境面、 スキル面で） 相手側 が使えるツー ルに合わせる必要がある Windows かつ Web 閲覧に縛りがある環境だと、 ほとんどのプロトタイピングツー ルが封 印されるし、 大手企業には割とよくある Tips XD のファイルからテキストを抜き出すには SVG 出力すべし。PDF 出力だとアウトライン 化されて抜けない 21
22. 2‑2. 情報提供アプリの継続改善 アプリのリニュー アル後、 継続改善 月 2 回リリー スで改修や A/B テスト IA が半常駐して対応 22
23. 誰が ? クライアント担当者と IA が協同で どの局面で ? 改善版のスタディ開始から ビジュアルデザインの手前まで 何を使って ? Prott + XD Prott のワイヤー フレー ム機能で互いに案出し 両者で編集、 コメント機能でやりとり 適宜 XD でパー ツを作って Prott にコンポー ネント登録 23
24. 作ったらどうなった ? 1 年半の継続的改善のサイクル維持 発注側と受注側という分断ではなく、 チー ム感ある（ 主観） 24
25. 学び Web 閲覧の制限が突破できれば（ やる気さえあれば） ツー ルベー スの進行に移行できる 共同編集・ コメント・ バー ジョン管理はやっぱり重要 Prott のワイヤー フレー ム、PowerPoint 乗換組にはフレンドリー。 でも歯がゆさある Tips XD 、 パー ツ単位でも書き出せる（ 要素選択→cmd+E ）。 軽量デザインツー ルとして活用 25
26. 3. ポイントを絞って投入を 26
27. 3‑1. サー ビス紹介ペー ジ再構成 A 訪問調査サー ビスの紹介ペー ジがある 申込みまでの CVR が低いので改善してほしい すでにコンポー ネントがあるのでそれを使って欲しい 27
28. 誰が ? IA が どの局面で ? 現状のアクセスログに基づくヒュー リスティック評価後に 何を使って ? XD を使ってはじめから最終形を作成 28
29. 作ったらどうなった ? 「 何が理由で離脱しているのか理解できた」 「 文言も完成しているのでこのまま実装へ」 あっさり完了… かと思いきや 最後に画像切り出しのため精緻化した PSD ファイルが必要になり、 起こし直す 29
30. 学び 単独で最終形まで持っていけるなら、XD 作りきってしまうのもアリだが…… どこかでアタマを切り替えて、 納品物を作る！ モー ドになる必要がある 30
31. 3‑2. サー ビス紹介ペー ジ再構成 B 案件 C と同じクライアント（PowerPoint 限定、 承認フロー が多段階） サー ビス全体を説明するペー ジを、 新しいビジネス戦略に基づいて作りなおす 31
32. 誰が ? デザイナー が どの局面で ? 「 とりあえず形にしてみます」 と言い放って IA と共に手書きで構成を検討してから 何を使って ? XD を使ってラフデザインを作成 32
33. 作ったらどうなった ? 「 まとまった姿がイメー ジできた」 「 議論の土台ができた、 これで社内に説明できる」 以降、 詳しいコンテンツの詰めは PowerPoint で、 デザインは PhotoShop で 33
34. 学び XD の「 本物感あるものを素早く」 という特性が「 立脚点を示す」 ことにフィット 使いどころを絞り、 それを宣言して共有することで「 帯に短し～」 状態は回避できそう 打ち合わせ単位や機能単位などでフォー カスするのがよさそう 34
35. まとめ 35
36. アウトプットに合ったツー ルを 方向性 / コンセプトに適したツー ルを予想して選択する 画面を作って繋いでいくツー ルでは、 用意されたインタラクションしか表現できない 動きによる体験が重要なら、 それに応じたツー ルを組み合わせる そのために引き出しを増やしておく（ ツー ルや実装スキルの習得） 36
37. チー ムに合ったツー ルを コラボレー ション前提なのかを確認したうえで、 まわりが使えるツー ルを選ぶ 「Windows ✕ Web 閲覧に制限のある環境」 よくあるので要注意 共同編集・ コメント・ バー ジョン管理はやっぱり重要 Prott のワイヤー 機能、 パワポ乗換組にはフレンドリー XD はソロ活動用（ 今後に期待）。 パー ツづくりでの活用も 37
38. ポイントを絞って投入を XD はそれなりに忠実度が高いものをサッと作れる 最初から終盤まで作りきるなら、 どこかで納品仕様にアタマを切り替えよう 逆に使いどころを絞り、 宣言＆ 共有することで「 帯に短し～」 状態を回避する方向も 打ち合わせ単位や機能単位などでフォー カスするのがよさそう 38
39. とにかくトライ ＆ エラー、 そしてシェア プロトタイピングですから ! 39
40. ありがとうございました @magi1125 40