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

Slide 1

Slide 1 text

プロトタイピングツール投入のケーススタディ 2016/08/25 ｜Design‑JP 第 1 回勉強会 : プロトタイピングの回伊原力也 / BA 1

Slide 2

Slide 2 text

@magi1125 BA IA プロトタイピングアクセシビリティの書籍出しています 2

Slide 3

Slide 3 text

BA 受託のデザイン会社 Web サイトのリニューアルから運用までアプリの新規立ち上げ、リニューアル、継続改善も 3

Slide 4

Slide 4 text

プロトタイピングツールっていつ / どこで / 誰が / なにを / どのように / 使うと良い？事例をもとに考えてみる 4

Slide 5

Slide 5 text

ツール遍歴 HTML / CSS / JS PowerPoint Keynote Google スライド InVision Prott Adobe XD Axure RP Pixate ( 練習中 ) 5

Slide 6

Slide 6 text

今日は特に Prott と XD にフォーカス Prott Adobe XD 最近よく使っている / 周りで使われている概要は…… 会場に詳しい人が居そうです 6

Slide 7

Slide 7 text

本日の流れ 1. アウトプットに合ったツールを 2. チームに合ったツールを 3. ポイントを絞って投入を 7

Slide 8

Slide 8 text

1. アウトプットに合ったツールを 8

Slide 9

Slide 9 text

1‑1. 会社概要ページの新規デザイン提案 1 分でわかる感じにしつつ未来感も演出したい 9

Slide 10

Slide 10 text

誰が ? いきがかり上、伊原がどの局面で ? デザイナーがデザインを起こし終わったあとに何を使って ? Prott を使って画面遷移イメージを作成 10

Slide 11

Slide 11 text

作ったらどうなった ? 「1 分でスッと伝わってくる感じがしない」 11

Slide 12

Slide 12 text

学び RFP より推察できる方向性 / コンセプトをカバーできるツールを選択する必要があったコンペのデザイン提案なのでそれなりに期待感が持てるインタラクションが必要だった止まった画面で詰めてから最後に繋ぐのではなく、動きによる印象の伝わり方をベースに検討を進めるべきだった 12

Slide 13

Slide 13 text

1‑2. 決済アプリの全体リニューアル初期リリース後に建て増し続けたツギハギ状態を解消したい KPI に寄与している機能をより全面に出したい 13

Slide 14

Slide 14 text

誰が ? IA とデザイナーがどの局面で ? ユーザー調査後にコンセプト立案ペーパープロトでパターン検討後何を使って ? Sketch + Prott + After E ﬀ ects 14

Slide 15

Slide 15 text

作ったらどうなった ? 「機能のまとめ方の方針がよくわかった」「演出の必然性がよくわかった」ぜひ引き続き詳しく…… 15

Slide 16

Slide 16 text

学び画面を作って繋いでいくツールでは、用意されたインタラクションしか表現できない連続性を適切に伝えるためには、それに向いたツールによる組み合わせが必要 16

Slide 17

Slide 17 text

2. チームに合ったツールを 17

Slide 18

Slide 18 text

2‑1. 運用におけるサービス告知ページ作成詳細が決まってない状態だが、進められる部分から着手役員までの社内承認を順次取っていく必要がある 18

Slide 19

Slide 19 text

誰が ? IA 兼デザイナーがどの局面で ? 構成・原稿・図版をクライアントとキャッチボールする中で何を使って ? 最初のワイヤーは Google スライドで中盤は PowerPoint によるワイヤー＋原稿テキストで後半は作業効率化のため、制作側の判断で XD に移行 19

Slide 20

Slide 20 text

作ったらどうなった ? 後半、忠実度が上がった状態で手直しが頻発し、作業効率が低下クライアントが「これはデザインなのか？原稿なのか？」と混乱クライアント側でもいじるため、パワポ版が必要になり、XD からパワポに「逆移植」 20

Slide 21

Slide 21 text

学び発注側も編集に参加するフローなのであれば、そもそも（環境面、スキル面で）相手側が使えるツールに合わせる必要がある Windows かつ Web 閲覧に縛りがある環境だと、ほとんどのプロトタイピングツールが封印されるし、大手企業には割とよくある Tips XD のファイルからテキストを抜き出すには SVG 出力すべし。PDF 出力だとアウトライン化されて抜けない 21

Slide 22

Slide 22 text

2‑2. 情報提供アプリの継続改善アプリのリニューアル後、継続改善月 2 回リリースで改修や A/B テスト IA が半常駐して対応 22

Slide 23

Slide 23 text

誰が ? クライアント担当者と IA が協同でどの局面で ? 改善版のスタディ開始からビジュアルデザインの手前まで何を使って ? Prott + XD Prott のワイヤーフレーム機能で互いに案出し両者で編集、コメント機能でやりとり適宜 XD でパーツを作って Prott にコンポーネント登録 23

Slide 24

Slide 24 text

作ったらどうなった ? 1 年半の継続的改善のサイクル維持発注側と受注側という分断ではなく、チーム感ある（主観） 24

Slide 25

Slide 25 text

学び Web 閲覧の制限が突破できれば（やる気さえあれば）ツールベースの進行に移行できる共同編集・コメント・バージョン管理はやっぱり重要 Prott のワイヤーフレーム、PowerPoint 乗換組にはフレンドリー。でも歯がゆさある Tips XD 、パーツ単位でも書き出せる（要素選択→cmd+E ）。軽量デザインツールとして活用 25

Slide 26

Slide 26 text

3. ポイントを絞って投入を 26

Slide 27

Slide 27 text

3‑1. サービス紹介ページ再構成 A 訪問調査サービスの紹介ページがある申込みまでの CVR が低いので改善してほしいすでにコンポーネントがあるのでそれを使って欲しい 27

Slide 28

Slide 28 text

誰が ? IA がどの局面で ? 現状のアクセスログに基づくヒューリスティック評価後に何を使って ? XD を使ってはじめから最終形を作成 28

Slide 29

Slide 29 text

作ったらどうなった ? 「何が理由で離脱しているのか理解できた」「文言も完成しているのでこのまま実装へ」あっさり完了… かと思いきや最後に画像切り出しのため精緻化した PSD ファイルが必要になり、起こし直す 29

Slide 30

Slide 30 text

学び単独で最終形まで持っていけるなら、XD 作りきってしまうのもアリだが…… どこかでアタマを切り替えて、納品物を作る！モードになる必要がある 30

Slide 31

Slide 31 text

3‑2. サービス紹介ページ再構成 B 案件 C と同じクライアント（PowerPoint 限定、承認フローが多段階）サービス全体を説明するページを、新しいビジネス戦略に基づいて作りなおす 31

Slide 32

Slide 32 text

誰が ? デザイナーがどの局面で ? 「とりあえず形にしてみます」と言い放って IA と共に手書きで構成を検討してから何を使って ? XD を使ってラフデザインを作成 32

Slide 33

Slide 33 text

作ったらどうなった ? 「まとまった姿がイメージできた」「議論の土台ができた、これで社内に説明できる」以降、詳しいコンテンツの詰めは PowerPoint で、デザインは PhotoShop で 33

Slide 34

Slide 34 text

学び XD の「本物感あるものを素早く」という特性が「立脚点を示す」ことにフィット使いどころを絞り、それを宣言して共有することで「帯に短し～」状態は回避できそう打ち合わせ単位や機能単位などでフォーカスするのがよさそう 34

Slide 35

Slide 35 text

まとめ 35

Slide 36

Slide 36 text

アウトプットに合ったツールを方向性 / コンセプトに適したツールを予想して選択する画面を作って繋いでいくツールでは、用意されたインタラクションしか表現できない動きによる体験が重要なら、それに応じたツールを組み合わせるそのために引き出しを増やしておく（ツールや実装スキルの習得） 36

Slide 37

Slide 37 text

チームに合ったツールをコラボレーション前提なのかを確認したうえで、まわりが使えるツールを選ぶ「Windows ✕ Web 閲覧に制限のある環境」よくあるので要注意共同編集・コメント・バージョン管理はやっぱり重要 Prott のワイヤー機能、パワポ乗換組にはフレンドリー XD はソロ活動用（今後に期待）。パーツづくりでの活用も 37

Slide 38

Slide 38 text

ポイントを絞って投入を XD はそれなりに忠実度が高いものをサッと作れる最初から終盤まで作りきるなら、どこかで納品仕様にアタマを切り替えよう逆に使いどころを絞り、宣言＆共有することで「帯に短し～」状態を回避する方向も打ち合わせ単位や機能単位などでフォーカスするのがよさそう 38

Slide 39

Slide 39 text

とにかくトライ＆エラー、そしてシェアプロトタイピングですから ! 39

Slide 40

Slide 40 text

ありがとうございました @magi1125 40