フォームのUIは、一見シンプルに見えて奥が深い。
入力欄とボタンを並べるだけなら簡単だ。でも「使いやすいフォーム」と「なんとなく作ったフォーム」の間には、大きな差がある。
Google Stitch を使ってフォームを作るようになってから、この差を埋めるために「必ずやること」がいくつか定まってきた。この記事は、そのリストだ。
フォームを何度も作っているうちに気づいた「これをやらないと後で困る」というポイントを、具体的に書いていく。
一言で言えば、Google Stitch でフォームを作るときは「通常状態」だけを作って終わりにしてはいけない。バリデーションエラー・空の状態・成功状態など、複数の状態を別々に生成してセットにすることが、使えるフォームUIに仕上げるための鍵だ。
フォームUIが難しい理由
フォームUIがボタンや画像に比べて難しい理由は、「状態が多い」ことだ。
ページのレイアウトやカードコンポーネントは「表示されている1つの状態」を作ればいい。でもフォームは、少なくとも以下の状態を考える必要がある。
- 初期状態：何も入力されていない、プレースホルダーが表示されている状態
- 入力中状態：フォーカスが当たっており、ユーザーが入力している状態
- 入力済み状態：テキストが入力された状態
- エラー状態：バリデーションエラーが発生し、エラーメッセージが表示されている状態
- 送信中状態：送信ボタンを押した後、処理中の状態（ローディング）
- 成功状態：送信が完了した状態
Google Stitch は「初期状態」を中心に生成する傾向があるため、他の状態を意識的に作る必要がある。
必ずやっていること①：エラー状態を別途生成する
通常のフォームUIを生成した後、必ず「エラー状態のUI」を別のプロンプトで生成する。
エラー状態のプロンプト例
「先ほどのフォームUIのエラー状態バージョン。メールアドレスフィールドに赤いボーダーと「正しいメールアドレスを入力してください」というエラーメッセージが表示されている状態。パスワードフィールドは正常な状態。エラーメッセージは入力フィールドの下に小さいテキストで表示。」
このプロンプトで生成すると、エラー状態のUIが出てくる。フィールドの色が変わり、エラーメッセージが表示されたデザインだ。
これをセットで持っておくことで、エンジニアへの引き渡し時に「通常状態のUIはこれで、エラーが出たときはこうなります」という形で渡せる。エラー状態のUIがないと、エンジニアが実装時に「エラー時のデザインはどうすればいいですか？」と聞いてくることになる。
なぜ別途生成する必要があるか
「エラー状態も含めたフォームUI」と一つのプロンプトで指定しても、Google Stitch は「どれか一つの状態」を選んで生成することが多い。複数の状態を一画面に詰め込もうとすると、見た目がごちゃごちゃしたUIが出てきやすい。
状態ごとに別のプロンプトで生成し、それをセットにして管理する方が、結果的にきれいで使いやすいUIが得られる。
必ずやっていること②：モバイルのキーボード表示を想定する
フォームUIをモバイルで使うとき、キーボードが表示されると画面の下半分が覆われる。このとき、フォームのレイアウトが崩れないかを確認する必要がある。
モバイルフォームのプロンプトに追加する指定
モバイル向けのフォームUIを生成するとき、プロンプトに以下を追加している。
「スマートフォン表示最適化。キーボード表示時に入力中のフィールドが画面内に収まるよう、上部にフォームを配置。送信ボタンはフォーム直下に配置（画面下部に固定しない）。」
この指定を入れることで、キーボードが表示されても入力フィールドとボタンが見える位置に配置されたUIが生成されやすくなる。
実際に生成後のチェックポイント
生成したモバイルフォームUIで確認するのは以下の点だ。
- 入力フィールドのタップ対象が44px以上の高さを確保しているか（指で正確にタップできるか）
- フォームの入力項目数が適切か（スマートフォンでは項目が多すぎると離脱につながる）
- フォームの送信ボタンが画面外に追い出されていないか
- プレースホルダーテキストが入力後も確認できる工夫がされているか（ラベルがフィールド上部に浮かび上がるなど）
必ずやっていること③：「ローディング状態」と「成功状態」も生成する
送信ボタンを押してから処理が完了するまでの「ローディング状態」と、送信完了後の「成功状態」は、フォームUXの中でも重要なシーンだ。
ローディング状態のプロンプト
「フォームの送信ボタンが押された後のローディング状態。ボタンのテキストが「送信中…」に変わり、スピナーアイコンが表示されている。フォームの入力フィールドはdisabled状態（グレーアウト）。」
このプロンプトで生成すると、「処理中」の状態のUIが出てくる。ボタンが変化し、フォームが操作不能になっているデザインだ。
成功状態のプロンプト
「フォーム送信完了後の成功状態。フォームが非表示になり、緑のチェックマークアイコンと「送信が完了しました。ご登録ありがとうございます。」というメッセージが表示されている。元のフォームエリアと同じ幅の成功メッセージカード。」
こうして「通常・エラー・ローディング・成功」の4状態をセットで揃えると、エンジニアへの引き渡し時にほぼ追加の質問なしで実装が進む。
よくある失敗パターンとその対処
Google Stitch でフォームを作るときによく遭遇する失敗パターンと対処法を紹介する。
失敗1：プレースホルダーとラベルが混在している
Google Stitch が生成するフォームでは、「フィールドの上にラベルがあるパターン」と「フィールド内にプレースホルダーだけがあるパターン」が混在することがある。UX的には「ラベル＋プレースホルダー」のセットが理想だが、生成されたUIが「プレースホルダーのみ」になっていることがある。
この場合は「すべてのフォームフィールドに、フィールドの上にラベルテキストを配置してください」とプロンプトに明示して再生成する。
失敗2：必須・任意の区別が不明確
フォームで「必須項目」と「任意項目」の区別が視覚的に分かりにくいUIが生成されることがある。「必須フィールドには赤いアスタリスク（*）を表示」と明示するか、逆に「任意フィールドにのみ（任意）というラベルを付ける」ように指定すると解消される。
失敗3：送信ボタンが目立たない
フォーム全体のデザイントーンに引っ張られて、送信ボタンが他の要素と同化してしまうことがある。「送信ボタンは他の要素と明確に差別化し、アクセントカラーで目立たせる。十分な高さ（48px以上）を確保する。」と明示することで改善できる。
よくある質問（FAQ）
Q1. フォームの種類によってプロンプトの書き方は変わりますか？
はい、変わります。問い合わせフォームは「テキストエリアを大きく取る」、会員登録フォームは「入力項目が多いため段階的に表示するステップ形式を検討する」、決済フォームは「セキュリティを感じさせるデザイン（錠前アイコン・SSLバッジなど）を含める」など、用途に応じた追加指定が有効です。
Q2. マルチステップフォーム（複数ページ分割）は生成できますか？
はい、「3ステップの会員登録フォーム、現在ステップ1/3」のように指定すると、プログレスバー付きのマルチステップフォームUIが生成できます。各ステップを個別に生成して、一連のフローとして管理することをおすすめします。
Q3. ドロップダウン・チェックボックス・ラジオボタンなどの複合フォームは生成できますか？
はい、できます。「性別選択のラジオボタン」「利用規約への同意チェックボックス」「都道府県のドロップダウン」のように具体的に指定することで、複合的なフォーム要素を含むUIが生成されます。それぞれの要素のスタイルが一貫しているかを生成後に確認してください。
Q4. フォームのバリデーションロジックもGoogle Stitch で設計できますか？
バリデーションのUIデザイン（エラー表示の見た目）はGoogle Stitch で生成できますが、バリデーションのロジック（どういう条件でエラーを出すか）は設計者とエンジニアが決める必要があります。UIとロジックは分けて考え、UIはGoogle Stitch で、ロジックの仕様はドキュメントとして別途まとめることをおすすめします。
Q5. アクセシビリティを考慮したフォームUIを生成するには？
プロンプトに「アクセシビリティ対応、テキストコントラスト比4.5:1以上、フォーカスリング表示」と明示すると、アクセシビリティを意識したデザインが出やすくなります。ただし、ariaラベルなどのHTML属性は生成後に手動で確認・追加する必要があります。
Q6. ダークモードのフォームUIも生成できますか？
はい、「ダークモード、背景色#1E1E1E、フォームフィールドの背景色#2D2D2D、テキスト色#FFFFFF」のように色を具体的に指定することで、ダークモードのフォームUIが生成できます。ライトモードとダークモードの両方を生成して、切り替え時の見た目を確認することをおすすめします。
Q7. 生成したフォームUIをReactコンポーネントとして使うには？
Google Stitch のエクスポート機能でHTMLを書き出し、そのHTMLをReactのJSXに変換する作業が必要です。ClaudeやChatGPTに「このHTMLをReactコンポーネントに変換してください」と依頼する方法が効率的です。ただし、変換後のコードは必ず動作確認をしてください。
Q8. フォームの入力内容プレビューUIも生成できますか？
はい、「入力確認画面。ユーザーが入力したフォームの内容が表示され、各項目に編集リンクが付いている。「送信する」と「戻って修正する」の2ボタン。」のように指定することで、確認画面のUIも生成できます。「入力→確認→完了」の3画面セットを用意すると完成度の高いフォームフローになります。
「通常状態だけ」で終わらないことが、使えるフォームの条件
Google Stitch でフォームUIを作るようになって一番変わったのは、「エラー状態から先に考える」という習慣だ。
以前は「フォームのUIを作る」というとき、「通常時に入力欄とボタンが並んでいる画面」しか考えていなかった。でも実際に使われるフォームは、エラーが出て、ローディングが走って、成功して——という複数の状態を経る。その全部のUXを設計することが「使えるフォームを作る」ということだと、繰り返す中で気づいた。
Google Stitch を使えば、これらの状態を一つひとつ生成することが、技術的には難しくない。必要なのは「状態を意識して生成する」という習慣だけだ。次にフォームUIを作るとき、通常状態を作り終えたらすぐに「エラー状態は？」と自分に問いかけてみてほしい。
