入力フィールドUIデザインガイド：ラベル・プレースホルダー・バリデーション・状態設計
UIの入力フィールド（テキストインプット）の設計を徹底解説。フローティングラベル・プレースホルダー・バリデーション・エラー表示・アシストテキスト・各状態（フォーカス・エラー・無効）のデザインなど、使いやすいフォーム入力の実践ガイドを紹介します。
入力フィールドはフォームの核心をなすUIコンポーネントです。ユーザーが情報を入力する場面での体験がそのままサービスの使いやすさに直結します。ラベルの配置・プレースホルダー・バリデーション・エラーメッセージなど、細部の設計がフォーム完了率に大きく影響します。本記事では、使いやすい入力フィールドの設計ガイドを解説します。
ラベルの設計
ラベルは必ず外部に配置する：
かつてはプレースホルダーをラベルの代わりに使うデザインが流行しましたが、入力を始めるとプレースホルダーが消えてしまい、何を入力しているか分からなくなります。ラベルは入力フィールドの上（またはフローティングラベルとして）に常時表示することが基本です。
ラベルのサイズとフォントウェイト：
ラベルテキストは本文より少し小さめ（12〜14px）・Medium〜Semiboldウェイトで表示します。フィールドとラベルの間隔は4〜8pxが適切です。
必須・任意の表示：
- 「*（アスタリスク）」+ 「必須」の凡例表示（多数の必須フィールドがある場合）
- 任意フィールドにのみ「（任意）」を表示（必須が大半の場合に効果的）
どちらの方式でも、色のみで必須を示すことはアクセシビリティ上不適切です。
フローティングラベル（Material Designパターン）：
入力前はプレースホルダーのようにフィールド内に表示され、フォーカス時または入力後に上部の小さいラベルにアニメーションするパターン。コンパクトなフォームで省スペースだが、フォーカス前に何を入力するかが分かりにくいというデメリットもあります。
プレースホルダーの正しい使い方
プレースホルダーの役割：
ラベルではなく、「入力例・フォーマットの説明」として使います。例：「例: tanaka@example.com」「例: 03-1234-5678」
プレースホルダーに頼りすぎない：
フォームの説明として重要な情報（フォーマット・条件）をプレースホルダーにのみ書くと、入力中に確認できなくなります。重要な説明はアシストテキスト（フィールド下部の補足テキスト）に記載します。
アシストテキスト（ヘルプテキスト）
フィールド下部に表示する小さな説明テキストです。文字数制限・入力フォーマット・入力内容の詳細説明などを記載します。常時表示が基本ですが、スペースが限られる場合はフォーカス時のみ表示するパターンもあります。
入力フィールドの状態設計
デフォルト：
枠線（ボーダー）またはアンダーラインスタイル。背景色は白またはわずかにグレーがかった色。
フォーカス：
枠線の色をプライマリカラーに変え、太くすることでフォーカスを示します（例: 1px グレー → 2px ブルー）。フォーカスリングを明確に表示することがアクセシビリティの基本です。
入力済み（Filled）：
フローティングラベルを使う場合、入力後もラベルが上部に表示された状態を維持します。
エラー：
枠線を赤に変え、エラーアイコン（フィールド右端）とエラーメッセージ（フィールド下部・赤テキスト）を表示します。
成功：
パスワード確認・ユーザー名の重複チェックなど、入力が正しい場合にチェックマークアイコンと緑のボーダーで成功状態を示します。
無効（Disabled）：
グレーアウトした背景色・薄いテキスト・cursor: not-allowed で操作不可を示します。
リアルタイムバリデーションの設計
バリデーションのタイミング：
入力中（onChange）ではなく、フォーカスを外したとき（onBlur）にバリデーションを発動するのが一般的な推奨です。入力中に頻繁にエラーが出ると使いにくいためです。ただし、文字数カウンターや使用可能文字数の表示は入力中リアルタイムで問題ありません。
エラーメッセージの内容：
「入力が正しくありません」ではなく、「メールアドレスの形式で入力してください（例: name@example.com）」のように具体的に何が間違っているか・どう修正すればよいかを伝えます。
アクセシビリティ対応
`for` と `id` の紐付け：
と を必ず紐付けます。スクリーンリーダーがラベルを読み上げ、ラベルクリックでフォーカスが当たります。
エラーメッセージの通知：
バリデーションエラーは aria-describedby でエラーメッセージ要素のIDを参照し、aria-invalid="true" を設定することでスクリーンリーダーにエラー状態を伝えます。
まとめ
入力フィールドは「ユーザーが情報を渡す」UIの窓口です。ラベル・プレースホルダー・アシストテキスト・バリデーションの役割を整理し、各状態を丁寧にデザインすることで、フォームの完了率と使いやすさが大幅に向上します。UI ZUKANでは入力フィールドの実装例を多数掲載しています。