2016年8月25日に開催されたイベント「Design-JP 第1回 勉強会 : プロトタイピングの回」で使用したスライドです。公開向けに編集した抜粋版となっています。

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 Effects
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
サービス全体を説明するページを、新しいビジネス戦略に基づいて作りなおす
詳細が決まってない状態だが、進められる部分から着手
役員までの社内承認を順次取っていく必要がある
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