会員登録フォーム

選んだ内容は、上の仕上がり例と下のプロンプト全文に反映されます。

書き換える項目

プロンプト内の［ ］の部分を、つくりたいサイトに合わせて書き換えてから使ってください。

[サービス名]

例：Toolly

[送信先]

フォームのaction。未定なら「#」のまま

[使用技術]

例：HTML/CSS/JavaScript、React + Tailwind CSS

あなたはフォームのUXとアクセシビリティに詳しいフロントエンドエンジニアです。
[サービス名]の「会員登録フォーム」を実装してください（登録処理は含めず、見た目と入力まわりの挙動のみ）。

## 表示内容
- 見出し「アカウントを作成」
- お名前、メールアドレス、パスワードの入力欄
- 「利用規約とプライバシーポリシーに同意する」チェックボックス（それぞれリンク付き）
- 「登録する」ボタン
- 「すでにアカウントをお持ちの方は ログイン」リンク

## レイアウト・デザイン
- 画面中央にカード（最大幅 440px、背景 #FFFFFF、枠線 1px solid #E2E8F0、角丸 16px、padding 32px）
- ラベルは入力欄の上に常に表示（14px、font-weight 700、色 #1B2A44）
- 入力欄：高さ 48px、角丸 8px、1px solid #CBD5E1、文字 16px、色 #1B2A44
- フォーカス時：枠線 #1463F0 と 3px の薄いリング
- パスワード欄の下に、条件（8文字以上など）を 12px・色 #5F6D84 で常に表示
- 登録ボタン：幅100%、高さ 48px、背景 #1463F0、文字 #FFFFFF、font-weight 700
- 項目間の余白 20px

## 入力まわりの属性
- お名前：autocomplete="name"
- メール：type="email"、autocomplete="email"、inputmode="email"
- パスワード：type="password"、autocomplete="new-password"。貼り付けを禁止しない
- form は method="post"（送信先：[送信先]）

## 動作
- 入力欄から離れたときに、その項目だけを確認してメッセージを表示する（入力中には出さない）
- 同意チェックが入るまで送信できないが、ボタンは無効化せず、押したときに理由を伝える
- 送信中はボタンの文言を「登録中…」にして二重送信を防ぐ

## アクセシビリティ
- エラーメッセージは aria-describedby で入力欄と関連付け、aria-invalid を付ける
- 必須項目は「必須」の文字で示し、色や記号だけにしない
- すべての操作がキーボードだけで行えること

## 出力形式
- [使用技術]のコードを1つ出力
- 登録処理を接続する箇所をコメントで明示