CTAボタンと注意エリア

1） CTAと原則の役割

1.スクリーンごとの1つの主要なステップ。プライマリCTAは明白でユニークでなければなりません。
2.コンテキスト→アクション。CTAの次に「次に何が起こるか」という簡単な説明が常にあります。
3.攻撃なしの可視性。AA ≥コントラスト、十分なサイズと読みやすいテキスト-派手な効果の代わりに。
4.一貫性。同じCTAは、すべての画面で同じ動作をします。
5.セキュリティーよ。危険なCTAには確認または元に戻す必要があります。

2） CTA階層

プライマリ-キーページアクション（「ベットを配置」、「トップアップ」、「確認」）。1 PC。
二次-代替または補助ステップ（「詳細」「、変更方法」）。
Tertiary-視覚的な重量が最も低いテキスト/ゴーストボタン。
破壊-別のスタイル（色/警告アイコン）+確認/元に戻す。

ルール：画面に複数の「強い」CTAがある場合、ゴールなしの選択が可能です。フローを再設計します。

3） CTAのコピーライティング

動詞+オブジェクト、2-4ワード：「ベットを配置する」、「バランスを補充する」、「制限を設定する」。
詳細：「出力2,000 ₴」は「送信」よりも優れています。
二重否定（「キャンセルしない」）と曖昧な比喩は避けてください。

危険なアクションの場合-1行のサブヘッド： 「確認なしで、5秒をキャンセルできます。」

4）次元、形、対照

最小クリックゾーン：≥ 44 × 44 px（タッチ）、≥ 32 × 32 px（デスクトップ）。
ボタンの高さ：40-48 px；半径10-12 px；int。横のインデント16-20 px。
テキストから背景へのコントラスト：WCAG AA；色だけに頼らないでください-アイコン/ラベルを使用してください。

量/係数の表の数字： 'font-variant-numeric： tabular-nums；'.

5）状態およびフィードバック

Hover/Focus/Active-表示および区別可能（フォーカスリングは非表示にしない）。
Busy （loading）： 100ミリ秒≤瞬時応答、「沈黙」の代わりにスピナー/スケルトン。
無効：「灰色」だけでなく、なぜ利用できないのか（ツールチップ/インラインヒント）を説明します。
元に戻す/確認：破壊的なCTAの場合-確認モーダルまたは元に戻す5-10秒のパネル。

html
<button class =" btn btn--primary" aria-busy = "false" id = "cta "> Bid </button>
<script>
const cta = document. getElementById('cta');
cta. addEventListener('click', async () => {
cta. setAttribute('aria-busy','true'); cta. disabled = true ;//instant try {
const r = await fetch('/api/bet', {method:'POST', headers:{'Idempotency-Key':crypto. randomUUID()}});
if(!r.ok) throw new Error();
//success toast/navigation
} catch {
//show reason and suggest Retry
} finally {
cta. disabled = false; cta. setAttribute('aria-busy','false');
}
});
</script>

6）注意ゾーン（デスクトップ）と親指ゾーン（モバイル）

視線パターン：F パターン/Zパターン、ホットスポット：左上（タイトル）、右上（セカンダリ）、画面下部（仕上げ）。

• 短いスクリーンのための曲がるか、または視力のラインの形態の底の上で、
• モバイル（親指ゾーン）の下部にある「sticky」パネル。
• モバイル「親指」：画面の下1/3がより便利で、左右のエッジは支配的な手に依存します（デフォルトでは-下の中央/右）。

html
<footer class = "sticky-cta" role = "region" aria-label = "Action">
<div class = "sum"> Bid: 200 ₴</div>
<button class =" btn btn--primary "> Confirm </button>
</footer>

<style>
.sticky-cta{position:sticky; bottom:0; display:flex; gap:12px; align-items:center;
padding:12px 16px; background:var(--bg-elevated); box-shadow:0 -8px 24px rgba(0,0,0,.12)}
.sticky-cta. btn{flex:1}
</style>

7）配置とインデント

プライマリCTAとセカンダリ要素を空白（16-24 px）で分離します。
お互いの隣に2つのプライマリを入れないでください-1つは「偽」の選択肢になります。
フォーム：最後のフィールドの後のCTA；secondary-CTAの左/下（「戻る」、「キャンセル」）。
カード/タイル：CTAの右下；長いリストの場合-各カードのインラインCTA。

8）アニメーションとモーションパターン

入出力：120-180ミリ秒「、不透明度/変換」（レイアウトシェイクなし）。
プレス効果：96-98％+shadow→「click is feel」に還元。
「成功」のために：400ミリ秒≤短い点検microanimation；reduce-motion-静的アイコン。
無限にちらつく効果を避けて下さい（責任がある演劇のための反パターン）。

9） A11yおよびキーボード

'<button>'では'role=「button」'は必要ありません。
目に見える焦点リング；タブの順序は論理的です。CTAを有効にする/スペースを入力します。
ブート時の'aria-busy'；ステータスはlive-region 'role=「status」'を使用します。
ボタンのテキストは利用できますSR；アイコン-'aria-hidden=」true」で意味の唯一のキャリアではありません。

10）メトリクスと実験

CTR CTA、クリック後の変換、外観からクリックするまでの時間。
スクロール深さ→クリック：「曲げの上「/」曲げの下」に発生したクリックの割合。
ヒートマップゾーン（デスクトップ/モブ）；親指の範囲（マフィア）。
危険なCTAのキャンセル/元に戻すレート。
A/B：テキスト、色/コントラスト、サイズ、場所、粘着パネルと静的配置。

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

json
{
"cta": {
"height": { "sm": 40, "md": 44, "lg": 48 },
"radius": 12,
"px": { "sm": 14, "md": 16, "lg": 20 },
"gap": 8,
"icon": 18,
"focusRing": { "width": 2, "offset": 2 },
"motion": { "pressMs": 90, "hoverMs": 160, "inMs": 160, "outMs": 120 }
},
"sticky": { "enabled": true, "shadow": "0 -8px 24px rgba(0,0,0,.12)" },
"a11y": { "contrastAA": true, "tabularNums": true }
}

css
.btn{height:44px; padding:0 16px; border-radius:12px; display:inline-flex; gap:8px; align-items:center; justify-content:center}
.btn--primary{background:var(--accent); color:var(--on-accent); font-weight:600}
.btn--ghost{background:transparent; border:1px solid var(--border); color:var(--fg)}
.btn[aria-busy="true"]{pointer-events:none; opacity:.85}
.btn:focus-visible{outline:2px solid var(--focus-ring); outline-offset:2px}

12） iGamingのパターン

ベットをする（プライマリ）：金額と係数を並べて表示します。遅延>3秒-「確認待ち」……+安全な再試行。
預金：粘着CTA下部モバイルスクリーン（「補充」）、セカンダリ-「変更方法」；目に見える手数料/締め切りが近くにあります。
キャッシュアウト：CTAはマッチ/クーポン画面でキャプチャされます。常に現在のキャッシュアウト額を表示します。実行の前の確認。
制限を設定：CTAは攻撃的ではありません。近く-「で有効になります……。」AAAの対照、点滅無し。
トーナメント：トーナメントカードのCTA「参加」+セカンダリ「ルール/賞品」。

13） Antipatterns

近くの2つのプライマリCTA （Bet and Buy Bonus）は認知競争です。
「グレー」は説明なしで無効になっています。
無限の注目のアニメーションとウィンキング。
マークアップを変更し、フォーカスを奪うボタン。
CTAは、曲げの下にある大きな「装飾」よりも低いです。
重要な場所のテキスト（ラベルなし）の代わりにアイコン。

14）アナリティクススニペット

js function trackCTA(name, meta={}) {
window. dataLayer?.push({ event:'cta_click', name,...meta });
}
//example document. querySelector('#deposit'). addEventListener('click', ()=>{
trackCTA('deposit_click', { placement:'sticky_footer', amount:getAmount() });
});

15） QAチェックリスト

意味と階層

• 画面上に1つのプライマリCTAがあります。二次的なものは重量で競合しません。
• CTAのテキストは明確であり、二重否定はない。近くで-次に何が起こるか。

空室状況

• フォーカス・リング参照；入力/スペース作業；ブート時の'aria-busy'。
• テキスト/背景のコントラスト≥ AA；アイコンだけが意味の持ち主ではありません。

動作

• 即時応答≤ 100ミリ秒；busy-stateとRetry on failures。
• 危険なもの、確認または元に戻す。
• スティッキーCTAは、モバイル上で正しくスティック、コンテンツを重複しません。

宿泊施設

• 親指エリア（mob）または視線（デスクトップ）のCTA。
• 隣接する要素からの十分なインデント（16-24 px）。

メトリクス

• CTR、クリック後の変換、Time-to-Click、 Undo-rateが削除されました。
• text/color/size/location実験があります。

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

'ButtonPrimary'、 'ButtonSecondary'、 'ButtonGhost'、 'StickyCTA'、 'UndoBar'。
サイズ/コントラスト/アニメーショントークン、コピーライティングの例。
パターン：「画面ごとにプライマリ1つ」、「モバイルでスティッキー」、「リスクの確認/取り消し」。
実際のスクリーンとヒートマップでギャラリーをする/しないでください。

概要

CTAは、目的、場所、意味があるときに機能します。1つの主要なステップ、明確なテキスト、十分なコントラスト、注意/親指ゾーンの正しい位置、正直なフィードバック。設計システムでこれをキャプチャし、行動を測定し、クリックすると、間違いや刺激なしに自信を持って意図的なアクションに変わります。