animation_prototype_P2P

1. アニメーションプロトタイプで
アプリ品質向上！
ヤフー株式会社 制作 渡辺英美
1

2. 2
渡辺英美
ヤフー新卒4年目
AndroidアプリのUI/UXデザインを担当

3. Yahoo!ファイルマネージャー
3

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

5. 5
不要ファイル削除機能開発に
アニメーション
プロトタイピングを使用
短い期間でも機能の
品質向上が可能に！

6. アプリアニメーションとは
6

7. 7
Twitterいいねボタン
押したくなる

8. 8
Googleマテリアルデザインガイドライン
遷移が分かりやすい

9. 9
アニメーションは
UI/UXを向上させるのに
欠かせない要素

10. 10
Yahoo!ファイルマネージャー
でもアニメーションに
こだわりました

11. 不要ファイル削除機能のゴール
11
スマホの空き容量が少ない
ゴミ（要らないデータ）を削除したい
削除してスマホがスッキリした！

12. 12
スッキリ感のある
UIアニメーションが必要

13. 従来のアニメーションの決め方
13

14. 14
アニメーションを
エンジニアさんに口頭で説明
デザイナー エンジニアUIパーツ
実装して確認

15. 15
「ここがくるくるっとなって
広がってフェードアウトします」

16. 16
いまいち伝わらない

17. 17
コミュニケーションコスト大
完成形が誰にも見えていない
品質がなかなかあがらない

18. アニメーションプロトを作成
18
After effectsという映像ソフトを使います

19. 19
通常通りに
UIデザインと遷移図まで作成

20. 20
動きをつけていく

21. 21
アニメーションのポイント

22. 22
自然な動きをつける
スムーズな動きをつけることで心地いいと感じるアニメーションになる

23. 23
視線の誘導をする
動かす順番を工夫すればユーザに見てもらいたいものを訴求できる

24. アニメーションプロトの利点
24

25. 25
問題が見えやすい
手戻りが少ない

26. 仕様、デザインの抜け漏れ
修正
機能の
概要決定
UI、遷移図
作成
プロトタイプ
作成
実装 テスト リリース
26
機能開発全体のフロー

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

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

29. 29
アニメーションと
UI/UXの完成度が上がる

30. 30
従来の制作フロー
ワイヤー
遷移図
UIビジュアル
プロトタイプ
（Prott等使用）
30% 60% 80%
（完成度）

31. 31
導入後の制作フロー
ワイヤー
遷移図
UIビジュアル プロトタイプ
（Prott等使用）
アニメーション
プロトタイプ
30% 60% 80% 100%
（完成度）

32. 32
さらに・・・
120%
手戻りが少ないから
実装後細部調整できる！
（完成度）

33. 33
デザイナーがアニメーションを作りきれる
手戻りが少ない分、細部までこだわれる時間がと
れる！

34. 34
UI/UX向上と
素早い開発が可能に

35. 35
アニメーションプロトタイプ
おすすめです

36. 36
ご静聴ありがとうございました