---
title: animation_prototype_campfire_design
tags: 
author: [Yahoo!デベロッパーネットワーク](https://convert.docswell.com/user/ydnjp)
site: [Docswell](https://www.docswell.com/)
thumbnail: https://bcdn.docswell.com/page/8JDWWL8KEG.jpg?width=480
description: animation_prototype_campfire_design
published: May 18, 17
canonical: https://convert.docswell.com/s/ydnjp/5MRWNK-2017-05-18-122509
---
# Page. 1

![Page Image](https://bcdn.docswell.com/page/8JDWWL8KEG.jpg)

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


# Page. 2

![Page Image](https://bcdn.docswell.com/page/VEP9928378.jpg)

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


# Page. 3

![Page Image](https://bcdn.docswell.com/page/27VMMDNN7Q.jpg)

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


# Page. 4

![Page Image](https://bcdn.docswell.com/page/5JGGGYK5JL.jpg)

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


# Page. 5

![Page Image](https://bcdn.docswell.com/page/47QXXMNLJP.jpg)

Copyright
Copyright ©
©
201
201
77
Yahoo
Yahoo Japan
Japan Corporation.
Corporation. All
All Rights
Rights
Reserved.
Reserved.


# Page. 6

![Page Image](https://bcdn.docswell.com/page/KE466VG5J1.jpg)

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


# Page. 7

![Page Image](https://bcdn.docswell.com/page/L71VV3D2JG.jpg)

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


# Page. 8

![Page Image](https://bcdn.docswell.com/page/G7WLLPY2J2.jpg)

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


# Page. 9

![Page Image](https://bcdn.docswell.com/page/4JZMMKX473.jpg)

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


# Page. 10

![Page Image](https://bcdn.docswell.com/page/YE6NNQ4GEV.jpg)

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


# Page. 11

![Page Image](https://bcdn.docswell.com/page/GE555RQXE4.jpg)

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


# Page. 12

![Page Image](https://bcdn.docswell.com/page/972NNDPQJR.jpg)

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


# Page. 13

![Page Image](https://bcdn.docswell.com/page/DJYPP25YJM.jpg)

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


# Page. 14

![Page Image](https://bcdn.docswell.com/page/V7N558NRE8.jpg)

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


# Page. 15

![Page Image](https://bcdn.docswell.com/page/YJ9YYKRZ73.jpg)

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


# Page. 16

![Page Image](https://bcdn.docswell.com/page/GJ866RGYED.jpg)

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


# Page. 17

![Page Image](https://bcdn.docswell.com/page/LJL99KG97R.jpg)

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


# Page. 18

![Page Image](https://bcdn.docswell.com/page/47MZZ2QVJW.jpg)

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


# Page. 19

![Page Image](https://bcdn.docswell.com/page/P7R66M8WE9.jpg)

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


# Page. 20

![Page Image](https://bcdn.docswell.com/page/PJXMMV8VEX.jpg)

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


# Page. 21

![Page Image](https://bcdn.docswell.com/page/3JKGGQK57D.jpg)

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


# Page. 22

![Page Image](https://bcdn.docswell.com/page/LE3NNPZ1E5.jpg)

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


# Page. 23

![Page Image](https://bcdn.docswell.com/page/8EDWWLRK7G.jpg)

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


# Page. 24

![Page Image](https://bcdn.docswell.com/page/V7P992W3J8.jpg)

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


# Page. 25

![Page Image](https://bcdn.docswell.com/page/2JVMMD8NJQ.jpg)

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


# Page. 26

![Page Image](https://bcdn.docswell.com/page/5EGGGY55EL.jpg)

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


# Page. 27

![Page Image](https://bcdn.docswell.com/page/4JQXXMZLEP.jpg)

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


# Page. 28

![Page Image](https://bcdn.docswell.com/page/K7466V35E1.jpg)

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


# Page. 29

![Page Image](https://bcdn.docswell.com/page/LJ1VV312EG.jpg)

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


# Page. 30

![Page Image](https://bcdn.docswell.com/page/GJWLLP82E2.jpg)

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


# Page. 31

![Page Image](https://bcdn.docswell.com/page/4EZMMK84J3.jpg)

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


# Page. 32

![Page Image](https://bcdn.docswell.com/page/Y76NNQPG7V.jpg)

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


# Page. 33

![Page Image](https://bcdn.docswell.com/page/G7555RKX74.jpg)

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


# Page. 34

![Page Image](https://bcdn.docswell.com/page/9J2NNDWQER.jpg)

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


# Page. 35

![Page Image](https://bcdn.docswell.com/page/DEYPP2LYEM.jpg)

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


# Page. 36

![Page Image](https://bcdn.docswell.com/page/VJN5584R78.jpg)

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


# Page. 37

![Page Image](https://bcdn.docswell.com/page/YE9YYKQZJ3.jpg)

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


# Page. 38

![Page Image](https://bcdn.docswell.com/page/GE866RQY7D.jpg)

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


# Page. 39

![Page Image](https://bcdn.docswell.com/page/LEL99KX9JR.jpg)

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


# Page. 40

![Page Image](https://bcdn.docswell.com/page/4JMZZ2LVEW.jpg)

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


