36 interactions番号 → AIに伝える名前

ホバー・マイクロインタラクションカタログ

ボタンやリンク、カードにポインターを乗せたとき、押したときの小さな動きを集めました。各カードの小さなウィンドウの中で、実際に触って確かめられます。「依頼文をコピー」で、動きの名前に加えて秒数・距離・作り方まで書いた依頼文がコピーされるので、そのままAIに渡せば見本と同じ動きを作れます。コピーした依頼文は、ナビの下の欄で確認できます。「コードを見る」では、見本をそのまま動かせるHTML・CSS・JSを見てコピーできます。

ボタン · 押せることを伝える

ボタン 01–09

ポインターを乗せた瞬間に「押せる」と伝える動きです。CTA や送信ボタンに使います。

リンク・文字 · 読ませながら誘う

リンク・文字 10–15

文章の流れを止めずに、リンクや見出しが反応していることを示す動きです。

カード・画像 · 選びたくさせる

カード・画像 16–24

一覧の中から一つを選ぶとき、ポインターの下にあるものを目立たせる動きです。

押したときの反応 · 結果を返す

押したときの反応 25–33

押した・入力したという操作に、すぐ手応えを返す動きです。何が起きたかが伝わるので、迷いが減ります。

カーソル · ポインターそのものを演出する

カーソル 34–36

ポインターの形や動きを変える演出です。ポートフォリオやブランドサイトで使われます。タッチ操作の端末では表示されないので、補助的に使います。

貼るだけで動く単体のコードです。色やフォントは見本の値なので、サイトに合わせて変えてください。