animation_prototype_campfire_design

1. Copyright ©
201 Yahoo Japan Corporation. All Rights
アニメーションプロトタイプでグロースハック
1
Copyright ©
201 Yahoo Japan Corporation. All Rights
2017.5.18 [THU] @LODGE
Yahoo!ファイルマネージャー 渡辺

2. Copyright ©
201
7
Yahoo Japan Corporation. All Rights
Reserved.
渡辺英美
ヤフー新卒入社4年目
AndroidアプリのUI/UXデザインを担当

3. Copyright ©
201
7
Yahoo Japan Corporation. All Rights
Reserved.
Yahoo!ファイルマネージャー

4. Copyright ©
201
7
Yahoo Japan Corporation. All Rights
Reserved.
スマホのファイル整理、
不要ファイルの削除ができるアプリです。
紹介ムービーはこちら
https://www.youtube.com/watch?v=MzB95C1G9EU

5. Copyright ©
201
7
Yahoo Japan Corporation. All Rights
Reserved.
Copyright ©
201
7
Yahoo Japan Corporation. All Rights
Reserved.

6. Copyright ©
201
7
Yahoo Japan Corporation. All Rights
Reserved.
5ヶ月で行った施策

7. Copyright ©
201
7
Yahoo Japan Corporation. All Rights
Reserved.
課題
ファイルマネージャーアプリとしては評価は
高いが、毎日使いたくなるような機能がなかった

8. Copyright ©
201
7
Yahoo Japan Corporation. All Rights
Reserved.
解決
不要ファイル削除機能をリリース
「スマホを綺麗にして空き容量を増やしたい」
というユーザーニーズに答えて
毎日スマホのお掃除をしてもらえるように

9. Copyright ©
201
7
Yahoo Japan Corporation. All Rights
Reserved.
不要ファイル削除機能のゴール
スマホの空き容量が少ない
ゴミ（要らないデータ）を削除したい
削除してスマホがスッキリした！

10. Copyright ©
201
7
Yahoo Japan Corporation. All Rights
Reserved.
毎日使ってもらうためには
スッキリ感のある
UIアニメーションが必要

11. Copyright ©
201
7
Yahoo Japan Corporation. All Rights
Reserved.
アプリアニメーションとは

12. Copyright ©
201
7
Yahoo Japan Corporation. All Rights
Reserved.
押したくなる
Twitterいいねボタン

13. Copyright ©
201
7
Yahoo Japan Corporation. All Rights
Reserved.
遷移が分かりやすい
Googleマテリアルデザインガイドライン

14. Copyright ©
201
7
Yahoo Japan Corporation. All Rights
Reserved.
アニメーションは
UI/UXを向上させるのに
欠かせない要素

15. Copyright ©
201
7
Yahoo Japan Corporation. All Rights
Reserved.
Yahoo!ファイルマネージャー
でもアニメーションに
こだわりました

16. Copyright ©
201
7
Yahoo Japan Corporation. All Rights
Reserved.
不要ファイル削除機能開発に
アニメーション
プロトタイピングを使用
短い期間でも機能の
品質向上が可能に！

17. Copyright ©
201
7
Yahoo Japan Corporation. All Rights
Reserved.
従来のアニメーションの決め方

18. Copyright ©
201
7
Yahoo Japan Corporation. All Rights
Reserved.
アニメーションを
エンジニアさんに口頭で説明
デザイナー エンジニアUIパーツ
実装して確認

19. Copyright ©
201
7
Yahoo Japan Corporation. All Rights
Reserved.
「ここがくるくるっとなって
広がってフェードアウトします」

20. Copyright ©
201
7
Yahoo Japan Corporation. All Rights
Reserved.
いまいち伝わらない

21. Copyright ©
201
7
Yahoo Japan Corporation. All Rights
Reserved.
写真：XXX
コミュニケーションコスト大
完成形が誰にも見えていない
品質がなかなかあがらない

22. Copyright ©
201
7
Yahoo Japan Corporation. All Rights
Reserved.
アニメーションプロトを作成
After effectsを利用してます

23. Copyright ©
201
7
Yahoo Japan Corporation. All Rights
Reserved.
通常通りに
UIデザインと遷移図まで作成

24. Copyright ©
201
7
Yahoo Japan Corporation. All Rights
Reserved.
動きをつけていく

25. Copyright ©
201
7
Yahoo Japan Corporation. All Rights
Reserved.
気持ちのいいアニメーションのポイント

26. Copyright ©
201
7
Yahoo Japan Corporation. All Rights
Reserved.
自然な動きをつける
スムーズな動きをつけることで心地いいと感じるアニメーションになる

27. Copyright ©
201
7
Yahoo Japan Corporation. All Rights
Reserved.
視線の誘導をする
動かす順番を工夫すればユーザに見てもらいたいものを訴求できる

28. Copyright ©
201
7
Yahoo Japan Corporation. All Rights
Reserved.
アニメーションプロトタイプの利点

29. Copyright ©
201
7
Yahoo Japan Corporation. All Rights
Reserved.
問題が見えやすい
手戻りが少ない

30. Copyright ©
201
7
Yahoo Japan Corporation. All Rights
Reserved.
機能開発全体のフロー
仕様、デザインの抜け漏れ
修正
機能の
概要決定
UI、遷移図
作成
プロトタイプ
作成
実装 テスト リリース

31. Copyright ©
201
7
Yahoo Japan Corporation. All Rights
Reserved.
機能開発全体のフロー
フィードバックを受ける
修正
機能の
概要決定
UI、遷移図
作成
アニメーション
プロトタイプ
作成
実装 テスト リリース
手戻りなくスムーズに

32. Copyright ©
201
7
Yahoo Japan Corporation. All Rights
Reserved.
動くものは周囲に見てもらいやすい。
問題発見と修正を素早くできる。
細かい部分までプロトタイプの段階で完成するた
め開発さんの手戻りが少ない

33. Copyright ©
201
7
Yahoo Japan Corporation. All Rights
Reserved.
アニメーションと
UI/UXの完成度が上がる

34. Copyright ©
201
7
Yahoo Japan Corporation. All Rights
Reserved.
従来の制作フロー
ワイヤー
遷移図
UIビジュアル
プロトタイプ
（Prott等使用）
30% 60% 80%
（完成度）

35. Copyright ©
201
7
Yahoo Japan Corporation. All Rights
Reserved.
ワイヤー
遷移図
UIビジュアル プロトタイプ
（Prott等使用）
アニメーション
プロトタイプ
30% 60% 80% 100%
（完成度）
導入後の制作フロー

36. Copyright ©
201
7
Yahoo Japan Corporation. All Rights
Reserved.
120%
手戻りが少ないから
実装後細部調整できる！
（完成度）
さらに・・・

37. Copyright ©
201
7
Yahoo Japan Corporation. All Rights
Reserved.
デザイナーがアニメーションを作りきれる
手戻りが少ない分、細部までこだわれる時間がと
れる！

38. Copyright ©
201
7
Yahoo Japan Corporation. All Rights
Reserved.
UI/UX向上と
素早い開発が可能に

39. Copyright ©
201
7
Yahoo Japan Corporation. All Rights
Reserved.
アニメーションプロトタイプ
おすすめです！

40. Copyright ©
201
7
Yahoo Japan Corporation. All Rights
Reserved.
ご静聴ありがとうございました