やってみよう♡ を押すか、写真をダブルクリック（ダブルタップ）してみてください
アニメーション・演出メジャー（よく見る）
いいねアニメーション
Like Animation / Micro-interaction
ハートを押すと、ポンッと弾けて赤くなる。写真をダブルタップでも大きなハートが出る。
別名マイクロインタラクションハートアニメーションお気に入りアニメーションダブルタップでいいね
どこで使われている？
- よく見かける場所
- Instagram、X、TikTok、YouTube のいいねボタン
- 使うとよい場面
- いいね・お気に入りなど、押すと気持ちよくしたい小さな操作
- 避けたい場面
- 何度も連続で押す業務的な操作（演出がうるさくなる）
補足このような小さな動きの演出をまとめて「マイクロインタラクション」と呼びます。
AIへの指示文
これをコピーしてAIに貼り付ければOKです。Webサイトを作る前提の内容です（右上の「何を作る？」で変えられます）。
HTML / CSS / JavaScript で「いいねアニメーション（Like Animation / Micro-interaction）」を実装してください。 動き：ハートのアイコンを押すと、一度縮んでから大きく弾むように拡大し、色が赤に変わり、周りに小さな粒が飛び散る。写真をダブルタップしたときは、写真の中央に大きなハートを一瞬表示する。 使う部品：CSS の @keyframes（scale）+ 粒は自作（Lottie も使える）
もっと詳しく：プログラムでの部品名
同じ動きでも、作るものによってプログラムの中での部品の名前が違います。上の指示文にはすでに入っているので、覚える必要はありません。AIの説明に出てきた単語を確認したいときに使ってください。
| Webサイトなら | CSS の @keyframes（scale）+ 粒は自作（Lottie も使える） |
|---|---|
| iPhoneアプリなら | .symbolEffect(.bounce) / .contentTransition(.symbolEffect(.replace)) |
| Androidアプリなら | animateFloatAsState で scale を弾ませる |
| Flutterなら | AnimatedScale（like_button パッケージもある） |
| React Nativeなら | react-native-reanimated の withSpring |