ボタンコード生成用
コピーできたことが分かるボタン
押すと「コピーしました」に変わり、数秒で元に戻る。
用途・説明
クーポンコード、URL、サンプルコードなどをコピーするためのボタンを作ります。押すとアイコンがチェックに変わり、文言が「コピーしました」に切り替わって、数秒後に元に戻ります。コピーできなかった場合の表示も用意するので、押した結果が必ず伝わります。
カラーとサイズを選ぶ
選んだ内容は、上の仕上がり例と下のプロンプト全文に反映されます。
カラー
サイズ
書き換える項目
プロンプト内の［ ］の部分を、つくりたいサイトに合わせて書き換えてから使ってください。
[コピーする内容]- 例：クーポンコード WELCOME10
[ボタン文言]- 例：コードをコピー
[使用技術]- 例：HTML/CSS、React + Tailwind CSS
プロンプト全文
あなたはUIデザインに詳しいフロントエンドエンジニアです。 以下の条件で「コピーできたことが分かるボタン」を実装してください。 ## 表示内容 - コピーする内容：[コピーする内容]（ボタンの左に、枠で囲んで表示する） - ボタン文言：[ボタン文言] ## デザイン - 内容の表示：高さ 40px、背景 #F7F9FC、枠線 1px dashed #CBD5E1、角丸 8px、等幅フォント 15px - ボタン：高さ 40px、左右padding 16px、背景 #FFFFFF、枠線 1px solid #1463F0、文字 #1463F0・14px・font-weight 700、角丸 8px - アイコン（コピーのマーク、16px）を文言の左に置く ## 動作 - 押すとクリップボードにコピーする（navigator.clipboard.writeText） - 成功：アイコンをチェックに、文言を「コピーしました」に変え、背景を #1463F0・文字を #FFFFFF にする。2.5秒後に元に戻す - 失敗：文言を「コピーできませんでした」にし、内容を選択した状態にして手動でコピーできるようにする - 文言が変わってもボタンの幅が変わらないよう、最小幅を決めておく ## アクセシビリティ - 結果は aria-live="polite" の領域で読み上げられるようにする - 色だけでなく、アイコンと文言でも成功を伝える - focus-visible のスタイルを用意する ## 出力形式 - [使用技術]のコードを1つ出力 - https 以外の環境では clipboard が使えないことをコメントで補足する
使い方
- 1「書き換える項目」を見ながら、プロンプト内の［ ］の部分を自分のサイトの内容に書き換えます。色とサイズはこのページ上で選ぶと、プロンプトに自動で反映されます。
- 2「プロンプトをコピー」を押し、Claude・ChatGPT・GeminiなどのAIにそのまま貼り付けて送信します。
- 3出力されたコードを自分のサイトに貼り付けて表示を確認します。直したいところは「余白をもう少し広く」のように、続けてAIに伝えると調整できます。