Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.
Prochain SlideShare
CAMPFIRE DESIGN #1 「デザインの力」でビジネスにコミットする
Suivant
Télécharger pour lire hors ligne et voir en mode plein écran

3

Partager

Télécharger pour lire hors ligne

animation_prototype_campfire_design

Télécharger pour lire hors ligne

animation_prototype_campfire_design

animation_prototype_campfire_design

  1. 1. Copyright © 201 Yahoo Japan Corporation. All Rights アニメーションプロトタイプでグロースハック 1 Copyright © 201 Yahoo Japan Corporation. All Rights 2017.5.18 [THU] @LODGE Yahoo!ファイルマネージャー 渡辺
  2. 2. Copyright © 201 7 Yahoo Japan Corporation. All Rights Reserved. 渡辺英美 ヤフー新卒入社4年目 AndroidアプリのUI/UXデザインを担当
  3. 3. Copyright © 201 7 Yahoo Japan Corporation. All Rights Reserved. Yahoo!ファイルマネージャー
  4. 4. Copyright © 201 7 Yahoo Japan Corporation. All Rights Reserved. スマホのファイル整理、 不要ファイルの削除ができるアプリです。 紹介ムービーはこちら https://www.youtube.com/watch?v=MzB95C1G9EU
  5. 5. Copyright © 201 7 Yahoo Japan Corporation. All Rights Reserved. Copyright © 201 7 Yahoo Japan Corporation. All Rights Reserved.
  6. 6. Copyright © 201 7 Yahoo Japan Corporation. All Rights Reserved. 5ヶ月で行った施策
  7. 7. Copyright © 201 7 Yahoo Japan Corporation. All Rights Reserved. 課題 ファイルマネージャーアプリとしては評価は 高いが、毎日使いたくなるような機能がなかった
  8. 8. Copyright © 201 7 Yahoo Japan Corporation. All Rights Reserved. 解決 不要ファイル削除機能をリリース 「スマホを綺麗にして空き容量を増やしたい」 というユーザーニーズに答えて 毎日スマホのお掃除をしてもらえるように
  9. 9. Copyright © 201 7 Yahoo Japan Corporation. All Rights Reserved. 不要ファイル削除機能のゴール スマホの空き容量が少ない ゴミ(要らないデータ)を削除したい 削除してスマホがスッキリした!
  10. 10. Copyright © 201 7 Yahoo Japan Corporation. All Rights Reserved. 毎日使ってもらうためには スッキリ感のある UIアニメーションが必要
  11. 11. Copyright © 201 7 Yahoo Japan Corporation. All Rights Reserved. アプリアニメーションとは
  12. 12. Copyright © 201 7 Yahoo Japan Corporation. All Rights Reserved. 押したくなる Twitterいいねボタン
  13. 13. Copyright © 201 7 Yahoo Japan Corporation. All Rights Reserved. 遷移が分かりやすい Googleマテリアルデザインガイドライン
  14. 14. Copyright © 201 7 Yahoo Japan Corporation. All Rights Reserved. アニメーションは UI/UXを向上させるのに 欠かせない要素
  15. 15. Copyright © 201 7 Yahoo Japan Corporation. All Rights Reserved. Yahoo!ファイルマネージャー でもアニメーションに こだわりました
  16. 16. Copyright © 201 7 Yahoo Japan Corporation. All Rights Reserved. 不要ファイル削除機能開発に アニメーション プロトタイピングを使用 短い期間でも機能の 品質向上が可能に!
  17. 17. Copyright © 201 7 Yahoo Japan Corporation. All Rights Reserved. 従来のアニメーションの決め方
  18. 18. Copyright © 201 7 Yahoo Japan Corporation. All Rights Reserved. アニメーションを エンジニアさんに口頭で説明 デザイナー エンジニアUIパーツ 実装して確認
  19. 19. Copyright © 201 7 Yahoo Japan Corporation. All Rights Reserved. 「ここがくるくるっとなって 広がってフェードアウトします」
  20. 20. Copyright © 201 7 Yahoo Japan Corporation. All Rights Reserved. いまいち伝わらない
  21. 21. Copyright © 201 7 Yahoo Japan Corporation. All Rights Reserved. 写真:XXX コミュニケーションコスト大 完成形が誰にも見えていない 品質がなかなかあがらない
  22. 22. Copyright © 201 7 Yahoo Japan Corporation. All Rights Reserved. アニメーションプロトを作成 After effectsを利用してます
  23. 23. Copyright © 201 7 Yahoo Japan Corporation. All Rights Reserved. 通常通りに UIデザインと遷移図まで作成
  24. 24. Copyright © 201 7 Yahoo Japan Corporation. All Rights Reserved. 動きをつけていく
  25. 25. Copyright © 201 7 Yahoo Japan Corporation. All Rights Reserved. 気持ちのいいアニメーションのポイント
  26. 26. Copyright © 201 7 Yahoo Japan Corporation. All Rights Reserved. 自然な動きをつける スムーズな動きをつけることで心地いいと感じるアニメーションになる
  27. 27. Copyright © 201 7 Yahoo Japan Corporation. All Rights Reserved. 視線の誘導をする 動かす順番を工夫すればユーザに見てもらいたいものを訴求できる
  28. 28. Copyright © 201 7 Yahoo Japan Corporation. All Rights Reserved. アニメーションプロトタイプの利点
  29. 29. Copyright © 201 7 Yahoo Japan Corporation. All Rights Reserved. 問題が見えやすい 手戻りが少ない
  30. 30. Copyright © 201 7 Yahoo Japan Corporation. All Rights Reserved. 機能開発全体のフロー 仕様、デザインの抜け漏れ 修正 機能の 概要決定 UI、遷移図 作成 プロトタイプ 作成 実装 テスト リリース
  31. 31. Copyright © 201 7 Yahoo Japan Corporation. All Rights Reserved. 機能開発全体のフロー フィードバックを受ける 修正 機能の 概要決定 UI、遷移図 作成 アニメーション プロトタイプ 作成 実装 テスト リリース 手戻りなくスムーズに
  32. 32. Copyright © 201 7 Yahoo Japan Corporation. All Rights Reserved. 動くものは周囲に見てもらいやすい。 問題発見と修正を素早くできる。 細かい部分までプロトタイプの段階で完成するた め開発さんの手戻りが少ない
  33. 33. Copyright © 201 7 Yahoo Japan Corporation. All Rights Reserved. アニメーションと UI/UXの完成度が上がる
  34. 34. Copyright © 201 7 Yahoo Japan Corporation. All Rights Reserved. 従来の制作フロー ワイヤー 遷移図 UIビジュアル プロトタイプ (Prott等使用) 30% 60% 80% (完成度)
  35. 35. Copyright © 201 7 Yahoo Japan Corporation. All Rights Reserved. ワイヤー 遷移図 UIビジュアル プロトタイプ (Prott等使用) アニメーション プロトタイプ 30% 60% 80% 100% (完成度) 導入後の制作フロー
  36. 36. Copyright © 201 7 Yahoo Japan Corporation. All Rights Reserved. 120% 手戻りが少ないから 実装後細部調整できる! (完成度) さらに・・・
  37. 37. Copyright © 201 7 Yahoo Japan Corporation. All Rights Reserved. デザイナーがアニメーションを作りきれる 手戻りが少ない分、細部までこだわれる時間がと れる!
  38. 38. Copyright © 201 7 Yahoo Japan Corporation. All Rights Reserved. UI/UX向上と 素早い開発が可能に
  39. 39. Copyright © 201 7 Yahoo Japan Corporation. All Rights Reserved. アニメーションプロトタイプ おすすめです!
  40. 40. Copyright © 201 7 Yahoo Japan Corporation. All Rights Reserved. ご静聴ありがとうございました
  • shuusukehoshino

    Jun. 6, 2017
  • NaruhitoKubota

    May. 21, 2017
  • aghome

    May. 19, 2017

animation_prototype_campfire_design

Vues

Nombre de vues

1 742

Sur Slideshare

0

À partir des intégrations

0

Nombre d'intégrations

1 049

Actions

Téléchargements

13

Partages

0

Commentaires

0

Mentions J'aime

3

×