AIへの指示で詰まりやすいインタラクション用語

このページでは、AIへの指示で使うと伝わりやすくなるインタラクション・動作系の用語を解説します。知らないとAIへの指示が遠回りになる用語を厳選しています。

「ホバーしたときに色を変えて」「入力中にリアルタイムで反応させて」—— インタラクションを正確に指示するには、動作の名前を知っておく必要があります。 このページでは、AIへの指示でよく使うインタラクション用語を厳選して解説します。

hover(ホバー)

マウスを要素の上に乗せた状態

ボタン
通常
→
ボタン
ホバー時

AIへの指示例

「ホバー時にボタンの色を濃くして」
→ hover・focus・activeのデモを見る

focus(フォーカス)

キーボードやクリックで要素が選択されている状態

入力欄...
通常
→
入力欄...
フォーカス時

AIへの指示例

「フォーカス時にinputの枠線を青くして」
→ hover・focus・activeのデモを見る

active(アクティブ)

クリック・タップしている瞬間の状態

ボタン
通常
→
ボタン
クリック中

AIへの指示例

「activeのときにボタンを少し沈み込ませて」
→ hover・focus・activeのデモを見る

トランジション(Transition)

CSSプロパティの変化を滑らかにアニメーションさせる仕組み

btn
0s
→
btn
0.15s
→
btn
0.3s

AIへの指示例

「ホバー時の色変化を0.3秒のトランジションで滑らかにして」
→ transitionのデモを見る

アニメーション(Animation)

キーフレームを使って要素を動かす仕組み

0%
→
50%
→
100%

AIへの指示例

「ローディング中にスピナーをくるくるアニメーションさせて」
→ keyframe animationのデモを見る

debounce(デバウンス)

連続して発生するイベントの最後だけを処理する制御方法

入力待機中…待機中…処理

AIへの指示例

「検索inputにdebounceをかけて入力が止まってから検索して」
→ debounce・throttleのデモを見る

throttle(スロットル)

一定時間内に1回だけイベントを処理する制御方法

入力一定間隔で処理処理

AIへの指示例

「スクロールイベントにthrottleをかけて処理を間引いて」
→ debounce・throttleのデモを見る

このシリーズの他のページ