animation_prototype_campfire_design
4 likes1,929 views
animation_prototype_campfire_design
![Copyright ©
201 Yahoo Japan Corporation. All Rights
アニメーションプロトタイプでグロースハック
1
Copyright ©
201 Yahoo Japan Corporation. All Rights
2017.5.18 [THU] @LODGE
Yahoo!ファイルマネージャー 渡辺](https://image.slidesharecdn.com/cfltslideshare-170518043438/85/animation_prototype_campfire_design-1-320.jpg)
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. ご静聴ありがとうございました