AIへの指示で詰まりやすいインタラクション用語
このページでは、AIへの指示で使うと伝わりやすくなるインタラクション・動作系の用語を解説します。知らないとAIへの指示が遠回りになる用語を厳選しています。
「ホバーしたときに色を変えて」「入力中にリアルタイムで反応させて」—— インタラクションを正確に指示するには、動作の名前を知っておく必要があります。 このページでは、AIへの指示でよく使うインタラクション用語を厳選して解説します。
focus(フォーカス)
キーボードやクリックで要素が選択されている状態
入力欄...
通常入力欄...
フォーカス時AIへの指示例
「フォーカス時にinputの枠線を青くして」active(アクティブ)
クリック・タップしている瞬間の状態
ボタン
通常ボタン
クリック中AIへの指示例
「activeのときにボタンを少し沈み込ませて」トランジション(Transition)
CSSプロパティの変化を滑らかにアニメーションさせる仕組み
btn
0s→
btn
0.15s→
btn
0.3sAIへの指示例
「ホバー時の色変化を0.3秒のトランジションで滑らかにして」アニメーション(Animation)
キーフレームを使って要素を動かす仕組み
0%
→50%
→100%
AIへの指示例
「ローディング中にスピナーをくるくるアニメーションさせて」debounce(デバウンス)
連続して発生するイベントの最後だけを処理する制御方法
AIへの指示例
「検索inputにdebounceをかけて入力が止まってから検索して」throttle(スロットル)
一定時間内に1回だけイベントを処理する制御方法
AIへの指示例
「スクロールイベントにthrottleをかけて処理を間引いて」