Pixsoでステッパーを作る：アカウント登録フォームのコンポーネント設計

使いやすいステッパー（手順の進み具合を示すコンポーネント）は、現在の位置、完了した作業、対応が必要な箇所、入力を失わずに移動する方法を伝えます。このチュートリアルでは、Pixso で「アカウント」「組織」「設定」「確認」の 4 段階からなる具体的なアカウント登録フローを作成します。再利用可能なステップの状態、レスポンシブなレイアウト、入力エラーからの復帰、送信時のフィードバック、実装用の注釈を備えた、編集可能な複数ステップのフォーム UI を仕上げます。

ステッパーを描く前に手順を定義する

丸い番号や接続線を描く前に、フォームが満たすべき条件を定義します。アカウント登録の例では、各ステップの目的、必須項目、入力検証の担当、完了を確認する情報を書き出します。「アカウント」ではメールアドレスとパスワード、「組織」では会社名と会社規模を収集します。「設定」では通知の希望を選び、入力は任意にします。「確認」では、アカウントを作成する前に、入力内容を読みやすくまとめて表示します。

一連の手順が何を意味するかも決めます。進捗を示すステッパーは、作業に明確な段階があり、残りの手順を知ることが利用者の助けになる場合に適しています。入力項目が 2 つしかないフォームや、各段階が自動で進む処理には向いていません。簡単そうに見せるためだけに短いフォームを分割するのは避けましょう。ステップを増やすたびに、移動、入力状態の保持、復帰方法を設計する必要が生じます。

この状態モデルを使うと、すべての項目が正しく見えるだけで、処理全体を完了扱いにしてしまう誤りを防げます。項目の入力が有効であること、ステップの完了、送信中、送信失敗、アカウント作成の成功は、それぞれ別の状態です。

Pixso で基本のステップ項目を作る

デザインツールの Pixso でファイルを開き、再利用できる最小単位となる 1 つのステップ項目を作成します。インジケーター、ラベル、必要に応じた補足テキスト、接続線を追加します。オートレイアウトでインジケーターとラベルの間隔を管理し、項目自体も親のオートレイアウトフレームに配置します。これにより、文字が長くなっても手動で位置を調整せずに済みます。

構成が固まったらコンポーネントにします。名前は見た目ではなく機能に基づき、例えば Stepper/Item とします。編集可能なコンポーネントには、ラベルと補足文のテキストプロパティ、および意味の明確な状態バリアントを用意します。状態は「未着手」「現在」「完了」「エラー」とし、ワークフロー上で実際にアクセスを禁止する場合に限って「無効」を使います。関連するコンポーネントとバリアントの整理方法は、Pixso のコンポーネントに関するドキュメントで確認できます。

状態を色だけで伝えないようにします。現在のステップには明確なラベルや特徴のあるインジケーター、完了にはチェックマーク、エラーにはアイコンと説明文を組み合わせます。通常の表示倍率でラベルを読めるようにし、完了したステップを操作できる場合は、十分なクリック・タップ領域を確保します。

横型と縦型のステッパーを組み立てる

ステップ項目のインスタンスを 4 つ配置し、親コンポーネントを Stepper/Account onboarding と名付けます。広い画面では、長さが調整される接続線を使って横に並べます。狭い画面では縦に並べるか、「全 4 ステップ中 2」のような簡潔な見出しと現在のラベルを組み合わせます。4 つのラベルを読めなくなるまで縮めても、レスポンシブ対応にはなりません。

サイズを決めるときは、実際のラベルを使います。「ステップ 2」では見えない余白の問題も、「組織の詳細」なら見つかります。完了、現在、エラー、未着手を組み合わせて確認してください。ワークフロー上、先のステップに進めない場合は、選べるように見せてはいけません。移動できる完了済みのステップと、情報表示だけの未着手ステップを、見た目でも区別します。

レイヤーパネルの階層は、ステッパー、項目、インジケーター、状態アイコン、ラベル、補足文、接続線のように一貫させます。Pixso のコンポーネント構造と共有ライブラリを使えば、この構成を複数の画面で維持できます。ただし、元のコンポーネントを更新した後は、デザイナーが各インスタンスを確認する必要があります。個別のラベルや状態の上書きがある場合は、特に注意してください。

フォームの共通部分と移動時の状態を作る

ステッパーの下に、タイトル、短い説明、入力項目のグループ、インラインメッセージの領域、操作ボタンの行を含むフォームの共通部分を作ります。ステップを切り替えても画面が急にずれないよう、コンテンツ幅をそろえます。「戻る」と「次へ」は一定の位置に置き、「確認」のステップだけで最終操作を「アカウントを作成」に変更します。

デザインファイルでは、移動に伴う状態を別のフレームや状態グループとして表します。

• 入力可能：必須項目を入力でき、選択した検証方針に従って「次へ」が有効になります。
• 入力エラー：入力値を表示したまま、エラーの要約で該当する項目を示し、フォーカスを移す意図を注記します。
• 保存中：次のステップへの移動がサーバーの応答を待っている状態で、同じ操作の連続実行を防ぎます。
• 保存失敗：修正や再試行に使えるよう入力値を残します。ただし、セキュリティ方針で扱いを定めた機密項目は除きます。
• 復元済み：戻ってきた利用者に、以前保存した進捗と、最後に確定したステップを表示します。

情報が不足している理由を、「次へ」ボタンを無効にするだけで伝えようとしないでください。ボタンが使えない場合は、近くに満たしていない条件を表示します。多くのフォームでは、操作を受け付けてから具体的な入力検証の結果を示すほうが、使えない理由を利用者に探させるより分かりやすくなります。

同じ例でエラーからの復帰を設計する

「アカウント」のステップでは、無効なメールアドレスを入力されたまま表示し、必要な形式を説明するインラインメッセージと、項目へ移動できるエラーの要約を示します。ステップのインジケーターをエラー表示にするのは、検証を実行した後です。利用者が通常の入力を続けている最中から赤く表示しないようにします。

「確認」から「組織」へ戻った場合は、有効な入力も無効な入力も保持し、利用者が状況を理解して修正できるようにします。パスワードなどの機密情報は、セッションが切れた後に別の扱いが必要な場合があります。すべての値が必ず保持されると約束するのではなく、その例外を文書化してください。

「確認」のステップには、「組織情報を編集」のように移動先が分かる編集リンクが必要です。前の入力を変更したことで、後の選択肢の利用条件が変わる場合は、該当するステップを再確認の対象として示します。条件に合わなくなった選択を黙って残してはいけません。これにより、複数ステップのフォーム UI で項目間の依存関係を正確に伝えられます。

確認、送信、成功を分ける

確認用のフレームでは、パスワードを表示せずに「アカウント」「組織」「設定」の内容をまとめます。利用者は前のステップへ戻って編集し、再び確認画面へ進めます。「アカウントを作成」を選ぶとフォーム全体の送信が始まります。これは、確認ステップを完了することとは別です。

「送信中」「失敗・再試行可能」「成功」のフレームを明確に作ります。送信中は、それまでの内容が分かる状態を保ち、進行状況を示すラベルを表示して、重複リクエストを防ぎます。失敗した場合は、安全に再試行できるかを説明し、機密性のない入力は残します。成功した場合は、アカウントのメールアドレスや明確な次の操作など、アカウントが作成されたと確認できる情報を示します。各項目の横に緑のチェックが並んでいても、それだけでアカウント作成の成功は証明できません。

Pixso のコメントを使い、プロダクト担当と開発者で状態遷移をレビューします。デザインファイルは意図する動作を伝える資料です。実装では、実際の入力検証、状態の保持、キーボードの操作順、フォーカスの移動、読み上げ、リクエストの重複防止、セキュリティを検証しなければなりません。

レビューと開発への引き継ぎに備える

同じデザインファイルに説明用のページを設け、コンポーネントの構成、バリアント、レスポンシブの例、アカウント登録の各画面を配置します。ステッパーを使う条件、実用上のラベル長の上限、完了済みステップを選択できるか、検証のタイミング、入力保持のルール、モバイルでの代替表示といった利用上の注記も加えます。

チームの管理方針に従い、承認済みのコンポーネントをチームライブラリへ公開します。開発者は共有ファイルで、余白、文字組み、素材、注釈を確認できます。コード生成を利用する場合も、生成物は開発者がレビューするための出発点として扱ってください。本番のフォームがデータやアクセシビリティを正しく処理できることの証明にはなりません。Pixso の共同作業フローを使うと、該当するフレームにコメントと引き継ぎの背景情報をひも付けて残せます。

ラベル、番号、アクセシビリティ上の意図を確認する

ステップ番号は順序の理解を助けますが、唯一のラベルにしてはいけません。「組織の詳細」がなければ、「ステップ 2」だけでは内容がほとんど分かりません。実装した複数ステップのフォーム UI では、現在のステップをプログラムからも識別できる必要があります。完了やエラーを示す視覚的なアイコンには、同じ意味のテキストが必要です。ページタイトルとステッパーが、互いに矛盾する現在位置を読み上げないようにします。

200% の拡大表示と長い翻訳文を使って、ステッパーの設計を確認します。状態の説明が正しいステップのそばにあり、接続線が未完了のステップを完了したように見せず、縦型レイアウトが自然な読み順になっていることを確かめます。完了済みのステップをリンクにする場合は、リンク名で移動先を伝えます。操作できない場合は、ボタンのような見た目にしないでください。

ステッパーの設計を文書化するときは、「次へ」「戻る」、入力検証の失敗、送信失敗の後に、フォーカスをどこへ移すかも記録します。デザインのフレームだけではフォーカスの実際の動作を証明できませんが、実装時の曖昧さを減らせます。新しいステップの見出し、最初の無効な項目、エラーの要約のどこへ移すかを明記し、ブラウザーでその動作をテストしてください。

ステッパーコンポーネントの設計チェックリスト

• 手順が実際のユーザーの作業に対応し、都合だけでページを分割していない。
• 現在、完了、未着手、エラー、利用不可の各状態を、見た目と文字の両方で区別できる。
• 色だけを状態の手掛かりにしていない。
• 完了済みのステップへ戻れるか、先のステップへ進めるかが明確になっている。
• 戻る操作でも、セキュリティ方針に従って修正可能な入力が保持される。
• 項目の有効性、ステップの完了、フォームの送信、最終的な成功を別々に扱っている。
• 長いラベルや狭い画面には、意図して設計したレスポンシブのバリアントを使っている。
• エラー表示が問題を特定し、修正や再試行の方法を伝えている。
• 実装時のテストで、キーボードの操作順、フォーカス、読み上げ、入力の保持、重複送信を確認している。

まとめ

優れたステッパーコンポーネントは、ワークフローの条件から設計を始め、エラーから復帰できることを検証して仕上げます。番号付きの円を装飾として並べるだけでは十分ではありません。Pixso で再利用可能なステップの状態を作り、レスポンシブのバリアントを組み立て、1 つの完全な複数ステップのフォーム UI に適用します。移動、入力検証、状態の保持、送信、成功を文書化すれば、実装前にデザインと開発の双方が具体的に確認できる、編集可能なコンポーネント一式になります。