ホバーエフェクトとインタラクティブ性

1） UXにおけるガイダンスの役割

• 「インタラクティブですか？」（ホバー/カーソル/ハイライト）
• 「私はどこにいるの？」（フォーカススタイル）、
• 「クリックで何が起こるの？」（ステータスとアフォーダンス）、
• 「アクションは機能しましたか？」（アクティブ/押された後のフィードバック）。

原理：効果は意味を補強します、それを取り替えません。キー情報とアクションへのアクセスは、ホバーの後ろだけに隠すべきではありません。

2）状態モデルと意味論

基本セット：'default'→'hover'→'focus'→'active/pressed'→'disabled'→'loading'（オプション）。
リンクについては、スイッチの'visited'、 'checked'を追加します。

• 状態の間-色だけでなく、形状/厚さ/アイコンの視覚的な違い。
• テキスト/アイコンの背景との対照：≥ 4。5：1（平文）、≥ 3：1（大/太字）。
• フォーカスは、（キーボード/スクリーンリーダー）を指さずに表示されます。

3）装置および媒体の要求

css
/ There is an exact pointer and hover (mouse/trackpad )/
@ media (hover: hover) and (pointer: fine) {/hover effects/}

/ No hover or rough pointer (touch/remote control )/
@ media (hover: none), (pointer: coarse) {/alternatives to hover/}

/ Any type of pointer (hybrid devices )/
@ media (any-hover: hover) {/minimal improvements/}

• タッチデバイスでは、ポインティングエフェクトはアクションを検出するために重要ではありません。明示的なアフォーダンスを使用します：色/アイコン/フレーム/ヒント。
• 「under hover」のみナビゲーション/コントロールを非表示にしないでください。

4）期間およびカーブ

• ホバー：120-180ms
• 焦点：120-180ms
• アクティブ/プレス：80-120ミリ
• リップル/インク（使用する場合）：≤ 240ミリ秒、1サイクル

デフォルトの曲線は'cubic-bezier （0。2, 0, 0.2, 1)`

アクティブ-高速（'cubic-bezier （0。4、0、1、1）'）、出力はより柔らかい（'cubic-bezier （0、0、0。2, 1)`).

5）システムトークンの設計（例）

json
{
"interactive": {
"duration": { "hover": 160, "focus": 160, "active": 90 },
"easing": { "std": "cubic-bezier(0. 2,0,0. 2,1)", "acc": "cubic-bezier(0. 4,0,1,1)" },
"shadow": { "hover": "var(--elev-2)", "focus": "0 0 0 3px var(--focus-ring)" },
"opacity": { "disabled": 0. 38, "muted": 0. 64 }
}
}

6）ボタン： 参照パターン

デフォルト：読み取り可能なテキスト≥ 4。5：1を埋める。
ホバー：− Δ L背景0。02–0.04、光の影、ポインタ'。
アクティブ：もっと− Δ L 0。02–0.04、 shadow/indentation（スケール0。98）、続きます。80-100 ms。
フォーカス：ボケのないコントラストリング2-3 px。
無効になっている：'not-allowed'/'default'、不透明度≤ 0。38ホバー効果なし。

css
.button {
transition: background-color. 16s var(--ease), transform. 09s var(--ease-acc), box-shadow. 16s var(--ease);
}
@media (hover:hover) and (pointer:fine) {
.button:hover  { background: var(--btn-bg-hover); box-shadow: var(--shadow-hover); }
}
.button:active  { transform: scale(.98); }
.button:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--focus-ring); }
.button[disabled] { opacity:.38; pointer-events: none; }

7）リンクおよびテキストアクション

色だけでなく、デフォルトではアンダーライン、ホバー/フォーカスで区別します。
ガイダンスの場合：下線の強化（厚さ/オフセット）、トーンのわずかな変化。
「訪問」は同じパレットの異なる色合いで、コントラストは保存されます。

css a { text-decoration: underline; text-underline-offset:.12em; }
@media (hover:hover) and (pointer:fine) {
a:hover { text-underline-offset:.2em; }
}
a:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--focus-ring); }

8）カード、リスト、テーブル

• ホバー：ソフトシャドウ/フレームハイライト、カーソル'ポインタ'カード全体がクリック可能な場合のみ。
• アクティブ：短いインデント、タイトルのハイライト。
• フォーカス：カードの中だけでなく、カードの周りに目に見えるリング。

• Δ L 0で背景をカーソルを合わせます。02–0.04;アクティブな行は明確な境界線です。
• 行のクリックは明示的なアフォーダンス（「→」アイコン、ヒント）でのみ許可されます。

• カスケード遅延の「はしご」を慎重に制限します-最大6〜8要素（20〜30ミリ秒）。

9）入力フォームとフィールド

フィールドのホバー：フレームの薄いバックライト（Δ L ~ 0。05）、ブロックサイズを変更せずに。
焦点：コントラストリング+フレームの色の変更；プレースホルダは区別可能なままです（≥ 3：1）。
エラー：色+アイコン/テキスト；short 「shake」は6 px、 ≤ 140 ms、 1回≤有効です。

10）アイコンと小さなターゲット

アイコン自体が20-24 pxであっても、クリックゾーンを32 × 32（デスクトップ）/40 × 40（モバイル）に増やします。
ホバー：不透明度/塗りつぶし/厚さ、最大1-2プロパティを変更します。

アクティブ： スケール0による短い「スナップ」。98.

フォーカス：クリックゾーンコンテナでリングします。

11）アクセシビリティ（A11y）とキーボード

サポート'：focus-visible'（マウスのフォーカススタイルは表示されません。キーボードのフォーカススタイルは表示されます）。
ホバーヒントを作成する要素には、フォーカスに相当するフォーカスが必要です（同じコンテンツがTab/Enterキーに表示されます）。
Aria-attributes：インタラクティブは状況によって'role'、 'aria-pressed'/'aria-expanded'/'aria-current'を持つ。
Prefers-reduced-motion：スケール/シフトを最小（不透明度/塗りつぶし）に置き換え、リップルをオフにします。

css
@media (prefers-reduced-motion: reduce) {
{ transition-duration:.01ms! important; animation: none! important; }
}

12）パフォーマンス

「不透明度」と「変換」のみをアニメーション化する。'width/height/left/top'、複数の要素の重いぼかし/影を避けます。
'will-change'を控えめに使用してください。遷移完了後にリトラクトします。
リスト/テーブル-「global」の再描画なしで、最小限の効果。

13）ホバーインテントと「粘着性」

• 複雑なツールチップ/メニューを表示する前に、遅延しきい値は80〜120ミリ秒です。
• カーソルの「粘着性」：ユーザーがアイテムからメニューに角度で移動した場合、200-300 msの「回廊」（Fitts triangle）を与えます。
• タッチで-ホバーをプレスまたは明示的な「more」ボタンで置き換えます。

14）ツールチップ/メニュー/ドロップダウン

開口部：ホバーインテント（デスクトップ）/プレス（タッチ）、閉じる-ケア/ぼかし/ESC。
位置-ソースに、矢印が揃っています。max-widthとhyphenationが有効になります。
可用性：'role=「tooltip」'、 associate 'aria-descripedby'；menu-'role=「menu」'+矢印コントロール。

15） iGamingの詳細

係数/リードボード：ホバーは行/セルをハイライトしますが、位置メトリックは変更されません（「ジャンプ」なし）。

トーナメント/ボーナスカード： ホバーはフレーム/アイコンを「復活」することができますが、テキストCTAと条件は読み取り可能なままです（≥ 4。5:1).

責任ある通知（18+、制限）：気晴らしの効果なし；ホバリングは、リンクと明確なフォーカスの下線のみを許可します。
ベット/購入ボタン：アクティブフィードバックは必須（ビジュアルクリック/インデント）で、送信後は明確に無効にします。

16）インターフェイスレシピの例

css
.cta {
background: var(--role-primary);
color: var(--on-primary);
transition: background-color. 16s var(--ease), transform. 09s var(--ease-acc), box-shadow. 16s var(--ease);
}
@media (hover:hover) and (pointer:fine) {
.cta:hover { background: var(--role-primary-hover); box-shadow: var(--elev-2); }
}
.cta:active { transform: scale(.98); }
.cta:focus-visible { box-shadow: 0 0 0 3px var(--focus-ring); }

css
.card { transition: box-shadow. 16s var(--ease), border-color. 16s var(--ease); }
@media (hover:hover) and (pointer:fine) {
.card:hover { box-shadow: var(--elev-2); border-color: var(--border-strong); }
}
.card:focus-visible { box-shadow: 0 0 0 3px var(--focus-ring); }

css
.table tr { transition: background-color. 12s var(--ease); }
@media (hover:hover) and (pointer:fine) {
.table tr:hover { background: var(--row-hover); }
}
.table tr:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: -2px; }

17）アンチパターン

ホバーのみのクリティカルアクション/メニューを非表示にします。
ホバー上のサイズ/レイアウトを変更する（レイアウトジャンプ）。
状態を区別するために色にのみ依存します。
明滅、無限の脈動、テキストの「酸」の輝き。
フォーカススタイルの欠如や暗いテーマの彼らの見えない。
非対話的要素の上に'ポインタ'を置きます。

18） QAチェックリスト

可用性について

• すべてのインタラクティブはキーボードでアクセス可能です。焦点を合わせる。
• ホバーコンテンツは'focus'/'aria'で利用できます。
• テキストとアイコンのコントラストはWCAGに対応しています。

動作

• ホバー/アクティブ/無効/訪問は、形状とトーンによって区別できます。
• 応答遅延なし>120ms。
• タッチにホバーする代替があります。

パフォーマンス

• 'transform'/' opacity'のみがアニメーション化されます。
• 複数の要素に重いぼかし/影はありません。
• 長いリストでは、効果は最小限に抑えられます。

19）設計システムにおけるドキュメンテーション

基本コンポーネント（ボタン、リンク、カード、フィールド、テーブル行）のステータステーブル。
デュレーション/カーブ/シャドウトークンとライト/ダークのサンプルコード。
「Hover vs Touch」セクション：選択肢と例のルール。
短いクリップとコントラストスコアで「Do/Don 't」。

概要

ターゲティング効果は、インターフェイス言語の補助的な重要な部分です。それらを簡単かつ予測可能に保ち、キーボードとタッチを保ち、コントラストと目に見えるフォーカスを提供し、安価なプロパティだけをアニメーションします。その後、インタラクティブ性は、それらを妨げるのではなく、アクションの明確さと速度を向上させます。