i3DesignのデザインプロセスにInVisionを導入した際の、社内周知用スライド。

1. InVision勉強会
20160615_武本

3. 目次
1. InVisionってなんだろう
2. InVisionで何をしたいのか
3. 皆に何をしてもらいたいか
4. InVisionでできない事
5. Q&A

4. 1.InVisionって何だろう
InVisionを使ってできる事

5. 1.InVisionって何だろう
InVisionとは、デザインデータからサイトやアプ
リのプロトタイプを作るツールです。

6. 1.InVisionって何だろう
プロトタイプって？
試作品のこと。
プロジェクトの初期段階で実働する試作品を作り検証する開発方法の事をプロ
トタイプ開発/またはプロトタイピングと言います。

7. 1.InVisionって何だろう
プロトタイピングのメリット
● 早い段階から実際に使う事で、様々な観点からの検証を可能し、より
良い製品開発ができる。
● 後工程での手戻りを少なくできる。

8. 1.InVisionって何だろう
他にも、
● デザイン・psdデータの共有をスムーズにできる
● 実機確認がより手軽にできる
● デザインのバージョン管理ができる
● コメントが簡単につけられる

9. 2.InVisionで何がしたいのか
デザインフローで変わる事

10. 2.InVisionで何がしたいのか
デザインフェーズでプロトタイプの作成をしたい

11. 2.InVisionで何がしたいのか
理由1.顧客にプロトタイプでの確認をしてもらいたい
挙動まで含めた実機確認をプロジェクト初期にしてもらう事で、後工程の手戻りを減
らしたいです。

12. 2.InVisionで何がしたいのか
理由2.社内でプロトタイプでの確認をしてもらいたい
これまで社内でデザインを共有する時はデザイン画像を見てもらっていました。
これだと、見た目の確認が先行してしまい、意見を言いづらかったのではないでしょ
うか？
プロトタイプで実際に近い挙動を確認してもらう事で、ページの使い勝手や、デザイ
ナーでは気づきにくい点の意見をもらいたいです。

13. 2.InVisionで何がしたいのか
理由3.マークアップ依頼をスムーズにしたい
プロトタイプで挙動まで作成してからマークアップに依頼する事で、マークアップフ
ェーズでの指示漏れを防ぎたいです。

14. 2.InVisionで何がしたいのか
これからのデザインフローの作業イメージ
デザイナーがプロト
タイプを作成
プロジェクトメンバ
がプロトタイプを確
認・レビュー
顧客がプロトタイプ
を確認→承認
MU・組み込み・テ
スト
UAT
今までのデザインフローの作業イメージ
デザイナーがデザイ
ン画像を作成
PM・デザイナーに
デザインの確認・レ
ビュー
顧客がデザインデー
タを確認→承認
MU・組み込み・テ
スト
UAT
UKRにドロップボッ
クスで共有
UKRにプロトタイプ
を共有

15. 3.皆に何をしてもらいたいの
か
具体的な使い方

16. 3.皆に何をしてもらいたいのか
理由2.社内でプロトタイプでの確認・検証をしてもらいたい

17. 3.皆に何をしてもらいたいのか
実際にやってみます

18. 4.InVisionで出来ない事
今まで通りの事もある

19. 4.InVisionで出来ない事
1. パーツ作成等、小さな案件ではInVisionは使いません。
2. 複雑で微妙な挙動は作れません。
3. 顧客確認時はInVisionだけでなく、今まで通りデザインデータと補足資料も展開します。
4. マークアップ依頼の際も、細かい指示は別資料を作る必要があります。
5. 一旦マークアップがプッシュされてから以降はあまり使えません。

20. Q&A