ホバーやクリックの小さな動きは、番号つきのカタログのURLを貼って「◯番の動き」とAIに頼む
ボタン・リンク・カードの36種類の動き（浮く、押し込み、下線が伸びる、3Dチルト、リップルなど）を触って確かめ、番号で指定する。
どんな問題を解決するか / いつ使うか
「押したときにいい感じに反応させて」では、AIが毎回同じありがちな動きを付ける。欲しい動きの名前が分からないときに、見本から選んで正確に伝えるために使う。
使い方
- カタログ（yssdev.com の「ホバー・マイクロインタラクションカタログ」）で動きを触って選ぶ。依頼文もコピーできる。
- AIにはカタログのURLを貼り、「CTAは01（ふわっと浮く）と02（押し込み）を組み合わせて。本文のリンクは10（左から下線）」のように番号で伝える。
- 秒数と動く量も添えると再現がぶれにくい（例：01は0.25秒で5px浮く、02は押している間0.15秒で1px沈む）。
カタログの分類と代表例
- ボタン：01 ふわっと浮く（主役のボタン向き）／02 押し込み（:active、ほかと組み合わせやすい）／03 塗りスライド／04 シャイン（限定プランなど）／06 矢印が進む（「次へ」向き）／07 マグネット（遊びのあるサイト向け）／08 リップル
- リンク・文字：10 左から下線（2行にまたがっても各行に引く）／11 中央から下線（横並びのメニュー向き）／12 マーカー／13 文字が入れ替わる
- カード・画像：16 3Dチルト／17 スポットライト／18 画像ズーム（枠はそのまま中身だけ拡大）／19 キャプションが出る／22 周りを暗く（選択中を目立たせる）／24 グレー→カラー（導入企業ロゴ）
- クリック時の反応：26 トグルスイッチ／27 チェックが描かれる／28 ハンバーガー→×／29 コピー完了／30 送信中→完了／32 入力エラーで震える／33 浮き上がるラベル
- カーソル自体：34 点＋輪のカスタムカーソル／35 追従ラベル／36 反転カーソル（タッチ端末にはカーソルがないので補助的に）
注意点
- 動きは用途で選ぶ。目立たせる動き（シャイン、光るふち）は1画面に1つまで、などのルールをDESIGN.mdに書いておくと、AIが盛りすぎない。
- 動きを減らす設定の人向けに
prefers-reduced-motionで止める指示も添える（カタログ記事には記載がないため補足）。 - 画面全体の動きの用語は別の用語集が便利（動きの指示は、動く見本付きの用語集（motion-prompt）から選んで渡し、カメラワークは名前と秒数・速さで書く）。