フォーム・お問い合わせコード生成用
外部アカウントと併用する登録フォーム
外部アカウントでの登録を上に、メールでの登録を下に。
用途・説明
「Googleで登録」などの外部アカウントのボタンと、メールアドレスでの登録フォームを1つの画面にまとめます。手早く登録したい人は上のボタンから、メールで登録したい人は下のフォームから進めます。利用規約への同意の示し方まで含めた、会員登録画面の基本形です。
カラーとサイズを選ぶ
選んだ内容は、上の仕上がり例と下のプロンプト全文に反映されます。
カラー
サイズ
書き換える項目
プロンプト内の［ ］の部分を、つくりたいサイトに合わせて書き換えてから使ってください。
[サービス名]- 例：Toolly
[外部アカウント]- 例：Google、Apple
[使用技術]- 例：HTML/CSS、React + Tailwind CSS
プロンプト全文
あなたはフォームのUIに詳しいフロントエンドエンジニアです。 [サービス名]の「外部アカウントと併用する登録フォーム」を、以下の条件で実装してください。 ## 表示内容（上から順に） 1. 見出し：アカウントを作成 2. 外部アカウントのボタン：[外部アカウント]（「〇〇で登録」） 3. 区切り線と「またはメールアドレスで登録」 4. 入力欄：メールアドレス、パスワード（表示・非表示の切り替え付き） 5. ボタン：登録する 6. 同意の一文：「登録することで、利用規約とプライバシーポリシーに同意したものとみなします。」（それぞれリンク） 7. 「すでにアカウントをお持ちの方はログイン」のリンク ## デザイン - カード：最大幅 400px、背景 #FFFFFF、枠線 1px solid #E2E8F0、角丸 12px、padding 32px - 外部アカウントのボタン：高さ 48px、背景 #FFFFFF、枠線 1px solid #DCE4F0、角丸 8px、ロゴは左端に固定、文言は中央 - 区切り線：1px solid #E2E8F0 の中央に文言（12px、色 #5F6D84）。上下の余白 24px - 入力欄：高さ 48px、枠線 1px solid #CBD5E1、角丸 8px、文字 16px - 登録ボタン：幅 100%、高さ 48px、背景 #1463F0、文字 #FFFFFF・font-weight 700 - 同意の一文：12px、line-height 1.7、色 #5F6D84。リンクは下線付き ## 動作 - パスワードは8文字以上。条件を入力欄の下に常に表示し、満たしたらチェックを付ける - 外部アカウントのロゴは仮のSVGで置き、差し替える場所をコメントで示す ## アクセシビリティ - autocomplete は email と new-password - パスワードの表示切り替えは button 要素で、aria-pressed を使う - エラー文は aria-describedby で関連付け、色だけで伝えない ## 出力形式 - [使用技術]のコードを1つ出力（認証の処理そのものは含めない） - 外部アカウントのロゴと文言は、提供元のガイドラインを公開前に確認する旨を最後に書く
使い方
- 1「書き換える項目」を見ながら、プロンプト内の［ ］の部分を自分のサイトの内容に書き換えます。色とサイズはこのページ上で選ぶと、プロンプトに自動で反映されます。
- 2「プロンプトをコピー」を押し、Claude・ChatGPT・GeminiなどのAIにそのまま貼り付けて送信します。
- 3出力されたコードを自分のサイトに貼り付けて表示を確認します。直したいところは「余白をもう少し広く」のように、続けてAIに伝えると調整できます。