animation_prototype_campfire_design

>100 Views

May 18, 17

#アニメーションプロトタイプ #UI/UXデザイン #グロースハック #After Effects #アプリ開発

スライド概要

animation_prototype_campfire_design

profile-image
スライド一覧

2023年10月からSpeaker Deckに移行しました。最新情報はこちらをご覧ください。 https://speakerdeck.com/lycorptech_jp

シェア

またはPlayer版

埋め込む »CMSなどでJSが使えない場合

（ダウンロード不可）

関連スライド

slide-thumbnail

深層学習による自然言語処理入門: word2vecからBERT, GPT-3まで
user-img Yahoo!デベロッパーネットワーク 160.6K
slide-thumbnail

ゼロから始める転移学習
user-img Yahoo!デベロッパーネットワーク 85.6K
slide-thumbnail

ヤフーにおける WebAuthn と Passkey の UX の紹介と考察 #idcon #fidcon
idcon fidcon
user-img Yahoo!デベロッパーネットワーク 72.7K
slide-thumbnail

OpenID Connectとネイティブアプリを取り巻く仕様と動向 Yahoo! JAPANの取り組み #openid #openid_tokyo
openid openid_tokyo
user-img Yahoo!デベロッパーネットワーク 57.5K
slide-thumbnail

運用業務とスクラムは本当に組み合わせにくいのか︖運用業務が大半を占めるプロダクト開発での試行錯誤
devsumi
user-img Yahoo!デベロッパーネットワーク 34.8K
slide-thumbnail

ヤフーのオンプレ機械学習基盤AIPFについて #ml_kubernetes
ml_kubernetes
user-img Yahoo!デベロッパーネットワーク 28.9K
各ページのテキスト
1.

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

2.

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

3.

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

4.

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

5.

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

6.

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

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.

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

11.

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

12.

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

13.

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

14.

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

15.

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

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.

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

22.

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

23.

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

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.

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

31.

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

32.

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

33.

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

34.

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

35.

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

36.

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

37.

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

38.

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

39.

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

40.

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