フォーム・お問い合わせコード生成用
パスワード再設定のフォーム
メールアドレスを入れて、再設定の案内を受け取る画面。
用途・説明
パスワードを忘れた人のための、再設定メールを送るフォームを作ります。メールアドレスの入力欄が1つだけの画面と、送信後の案内画面をセットで用意します。登録の有無を外から確かめられないよう、送信後の文言にも配慮しています。
カラーとサイズを選ぶ
選んだ内容は、上の仕上がり例と下のプロンプト全文に反映されます。
カラー
サイズ
書き換える項目
プロンプト内の［ ］の部分を、つくりたいサイトに合わせて書き換えてから使ってください。
[サービス名]- 例：Toolly
[リンクの有効期限]- 例：24時間
[使用技術]- 例：HTML/CSS、React + Tailwind CSS
プロンプト全文
あなたはフォームのUIに詳しいフロントエンドエンジニアです。 [サービス名]の「パスワード再設定のフォーム」を、以下の条件で実装してください。 ## 画面1：メールアドレスの入力 - 見出し：パスワードをお忘れの方 - 説明：ご登録のメールアドレスを入力してください。再設定用のリンクをお送りします。 - 入力欄：メールアドレス - ボタン：再設定メールを送る - 下に「ログイン画面に戻る」のリンク ## 画面2：送信後 - 封筒のアイコンと、見出し「メールをご確認ください」 - 説明：ご入力のメールアドレスが登録されている場合、再設定用のリンクをお送りしました。リンクの有効期限は[リンクの有効期限]です。 - 「メールが届かない場合」として、迷惑メールフォルダの確認と、再送のリンクを案内する ## デザイン - カード：最大幅 400px、中央配置、背景 #FFFFFF、枠線 1px solid #E2E8F0、角丸 12px、padding 32px - 見出し：20px、font-weight 700。説明：14px、line-height 1.8、色 #5F6D84 - 入力欄：高さ 48px、枠線 1px solid #CBD5E1、角丸 8px、文字 16px - ボタン：幅 100%、高さ 48px、背景 #1463F0、文字 #FFFFFF・font-weight 700 - リンク：14px、色 #1463F0 ## 動作と注意 - 送信後の文言は、登録の有無にかかわらず同じにする（アドレスが登録済みかどうかを外から確かめられないようにするため） - 送信中はボタンを「送信中…」にして、二重に押せないようにする - 再送は60秒に1回までにし、残り秒数を表示する ## アクセシビリティ - 入力欄は type="email"、autocomplete="email" - 画面2に切り替わったら、見出しにフォーカスを移す - エラー文は aria-describedby で関連付ける ## 出力形式 - [使用技術]のコードを1つ出力（メール送信の処理そのものは含めない）
使い方
- 1「書き換える項目」を見ながら、プロンプト内の［ ］の部分を自分のサイトの内容に書き換えます。色とサイズはこのページ上で選ぶと、プロンプトに自動で反映されます。
- 2「プロンプトをコピー」を押し、Claude・ChatGPT・GeminiなどのAIにそのまま貼り付けて送信します。
- 3出力されたコードを自分のサイトに貼り付けて表示を確認します。直したいところは「余白をもう少し広く」のように、続けてAIに伝えると調整できます。