CTA・特徴紹介コード生成用
メールアドレス入力つきのCTA
その場で入力して、すぐ登録できる1行フォーム。
用途・説明
見出しの下に、メールアドレスの入力欄とボタンを1行にまとめたCTAを作成します。ページを移動せずに登録できるため、メールマガジンや事前登録、ウェイトリストの受付に向いています。送信後のメッセージまで含めています。
カラーとサイズを選ぶ
選んだ内容は、上の仕上がり例と下のプロンプト全文に反映されます。
カラー
サイズ
書き換える項目
プロンプト内の［ ］の部分を、つくりたいサイトに合わせて書き換えてから使ってください。
[見出し]- 例：最新情報を、メールでお届けします
[ボタンの文言]- 例：登録する
[補足]- 例：月1回配信・いつでも解除できます
[使用技術]- 例：HTML/CSS + JavaScript、React + Tailwind CSS
プロンプト全文
あなたはWebデザイナー兼フロントエンドエンジニアです。 以下の条件で「メールアドレス入力つきのCTA」を実装してください。 ## 表示内容 - 見出し：[見出し] - 入力欄（メールアドレス）とボタン：[ボタンの文言] - 補足：[補足] ## レイアウト - 最大幅 640px のカード、中央配置、中央揃え - 入力欄とボタンは、1つの枠のなかに横並び（ボタンは枠の右端に収める） - スマホの幅が狭いとき（360px以下）は、入力欄とボタンを縦に並べる ## デザイン - カード：背景 #FFFFFF、枠線 1px solid #E2E8F0、角丸 16px、padding 40px - 見出し：22px、font-weight 700、line-height 1.5、色 #1B2A44 - 入力の枠：高さ 52px、枠線 1px solid #DCE4F0、角丸 999px、padding 4px、見出しの下 24px - 入力欄：枠線なし、文字 15px、左padding 20px、placeholder の色 #8A96AA - ボタン：高さ 44px、左右padding 24px、角丸 999px、背景 #1463F0、文字 #FFFFFF・14px・font-weight 700 - 入力欄にフォーカスしたとき、枠全体の枠線を #1463F0 にし、外側に淡い輪（3px）を付ける - 補足：12px、色 #5F6D84、入力の枠の下 12px ## 動作 - 送信中はボタンを無効にし、文言を「送信中…」に変える - 成功したら、入力の枠をチェックマークと「登録しました。ありがとうございます。」に置き換える - メールアドレスの形式が正しくないときは、枠線を赤（#C9343A）にし、下にメッセージを表示する - 送信の処理そのものは、コールバックで受け取れるようにする ## アクセシビリティ - 入力欄に label を付ける（見た目では隠し、読み上げには伝える）。type="email"、autocomplete="email" - エラーと成功のメッセージは aria-live="polite" で伝える - エラーのときは aria-invalid="true" と aria-describedby を設定する ## 出力形式 - [使用技術]のコードを1つ出力
使い方
- 1「書き換える項目」を見ながら、プロンプト内の［ ］の部分を自分のサイトの内容に書き換えます。色とサイズはこのページ上で選ぶと、プロンプトに自動で反映されます。
- 2「プロンプトをコピー」を押し、Claude・ChatGPT・GeminiなどのAIにそのまま貼り付けて送信します。
- 3出力されたコードを自分のサイトに貼り付けて表示を確認します。直したいところは「余白をもう少し広く」のように、続けてAIに伝えると調整できます。