モーダル・通知・タブコード生成用
キャンペーン告知のポップアップ
クーポンやお知らせを、タイミングを選んで表示。
用途・説明
クーポンやキャンペーンを知らせるポップアップを作成します。ページを開いてすぐではなく、しばらく読んだあとに1度だけ表示し、閉じたら一定期間は出さない指定にしています。読む人の邪魔になりすぎない出し方を前提にしています。
カラーとサイズを選ぶ
選んだ内容は、上の仕上がり例と下のプロンプト全文に反映されます。
カラー
サイズ
書き換える項目
プロンプト内の［ ］の部分を、つくりたいサイトに合わせて書き換えてから使ってください。
[対象]- 例：はじめての方限定
[特典]- 例：10%OFF
[説明文]- 例：メール登録で、クーポンをお届けします。
[ボタンの文言]- 例：クーポンを受け取る
[使用技術]- 例：HTML/CSS + JavaScript、React + Tailwind CSS
プロンプト全文
あなたはWebデザイナー兼フロントエンドエンジニアです。 以下の条件で「キャンペーン告知のポップアップ」を実装してください。 ## 表示内容 - 対象：[対象] - 特典：[特典] - 説明文：[説明文] - ボタン：[ボタンの文言] - 右上に閉じるボタン。ボタンの下に「いまは受け取らない」のテキストリンク ## レイアウト - 画面の中央に表示。幅 400px（スマホでは左右に 24px の余白） - 上半分は色つきのエリア（対象と特典）、下半分は白いエリア（説明文とボタン） - すべて中央揃え ## デザイン - 背景の幕：rgba(27,42,68,0.5) - ポップアップ：角丸 20px、overflow: hidden、影 0 24px 64px rgba(27,42,68,0.3) - 上のエリア：背景 #1463F0、padding 32px 24px。対象 13px・色 rgba(255,255,255,0.9)、特典 44px・font-weight 700・色 #FFFFFF - 下のエリア：背景 #FFFFFF、padding 24px。説明文 14px・line-height 1.8・色 #5F6D84 - ボタン：高さ 48px、幅100%、角丸 999px、背景 #1463F0、文字 #FFFFFF・15px・font-weight 700 - 「いまは受け取らない」：13px、色 #5F6D84、下線つき - 閉じるボタン：40×40px、色 #FFFFFF ## 表示のタイミング - ページを開いてから30秒後、またはページの半分までスクロールしたときの、早いほうで1度だけ表示する - 閉じたら、7日間は表示しない（localStorage に日時を保存する） - ボタンを押して受け取った人には、二度と表示しない - 入力中のフォームがあるときは表示しない ## アクセシビリティ - dialog 要素で実装し、aria-labelledby を設定する - 閉じるボタンは、押しやすい大きさにする（小さくして閉じにくくしない） - Esc キーと幕のクリックで閉じられる - 開いたら閉じるボタンにフォーカスを移し、閉じたら元の位置に戻す - 表示の動きは prefers-reduced-motion で無効化 ## 出力形式 - [使用技術]のコードを1つ出力 - 表示のタイミングと、再表示までの日数を変える箇所をコメントで説明
使い方
- 1「書き換える項目」を見ながら、プロンプト内の［ ］の部分を自分のサイトの内容に書き換えます。色とサイズはこのページ上で選ぶと、プロンプトに自動で反映されます。
- 2「プロンプトをコピー」を押し、Claude・ChatGPT・GeminiなどのAIにそのまま貼り付けて送信します。
- 3出力されたコードを自分のサイトに貼り付けて表示を確認します。直したいところは「余白をもう少し広く」のように、続けてAIに伝えると調整できます。