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

マイクロインタラクション入門〜ディテイルにこだわるエンジニアリング〜

 マイクロインタラクション入門〜ディテイルにこだわるエンジニアリング〜

F1fc4b62755cd021f4bf9ce5543065aa?s=128

swimmy

May 25, 2022
Tweet

Other Decks in Programming

Transcript

  1. マイクロインタラクション入門 Shiho Mizusawa / Details Tech Session Vol.2 / 2022-05-25

    ディテイルにこだわるエンジニアリング
  2. Profile 🧢 Shiho Mizusawa フロントエンドエンジニア (歴:1 年半) 好きな料理はもつ鍋 ゲーム好き。ゲーム実況よくみてます。好きなゲームは Mother

    と UnderTale 。 📝 主な担当案件 DAC 中途採用サイト: http://career.dac.co.jp/ 八百彦 一升餅: https://www.yaohiko.co.jp/isshoumochi/
  3. Table of contents マイクロインタラクションとは? 最良のアニメーションとそのポイント 実装事例 まとめ

  4. Introduction Studio Details では 実装時、デザインと一緒に演出指示書を共有してもらっています。

  5. Introduction 指示書通り実装するのが必ずしも正解ではない プロダクトをより良くするための改善や、意見を出せるようになりたい 演出をもっと良くするには何が必要?気持ちよさだけではないはず... 具体的にどう改善すべきか、何をどうしたら良くなるのかきちんと知識は持っておくべき そうだ、マイクロインタラクションを理解しよう... 🏃‍♀️

  6. What is micro-interaction? マイクロインタラクション ――UI/UX デザインの神が宿る細部 小さい単位のアニメーション ではない!

  7. What is micro-interaction? 💡 ひとつの作業だけをこなす最小単位のインタラクション 時間がわかる 文字選択でオプション表示 的確な補助 👉 手に馴染むような使いやすさ、ストレスのない動きなど細かく工夫がされている

    👉 一つ一つが積み重なって体験の質が向上→プロダクト全体の質を底上げできる
  8. What is micro-interaction? マイクロインタラクションを構成する4つの要素 トリガー ルール フィードバック ループとモード

  9. What is micro-interaction? トリガー インタラクションの始まり。ボタンや、特定の操作など。 ボタン https://squareup.com/jp/ja 特定の操作(文字選択) 0:00

  10. What is micro-interaction? ルール 動作の定義。 ユーザーの操作を予想して、間違った操作にならないように補助したり、不便に思われないルールを設定する。 Google Mail の送信ルール 件名や本文を書かずに送ろうとするとアラートが表示される。

    適切なタイミング、アクションでユーザーのミスを 防いでくれるルールの一例
  11. What is micro-interaction? フィードバック 操作の結果、今起きていること伝える。 ホバー https://www.automodality.com/ ナビの開閉 https://career.dac.co.jp/ 0:00

    0:00
  12. What is micro-interaction? フィードバック 操作の結果、今起きていること伝える。 スクロール→コンテンツ表示 https://tamagaway.jp/ スクロール& ホバー https://moheim.com/jp/

    0:00 0:00
  13. What is micro-interaction? ループとモード どのくらい処理を繰り返すか。特別な状態を設ける必要はあるか。 アプリの通知数 iPhone のさまざまなモード

  14. What is micro-interaction? 小さい単位のアニメーション ⬇️ 👉 マイクロインタラクションを構成する要素の1つ「フィードバック」 ❓ 良いアニメーションとは ❓

    実装で気をつけるべきポイントは
  15. What is micro-interaction? 最良のアニメーションとはユーザーに何かを伝えるもの 高速 動作を遅延させない 滑らか ギクシャクした動きはアニメーションの効果を台無しに。動作が不安定な印象を与えてしまう 自然 重力や慣性など自然の法則に従っているように見える

    シンプル 意図がわかりやすい 目的がある 単なる「目の保養」にととどまらない Google Android エンジニア チェット・ハーゼ、ロマン・ガイ
  16. What is micro-interaction? 最良のアニメーションとはユーザーに何かを伝えるもの 🌟 高速 🌟 動作を遅延させない 🌟 滑らか

    🌟 ギクシャクした動きはアニメーションの効果を台無しに。動作が不安定な印象を与えてしまう 🌟 自然 🌟 重力や慣性など自然の法則に従っているように見える シンプル 意図がわかりやすい 目的がある 単なる「目の保養」にととどまらない Google Android エンジニア チェット・ハーゼ、ロマン・ガイ
  17. Thinking about Technique 高速、滑らか、自然な動きを実現するために意識すること CPU より GPU に処理させた方が動きは滑らか。 right left

    より translate will-change は多用しない。使う場合はオンオフ切り替えることも意識。 頻度が低いアニメーションは、完了後に will-change : auto を設定する。 負荷が高く、描画に時間がかかるプロパティもある。 border-radius box-shadow filter :nth-child position : fixed
  18. Thinking about Technique 高速、滑らか、自然な動きを実現するために意識すること 時間 このくらいの長さはあるべきと考える半分の長さにする。 パフォーマンスが良く、動作が速いと感じさせることが大切。 イージング 滑らかさ、自然さ、個性的な動き、 実現したい動きに合ったイージング

    を設定する。 ※ 知っておきたい CSS イージングのお手本:https://ics.media/entry/18730/
  19. What is micro-interaction? 最良のアニメーションとはユーザーに何かを伝えるもの 高速 動作を遅延させない 滑らか ギクシャクした動きはアニメーションの効果を台無しに 動作が不安定な印象を与えてしまう 自然

    重力や慣性など自然の法則に従っているように見える 🌟 シンプル 🌟 意図がわかりやすい 🌟 目的がある 🌟 単なる「目の保養」にととどまらない Google Android エンジニア チェット・ハーゼ、ロマン・ガイ
  20. Case Study - シンプルさ、目的を考える 八百彦 一升餅: https://www.yaohiko.co.jp/isshoumochi/

  21. Case Study - シンプルさ、目的を考える 💡実装側で演出を +α footer: Page Top ボタン

    footer: SNS Share ボタン 0:00 0:00
  22. Case Study - シンプルさ、目的を考える プラス α で実装したポイント ユーザーをイメージ。1 歳を迎えるお子さんのご両親、そのご家族。 「この一升餅可愛い!」「注文したい!」と思ってもらいたい。

    動きはユニークで POP なものにすることで、見ていて楽しいサイトにする。 あくまでホバーの演出なので奇抜すぎる動きはやめました。 目立たなくていい。運よく気づいた人の「😳!」を狙う。 💡 誰のため、何のためのアニメーションかを考える 💡 目立たせなくていい。 💡 アニメーションが面白いと押したくなる。人の心を動かせる。 @keyframes pichipichi { 0% { transform: scale(1, 1) rotate(0deg); } 16% { transform: scale(1.2, 0.9) rotate(10deg); } 32% { transform: scale(1, 1) rotate(0deg); } 48% { transform: scale(1.2, 0.9) rotate(10deg); } 64% { transform: scale(1, 1) rotate(0deg); } ...; }
  23. Summary 💡 エンジニアもマイクロインタラクションは意識すべき 💡 良いアニメーションとは何か?ポイントをおさえて実装するのが大切 細かいところも蔑ろにしない、より良いモノづくりへ貢献できるエンジニア🐠

  24. Great Resource CSS について誰も私に教えてくれなかった大切なこと CSS アニメーションについて深く知る SVG アニメーション After Effects

    と Lottie を使ったマイクロインタラクションのデザインと実装 Special Thanks :icon by flaticon