カードコード生成用
切り取り線のあるクーポンカード
チケットのような形で、割引と期限をはっきり伝える。
用途・説明
左右に切り欠きがあり、点線で区切られたチケット型のクーポンカードを作成します。割引の内容、利用条件、期限を載せ、コードをコピーするボタンを付けます。ECサイトの初回特典、店舗の来店クーポン、メルマガ登録の特典などに向いています。
カラーとサイズを選ぶ
選んだ内容は、上の仕上がり例と下のプロンプト全文に反映されます。
カラー
サイズ
書き換える項目
プロンプト内の［ ］の部分を、つくりたいサイトに合わせて書き換えてから使ってください。
[割引内容]- 例：10%OFF、500円引き
[利用条件]- 例：はじめてのご注文・3,000円以上
[期限]- 例：2026年5月31日まで
[クーポンコード]- 例：WELCOME10
[使用技術]- 例：HTML/CSS、React + Tailwind CSS
プロンプト全文
あなたはWebデザイナー兼フロントエンドエンジニアです。 以下の条件で「切り取り線のあるクーポンカード」を実装してください。 ## 表示内容 - 割引内容：[割引内容] - 利用条件：[利用条件] - 期限：[期限] - クーポンコード：[クーポンコード]（「コピー」ボタン付き） ## レイアウト - 横長のカード。左側（約65%）に割引内容・条件・期限、右側（約35%）にコードとボタン - 左右のあいだに縦の点線。点線の上下の端に、半円の切り欠きを付ける - スマホでは上下に分け、点線は横向きにする ## デザイン - カード：背景 #FFFFFF、枠線 1px solid #1463F0、角丸 12px、最大幅 480px - 割引内容：32px、font-weight 700、色 #1463F0 - 条件・期限：13px、色 #5F6D84 - 点線：2px dashed、#1463F0 の25%の淡い色 - 切り欠き：直径 20px の半円。radial-gradient のマスク、または背景色と同じ色の円を重ねて作る（どちらで作ったかを明記） - コード：等幅フォント 16px・font-weight 700・letter-spacing 0.08em - ボタン：高さ 36px、角丸 999px、背景 #1463F0、文字 #FFFFFF・13px・font-weight 700 ## 動作 - 「コピー」を押すとコードをクリップボードにコピーし、文言を2秒間「コピーしました」に変える ## アクセシビリティ - 期限は time 要素にする - コピーの結果は aria-live="polite" で伝える - 期限切れの状態（グレー表示と「終了しました」の文言）も用意する ## 出力形式 - [使用技術]のコードを1つ出力
使い方
- 1「書き換える項目」を見ながら、プロンプト内の［ ］の部分を自分のサイトの内容に書き換えます。色とサイズはこのページ上で選ぶと、プロンプトに自動で反映されます。
- 2「プロンプトをコピー」を押し、Claude・ChatGPT・GeminiなどのAIにそのまま貼り付けて送信します。
- 3出力されたコードを自分のサイトに貼り付けて表示を確認します。直したいところは「余白をもう少し広く」のように、続けてAIに伝えると調整できます。