フォーム・お問い合わせコード生成用
郵便番号から住所を入れるフォーム
郵便番号を入れると、都道府県と市区町村が自動で入る。
用途・説明
郵便番号を入力すると、都道府県・市区町村までが自動で入る住所フォームを作ります。資料の送付先、商品の配送先、会員登録など、住所を入力してもらう場面で入力の手間と打ち間違いを減らせます。番地以降は自分で入力する欄に分けています。
カラーとサイズを選ぶ
選んだ内容は、上の仕上がり例と下のプロンプト全文に反映されます。
カラー
サイズ
書き換える項目
プロンプト内の［ ］の部分を、つくりたいサイトに合わせて書き換えてから使ってください。
[住所検索の方法]- 例：住所検索のAPI、ライブラリ名
[使用技術]- 例：HTML/CSS + JavaScript、React + Tailwind CSS
プロンプト全文
あなたはフォームのUIに詳しいフロントエンドエンジニアです。 以下の条件で「郵便番号から住所を入れるフォーム」を実装してください。 ## 入力項目 1. 郵便番号（7桁。右に「住所を検索」ボタン） 2. 都道府県（セレクトボックス） 3. 市区町村 4. 番地 5. 建物名・部屋番号（任意） ## レイアウト - 郵便番号の欄は幅 160px、その右にボタン。ほかの欄は幅 100% - 都道府県と市区町村は、PCでは横に並べる（1:2）。スマホでは縦に並べる - 項目の間隔 20px ## デザイン - 入力欄：高さ 48px、枠線 1px solid #CBD5E1、角丸 8px、文字 16px - ラベル：14px、font-weight 700。任意の項目には「任意」のラベルを付ける - 「住所を検索」ボタン：高さ 48px、枠線 1px solid #1463F0、文字 #1463F0・14px・font-weight 700 - focus：枠線 #1463F0 と、外側に 3px のリング ## 動作 - 住所の検索：[住所検索の方法] - 郵便番号が7桁入力されたら自動で検索する。ボタンでも検索できる - ハイフンあり・全角数字で入力されても、半角7桁に直して扱う - 見つからなかった場合は「該当する住所が見つかりませんでした。手入力してください」と表示する - 自動で入った内容は、あとから手で直せるようにする ## アクセシビリティ - 各欄に autocomplete 属性（postal-code、address-level1、address-level2、address-line1、address-line2）を付ける - 郵便番号の欄は inputmode="numeric" - 検索の結果（入力された・見つからなかった）を aria-live="polite" で伝える ## 出力形式 - [使用技術]のコードを1つ出力 - 住所検索の処理は関数に分け、差し替えられるようにする
使い方
- 1「書き換える項目」を見ながら、プロンプト内の［ ］の部分を自分のサイトの内容に書き換えます。色とサイズはこのページ上で選ぶと、プロンプトに自動で反映されます。
- 2「プロンプトをコピー」を押し、Claude・ChatGPT・GeminiなどのAIにそのまま貼り付けて送信します。
- 3出力されたコードを自分のサイトに貼り付けて表示を確認します。直したいところは「余白をもう少し広く」のように、続けてAIに伝えると調整できます。