切り取り線クーポン
ミシン目（半円の切り欠き＋破線）で仕切られたチケット型クーポン。「コードを表示」でクーポンコードがめくれて現れ、タップでコピー完了に変わる。
プレビュー
クリック
操作クリック／タップで動きます。
仕様書
- 向く場面
- 初回購入・会員向けクーポンの配布面
- コードをコピーして決済画面で使う流れ
- 販促バナーより控えめに特典を見せたい場合
- 避ける場面
- 自動適用されるクーポン（コード表示が不要）
- 有効期限や条件が複雑で 1 行に収まらない特典
- 構成要素
- 割引スタブ
- ミシン目
- クーポン名
- 利用条件
- コード表示ボタン
- 持っている状態
- 通常
- 成功
- キーボード
Tab でコードボタンへ、Enter／Space で 1 回目はコード表示、2 回目でコピー
- 支援技術
button なのでキー操作可。表示・コピー完了はボタン文言（✓＋コード）で示し、破線→実線の変化に文字を併記。完了は視覚外の aria-live=polite でも読み上げ。focus-visible の輪郭あり。reduced-motion で色遷移停止
- 動き
ボタンの色・枠線 200ms（破線→実線で表示済み、緑でコピー完了）。1.6s 後に元へ戻る
デザインの要点
- 半円の切り欠きは紙色の円を疑似要素で重ねて作る。背景色が変わる場所へ置くなら円の色も合わせる
- コードは 1 タップ目で表示、2 タップ目でコピーの 2 段にする。最初から見せると「もらった」実感が無い
- コピー完了は枠を実線・緑に変えて 1.6 秒だけ文言を差し替える。戻さないと再コピーできると分からない
- スタブ幅は 78px 固定。割引率は 30px の太字で 1 つだけ置き、条件文は本体側に逃がす
実装メモ
左右のスタブを破線と半円の切り欠きで仕切ったチケット型クーポンです。半円は紙色（#fbf6ec）の円を疑似要素で重ねてくり抜き表現にしているので、実ページでは背景色に合わせて circle の色を変えてください。コードは1タップで表示、もう1タップでコピー完了へ。EC販促で頻出のビジュアルモチーフです。
コード（コピーして使えます）
<div class="ct-ticket">
<div class="ct-stub">
<span class="ct-off">20<small>%</small></span>
<span class="ct-off-label">OFF</span>
</div>
<div class="ct-body">
<p class="ct-title">初回購入クーポン</p>
<p class="ct-desc">3,000円以上の購入で利用可（7/31まで）</p>
<button class="ct-code" id="ct-code" data-code="HELLO20">
<span class="ct-code-label" id="ct-code-label">タップしてコードを表示</span>
</button>
<span class="ct-sr" id="ct-status" aria-live="polite"></span>
</div>
</div>