フォームの型の選び方
フォームの型は、「何を、どれだけ聞くか」「入力をどう助け、必要な情報を受け取るか」「送信の前後をどう扱うか」の3つで変わります。まず問い1で土台になる型を1つ選び、必要に応じて問い2・問い3の型を組み合わせます。型を選んだら、各Patternのページでワイヤーフレームとプロンプト、動くデモを確認できます。
問い1：何を、どれだけ聞きますか？
フォームの土台になる型です。聞く項目の量と、項目の決まり方で選びます。
| 聞く内容 | 向く型 |
|---|---|
| 項目が少なく、1ページで無理なく入力してほしい | 1ページ完結型 |
| 項目が多く、段に分けて入力してほしい | ステップ分割型 |
| ご相談の種類によって、聞く項目が変わる | 条件分岐型 |
| 空いている日時を選んで、予約を申し込んでほしい | 日時予約型 |
問い2：入力をどう助け、必要な情報を受け取りますか？
土台の型に加えて、入力の迷いを減らしたり、文字だけでは足りない情報を受け取ったりする型です。当てはまるものだけを組み合わせます。
問い3：送信の前後をどう扱いますか？
フォームの型の比較
| 型 | 役割 | 解決すること | 向くフォーム |
|---|---|---|---|
| 1ページ完結型 | 入力の組み立て | 項目を絞り、すぐに送れるようにする | 問い合わせ、資料請求 |
| ステップ分割型 | 入力の組み立て | 項目の多さによる負担を、段に分けて軽くする | 申し込み、会員登録、見積もり依頼 |
| 条件分岐型 | 入力の組み立て | 関係のない項目を見せず、必要な項目だけを聞く | 種類の多い問い合わせ、見積もり依頼 |
| その場エラー表示型 | 入力を助ける | 入力の誤りを、その場で気づいて直せるようにする | 項目の形式が決まっているフォーム全般 |
| 確認画面型 | 送信の前後 | 送る前に、入力した内容を落ち着いて見直せるようにする | 申し込み、予約、金額に関わる依頼 |
| 送信完了型 | 送信の前後 | 送れたかどうかの迷いをなくし、次の流れを伝える | ほとんどのフォーム |
| FAQ併設型 | 入力を助ける | よくある質問で解決できることを、送る前に見つけてもらう | サポート窓口、サービスの問い合わせ |
| ファイル添付型 | 入力の組み立て | 資料や写真を、失敗しても入力を失わずに添えられるようにする | 見積もり依頼、不具合の相談、応募 |
| 日時予約型 | 入力の組み立て | 空いている枠を選ぶだけで、日時の調整を済ませる | 無料相談、見学、来店、面談の予約 |
すべての型に共通する設計の原則
フォームの型を作る中で、型が違っても繰り返し出てきた原則です。どの型を選んでも、次の点は同じように確かめます。
- 補助的な仕組みで、不必要に送信を妨げない。よくある質問や入力の支援は読み手を助けるために置き、それを使わないと送れない作りにはしない。確認画面など送信前の段階を増やす場合は、必要性があるときだけ使う
- 入力した内容を失わせない。エラー、修正のための戻り、ファイルの失敗、予約枠の埋まりなど、どの場面でも入力を残したまま直せるようにする
- 画面上の判定だけに頼らず、サーバー側でも入力内容・ファイル・予約の空きを確認する。送信や予約は、同じ内容が重複して処理されないようにする
- 状態の変化を、見た目と読み上げの両方で伝える。フォーカスは必要な場面だけで動かし、読み上げは短くする
- 個人情報を、必要以上に残さない・見せない。書きかけの内容やURLのパラメータ、ファイルの保存場所まで確かめる
- 成果を計測する場合は、完了ページの表示回数だけで数えず、送信が成功した時点で1回だけ数えられるようにする
- ラベルと入力欄を結び付け、必須・任意を明記し、入力欄の種類と自動入力の設定をそろえる
- ワイヤーやサンプルの項目・文言は「表示例」と明記し、実際の運用に合わせて置き換える
組み合わせの例
- 制作会社の問い合わせ：条件分岐型でご相談の種類ごとに項目を変え、ファイル添付型で資料を添えられるようにする。その場エラー表示型で入力の誤りをその場で伝え、送信後は送信完了型で返信の目安を示す
- サービスのサポート窓口：1ページ完結型を土台に、FAQ併設型でよくある質問を横に添え、送信完了型で受付番号と返信の目安を伝える
- 有料サービスの申し込み：項目が多い場合はステップ分割型で段に分け、送る前に確認画面型で見直してもらい、送信完了型で手続きの流れを伝える
- 無料相談の予約：日時予約型で空いている日時を選んでもらい、送信完了型で予約が確定するまでの流れと、変更・取り消しの方法を伝える
よくある質問
型は1つに絞らないといけませんか?
いいえ。問い1で選んだ型を土台にして、問い2・問い3で選んだ型を組み合わせます。たとえば、条件分岐型の問い合わせフォームに、その場エラー表示型の確かめ方と、送信完了型の完了画面を加える、といった形です。組み合わせるときも、読み手が迷わずに送れることを最優先にして、必要のない仕組みは加えないようにします。
確認画面は、すべてのフォームに必要ですか?
必ずしも必要ではありません。項目が少なく、送信ボタンの前で内容を見直しやすいフォームなら、確認画面を置かずにそのまま送る形も選べます。申し込みや金額に関わる内容のように、送信後の手続きに影響する場合は、確認画面を置く意味が大きくなります。
型を選んだあとは、何をすればいいですか?
各Patternのページで、PC・SPのワイヤーフレーム、その型が効く理由、制作時のよくある失敗を確かめてから、プロンプトをコピーしてAIや制作会社に渡します。動くデモで、入力やエラーの動きを実際に試すこともできます。判断ポイントの「向かないケース」に当てはまる場合は、そこで案内している別の型に切り替えます。
フォームで個人情報を扱うときは、何に気をつければよいですか?
聞く項目を必要なものに絞り、利用目的を送信前に分かるように示します。取り扱う情報や利用方法に応じて、必要な同意も確認します。書きかけの入力内容や添付ファイル、完了画面のURLなど、送信の前後で個人情報が意図しない場所に残らないようにすることも大切です。実際の運用では、個人情報保護委員会のガイドラインなどの原文を確認し、必要に応じて専門家に相談します。