02 ・ 体験と画面
UI画面
採用したフローを、利用者が見て操作する画面にするガイドです。データの有無、処理の途中、結果などの状態と、画面幅ごとの表示を決め、開発担当者が実装に使える仕様までまとめます。
- 決めること
- 画面ごとの情報の優先順位、状態ごとの表示、画面幅ごとの表示の規則
- 主な成果
- 確認済みの代表画面、全ての画面と状態の表示、実装に必要な仕様
- 前後のガイド
- 画面の順序と各画面に必要な情報はUXフロー、文言はUXライティング、部品の規則はデザインシステム・UIガイドのガイドで扱います。配置が利用者の判断に合うかを操作で確かめるときは、動くプロトタイプのガイドを開きます。
UI画面の工程と判断
概要
UXフローのガイドは、利用者がどの順序で画面を通り、どこで選ぶかと、各画面に必要な情報を決めます。UI画面では、その情報をどの順序と形で見せ、どう操作させるかを決めます。動くプロトタイプのガイドは、画面が問いに答えられるかを操作で確かめるための試作を扱います。このガイドの成果は、実装の基になる画面と仕様です。
工程は、画面と状態の洗い出し、情報の優先順位、代表画面の比較、仕上げと実画面での確認、他の状態や画面幅への展開と仕様の整理の順に進みます。代表画面で決めた配置と部品の使い方が、残りの画面の基準になります。人が判断するのは、代表画面の案を選ぶ場面と、操作と表示を確認する場面です。
向いている場面
- 採用したフローがあり、画面のデザインと実装に必要な仕様を作るとき
- 既存の画面に、状態や画面幅への対応を加えるとき
- 複数の担当で画面を分担して作る前に、基準を決めたいとき
このガイドで扱わないこと
- 画面の順序と分岐の決定。UXフローのガイドで扱います。
- 文言の確定。UXライティングのガイドで扱います。
- 共通部品と規則そのものの整備。デザインシステム・UIガイドを扱うガイドで扱います。
- 訪問者が読み進めて行動を決めるページの構成。Web・LPのガイドで扱います。
隣接するガイドとの違い
| ガイド | 決めること | 主な成果 | 開く段階 |
|---|---|---|---|
| 01 UXフロー | 利用者がたどる順序、分岐、戻り方と、画面ごとに必要な情報 | フロー図、画面ごとの情報と次へ進む条件 | 必要な画面がまだ決まっていないとき、最初に |
| 02 UI画面 | 情報の優先順位、画面の状態、画面幅ごとの表示 | 画面のデザインと実装に必要な仕様 | 流れと画面の要件が決まったあと |
| 05 動くプロトタイプ | 決めた問いへの答えと、次に戻る先 | 通しで操作できる試作、問いへの答えと次の行動 | 図や静止画では判断できない仮説が残ったとき。流れや画面の検討の途中でも開く |
全体の流れと分担
工程は01から05へ進みます。工程03で人が代表画面の案を選び、工程04で人が操作と表示を確認します。代表画面と使う部品が決まったあとは、他の画面や状態の制作を複数の担当で分担できます。工程04で情報が探しにくいと分かったら、工程02または工程03へ戻ります。工程01でフローにない状態が見つかったら、UXフローのガイドへ戻ります。
工程ごとの分担
迷ったときの参照先
手元の状況に近いものから、該当する節を開いてください。
015工程のうち1
画面と状態を洗い出す
フローの各段階に対応する画面と、各画面がとりうる状態を一覧にし、今回作る範囲を決めます。
考え方
画面の案はデータがそろった状態で描かれることが多いですが、利用者が最初に見るのは予約が一件もない状態かもしれません。通信が遅ければ読み込み中の表示を、失敗すればエラーの表示を見ます。状態を最初に洗い出しておかないと、後から状態ごとに表示を足すことになり、画面ごとに違う振る舞いが生まれます。
状態は、フローの分岐と例外から導きます。洗い出しの途中で、フローに書かれていない状態が見つかることがあります。その場合は画面の表示だけで対応せず、UXフローのガイドの「例外と戻る操作を加える」へ戻し、利用者がその状態からどこへ進むかを決めてから画面に戻ります。
推奨と理由
状態の候補は、データの量、処理の途中、結果、権限の四つの観点で出す
理由観点を決めずに候補を出すと、正常な表示と主なエラーで止まり、件数が非常に多いときや見る権限がないときが漏れます。
フローにない状態は、UXフローのガイドへ戻して流れを決めてから画面にする
理由画面だけで対応すると、利用者がどこから来てどこへ戻るかが決まらないまま表示が増え、実装時に開発担当者が流れを推測することになります。
次へ進む目安
- 各画面に、データなし・読み込み中・エラー・成功の扱いが書かれている。扱わない状態には理由がある
- 一覧の状態が、フローの分岐や例外と対応している
- 今回作る状態と、後回しにする状態が分かれている
具体例
会議室の予約一覧
説明のための架空の例です。社内の会議室予約サービスで、自分の予約を確認し、必要なら取り消す「予約一覧」画面を作ります。以降の工程でも同じ例を使います。
- AIの候補
- 予約0件、読み込み中、通信エラー、取り消しの完了、他人の予約を開こうとした場合の権限なし。候補には「予約が100件以上ある」も含まれていた。
- 人の判断
- 定期的な会議を多く入れる利用者がいることから、表示件数と並び順を決める必要があると判断し、「予約が100件以上ある」を範囲に入れた。
025工程のうち2
情報の優先順位を決める
各画面で利用者が先に見る情報、比べる情報、操作の順位を、配置を考える前に決めます。
考え方
優先順位は、文章や表で先に決めます。配置から考え始めると、空いている場所に情報を置くことになり、利用者が判断する順序と画面上の順序がずれます。
順位を決める材料は三つです。利用者がこの画面で何を判断し、次に何をするか（UXフローのガイドの成果）、その情報を見る頻度、見落としたり誤解したりしたときの影響です。判断に使わない情報は下位に置くか、詳細画面へ移します。
何を先に置くか、操作をいくつ並べるかは、画面の用途で変わります。一覧を見比べる画面では複数の情報を同じ重さで並べることがあり、編集の画面では保存や取り消しなど複数の操作を並べます。どの場合も、利用者が先に見る情報と、主に使う操作と補助の操作の区別を決めておきます。
推奨と理由
各情報に、この画面での判断に使うかどうかを書く
理由判断に使うかどうかが分かると、残す情報と移す情報を理由とともに決められます。全ての情報を同じ画面に置くと、主な判断に必要な情報が埋もれます。
実際に近いデータを入れて並べる
理由「会議室A」のような短い仮の文字では、長い名称や件数の多さで順位どおりに見えなくなる箇所を見落とします。
次へ進む目安
- 優先順位が、利用者がこの画面で判断する順序と対応し、それぞれに理由がある
- 主に使う操作と補助の操作が区別されている
- 最長の名称と多数件の例で、順位が保てるか試してある
具体例
会議室の予約一覧
- 利用者が判断すること
- 次の予約がいつどこかと、取り消すかどうか。
- 人が決めた順位
- 1位を日時、2位を会議室名、3位を取り消しの操作、4位を参加者数にした。予約を作った人の名前は判断に使わないため、詳細画面へ移した。
035工程のうち3
代表画面の案を比べる
配置の基準にする代表画面を決め、配置の考え方が異なる案を比べて一案を選びます。
考え方
代表画面には、残りの画面の配置を決める基準になる画面を選びます。利用者がよく開く画面や、情報と操作が多く配置の判断が難しい画面が候補です。どの画面を代表にしたかと理由を記録しておくと、残りの画面で基準が合わないときに見直せます。
代表画面で決めた配置、余白、部品の使い方が、残りの画面と状態の基準になります。そのため案どうしの違いは、情報の並べ方と操作の置き場所に置きます。色や装飾だけが異なる案は、優先順位を満たすかどうかの比較に使えません。
判断の材料は、優先順位表、実際に近いデータを入れた各案、最も狭い画面幅での表示、既存の部品で作れるかどうかです。優先順位どおりの順に情報が読め、主に使う操作が補助の操作と見分けられ、既存の部品で作れるか、新しい部品が必要な理由を説明できる案を合格とします。
推奨と理由
比べる前に、選ぶ基準を書いておく
理由見た目の好みで選ぶと、残りの画面を作るときに、その配置を選んだ理由を説明できません。
各案を、最も狭い画面幅でも描く
理由広い画面でだけ成立する案を選ぶと、他の画面幅へ広げる段階で作り直しになります。
次へ進む目安
- 選んだ案で、優先順位どおりの順に情報が読める
- 主に使う操作が補助の操作と見分けられ、迷わず見つかる
- 代表画面にした理由と、既存の部品で作れるか、新しい部品が必要な理由が書かれている
具体例
会議室の予約一覧
- 代表画面
- 利用者が最もよく開き、取り消しの操作も含む予約一覧を代表画面にした。
- AIの案
- 日付ごとにまとめた一覧（案A）、月のカレンダー（案B）、次の予約を大きく出して残りを一覧にする形（案C）。
- 人の判断
- 次の予約がいつどこかを最初に読め、狭い幅でも成立する案Cを選んだ。案Bは月全体の空きを見る用途には向くが、この画面での判断には使わないため見送った。
045工程のうち4
仕上げて実画面で確かめる
選んだ案の文字、部品、余白、操作への反応を仕上げ、実際に操作できる表示で確かめます。
考え方
静止画で整って見えても、押せる範囲が小さい、キーボードで移動すると順序が入れ替わる、読み込み中に表示が跳ねる、長い文字で重なるといった問題は、操作して初めて分かります。そのため確認は、試作やプレビューなど実際に操作できる表示で行います。動くプロトタイプのガイドが問いへの答えを確かめるのに対し、ここで確かめるのは表示と操作の品質です。
見つけた問題は、構成の問題と実装の問題に分けて戻します。情報が探しにくい場合は、工程02または工程03へ戻して順位や配置を見直します。表示が崩れる場合は、実装を直します。
推奨と理由
確認には、最長と最短の文字、0件、多数件の例を入れる
理由仮の短い文字だけで確認すると、実際のデータが入ったときに崩れる箇所が残ります。
問題を構成と実装に分けてから直す
理由探しにくさを余白や文字サイズの調整で直そうとすると、調整が増えるだけで、情報の順序の問題が残ります。
次へ進む目安
- 最長の名称、0件、多数件のいずれでも表示が崩れない
- キーボードだけで主な操作まで到達でき、フォーカスの位置が見える
- 状態の違いが、色以外の手がかり（文字や形）でも分かる
具体例
会議室の予約一覧
- 実装の問題
- 会議室名が長い場合に、日時と重なって表示された。名称を2行で折り返すよう直した。
- 構成の問題
- 取り消しの操作が日時より目立ち、誤って押しそうだと感じた。工程03の配置に戻り、取り消しを各予約の詳細の中へ移した。
055工程のうち5
他の状態と画面幅へ広げ、仕様をまとめる
代表画面の基準を他の画面、状態、画面幅へ広げ、実装に必要な仕様を文書にまとめます。
考え方
代表画面と使う部品が決まれば、他の画面や状態の制作を複数の担当で分担できます。分担する前に、代表画面、使う部品とその状態、余白と文字の規則、例外の扱いを渡します。分担した成果は一人が並べて見比べ、部品の名称や値、ボタンの位置を揃えます。
仕様には、操作（押したときに何が起き、どの画面へ進むか）、文言（置き場所と文字数の上限）、データ（項目、最大の長さ、並び順）、画面幅ごとの表示の規則、状態ごとの表示を書きます。画面に仮に置いた文言は、未確定の印を付けてUXライティングのガイドへ渡します。
推奨と理由
画面幅ごとの画面を並べるだけでなく、切り替わりの規則を書く
理由代表的な幅の画面だけでは、その間の幅でどう表示するかを開発担当者が推測することになります。
仮の文言には印を付け、UXライティングのガイドへ渡す
理由画面に仮に置いた文言がそのまま実装されると、状態ごとの使い分けが検討されないまま残ります。
次へ進む目安
- 工程01で範囲に入れた全ての状態に、表示がある
- 開発担当者が仕様を読み、主な操作の結果を説明できる。不明点は一覧になっている
- 未確定の文言が印で分かり、UXライティングのガイドへの受け渡しが決まっている
具体例
会議室の予約一覧
- 分担と揃え
- 予約0件、通信エラー、取り消し完了の表示を別の担当が作った。並べて見ると、通信エラーのときだけ再読み込みボタンの位置が違っていたため、代表画面の規則に揃えた。
- 仕様の例
- 「幅600px未満では参加者数を詳細へ移す」「並び順は開始日時が近い順」「会議室名は最大40文字、2行で折り返す」
- 未確定の文言
- 取り消しの確認文は仮のまま印を付け、UXライティングのガイドへ渡した。
成果を渡す先
このガイドの成果は、次のガイドや開発の作業の材料になります。渡す時点と内容をそろえておくと、受け取った側が状態や表示の規則を推測で補わずに済みます。
| 渡す先 | 渡すもの | 渡す時点 |
|---|---|---|
| UXライティング | 状態の一覧、文言の置き場所と文字数の上限、未確定の文言 | 工程05で仕様をまとめ、仮の文言が残っているとき |
| 開発担当者 | 全ての画面と状態の表示、仕様、不明点の一覧 | 工程05で仕様を確定したあと |
| 動くプロトタイプ | 確かめたい問いと代表画面 | 配置が利用者の判断に合うかを、操作で確かめたいとき |
| デザインシステム・UIガイド | 新しく必要になった部品の役割と、使う画面 | 既存の部品で作れないと分かったとき |
| Web・LP | 掲載する内容とブランド素材 | 作るものが、訪問者に読み進めてもらい行動を決めてもらうページだと分かったとき |
このガイドへ戻るとき
UXフローのガイドで流れが変わったときは、工程01で状態を洗い出し直します。動くプロトタイプのガイドで、配置が利用者の判断に合わないと分かったときは、工程02と工程03を見直します。UXライティングのガイドから、文言の長さに合わせた表示の規則の変更を求められたときは、工程05の仕様を更新します。