ファーストビューコード生成用
メール登録のファーストビュー
見出しのすぐ下で、メールアドレスだけを入力して登録。
用途・説明
見出しの下にメールアドレスの入力欄とボタンを1行で置く、登録に特化したファーストビューを作成します。公開前の事前登録、メールマガジンの購読、無料トライアルの申し込みなど、まずメールアドレスだけを預かりたい場面に向いています。
カラーとサイズを選ぶ
選んだ内容は、上の仕上がり例と下のプロンプト全文に反映されます。
カラー
サイズ
書き換える項目
プロンプト内の［ ］の部分を、つくりたいサイトに合わせて書き換えてから使ってください。
[見出し]- 例：公開したら、いちばんにお知らせします。
[補足文]- 登録すると何が届くかを1文で
[ボタン文言]- 例：事前登録する
[安心材料]- 例：登録は無料・いつでも解除できます
[使用技術]- 例：HTML/CSS、React + Tailwind CSS
プロンプト全文
あなたはWebデザイナー兼フロントエンドエンジニアです。 以下の条件で「メール登録のファーストビュー」を実装してください。 ## 表示内容 - 見出し：[見出し] - 補足文：[補足文] - メールアドレスの入力欄と、ボタン：[ボタン文言] - 安心材料：[安心材料] ## レイアウト - 中央揃え。上から 見出し → 補足文 → 入力欄とボタン → 安心材料 - 入力欄とボタンは、1つの白い枠のなかに横並びで収める（最大幅 480px） - スマホ：入力欄とボタンを縦に並べ、どちらも全幅にする ## デザイン - 背景：#1463F0 の9%の淡い色 - 見出し：PC 48px / スマホ 28px、font-weight 700、line-height 1.4、色 #1B2A44 - 補足文：16px、line-height 1.8、色 #5F6D84 - 白い枠：背景 #FFFFFF、角丸 999px、padding 6px、影 0 8px 24px rgba(27, 42, 68, 0.08) - 入力欄：枠なし、高さ 48px、左padding 20px、文字 16px - ボタン：高さ 48px、左右padding 24px、角丸 999px、背景 #1463F0、文字 #FFFFFF・15px・font-weight 700 - 安心材料：13px、色 #5F6D84、チェックマーク付き ## 動作 - 送信中はボタンを「送信中…」にして、二重に押せないようにする - 成功したら、入力欄とボタンを「登録しました。確認メールをお送りしました。」に置き換える - メールアドレスの形式が正しくない場合は、枠の下にエラー文を表示する ## アクセシビリティ - 入力欄には見えないラベル（aria-label="メールアドレス"）を付け、type="email"・autocomplete="email" にする - 成功・エラーのメッセージは aria-live="polite" で伝える - 白い枠全体に、フォーカス時のリングを表示する - 見出しは h1 ## 出力形式 - [使用技術]のコードを1つ出力（送信処理そのものは含めない）
使い方
- 1「書き換える項目」を見ながら、プロンプト内の［ ］の部分を自分のサイトの内容に書き換えます。色とサイズはこのページ上で選ぶと、プロンプトに自動で反映されます。
- 2「プロンプトをコピー」を押し、Claude・ChatGPT・GeminiなどのAIにそのまま貼り付けて送信します。
- 3出力されたコードを自分のサイトに貼り付けて表示を確認します。直したいところは「余白をもう少し広く」のように、続けてAIに伝えると調整できます。