コピー完了フィードバック
クリックすると「✓ コピーしました」に変わって元に戻る。操作が伝わる安心感のある演出。
プレビュー
クリック
操作クリック／タップで動きます。
仕様書
- 向く場面
- コード・URL・IDのコピー
- 結果が画面に現れない操作の完了通知
- トーストを出すほどでもない小さな確認
- 避ける場面
- 失敗しうる操作で成功しか表示しない
- ラベル幅が変わりレイアウトが動く場所
- 1.6秒で戻ってはいけない重要な状態表示
- 構成要素
- ボタン
- ラベル
- 完了表示
- 持っている状態
- 通常
- 成功
- キーボード
Tab でボタンへ・Enter／Space で実行（button 標準）。完了中は再実行しない
- 支援技術
✓と緑に加え「コピーしました」の文字で完了を示す。button に aria-live=polite を付け、文言の変化をそのまま読み上げる。focus-visible の輪郭あり
- 動き
背景色 0.2s で緑へ。1.6秒後に自動で戻る。reduced-motion では即時
目的確かめる
デザインの要点
- 完了はボタンの文言そのものを変える。トーストを別に出すより視線の移動が無く、押した場所で結果が分かる
- min-width を固定して文言の長さ差を吸収する。幅が変わると隣の要素が 1.6 秒だけ動く
- 完了中は再実行を止める。連打で「コピーしました」が点滅すると、成功したのか分からなくなる
- 戻す時間は 1.6 秒。短いと読み終わる前に消え、長いと次のコピーができない
コード（コピーして使えます）
<button class="copy-fb-btn" aria-live="polite"><span class="label">コードをコピー</span></button>