ポインターとタッチ
クリック
Click
トリガー/状態
onClick意味
ユーザーが要素に対してマウスボタンを押し、離すポインターアクション。
期待動作
メニューの開く、ボタンの送信、項目の選択、またはリンクによるナビゲーションなどのアクションには、クリックを使用します。
依頼例
メニューボタンがクリックされたら、メニューパネルを開きます。
プログラミング
ページ動作のためのUI動作用語
ボタン、メニュー、検索、フォーム、キーボード操作などの動作を説明するための用語集です。
47 件
ポインターとタッチ
タップ
Tap
トリガー/状態
touch / pointer意味
ユーザーが要素に触れて離すタッチスクリーンアクション。
期待動作
タップは、通常、スマートフォンやタブレットでのクリックと同じ重要な機能を提供します。
注意
Hover-onlyの動作は、タッチデバイスでは信頼性が低い場合があります。
依頼例
モバイルでは、カテゴリメニューをタップで開き、ホバーで開くのではなく、タップで開くようにします。
ポインターとタッチ
Hover
Hover
トリガー/状態
:hover意味
マウスカーソルが要素の上にあるときの状態。
期待動作
Hoverは、色、下線、背景、または影の変化によって、アフォーダンスをプレビューできます。
注意
重要な操作を、マウスオーバーのみに依存させないでください。
依頼例
メニュー項目にホバーしたときに、背景色を変更します。
ポインターとタッチ
長押し
Long press
トリガー/状態
touch hold意味
ユーザーが要素をある程度長くタップしているタッチアクション。
期待動作
長押し操作は、二次的なアクションによく使用されますが、目に見えるボタンよりも発見しにくい場合があります。
注意
重要な機能にアクセスするための唯一の方法として、長押しを使用しないでください。
依頼例
重要な操作を、長押しでのみ利用可能にしないでください。
ポインターとタッチ
ドラッグ
Drag
トリガー/状態
pointerdown + pointermove意味
ユーザーが要素または選択範囲を保持および移動させるポインターアクション。
期待動作
ドラッグ操作には、明確なハンドル、境界線、および精密さが重要な場合に備えた代替コントロールが必要です。
依頼例
パネルをドラッグできる場合は、目に見えるハンドルを追加する。
ポインターとタッチ
スワイプ
Swipe
トリガー/状態
touch move意味
ユーザーが指をすばやく画面全体に動かすタッチジェスチャー。
期待動作
スワイプは、カルーセルやパネルを移動できますが、表示されるコントロールは引き続き存在する必要があります。
依頼例
サンプル間のスワイプを許可しますが、矢印ボタンは表示したままにします。
キーボード
キーボードイベント
Keyboard event
トリガー/状態
keydown / keyup意味
キーボードのキーを押すまたは離すことによって引き起こされるインタラクション。
期待動作
キーボードイベントは、Escapeキーで閉じる、Enterキーで送信、矢印キーでのナビゲーション、およびショートカットに使用されます。
依頼例
Escapeキーが押されたときに、ドロップダウンを閉じます。
キーボード
エスケープキー
Escape key
トリガー/状態
Escape意味
一時的なUIをキャンセル、閉じる、または終了するために一般的に使用されるキーボードキー。
期待動作
ドロップダウン、メニュー、モーダル、およびポップオーバーは、通常、Escape キーで閉じます。
依頼例
言語のドロップダウンとサイトメニューの両方を、Escape キーで閉じられるようにします。
キーボード
エンターキー
Enter key
トリガー/状態
Enter意味
選択したコントロールをアクティブにするか、フォームを送信するために一般的に使用されるキーボードキー。
期待動作
フォーカスされたボタンは、Enterキーでアクティブ化される必要があります。 検索フォームは、Enterキーで送信される場合があります。
依頼例
検索フィールドにフォーカスされている場合、Enterキーを押すと検索が実行されます。
キーボード
Tab キー
Tab key
トリガー/状態
Tab意味
インタラクティブなコントロール間を移動させるために使用されるキーボードキー。
期待動作
タブ順は、視覚的に読み取り可能でインタラクション可能な順序に従う必要があります。
依頼例
ヘッダーコントロール全体で、タブの順序が自然になるようにします。
UI状態
フォーカス
Focus
トリガー/状態
:focus / :focus-visible意味
要素がキーボード入力またはアクティブ化の準備ができている状態。
期待動作
フォーカスされているコントロールには、可視の輪郭またはフォーカススタイルが必要です。
依頼例
フォーカスされた検索入力が、明確に表示されるようにします。
UI状態
ブラー
Blur
トリガー/状態
blur / focusout意味
要素がフォーカスを失うときの状態変化。
期待動作
ブラーは、入力の検証や軽量UIの表示に使用できますが、ユーザーを驚かせないようにする必要があります。
依頼例
入力フィールドがフォーカスを失っても、検索テキストをクリアしないでください。
UI状態
アクティブ状態
Active state
トリガー/状態
:active意味
コントロールが押されている短い期間の状態。
期待動作
アクティブ状態では、わずかな背景、境界線、または位置の変化によって、押された状態を示すことができます。
依頼例
アイコンボタンに、わずかな押された状態の表現を追加する。
UI状態
選択状態
Selected state
トリガー/状態
selected / aria-current意味
リスト、メニュー、タブグループ、またはフィルターグループで現在選択されている項目の状態。
期待動作
選択された項目は、選択されていない項目と視覚的に区別される必要があります。
依頼例
アクティブなカテゴリチップを目立たせ、非アクティブなチップと明確に区別します。
UI状態
無効な状態
Disabled state
トリガー/状態
disabled / aria-disabled意味
コントロールが表示されているが、使用できない状態。
期待動作
無効なコントロールは、非アクティブに見えるようにする必要がありますが、理解できるようにする必要があります。
依頼例
必要な入力が有効になるまで、送信ボタンを無効にします。
UI状態
確認済み状態
Checked state
トリガー/状態
checked意味
チェックボックス、ラジオボタン、またはスイッチのようなコントロールのオンまたは選択された状態。
期待動作
確認済み状態が、制御の仕組みによって明確に表示され、アナウンスされる必要があります。
依頼例
選択されたオプションに対して、明確な選択状態を表示します。
開閉
トグル
Toggle
トリガー/状態
toggle state意味
2つの状態（開/閉、オン/オフなど）を切り替えるアクション。
期待動作
トグルは、現在の状態を表示し、その状態を予測可能な方法で更新する必要があります。
依頼例
各メニューカテゴリを、1つのボタンで開閉します。
開閉
開く / 閉じる
Open / close
トリガー/状態
open / closed意味
パネル、メニュー、またはセクションが表示または非表示になる可視性状態。
期待動作
開閉状態は、ボタン、外部クリック、Escapeキー、または選択によって一貫して制御される必要があります。
依頼例
言語ドロップダウンが開くと、サイトメニューを閉じます。
開閉
ドロップダウン
Dropdown
トリガー/状態
button -> panel意味
ボタンまたはフィールドから表示される、浮動リスト。
期待動作
通常、ドロップダウンは選択後、クリック外、または Escape キーで閉じます。
依頼例
言語が選択されたら、ドロップダウンを閉じます。
開閉
アコーディオン
Accordion
トリガー/状態
section toggle意味
セクションのヘッダーが、そのコンテンツを開いたり閉じたりするUIパターン。
期待動作
アコーディオンでは、どのセクションが開いているかを明確に示す必要があります。
依頼例
すべてのアコーディオンのカテゴリをデフォルトで閉じます。
開閉
モーダル
Modal
トリガー/状態
open dialog意味
ページの上部に表示され、通常は背景コンテンツをブロックする、フォーカスされたオーバーレイ。
期待動作
モーダルには、閉じるコントロール、Escapeキーの動作、フォーカス処理、および明確な目的が必要です。
依頼例
モーダルに、閉じるボタンと、Escキーで閉じることができるようにする。
開閉
ウィンドウ外のクリック
Outside click
トリガー/状態
document pointerdown意味
ドロップダウン、メニュー、またはポップオーバーなどの一時的なパネルの外のクリックまたはタップ。
期待動作
一時的なパネルは、通常、ユーザーがそれら外をクリックすると閉じます。
注意
同じヘッダーグループに属する制御は、明示的にそう記述されていない限り、外部とはみなされません。
依頼例
ユーザーがメニューパネル外をクリックしたときに、メニューを閉じます。
開閉
フォーストラッパー
Focus trap
トリガー/状態
modal open意味
モーダルまたはダイアログが開いている間、キーボードのフォーカスをその中に維持する動作。
期待動作
フォーストラッパーは、キーボードユーザーがアクティブなモーダルから誤って移動するのを防ぎます。
依頼例
モーダルが閉じられるまで、フォーカスをモーダル内に固定します。
ナビゲーション
リンクナビゲーション
Link navigation
トリガー/状態
link click意味
リンクを通して、別のページ、ルート、またはセクションに移動します。
期待動作
リンクは正しい宛先を使用し、ナビゲーション後には一時的なメニューを閉じます。
依頼例
メニューリンクがクリックされた後、メニューを閉じます。
ナビゲーション
ルート変更
Route change
トリガー/状態
router navigation意味
アプリケーションのルートまたはURLパスの変更。
期待動作
ルート変更は、ページコンテンツ、メタデータ、およびアクティブなナビゲーション状態を更新する必要があります。
依頼例
ルートの変更後、アクティブなナビゲーションの状態を更新します。
ナビゲーション
スクロール
Scroll
トリガー/状態
wheel / touch scroll意味
表示されるビューポートを、画面よりも大きいコンテンツを通して移動させます。
期待動作
スクロールは、ページ内または独自のオーバーフローを持つパネル内で行われます。
依頼例
長いドロップダウンメニューは、画面外に表示されるのではなく、パネル内でスクロールできるようにします。
ナビゲーション
アンカースクロール
Anchor scroll
トリガー/状態
href=#id意味
同じページ上の一致するIDを持つ要素にスクロールするリンクの動作。
期待動作
アンカーリンクは、ツール、参照、またはセクションにジャンプするのに役立ちます。
依頼例
参照ツールボタンをクリックすると、ツールセクションにスクロールします。
入力とフォーム
型
Type
トリガー/状態
input event意味
入力またはテキストエリアにテキストまたは値を入力します。
期待動作
入力タイプは、状態を即座に更新したり、入力を検証したり、送信されるまで待機したりできます。
依頼例
ユーザーが入力するにつれて、検索結果を更新します。
入力とフォーム
送信
Submit
トリガー/状態
submit event意味
フォーム入力の送信または適用。
期待動作
送信は、必要な入力を検証し、必要な場合に意図しない再読み込みを防ぎ、フィードバックを表示する必要があります。
依頼例
フォームが送信されたときに、ページが再読み込みされないようにします。
入力とフォーム
リセット
Reset
トリガー/状態
reset action意味
コントロールまたは値を、デフォルトの状態に戻します。
期待動作
リセットは予測可能であり、重要な作業を警告なしに消去しないようにする必要があります。
依頼例
検索をクリアし、すべてのカテゴリに戻るためのリセットボタンを追加する。
入力とフォーム
検証
Validation
トリガー/状態
input / submit意味
ユーザー入力が、完全で有効であるかどうかを確認します。
期待動作
検証は、何が問題なのかと、それを修正する方法を説明する必要があります。
依頼例
入力値が無効な場合に、検証メッセージを表示します。
検索とフィルター
検索
Search
トリガー/状態
query change意味
ユーザーが入力したテキストに基づいて、一致するアイテムを見つける。
期待動作
役立つフィールド（名前、エイリアス、説明、例など）を確認してください。
依頼例
検索機能で、韓国語の単語、英語の用語、エイリアス、およびリクエストの例を検索できるようにします。
検索とフィルター
フィルタ
Filter
トリガー/状態
filter state意味
選択された条件に一致する項目のみを含むリストを絞り込みます。
期待動作
フィルタは、有効になっている条件と、該当するアイテムの数を表示するべきです。
依頼例
UIインタラクションタームカードの上に、カテゴリフィルターを追加する。
検索とフィルター
ソート
Sort
トリガー/状態
sort option意味
名前、日付、優先順位、またはカテゴリなどのルールに基づいて、項目の順序を変更します。
期待動作
ソートはアイテムを削除しません。 注文を変更するだけです。
依頼例
フィルタリング後、一致する用語をアルファベット順にソートします。
検索とフィルター
ディバウンス
Debounce
トリガー/状態
delayed input意味
ユーザーがタイピングを停止した後、しばらく待ってから、高負荷なアクションを実行します。
期待動作
ディバウンスは、検索、検証、またはAPI呼び出しが、すべてのキー入力ごとに実行されるのを防ぎます。
依頼例
多くの項目がある場合に、検索入力が遅くなる場合は、ディバウンスを使用します。
検索とフィルター
クリア
Clear
トリガー/状態
clear action意味
入力された値、選択されたフィルター、または一時的な状態を削除します。
期待動作
クリアな操作は、意図されたフィールドまたは状態にのみ影響を与える必要があります。
依頼例
検索フィールド内に、クリアボタンを追加する。
フィードバック
ロード中
Loading
トリガー/状態
pending state意味
データ、ページコンテンツ、またはアクションが準備中の状態。
期待動作
ロード中のフィードバックは、ユーザーにアプリが動作中であることを知らせ、必要な場合に繰り返し操作を防ぎます。
依頼例
変換結果が準備されている間、読み込み状態を表示します。
フィードバック
スピナー
Spinner
トリガー/状態
loading visual意味
何かが読み込まれたり処理されたりしていることを示す視覚的なインジケーター。
期待動作
スピナーは、短い待ち時間に最適です。 長い待ち時間には、より明確な進行状況またはテキストが必要になる場合があります。
依頼例
送信中に、小さなスピナーをボタン内に表示します。
フィードバック
トースト
Toast
トリガー/状態
temporary message意味
アクションの実行後に表示される、短い一時的なメッセージ。
期待動作
トーストは、コピー、保存、または更新などの確認に役立ちます。
依頼例
テキストをクリップボードにコピーした後、トーストメッセージを表示します。
フィードバック
エラー状態
Error state
トリガー/状態
error意味
何か問題が発生したことをユーザーに知らせる状態。
期待動作
エラーメッセージは、具体的で読みやすく、次に実行すべき適切なアクションを説明する必要があります。
依頼例
入力が変換できない場合に、明確なエラーメッセージを表示します。
フィードバック
成功状態
Success state
トリガー/状態
success意味
アクションが正常に完了したことを確認する状態。
期待動作
結果がすでに表示されている場合、成功状態は微妙な場合があります。
依頼例
設定が保存された後、小さな成功メッセージを表示します。
フィードバック
空の状態
Empty state
トリガー/状態
empty result意味
データがない場合、または一致する結果がない場合に表示される状態。
期待動作
空の状態では、何も表示されていない理由を説明し、次のステップを提案する必要があります。
依頼例
検索が一致する用語を何も返さない場合に、結果なしのメッセージを表示します。
フィードバック
クリップボードにコピー
Copy to clipboard
トリガー/状態
navigator.clipboard意味
テキストをユーザーのクリップボードにコピーするアクション。
期待動作
コピー操作は、ユーザーがテキストがコピーされたことを知ることができるように、フィードバックを提供する必要があります。
依頼例
プロパティチップがクリックされたときに、CSSプロパティをコピーします。
動きとタイミング
遷移
Transition
トリガー/状態
CSS transition意味
色、不透明度、または位置など、2つ以上の視覚状態間の滑らかな変化。
期待動作
遷移はUIを洗練されたものにする可能性がありますが、ツールでは迅速である必要があります。
依頼例
メニュー項目のホバー時の色に、わずかなトランジションを追加する。
動きとタイミング
アニメーション
Animation
トリガー/状態
CSS animation意味
一度だけ実行されるか、繰り返し実行される視覚的なモーションシーケンス。
期待動作
アニメーションは、タスクをサポートし、読書や反復作業を妨げるべきではありません。
依頼例
ドロップダウンが開くときに、控えめなスライドダウンアニメーションを使用します。
動きとタイミング
遅延
Delay
トリガー/状態
setTimeout / delay意味
何かが発生したり消えたりするまでの待ち時間。
期待動作
遅延はフィードバックを読みやすくする可能性がありますが、長い遅延はUIの動作を遅く感じさせる可能性があります。
依頼例
コピーされたトーストメッセージは、約1秒間表示されるようにします。
動きとタイミング
スロットリング
Throttle
トリガー/状態
limited repeated events意味
同じイベントハンドラが実行される頻度を制限する。
期待動作
スロットリングは、多く回発火するスクロールまたはリサイズハンドラーに役立ちます。
依頼例
ページが遅い場合は、スクロールハンドラーをスロットリングします。