フォームUIの設計手順：入力項目から送信・エラー・完了まで

フォームのUIは、入力欄を並べる前に「何を受け付け、いつ検証し、送信後に何が起きるか」を決めると設計しやすくなります。ここでは架空のチーム向けサービスで、ワークスペースを作成する登録フォームを一つ作ります。項目の要件から部品、入力エラー、送信中、失敗からの再試行、完了までを同じ例でつなぎ、Pixsoで試作して開発へ渡すところまで進めます。

1. 登録フォームの目的と、各項目の要件を決める

このフォームの目的は、新しいチームのワークスペースを作ることです。アカウントの作成、使い始める際の設定、利用規約への同意に必要な情報を集めます。他の登録画面にあるという理由だけで、質問を増やさないようにしましょう。

まずPixso Whiteboardに要件表を置きます。表、フローチャート、ブレインストーミングやPRDの構成を使うと、プロダクト、デザイン、コンテンツ、セキュリティ、開発の担当者が初期の判断を共有できます。一項目につき一行を設け、必須条件を誰が決めるか確認してから、詳細な画面デザインに進みます。

製品の条件と、画面上の見せ方は分けて考えます。「チームの人数は一つの値」という要件に対し、ラジオボタンとセレクトのどちらが適切かは画面設計の判断です。パスワードの条件はセキュリティ担当が定め、デザイン側で独自の規則を作らず、必要な説明を表示します。この区別があると、入力検証の仕様も確認しやすくなります。

同じ情報をスプレッドシートから取り込む場合は、確定前に列の意味と変更内容を確認する工程が必要です。列の対応付けと取り込み前プレビュー（英語）では、その別の入力経路を扱っています。

2. 情報を整理し、Pixsoで最初の画面を作る

項目を「アカウント情報」「チーム設定」「同意と作成」の三つに分けます。アカウント情報には仕事用メールアドレスとパスワード、チーム設定には人数、国・地域、関心のある用途、最後のグループには利用規約と作成ボタンを置きます。基本は一列とし、ラベルと値を上から順に追えるようにします。スマートフォンでも順序を変えず、パソコンでは余白を埋めるためだけに無関係な項目を横並びにしません。

配置案を比較したいときは、PixsoのAIパネルでAI Designを選び、次のように依頼できます。

チーム用ワークスペースの登録フォームを作成してください。グループは「アカウント情報」「チーム設定」「同意と作成」の三つです。仕事用メールアドレス、パスワード、チームの人数、検索できる国・地域、任意の関心のある用途、利用規約への同意、ワークスペースを作成するボタンを含めてください。パソコンとスマートフォンの画面、および通常、項目エラー、送信中、サーバーエラー、作成完了の状態を用意してください。

生成結果をPixsoへ取り込み、1章の要件表と一項目ずつ照合します。勝手に追加された質問は取り除き、ラベルを直し、不足する状態を補います。AIの出力は配置を検討するための出発点です。承認済みのデータ仕様やアクセシビリティの検証結果にはなりません。この段階では、表の六項目すべてに操作対象があり、担当の決まっていない質問が増えていないことを確認します。

登録画面の構成を作る手順

1. パソコン用とスマートフォン用のフレームを作ります。
2. 三つのグループを、同じ順序で配置します。
3. 利用規約のチェックボックスの後に「ワークスペースを作成」を置きます。
4. ボタンの後に、送信状況を伝える短い表示領域を設けます。
5. 各項目と要件表の行を対応付けるメモを、フレームの横に置きます。

3. ラベル、入力部品、補足説明、状態を設計する

最初に仕事用メールアドレスの部品を作ります。ラベルは「仕事用メールアドレス」、入力例は「name@company.com」とします。「仕事で確認できるアドレスを入力してください」のような補足は、判断に役立つ場合に加えます。入力後もラベルを残し、エラー時には値を消さず、「name@example.comの形式で入力してください」と修正方法を伝えます。

操作部品は、値の選び方に合わせます。チームの人数は短い選択肢から一つを選び、検索も不要なので、標準のセレクトが候補になります。国・地域は候補が多く、文字を入力して絞り込めるコンボボックスが向いています。関心のある用途は互いに独立した選択なので、チェックボックスで未選択または複数選択を許します。「複製」「削除」のような命令を実行する操作メニューを、そのまま値の選択に流用しないでください。W3Cのコンボボックスパターン（英語）は、編集可能な方式と選択専用の方式、キーボード操作を整理する際に役立ちます。

PixsoではInput/Textという部品を作り、Default、Focus、Filled、Error、Disabled、Read-onlyのバリアントを用意します。これらは、それぞれ通常、フォーカス、入力済み、エラー、無効、読み取り専用を表す、このプロジェクト内の状態名です。項目ごとの成功表示は、それ自体に意味がある場合だけ加えます。入力欄が緑になっても、フォーム全体の送信が終わったとは限りません。「送信中」「送信失敗」「ワークスペース作成完了」は、フォーム全体の状態として扱います。

金額を入力するフォームでは、表示やエラーを作る前に、通貨・区切り文字・小数桁数のルールを決めておくと、入力値の解釈がぶれません。

Auto Layoutで、ラベル、入力欄、補足またはエラーメッセージを縦に積み、左揃えと名前付きの間隔を設定します。Pixso AIの公式説明（英語）によると、Smart Layoutは選択範囲へAuto Layoutを追加できますが、単一レイヤーやSectionには適用できず、すでにAuto Layoutを使うレイヤーは変更しません。Smart Renameは、対象レイヤーの名前を提案し、利用者が付けた名前を上書きしない仕組みです。インスタンスとその内部、非表示・ロック中のレイヤー、単独の図形・ベクター・テキストなどは対象外です。提案された名前もチームの命名規則に照らして確認します。

4. 入力検証、エラーからの修正、送信結果を分ける

入力検証は、通常の入力を邪魔せず、問題の修正を助けるために使います。まだメールアドレスを入力している途中で、すぐに「無効です」と表示しないようにします。この例のサービスではalex@studioを受け付けない形式ルールを採用します。そのまま進む、または送信する操作をしたら、値を残して「name@example.comの形式で入力してください」と伝えます。すべてのメールアドレスに共通する判定ではなく、このサービスの要件です。採用する実装パターンに合わせて項目またはエラー一覧へフォーカスを移し、alex@studio.comへ直した後、再検証してからエラーを解除します。

GOV.UKの入力検証ガイド（英語）は、利用者が入力した内容を再表示し、理解して修正できるようにする考え方を示しています。検証に通った値だけでなく、直す必要がある不正な値も残すことが重要です。一方、機密性の高い項目は別の方針が必要です。一時的なクライアント側エラーなら現在の安全な操作中だけパスワードを保てる場合がありますが、セッション切れや認証上の境界では消去と説明が必要になることがあります。「すべて保持する」という一律の規則だけで、パスワードや決済情報などを永続化しないでください。

検証するタイミングは、項目と条件に応じて決めます。登録フォームでは、次の使い分けを確認します。

続いて、フォーム全体の三つの状態をPixsoに加えます。「送信中」は機密性の低い入力値を見える状態で保ち、ボタンを「ワークスペースを作成中…」へ変え、進行表示と二重操作の防止を設けます。「送信失敗」は何が起きたかを分かる言葉で伝え、「再試行」を用意します。各項目の横に緑のチェックを付けても、この失敗は解決しません。「作成完了」はサーバーの成功応答を確認した後に表示し、次の移動先を示します。W3Cのフォーム通知ガイド（英語）を参考に、エラーと成功を支援技術にも伝える方法を決めます。

5. 検索できる選択項目と、条件付きの項目を作る

国・地域には、実際に値を選ぶコンボボックスの動作を定めます。入力によって候補を絞り、矢印キーで候補間を移動し、Enterで選択、Escapeで候補を閉じます。候補がない場合、選択を消す操作、入力文字列が対応する選択値と一致しない場合も記録します。候補が短く検索する必要がなければ、標準のセレクトを選びます。

チームの人数で「51人以上」を選んだ場合だけ、任意の「会社名」を直後に表示します。実装では追加された項目を適切に通知します。「2〜10人」に戻した場合は、製品の方針で消去が必要でない限り、その操作中の会社名を保持します。消去する仕様なら、値を取り除く前に結果を説明します。

配送先を入力するフォームでは、国の変更に伴う項目の切り替えも必要です。国別の住所フォーム設計例では、入力済みの値、手入力への切り替え、住所候補の確認をどう扱うかを整理しています。

フォーム全体を複製し続ける代わりに、ラベル、メッセージ、アイコン、状態、任意項目の表示をコンポーネントのプロパティで整理します。Input/Textを変更してインスタンスへ反映したら、各登録画面でメッセージの折り返し、間隔、位置、意図しない上書きを確認します。変更の反映は確認作業まで自動化するものではありません。チームやPixsoコミュニティの素材を探す場合も、再利用する部品の操作とアクセシビリティを確かめます。

6. アクセシビリティと画面幅への対応を具体化する

フレームの横に、実装時の意味付けを記録します。メールアドレスとパスワードにはプログラムから分かるラベルを付け、補足やエラーを対応する入力欄に関連付けます。人数は一つの名前を持つ単一選択、関心のある用途はグループ名を持つ複数選択です。利用規約はチェックボックスの名前と規約リンクを利用できるようにし、文章全体が操作しにくい一つの領域にならないようにします。どの状態でもキーボードのフォーカスを見えるようにします。

送信状況の通知も設計します。項目のエラーはその項目に対応付け、フォーム全体の表示領域は「作成中」、再試行できる失敗、確認済みの成功を伝えます。小さな更新のたびにフォーカスを動かしません。送信失敗後、複数の問題へ移動する助けになる場合はエラー一覧にフォーカスを置きます。成功後は、実装する流れに合わせて完了見出しへ移すか、確定した次の画面へ遷移します。

スマートフォンでも項目順を保ち、入力内容に合うソフトウェアキーボードを使います。固定の操作バーが規約やエラーを隠さないようにします。パソコンでは短い入力欄を画面いっぱいに伸ばさず、フォームの最大幅を定めます。200%の拡大、長い翻訳、長いメールアドレス、対応する場合の右から左への表示、国名の地域差を確認します。Smart Textは翻訳案の検討に使えますが、最終文言は言語、法務、プロダクトの担当者が確かめます。

7. Pixsoで登録の六つの状態をつないで確認する

キャンバスに「01 通常」「02 メールのエラー」「03 送信可能」「04 送信中」「05 サーバーエラー」「06 作成完了」の六つのフレームを順に置きます。全状態で同じ入力例を使い、入力検証から非同期の送信、失敗、完了までを追えるようにします。

プロトタイプのプレビューを開き、alex@studioを直して「02 メールのエラー」から「03 送信可能」へ進む動作を確認します。「04 送信中」では待つ必要があると分かるか、「05 サーバーエラー」からは機密性の低い入力値を失わずに再試行できるかを見ます。対面の説明で使う場合も、使用する端末と会場の通信環境で、必要な画面と操作を事前に確認しておきます。

共有した画面には、操作対象が分かる位置へコメントを残します。担当者が同時に集まるレビューでも、各自が後から確認するレビューでも、「修正方法が分かるか」「送信中と完了を区別できるか」「失敗後に何を押すか」を共通の問いにします。指摘は該当する状態に結び付け、単に画面が整っているかだけを評価しないようにします。

8. 状態を試し、仕様とD2Cの出力を開発へ渡す

引き渡し前に、必須項目が空、メールが未完成、メール修正後、パスワード条件の案内、未対応の国・地域、人数51人以上と会社名、規約未同意、送信中、送信中の再操作、再試行可能なサーバーエラー、セッション切れ、確認済みの成功を通します。パソコンとスマートフォンの両方で、メッセージの折り返しが次の操作対象を不意に動かさないか、合意したセキュリティ方針の範囲で値を確認・修正できるかを見ます。

項目名、部品の出典、形式、検証のタイミング、正確なメッセージ、依存関係、画面幅ごとのルール、フォーカス、ライブリージョン、値の保持方針を記録します。フレームと、その状態が必要になる要件を対応付けます。リンク共有とコメントを使い、判断の理由をデザインの近くに残します。

コード出力を伴う引き渡しにはDesign to Code（D2C）を使えます。PixsoのD2C公式ガイド（英語）では、Design ModeとDev Modeでの利用が説明されています。React、Vue、HTML、ArkUI、Flutterから出力先を選び、その方式の設定を確認し、対象フレームやレイヤーを選択してコードを生成します。プロジェクト構成と素材を確認してから、コードのパッケージをダウンロードします。Design Modeにはデザインの最適化もあり、Dev Modeでは閲覧、生成、書き出しを中心に扱います。

D2Cの出力だけで、フォームの動作が完成するわけではありません。開発者は意味のある入力部品、ラベルとメッセージの関連付け、安全な認証情報の処理、実サービスへの接続、リクエストの重複防止、結果の通知、サーバー側検証、分析の実装を行い、キーボードと支援技術で試す必要があります。通常画面だけでなく、六つの状態すべてを実装と比較します。

フォームUIの引き渡し前チェック

• 六つの項目すべてに、目的、条件、要件の担当者がある。
• 各操作に見えるラベルがあり、必要な形式はエラー前にも説明されている。
• 人数は単一選択で、国・地域には検索が役立つためコンボボックスを使っている。
• メールのエラーでもalex@studioを残し、その場で直せる。
• 機密性の高い値は、一律の保持ではなく明示したセキュリティ方針で扱う。
• 送信中の重複操作を防ぎ、進行状況を認識できる。
• 送信失敗から再試行でき、項目の妥当性を処理成功と取り違えない。
• 作成完了は、成功応答を確認した後だけに表示する。
• Pixsoのプロトタイプで、通常、エラー、送信中、再試行、完了をつないでいる。
• D2Cの後にも、意味付け、セキュリティ、サーバー処理、アクセシビリティの実装を行う。

入力から完了まで、一つの仕事として設計する

フォームでは、何を入力し、どう直し、処理が終わったかを利用者が判断できることが大切です。ワークスペース登録の例では、項目の要件を起点に、部品、条件付きの表示、検証、送信状態、プロトタイプ、D2Cによる引き渡しまでをつなぎました。自分の製品に使うときは、入力例の規則を承認済みの要件へ置き換えます。Pixsoで計画、画面、レビュー、試作、コード出力を関連付けつつ、プロダクト、セキュリティ、アクセシビリティ、開発の担当範囲も明確にしましょう。