小さなプロダクトの画面を迷わず設計する
画面設計は、色や角丸を決める作業から始まりません。利用者が何を知り、何を選び、どこで迷い、どの状態へ進むかを見える形にする作業です。
最初に中心となる一つの流れを文章で決め、白黒の簡単なワイヤーフレームにします。正常に終わる画面だけでなく、データがない、入力を間違えた、処理に失敗した状態まで揃えてから見た目を整えると、公開後に大きく作り直す範囲を減らせます。
1. 一画面の役割を一文にする
画面ごとに「この画面を見終えた利用者が、何を理解または完了できるか」を一文で書きます。
読書記録アプリの登録画面なら、役割は「本の題名を入力し、記録へ追加できる」です。「サービスを理解し、登録し、過去の本を探し、おすすめも見る」では目的が多すぎます。
役割が決まったら、情報を次の順で並べます。
現在地が分かる見出し
操作前に必要な短い説明
主要な入力または情報
最も重要な操作
戻る、取消、補足などの補助操作
主要操作は一画面に一つを基本にします。複数ある場合は、どちらを先に行うのかを視覚的な強さと配置で示します。すべてのボタンを同じ色と大きさにすると、利用者は重要度を読み取れません。
2. 中心となる一周を画面に分ける
利用開始から結果までを、画面名ではなく行動で並べます。
記録したい本を決める
→ 題名を入力する
→ 内容を確認して追加する
→ 一覧で追加結果を確かめる
→ 必要なら修正する各段階について、利用者が知っていること、行う操作、操作後に分かる結果を書きます。画面を増やすのは、情報が多いからではなく、判断を分けた方が誤りを減らせる場合です。
確認画面も自動的には追加しません。取り消せる小さな操作なら、保存後に結果と取消手段を示す方が速い場合があります。支払い、削除、外部公開など重大で戻しにくい操作では、対象と結果を確認する段階を設けます。
3. 五つの状態を同じ設計として描く
完成した一覧だけでは、実際の画面を設計したことになりません。各画面で次の状態を確認します。
| 状態 | 利用者が知る必要があること | 用意するもの | | --- | --- | --- | | 初回・空 | まだ何もない理由と最初の行動 | 説明、開始ボタン、必要なら例 | | 読み込み中 | 処理が進んでいるか | 状態表示、二重操作の防止 | | 入力エラー | どこをどう直すか | 項目近くの具体的な文章 | | 処理失敗 | 保存されたか、次に何をするか | 再試行、入力保持、問い合わせ手段 | | 完了 | 何が完了し、次に何ができるか | 結果、次の操作、取消手段 |
通信に失敗した画面で「エラーが発生しました」だけを出しても、利用者は再送してよいか分かりません。「保存されていません。入力内容は残っています。通信を確認してもう一度保存してください」のように、結果と回復方法を示します。
4. 操作部品を意味から選ぶ
リンクは別の場所へ移動するため、ボタンは現在の画面で処理を行うために使います。見た目をそろえるために役割を入れ替えると、キーボード操作や支援技術で意味が伝わりにくくなります。
入力欄には、入力後も残るラベルを付けます。プレースホルダーだけをラベルにすると、入力中に項目名が消えます。必須か任意か、文字数や形式の条件も操作前に示します。
WCAG 2.2のターゲットサイズ基準では、例外を除きポインター操作の対象に24×24 CSSピクセル以上、または十分な間隔が求められます。小さなアイコンだけの操作は、見た目より押しにくくなります。アイコンに文字ラベルを添えるか、支援技術が読める名前を用意します。
キーボードフォーカスは消さず、背景色が変わっても現在地を見失わない表示にします。Tabキーで進む順番は、見た目と読み上げの順番に合わせます。
5. 実データと狭い画面で崩れ方を見る
短い仮テキストだけでは、公開後の問題を発見できません。次のデータを入れて確認します。
一文字に近い短い名前
二行以上になる長い見出し
日本語、英数字、記号を含む入力
0件、1件、上限に近い件数の一覧
長いエラーメッセージ
画像がない状態と読み込めない状態
320px前後の狭い画面、一般的なスマートフォン、デスクトップで中心操作を一周します。文字を200%に拡大し、文章を読むために画面全体を左右へ動かす必要がないか確認します。
6. 操作できる試作品で確かめる
紙や静止画で順序が決まったら、中心経路だけを操作できる試作品にします。本番と同じ技術でなくても構いません。確認するのは装飾の好みではなく、次の点です。
[ ] 初めて見ても現在地が分かる
[ ] 次に行う主要操作が一つ分かる
[ ] 入力条件を操作前に理解できる
[ ] 失敗しても入力を失わず戻れる
[ ] 完了した結果を確認できる
[ ] キーボードだけで一周できる試す人へ操作方法を説明せず、「本を一冊記録してください」のように目的だけを伝えます。止まった場所、読み違えた言葉、押そうとした箇所を記録します。本人の能力ではなく、画面が十分に伝えられなかった場所として直します。
7. 色と装飾は情報の優先順位を支える
最後に文字、余白、色、線、画像を整えます。主要操作、見出し、エラーなど役割ごとに一貫した表現を決めます。色だけで意味を伝えず、文章、形、アイコンを組み合わせます。
完成の基準は「きれいに見える」だけではありません。利用者が説明なしで中心操作を終え、途中で失敗しても戻れ、異なる入力方法や画面幅でも情報の順序が保たれることです。この基準を満たしてから、視覚的な個性を加えます。