Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

Shingo Suzuki
November 29, 2023

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

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

Shingo Suzuki

November 29, 2023
Tweet

More Decks by Shingo Suzuki

Other Decks in Design

Transcript

  1. 2023.11.29 Friends of Figma Shonan
    実務のための

    マイクロ

    インタラクション入門
    鈴木慎吾
    株式会社つみき

    View full-size slide

  2. 自己紹介 #fof_shonan
    鈴木慎吾
    @shingo2000
    株式会社つみき リードデザイナー

    View full-size slide

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

    View full-size slide

  4. マイクロインタラクションとは?
    最小単位のインタラクション

    「愛される製品」

    「許容範囲の製品」の

    違いを生む

    トリガー、
    ルール、
    フィードバック、

    ループとモードの構造を持つ
    #fof_shonan

    View full-size slide

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

    View full-size slide

  6. 制作事例
    ダブルタップで

    見たい作品を登録
    ポスター画像のモーションによって、

    アクションの結果を実感できる
    #fof_shonan

    View full-size slide

  7. 制作事例
    ドラマ・アニメの

    エピソードに拍手
    連続タップでカウントアップ

    10回までアクションできる
    #fof_shonan

    View full-size slide

  8. 制作事例
    待ち時間も

    楽しく
    待ち時間の演出と

    査定金額のカウントアップ
    Gulliver AUTO - 2019年 つみき制作
    #fof_shonan

    View full-size slide

  9. 制作事例
    キャラクターの

    感情を表現
    お知らせや読み込み中での

    キャラクターアニメーション
    Gulliver AUTO - 2019年 つみき制作
    #fof_shonan

    View full-size slide

  10. 細部を作り込んだ

    マイクロインタラクションは楽しい!

    ・・
    ・が、
    #fof_shonan

    View full-size slide

  11. ① 作り手の自己満足では?
    ② 作るのに手間がかかる?
    ③ 効果検証できるのか?

    View full-size slide

  12. ① 作り手の自己満足では?
    ② 作るのに手間がかかる?
    ③ 効果検証できるのか?

    View full-size slide

  13. マイクロインタラクションの目的
    理解を助ける
    メタファーを効果的に使ったインタラ
    クションによって言葉による説明を省
    き、直感的に使い方が理解できるUI
    を実現できる。
    使い勝手の向上に貢献

    タスクの完了率 / 機能の利用率 / 利用回数
    感情に働きかける
    演出としての動きを取り入れること
    で、
    モチベーションや達成感、愛着な
    ど利用者の感情に働きかける。

    継続的な利用に貢献

    リテンション / 利用時間
    #fof_shonan

    View full-size slide

  14. マイクロインタラクションの目的
    Xのいいねボタン

    アクションの結果がわかる
    Shazamの検出画面

    システムの状態がわかる
    SmartNewsのチュートリアル

    操作方法がわかる
    理解を助ける
    #fof_shonan

    View full-size slide

  15. マイクロインタラクションの目的
    Duolingoの連続正解

    達成感を感じる
    Siriの応答

    知性を感じさせる
    マクドナルドの待ち時間

    ちょっとしたワクワク感
    感情に働きかける
    #fof_shonan

    View full-size slide

  16. ① 作り手の自己満足では?
    ② 作るのに手間がかかる?
    ③ 効果検証できるのか?

    View full-size slide

  17. 導入方法
    Swiftのコードとしてプロトタイプ・実装
    #fof_shonan

    View full-size slide

  18. 導入方法
    インタラクションのプロトタイプを作成
    ProtoPie
    #fof_shonan

    View full-size slide

  19. 導入方法
    タイムラインアニメーションを作成し、

    Lottieで書き出し
    AfterEffects
    #fof_shonan

    View full-size slide

  20. 導入方法
    インタラクティブ性:高い
    インタラクティブ性:低い
    アニメーション

    単純
    アニメーション

    複雑
    +
    Figma + LottieFiles
    Origami Studio ProtoPie コード
    +
    AfterEffects + LottieFiles
    #fof_shonan

    View full-size slide

  21. 導入方法
    インタラクティブ性:高い
    インタラクティブ性:低い
    アニメーション

    単純
    アニメーション

    複雑
    静的アニメーション
    プロトタイプ 難易度:低
    実装 難易度:低
    プロトタイプを元にコードとして実装
    プロトタイプ 難易度:高
    実装 難易度:高
    静的アニメーション
    プロトタイプ 難易度:高
    実装 難易度:低
    #fof_shonan

    View full-size slide

  22. 導入方法
    インタラクティブ性:高い
    インタラクティブ性:低い
    少ない手間で導入しやすい
    アニメーション

    単純
    アニメーション

    複雑
    Origami Studio ProtoPie コード
    +
    Figma + LottieFiles
    +
    AfterEffects + LottieFiles
    #fof_shonan

    View full-size slide

  23. 導入方法
    Figmaのスマートアニメー
    トで作ったプロトタイプを
    LottieFilesプラグインで書
    き出す
    #fof_shonan

    View full-size slide

  24. 導入方法
    >



    src=
    background=
    speed=
    style= width: 300px; height: 300px;
    loop controls autoplay>


    "https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-
    player.js"
    "coffee.json"

    "transparent"

    "1"

    " "

    Web用ライブラリを使った
    組み込み
    #fof_shonan

    View full-size slide

  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

    View full-size slide

  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

    View full-size slide

  27. 導入方法
    インタラクティブ性:高い
    インタラクティブ性:低い
    アニメーション

    単純
    アニメーション

    複雑
    Origami Studio ProtoPie コード
    +
    Figma + LottieFiles
    +
    AfterEffects + LottieFiles
    手軽な選択肢が増えている
    #fof_shonan

    View full-size slide

  28. 導入方法
    + AfterEffects + LottieFiles Lottielab
    オープンβ
    Lottie Creator
    クローズドβ
    #fof_shonan

    View full-size slide

  29. ① 作り手の自己満足では?
    ② 作るのに手間がかかる?
    ③ 効果検証できるのか?

    View full-size slide

  30. 事例:2014年当時のFilmarks
    #fof_shonan

    View full-size slide

  31. 効果検証
    当時の課題
    アプリインストール後
    の定着率が低い
    定量調査
    インストール初日の
    Clip!数と定着率に

    相関がある
    グロース施策
    初日のClip!数を

    増やすための施策
    #fof_shonan

    View full-size slide

  32. 効果検証
    グロース施策
    一覧から気になる作品を

    ダブルタップすると、

    Clip!できる
    作品をダブルタップするとClip!できる機能
    を追加し、Clip!数が増えるか検証。

    作品の格納先を自然と意識できるインタラ
    クションを採用。
    #fof_shonan

    View full-size slide

  33. 効果検証
    施策前
    2014/10/28 - 11/3
    1.87
    2.36
    施策後
    2014/11/11 - 11/17
    一人あたりのClip!数
    26%増加
    #fof_shonan

    View full-size slide

  34. 効果検証
    タスクの完了率、
    アクション
    の実行回数レベルまで指標
    が分解されていると、効果
    検証しやすい
    事業やプロダクトのKPI
    サブKPI
    サブKPI サブKPI
    ◯◯◯の

    完了率
    ◯◯◯の

    実行回数
    #fof_shonan

    View full-size slide

  35. 効果検証
    ただし、

    定量的に把握できる価値はごく一部
    「測定できないから優先しない」
    ではなく、自分たちのプロダ
    クトにとって最重要な体験価値が合意されていて、
    そのため
    に必要な細部が作り込まれていることが理想
    Figma CPOが自身の体験をもとに語った、

    魔法のような製品を生み出すために必要なふたつのこと
    https://creatorzine.jp/article/detail/4908
    参考
    #fof_shonan

    View full-size slide

  36. まとめ
    目的
    理解を助ける / 感情に
    働きかける
    言葉による説明を省き、直感
    的に使い方が理解できるUIを
    実現できたり、
    モチベーション
    や達成感、愛着など利用者の
    感情に働きかけることができ
    る。
    導入方法
    静的アニメーション+
    Lottieが手軽
    FigmaやAfterEffectsなど
    で作成した静的アニメーショ
    ンをLottie形式で書き出し実
    装すると、少ない手間で導入
    しやすい。
    効果検証
    タスクの完了率やアク
    ション回数を指標に
    特定のタスクの完了やアク
    ションの回数まで指標を分解
    し、改善施策の一部としてマイ
    クロインタラクションを用いる
    と、施策の前後の比較や、A/B
    テストで効果検証できる。
    #fof_shonan

    View full-size slide

  37. 参考資料
    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

    View full-size slide