animation_prototype_P2P

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

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

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

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

• https://www.youtube.com/watch?v=MzB95C1G9EU

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

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

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

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

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

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

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

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

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

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

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

いまいち伝わらない 16

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

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

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

動きをつけていく 20

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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