Form（フォーム）は、入力や変更などデータ操作のインタラクションを行う UI のパターンです。

1. 概要 (Overview)

説明

Web アプリケーションでは、フォームは以下のようなユースケースで用いられます。

• 登録フォーム
• ログインフォーム
• 決済フォーム
• 検索フォーム
• 予約フォーム

ペパボでは、この Web アプリケーション的な一括送信のフォームを設計する機会が多いため、ガイドラインにおいてもその傾向を反映しています。iOS や Android などのネイティブアプリはもちろん、今後リアルタイムで双方向の通信を活用したプロダクトを手掛ける場合も見据えて、即時反映的なフォームの設計についても記載していきます。

2. 構成要素 (Anatomy)

フォームラベル・入力フォーム・説明文・エラー文などをセットにしたレイアウトパターンです。

要素	Name	Description	Must
A	Fieldset label	field群を説明するタイトル
B	Fieldset description	fieldset-labelを補足するテキスト
C	Field label	Controlの入力値を簡潔に表現したテキスト	✓
D	Helper text	対象のcontrolに関する補足を簡潔に説明するテキスト
E	Field description	入力すべき値に関する説明
F	Fieldset	複数のFieldの集合
G	Field	LabelとControlを囲む要素	✓
H	Control	テキストフィールドやセレクトボックスなど入力を受け付ける要素を内包する要素	✓
I	Action	送信ボタンなどフォーム全体に対してアクションを実行する要素

補足

CField label

Controlの入力値を簡潔に表現したテキストです。Controlに応じて以下のようにマークアップしてください。

• テキストフォームやセレクトボックス
  • label要素を利用
  • for属性にControl内の要素のid属性の値を指定
• ラジオボタンやチェックボックス
  • span要素を利用

DHelper text

対象のControlに関する補足を簡潔に説明するテキストです。多くの場合は以下の理由から、Helper textを活用しなくてもよくなります。

何を入力するフィールドであるかは、ほとんどの場合field-labelで説明できます。まずはfield-labelで入力項目を簡潔に言い表すタイトルを検討してください。

入力対象のグループに対しての説明が不足している場合（例：複数のinput項目に対して同じような補足が必要なケースなど）は、fieldset-descriptionで一括して説明することを検討してください。

Helper textの文字量を不用意に増やすと、ユーザーが認識しなければいけない情報量が肥大化し、操作効率やユーザビリティに影響します。詳細に至るまでを説明しないと入力できないようなフィールドは、設計自体の見直しも検討しましょう。

• 使用すべき場合
  • アプリケーション側の制約（処理時間、反映タイミングなど）をユーザーが知る必要がある場合
  • 専門用語や馴染みのない語の意味を理解することで適切な入力が可能になる場合
• 使用を避けるべき場合
  • 入力フォームの構造やヘルプページで説明できる内容の場合
  • ユーザーが意識する必要のない技術的な詳細の場合
  • 「必須」や「例」など、Helper textとは異なる役割を持つ要素の場合

HControl

入力を受け付ける要素をまとめたグループです。この要素は末尾に配置します。ユーザーが入力すべき内容を認知できるように、予めField labelやField description、Helper textで入力についての説明を完了させておく必要があります。この要素の下に配置された要素は、オートコンプリート機能によって隠されてしまう可能性があることに注意してください。

Controlには以下のコンポーネントを使用できます。

• Textfield
• Radio
• Checkbox
• Select

IAction

フォーム全体に作用するsubmitボタン（送信・保存・ログイン・変更など）を設置できます。また、ステップ形式のフォームでは「次へ」や「戻る」ボタンが使用されることがあります。

• Button

3. 使い分け (Usage)

いつ使うか

• 登録・ログイン・決済・検索・予約など、ユーザーの入力を受け付けてデータ操作を行うとき
• 複数の入力項目をまとめて扱い、ラベル・説明・エラーなどを構造的に配置したいとき

いつ使わないか

• 単発のアクション（クリックのみで完結する操作）には Button など単体のコンポーネントを用いる
• 設定の即時切り替えのみを行う場合は、フォームのレイアウトを組まずにコントロール単体で完結させることを検討する

送信方式の考え方

ペパボでは Web アプリケーション的な一括送信のフォームを設計する機会が多いため、まずは一括送信を前提に設計します。一方で、リアルタイムで双方向の通信を活用するプロダクトでは、入力のたびに反映する即時反映的なフォームも選択肢になります。コンテクストに応じて、操作の誤りに対する可逆性やフィードバックの設計を検討します。

4. バリエーション (Variants)

Fieldset

複数の Field をまとめる場合は Fieldset を用い、Fieldset label と Fieldset description で field 群を説明します。関連する入力項目のまとまりを明確にしたいときに使用します。

5. ステート (States)

フォームは内包する Control（Textfield、Radio、Checkbox、Select など）のステートに従います。各コントロールの Enabled / Focused / Disabled / Error などのステートは、それぞれのコンポーネントのドキュメントを参照してください。

エラー時は対象の Field に対してエラー文を表示し、どの入力に問題があるかを明確にします。

6. アクセシビリティ (Accessibility)

このコンポーネント固有のチェック項目です。コントラスト・フォーカス可視化など全コンポーネント共通の原則はアクセシビリティガイドラインを参照してください。

• Field label は <label> の for 属性で対応する Control と関連づける（ラジオボタン・チェックボックスのグループは <fieldset> / <legend> を用いる）
• Helper text や Field description は aria-describedby で対応する Control に関連づけ、スクリーンリーダーでも補足が伝わるようにする
• 必須項目はラベル上で明示し、視覚と支援技術の双方に伝わるようにする
• エラー文は対象の Control に関連づけ、フォーカス移動やエラーサマリーでエラー箇所にたどり着けるようにする
• Control はオートコンプリートを阻害しない順序で配置する

7. ライティング (Writing)

• Field label は入力項目を簡潔に言い表すタイトルにし、まずはラベルだけで何を入力するフィールドかが伝わるようにする
• Helper text は濫用せず、ユーザーが認識すべき情報量を増やしすぎない。アプリケーション側の制約や専門用語の補足など、本当に必要な場合に限って用いる
• 「必須」や「例」など Helper text とは異なる役割の情報は、Helper text に混ぜずにそれぞれの役割の要素として表現する