フォーム・お問い合わせコード生成用
認証コードの入力欄
メールやSMSで届く6桁のコードを、1桁ずつ入力する。
用途・説明
ログインや本人確認で使う、6桁の認証コードの入力画面を作成します。1桁ずつのマスに分かれていて、入力すると自動で次のマスへ進みます。コードの貼り付けや、SMSからの自動入力にも対応する指定を含みます（認証処理は含みません）。
カラーとサイズを選ぶ
選んだ内容は、上の仕上がり例と下のプロンプト全文に反映されます。
カラー
サイズ
書き換える項目
プロンプト内の［ ］の部分を、つくりたいサイトに合わせて書き換えてから使ってください。
[送信先の表示]- コードを送った宛先の表示。例：ha***@example.com
[使用技術]- 例：HTML/CSS/JavaScript、React + Tailwind CSS
プロンプト全文
あなたはフォームのUXとアクセシビリティに詳しいフロントエンドエンジニアです。 以下の条件で「認証コード（6桁）の入力欄」を実装してください（認証処理は含めず、見た目と入力まわりの挙動のみ）。 ## 表示内容 - 見出し「認証コードを入力」 - 説明文：「[送信先の表示] に送信した6桁のコードを入力してください」 - 6つの入力マス - 「コードを再送する」リンク（再送までの残り秒数を表示） ## レイアウト・デザイン - 入力マス：幅 48px・高さ 56px、角丸 10px、1.5px solid #CBD5E1、間隔 8px。文字 24px、font-weight 700、中央揃え、色 #1B2A44 - 入力済みのマス：枠線 #1463F0 - フォーカス中のマス：枠線 #1463F0 と 3px の薄いリング - 説明文：14px、色 #5F6D84。再送リンク：14px、色 #1463F0 - スマホで6つのマスが画面からはみ出さないよう、幅を自動で縮める ## 入力まわりの属性 - inputmode="numeric"、pattern="[0-9]*"、autocomplete="one-time-code"（先頭のマス） - 数字以外は入力できないようにする ## 動作 - 1桁入力すると次のマスへ自動で進む。Backspace で前のマスへ戻る - 6桁のコードを貼り付けたら、すべてのマスに振り分ける - 6桁そろったら自動で送信する（送信中は入力を無効化） - コードが違う場合は、マスを空にして先頭に戻し、メッセージを表示する ## アクセシビリティ - マス全体を fieldset で囲み、legend に「認証コード」を入れる。各マスには「6桁中1桁目」のラベルを付ける - エラーメッセージは role="alert" で伝える - 再送までの秒数は、毎秒読み上げないようにする ## 出力形式 - [使用技術]のコードを1つ出力 - 認証処理を接続する箇所をコメントで明示
使い方
- 1「書き換える項目」を見ながら、プロンプト内の［ ］の部分を自分のサイトの内容に書き換えます。色とサイズはこのページ上で選ぶと、プロンプトに自動で反映されます。
- 2「プロンプトをコピー」を押し、Claude・ChatGPT・GeminiなどのAIにそのまま貼り付けて送信します。
- 3出力されたコードを自分のサイトに貼り付けて表示を確認します。直したいところは「余白をもう少し広く」のように、続けてAIに伝えると調整できます。