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

Details Tech Session Vol.2
2022/5/25

📘 マイクロインタラクション ――UI/UXデザインの神が宿る細部

🐠 Reference site

- Square
- AutoModality
- DAC中途採用サイト
- 玉川釉薬
- MOHEIM
- 八百彦 一升餅

🐠 Great Resource

- 知っておきたい CSS イージングのお手本
- CSS について誰も私に教えてくれなかった大切なこと
- CSS アニメーションについて深く知る
- SVG アニメーション
- After Effects と Lottie を使ったマイクロインタラクションのデザインと実装

Special Thanks ：icon by flaticon

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? マイクロインタラクションを構成する４つの要素 トリガー ルール フィードバック ループとモード
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? 小さい単位のアニメーション ⬇️ 👉 マイクロインタラクションを構成する要素の１つ「フィードバック」 ❓ 良いアニメーションとは ❓ 実装で気をつけるべきポイントは
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