実務のための マイクロ インタラクション入門

2023年11月29日のFigma Shonan Labo vol.2「実務のためのマイクロインタラクション入門」で発表した資料です。
この資料は静止画バージョンです。
動画ありバージョンはこちらをご確認ください。

Transcript

1. 2023.11.29 Friends of Figma Shonan 実務のための マイクロ インタラクション入門 鈴木慎吾 株式会社つみき
2. 自己紹介 #fof_shonan 鈴木慎吾 @shingo2000 株式会社つみき リードデザイナー
3. 実務のための マイクロインタラクション 入門 #fof_shonan
4. マイクロインタラクションとは？ 最小単位のインタラクション 「愛される製品」 と 「許容範囲の製品」の
 違いを生む トリガー、 ルール、 フィードバック、
 ループとモードの構造を持つ #fof_shonan
5. 実務 のための マイクロインタラクション入門 #fof_shonan
6. 制作事例 ダブルタップで
 見たい作品を登録 ポスター画像のモーションによって、
 アクションの結果を実感できる #fof_shonan
7. 制作事例 ドラマ・アニメの
 エピソードに拍手 連続タップでカウントアップ
 10回までアクションできる #fof_shonan
8. 制作事例 待ち時間も
 楽しく 待ち時間の演出と
 査定金額のカウントアップ Gulliver AUTO - 2019年 つみき制作 #fof_shonan
9. 制作事例 キャラクターの
 感情を表現 お知らせや読み込み中での
 キャラクターアニメーション Gulliver AUTO - 2019年 つみき制作 #fof_shonan
10. 細部を作り込んだ
 マイクロインタラクションは楽しい! ・・ ・が、 #fof_shonan
11. ① 作り手の自己満足では？ ② 作るのに手間がかかる？ ③ 効果検証できるのか？
12. ① 作り手の自己満足では？ ② 作るのに手間がかかる？ ③ 効果検証できるのか？
13. マイクロインタラクションの目的 理解を助ける メタファーを効果的に使ったインタラ クションによって言葉による説明を省 き、直感的に使い方が理解できるUI を実現できる。 使い勝手の向上に貢献
 タスクの完了率 / 機能の利用率 / 利用回数 感情に働きかける 演出としての動きを取り入れること で、 モチベーションや達成感、愛着な ど利用者の感情に働きかける。
 継続的な利用に貢献
 リテンション / 利用時間 #fof_shonan
14. マイクロインタラクションの目的 Xのいいねボタン
 アクションの結果がわかる Shazamの検出画面
 システムの状態がわかる SmartNewsのチュートリアル
 操作方法がわかる 理解を助ける #fof_shonan
15. マイクロインタラクションの目的 Duolingoの連続正解
 達成感を感じる Siriの応答
 知性を感じさせる マクドナルドの待ち時間
 ちょっとしたワクワク感 感情に働きかける #fof_shonan
16. ① 作り手の自己満足では？ ② 作るのに手間がかかる？ ③ 効果検証できるのか？
17. 導入方法 Swiftのコードとしてプロトタイプ・実装 #fof_shonan
18. 導入方法 インタラクションのプロトタイプを作成 ProtoPie #fof_shonan
19. 導入方法 タイムラインアニメーションを作成し、
 Lottieで書き出し AfterEffects #fof_shonan
20. 導入方法 インタラクティブ性：高い インタラクティブ性：低い アニメーション
 単純 アニメーション
 複雑 + Figma + LottieFiles Origami Studio ProtoPie コード + AfterEffects + LottieFiles #fof_shonan
21. 導入方法 インタラクティブ性：高い インタラクティブ性：低い アニメーション
 単純 アニメーション
 複雑 静的アニメーション プロトタイプ 難易度：低 実装 難易度：低 プロトタイプを元にコードとして実装 プロトタイプ 難易度：高 実装 難易度：高 静的アニメーション プロトタイプ 難易度：高 実装 難易度：低 #fof_shonan
22. 導入方法 インタラクティブ性：高い インタラクティブ性：低い 少ない手間で導入しやすい アニメーション
 単純 アニメーション
 複雑 Origami Studio ProtoPie コード + Figma + LottieFiles + AfterEffects + LottieFiles #fof_shonan
23. 導入方法 Figmaのスマートアニメー トで作ったプロトタイプを LottieFilesプラグインで書 き出す #fof_shonan
24. 導入方法 <script src= ></script> <lottie-player src= background= speed= style= width: 300px; height: 300px; loop controls autoplay> </lottie-player> "https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie- player.js" "coffee.json" "transparent" "1" " " Web用ライブラリを使った 組み込み #fof_shonan
25. 導入方法 import private var LottieAnimationView? super 1.0 Lottie animationView: override func () { .viewDidLoad() animationView = .init(name: ) animationView!.frame = view.bounds animationView!.contentMode = .scaleAspectFit view.addSubview(animationView!) animationView!.loopMode = .loop animationView!.animationSpeed = animationView!.play() } viewDidLoad // View Setting // Animation Setting "coffee" iOS用ライブラリを使った
 組み込み #fof_shonan
26. 導入方法 // ループ方法（ループ、一度だけ、逆再生、指定回数など）を指定 // 再生速度を指定 1.0
 // 再生を開始 // 再生を一時停止 // 再生を停止 // 指定のフレームから再生し、指定のフレームで停止 24 48 // アニメーション内の指定のマーカーから再生し、指定のマーカーで停止 animationView.loopMode = .loop

 animationView.animationSpeed = animationView.play() animationView.pause() animationView.stop() animationView.play(fromFrame: , toFrame: ) animationView.play(fromMarker: , toMarker: ) "begin" "end" 細かく再生制御ができるの で、工夫次第でインタラク ティブにできる #fof_shonan
27. 導入方法 インタラクティブ性：高い インタラクティブ性：低い アニメーション
 単純 アニメーション
 複雑 Origami Studio ProtoPie コード + Figma + LottieFiles + AfterEffects + LottieFiles 手軽な選択肢が増えている #fof_shonan
28. 導入方法 + AfterEffects + LottieFiles Lottielab オープンβ Lottie Creator クローズドβ #fof_shonan
29. ① 作り手の自己満足では？ ② 作るのに手間がかかる？ ③ 効果検証できるのか？
30. 事例：2014年当時のFilmarks #fof_shonan
31. 効果検証 当時の課題 アプリインストール後 の定着率が低い 定量調査 インストール初日の Clip!数と定着率に
 相関がある グロース施策 初日のClip!数を
 増やすための施策 #fof_shonan
32. 効果検証 グロース施策 一覧から気になる作品を
 ダブルタップすると、
 Clip!できる 作品をダブルタップするとClip!できる機能 を追加し、Clip!数が増えるか検証。
 作品の格納先を自然と意識できるインタラ クションを採用。 #fof_shonan
33. 効果検証 施策前 2014/10/28 - 11/3 1.87 2.36 施策後 2014/11/11 - 11/17 一人あたりのClip!数 26%増加 #fof_shonan
34. 効果検証 タスクの完了率、 アクション の実行回数レベルまで指標 が分解されていると、効果 検証しやすい 事業やプロダクトのKPI サブKPI サブKPI サブKPI ◯◯◯の
 完了率 ◯◯◯の
 実行回数 #fof_shonan
35. 効果検証 ただし、
 定量的に把握できる価値はごく一部 「測定できないから優先しない」 ではなく、自分たちのプロダ クトにとって最重要な体験価値が合意されていて、 そのため に必要な細部が作り込まれていることが理想 Figma CPOが自身の体験をもとに語った、
 魔法のような製品を生み出すために必要なふたつのこと https://creatorzine.jp/article/detail/4908 参考 #fof_shonan
36. まとめ
37. まとめ 目的 理解を助ける / 感情に 働きかける 言葉による説明を省き、直感 的に使い方が理解できるUIを 実現できたり、 モチベーション や達成感、愛着など利用者の 感情に働きかけることができ る。 導入方法 静的アニメーション＋ Lottieが手軽 FigmaやAfterEffectsなど で作成した静的アニメーショ ンをLottie形式で書き出し実 装すると、少ない手間で導入 しやすい。 効果検証 タスクの完了率やアク ション回数を指標に 特定のタスクの完了やアク ションの回数まで指標を分解 し、改善施策の一部としてマイ クロインタラクションを用いる と、施策の前後の比較や、A/B テストで効果検証できる。 #fof_shonan
38. 参考資料 UIモーション01： UIになぜ動きが必要か？ https://note.com/shingo2000/n/nac78dd9d52f7 マイクロインタラクション作成ツールの比較 https://note.com/shingo2000/n/n61a3c2ce62e8 UIモーション 02：理解のための動き https://note.com/shingo2000/n/nfb3418c0754c マイクロインタラクションの効果を数値化する https://note.com/shingo2000/n/na0dd9ee70ea0 @shingo2000 今日の感想や質問、面白い事 例など、ぜひ教えてください。 #fof_shonan