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

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

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

hover(ホバー)

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

AIへの指示例

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

focus(フォーカス)

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

AIへの指示例

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

active(アクティブ)

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

AIへの指示例

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

トランジション(Transition)

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

AIへの指示例

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

アニメーション(Animation)

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

AIへの指示例

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

debounce(デバウンス)

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

AIへの指示例

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

throttle(スロットル)

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

AIへの指示例

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

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