インターフェイスプロンプトとヘルパー

1）なぜ必要なのか

• 本当に必要なときにコンテキストに表示されます、
• マーケティングなしで短く具体的に、
• メインシナリオをブロックせず、可用性を尊重します。

2）ツールマップと使用時期

ルール：クリティカルコンテンツ-ヒントだけでなく、ビューのフィールドとインターフェイスのテキストで。

3）配置パターンとトリガー

アクションの前に：ヘルパーテキスト/インラインヒント（「パスワード≥ 8文字」）。
アクションの瞬間：フォーカス/ホバー/ロングプレスのツールチップ/コーチマーク。
アクションの後：結果とリンクの説明とトースト/バナー「詳細」。
意図で：'？'、'i'、 "Details'、 'Ctrl+/'（コマンドパレット）で表示します。

4）コピーライティング

1つの考え、1つの文。動詞から始めます（「Choose……」、 「Fill……」）。
No fault："フィルタはすべてのエントリを除外しました。フィルターをリセットしますか？

見積もりの代わりに数字と事実： "委員会1。5–2%».

重要：保証されていない限り、正確な時間を約束しないでください。

5）空室状況（A11y）

ツールチップ：'role=「tooltip」、' aria-describy'による通信、トリガー；キーボードで利用できます。
ブロックを通知する：'role="status"'（礼儀正しい）、エラー-'role="alert''。
コーチマーク/ツアー：順番にフォーカスし、Escが閉じ、ソースにフォーカスします。
テキストコントラスト≥ AA；意味のキャリアはヒントだけではありません。

html
<button id="kpi" aria-describedby="kpi-tip">RTP</button>
<div id = "kpi-tip" role = "tooltip" hidden> Return to Player - the share of bets returned to players in the long term. </div>
<script>
const b = document. getElementById('kpi'), t = document. getElementById('kpi-tip');
b. addEventListener('focus', ()=>t. hidden=false); b. addEventListener('blur', ()=>t. hidden=true);
b. addEventListener('mouseenter', ()=>t. hidden=false); b. addEventListener('mouseleave', ()=>t. hidden=true);
</script>

6）管理および「衛生」を示して下さい"

重複排除-セッションごとに同じメッセージをN回以上表示しないでください。
周波数制御：coachmark/tourのためのクールダウン24 h；ユーザーにはDo Not Remindがあります。
ツールは競合しません：コーチマーク上のツールチップを開かないでください。
進行の記憶：ツアーの完了したステップは、もはや提供されていません。

7）フォームへのヘルパーテキスト

「あなたが間違ったことをした」ではなく「、ルールを渡す方法」を書いてください。
次のフォーマットの例：'DD。MM。 YYYY'、'user@domain。tld'。
複雑なフィールドの場合-「例」ボタン（小さなスニペット/マスクを開きます）。
バリデーションとヘルパーは競合しません：エラーが発生すると、ヘルパーは短い「修正方法」に変わります。

html
<label for="iban">IBAN</label>
<input id="iban" aria-describedby="iban-help">
<small id = "iban-help "> Format: 22-34 characters, Latin letters and numbers only. </small>

8）コマンドパレットとアクションで検索

トリガー： 'Ctrl+/'、'Ctrl+K'、またはボタン「」

パレットで： アイコンとホットキーを持つアクション（"Bet……— ⏎»).

ステートマシン：アクションを選択するとき-インスタントナビゲーション/実行、「キャンセル」-'Esc'。

9） AIのヘルパー/copilot

フォーム/用語のヒント（"ベージャーとは何ですか？"）、適用する前に変更のリストを持つドラフトフィルフィールド。
機密シナリオ（支払い/レート）-説明とチェックリストのみで、決定はユーザーに残ります。
あなた自身の文書/FAQで教える；staticsを改善するためのログの質問。

10） iGamingの詳細

ルールと制限：ボタンの横に顕著なヘルパー"ベットを配置""、キャッシュアウト""、制限を設定します。"明確な言語と例。
KYC/AML：ステップバイステップのヒント（文書、日付の確認、次に何が起こるか）。
トーナメント：カード内の「ポイントの付与方法」（ツールチップ/インラインヒント）、リンク「ルール」。
支払い：手数料/期限と「なぜ検証が必要なのか」に関するヘルパー。
責任あるプレイ：目立たないが目に見える「毎日の制限を設定」プロンプト（AAAコントラスト、明滅なし）。

11）性能および位置

ライトアニメーションの不透明度/変換は180ms ≤、より速くなります。
ソースへのポジショニング、シフト4-8 px、エッジで自動反転。
何百ものプロンプトからDOMツリーを作成しないでください。
'prefers-reduced-motion'を考慮してください。

12）メトリクスと実験

CTRのヒント（インプレッション→STA/」 More「をクリック）。
ヘルパー対制御を使用したフォームのエラー/失敗の削減。
空/ツアーの後の最初の成功への時間。
プロンプトの非表示/拒否（負の信号-テキスト/表示の瞬間を上書きします）。
コマンドパレット/AIヘルパーの一般的なクエリのログ。

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

json
{
"help": {
"maxWidth": 320,
"gap": 8,
"radius": 10,
"elev": 8,
"iconSize": 16,
"enterMs": 180,
"exitMs": 120,
"cooldownHours": 24
},
"tour": { "maxSteps": 5, "backdropOpacity": 0. 5, "escCloses": true },
"palette": { "hotkey": "Ctrl+K", "rowHeight": 40 },
"a11y": { "contrastAA": true, "useAriaLive": true }
}

css
.helper { display:flex; gap:8px; align-items:flex-start; max-width:320px; }
.helper__icon { width:16px; height:16px; opacity:.8; }
.tooltip { position:absolute; padding:8px 10px; border-radius:10px; box-shadow:var(--elev-2); }
.tooltip[data-show="true"] { animation: fadeIn. 18s cubic-bezier(.2,0,.2,1); }
@keyframes fadeIn { from { opacity:0; transform: translateY(4px) } to { opacity:1; transform:none } }

14）実現： coachmarkおよび「思い出さないで下さい」

html
<div id="cm1" class="coachmark" role="dialog" aria-labelledby="cm1-title" hidden>
<h3 id = "cm1-title "> New Fast Cashout </h3>
<p> Check out with one button directly from the coupon. </p>
<div class="row">
<button id = "cm1-ok "> Clear </button>
<button id = "cm1-skip"> Don't remind me </button>
</div>
</div>
<script>
const seen = localStorage. getItem('cm1-skip')==='1';
if(!seen) document. getElementById('cm1'). hidden=false;
document. getElementById('cm1-skip'). onclick=()=>{ localStorage. setItem('cm1-skip','1'); cm1. hidden=true; };
document. getElementById('cm1-ok'). onclick=()=> cm1. hidden=true;
</script>

15）アンチパターン

CTAまたはオーバーラップフォーカスを閉じるヒント。
重要な情報はツールチップ/ホバーのみです。
後でスキップせずに10+ステップツアー。
特にダークモードでは、きらめく/ジャンプの手がかり。
「ジョーク」と間違いと限界における文化的比喩。
責任あるプレーのための攻撃的な色とサウンド。

16） QAチェックリスト

可用性について

• キーボードで利用可能なツールチップ/コーチマーク、'Esc'が閉じ、フォーカスリターン。
• AA ≥コントラスト、テキストは色のみで独立しています。

動作

• ヒントは重要な要素と重ならず、ソースに配置されます。
• 印象重複排除とDon 't Remindがあります。
• アニメーション≤ 180ms、より速く。

意味

• テキストは特定で短く、CTAは適切です。
• 数式/制限に例を示します。

メトリクス

• CTR、成功までの時間、非表示の割合が削除されます。

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

ヘルパーテキスト：'HelperText'、 'InlineHint'、 'Tooltip'、 'Coachmark'、 'ProductTour'、 'DocsLink'、 'CommandPalett'、' AiHelper'。
サイズ/時間/トーントークン、ARIAガイド、コピーライティングの例。
頻繁なシナリオ（KYC、制限、支払い、トーナメント、ベット）のテンプレート。
実際の画面でギャラリーをしない/しないでください。

概要

ヘルパーは時間通りに、文脈で、そして不必要なドラマなしで良いです。短く、アクセス可能で検証可能なヒントを与え、インプレッションのフォーカスと頻度を尊重し、トークンとデザインシステムのパターンを修正します。そのため、ユーザーは間違いを犯して結果を速くする可能性が低くなります。特に機密性の高いiGamingシナリオでは。