マイクロインタラクション

[ ] のところを書きかえて使ってください。英語のほうが伝わりやすいツールもあります。

[いいねボタンやトグル]に、控えめなマイクロインタラクションをつけてください。押すとハートが一瞬だけ少し大きくなり、スイッチのつまみは0.2秒ですべる程度に。動きを減らす設定の人には、色だけをすぐ切り替えてください。

Add subtle micro-interactions to [the like button and toggle]: the heart grows slightly for a moment when pressed, and the switch knob slides over 0.2s. For people who prefer reduced motion, just switch the colors instantly.

ひとりAIラボ作成のテンプレートです（各社の公式ガイドの文ではありません）。

確認日 2026年11月2日。公式ガイドのページを開いて、本文にこの言葉（英語）が出てくるかを見ました。「公式記載なし」は、出典のページに見当たらなかったという意味です。

• 操作をきっかけに起きる動きは、なくても困らないなら、止められるようにします（WCAG 2.3.3、レベルAAA）。^[13]

1. 1.v0 Docs（トップ）（外部サイト、新しいタブで開く）https://v0.app/docs
2. 2.v0 Docs「Text Prompting」（外部サイト、新しいタブで開く）https://v0.app/docs/text-prompting
3. 3.v0 Docs「Design Mode」（外部サイト、新しいタブで開く）https://v0.app/docs/design-mode
4. 4.Lovable Docs「Prompt library」（外部サイト、新しいタブで開く）https://docs.lovable.dev/prompting/prompting-library
5. 5.MDN「Using CSS animations」（外部サイト、新しいタブで開く）https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_animations/Using_CSS_animations
6. 6.MDN「Using CSS transitions」（外部サイト、新しいタブで開く）https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_transitions/Using_CSS_transitions
7. 7.MDN「View Transition API」（外部サイト、新しいタブで開く）https://developer.mozilla.org/en-US/docs/Web/API/View_Transition_API
8. 8.MDN「CSS scroll-driven animations」（外部サイト、新しいタブで開く）https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_scroll-driven_animations
9. 9.MDN「animation-timeline」（外部サイト、新しいタブで開く）https://developer.mozilla.org/en-US/docs/Web/CSS/animation-timeline
10. 10.MDN「prefers-reduced-motion」（外部サイト、新しいタブで開く）https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion
11. 11.MDN「steps()」（外部サイト、新しいタブで開く）https://developer.mozilla.org/en-US/docs/Web/CSS/easing-function/steps
12. 12.MDN「position」（外部サイト、新しいタブで開く）https://developer.mozilla.org/en-US/docs/Web/CSS/position
13. 13.W3C「Understanding SC 2.3.3: Animation from Interactions」（外部サイト、新しいタブで開く）https://www.w3.org/WAI/WCAG22/Understanding/animation-from-interactions.html