フォームUIをClaude Designで設計するコツ——入力欄・バリデーション・エラー状態の指示が毎回ブレる問題

フォームUIはClaude Designが一番「わかったふりをする」ジャンルだと思っている。プロンプトを書いたら一見きれいなフォームが出てくる。でも実際に使おうとすると、エラー状態がないとか、フォーカス時のスタイルがないとか、ラベルとインプットの間隔がバラバラとか、そういう問題が山積みになっている。

半年ほどフォームUIをClaude Designで作り続けて、だいぶコツがつかめてきた。今日はそれを正直に書く。

「フォームを作って」だけだと通常状態しか出てこない

最初に気づいた罠はこれだ。「お問い合わせフォームを作って」と指示すると、きれいなデフォルト状態のフォームが出てくる。でもフォームには少なくとも4つの状態がある。

• Default（通常）: まだ何も入力していない
• Focus（フォーカス中）: ユーザーがクリックして入力中
• Error（エラー）: バリデーション失敗
• Disabled（無効）: 送信前の確認画面などで編集不可

Claude Designはデフォルトでは通常状態しか作ってくれない。全状態を出したいなら、最初から「4つの状態を全部デザインして」と明示する必要がある。

※Claude Design: Anthropic Labsが開発したAIビジュアルデザインツール。テキストプロンプトからUI・スライド・マーケ資料などを生成する。

状態を全部指定するプロンプトの書き方

実際に使っているプロンプトのパターンがこれだ。

お問い合わせフォームを以下の状態すべてデザインしてください：

フィールド: 名前、メールアドレス、メッセージ（textarea）、送信ボタン

各フィールドを4状態で表示すること:
1. Default: ボーダー #E2E8F0、プレースホルダーテキスト灰色
2. Focus: ボーダー #3B82F6（青）、外側にフォーカスリング（rgba(59,130,246,0.3) 3px blur）
3. Error: ボーダー #EF4444（赤）、フィールド下にエラーメッセージ（赤テキスト 12px）
4. Disabled: 背景 #F8FAFC、テキスト #94A3B8、カーソル not-allowed

これだと一度で4状態が全部並んで出てくる。後から「エラー状態も追加して」と言うと別のスタイルになりがちなので、最初から全部指定するほうが確実だ。

※プロンプト: AIへの指示文。Claude Designでは自然言語でデザインを指示する。

ラベルとインプットの位置関係を明示する

地味だが毎回ズレるのがラベルとインプットの関係だ。「ラベルは上」とだけ言うと、間隔やフォントサイズが毎回違う値で出てくる。

こういう形で具体的に書くと安定する。

フィールドのレイアウト:
- ラベル: フォントサイズ 14px、ウェイト 500、カラー #374151
- ラベルとインプットの間隔: 6px
- インプット: 高さ 44px、パディング 左右12px、ボーダーradius 8px
- フィールド間の間隔: 20px

数値を渡すと「だいたいそれ」で出てくるようになった。渡さないと毎回違う数値になる。

エラーメッセージは「具体的な文面」まで指定する

エラー状態を指示したとき、Claude Designが出してくるエラーメッセージがどうにも使い物にならないことがある。「Error」とだけ書いてあるか、英語で出てくるか、日本語でも妙に固い文体になるか。

エラーメッセージは文面まで書いた方が早い。

エラー状態のメッセージ文言:
- 名前（空欄）:「お名前を入力してください」
- メールアドレス（形式不正）:「正しいメールアドレスを入力してください」
- メッセージ（空欄）:「お問い合わせ内容を入力してください」
- 文字色: #EF4444、フォントサイズ: 12px、アイコン: ⚠ を前に付ける

文面を渡すと、Claude Designがそのまま使ってくれる。細かいが、これが「完成品に近い」かどうかの差になる。

送信ボタンの状態も4つ必要

フォームを設計するとき、ボタンの状態も忘れやすい。

• Default: 送信可能
• Hover: マウスオーバー時
• Loading: 送信中（スピナーが回る）
• Disabled: 必須項目未入力時

「送信ボタンのローディング状態も作って」と後から追加すると、デザインの文脈が失われてボタンだけ浮いたスタイルで出てくることがある。最初から「ボタンは4状態で」と指示した方がいい。

実際にやらかした失敗

チェックボックスを含むフォームを作ったとき、チェック済み状態の指定を忘れた。通常状態だけ作って「完璧だ」と思ってクライアントに渡したら、「チェックしたときのビジュアルがないんですが」と言われた。

「チェックボックスのチェック済み状態はチェックマーク（✓）白色、背景#3B82F6」——これを一行加えるだけで済む話を、後から修正のやり取りで3往復かけた。

フォームUI設計はインタラクション設計と同義だ。「状態を全部書くこと」を最初のルールにしてから、やり直しがほぼなくなった。