前回の状態設計を、データ取得の場面へ
前回のH-06では、1つの画面が持つ状態と、その間の移り変わりである状態遷移を学びました。今回はその中でも、外部からデータを取ってくる一覧画面や詳細画面に特有の、3つの状態を取り上げます。データは、取得している最中かもしれませんし、取れても0件かもしれませんし、取得に失敗するかもしれません。この3つはどれも正常な設計対象であり、放置するとすべて同じ空白の画面になってしまいます。
このスライドのポイント
- H-06で、1画面が持つ状態と、その移り変わり（状態遷移）を学んだ
- 今回は、外部からデータを取ってくる一覧・詳細画面に特有の3状態を扱う
- データは「取得中」「取れたが0件」「取得に失敗」のどれかになりうる
- どれも正常な設計対象。放置するとすべて同じ空白の画面になる
3つの状態の定義
3つの状態を定義します。ローディング状態は、データを取得している最中の状態で、F-04で学んだ非同期処理の「待ち」を、画面に見えるようにしたものです。空状態は、取得そのものは成功したのに、返ってきたデータが0件だった状態です。これはE-08で見た、要素が1つも入っていない配列に対応します。エラー状態は、取得に失敗した状態です。この3つは、起きている原因も、画面に表示すべきものも、それぞれ違います。だからまとめて1つの扱いにはできません。
このスライドのポイント
- ローディング状態＝データを取得している最中（F-04の非同期の「待ち」の見える化）
- 空状態＝取得は成功したが、返ってきたデータが0件（E-08の0件の配列に対応）
- エラー状態＝取得に失敗した
- 3つは、原因も、画面に表示すべきものも、それぞれ違う
区別しないと、全部「白い画面」になる
3つの状態を区別しないと、どうなるでしょうか。取得中も、0件のときも、失敗したときも、画面には何も出ず、すべてが同じ真っ白な画面になります。利用者はそれを見て、アプリが壊れたと思い込みます。作り手の側も、その白い画面が読み込み中なのか、データが無いのか、通信に失敗したのかを切り分けられません。D-06で、通信の結果を種類ごとに分類する大切さを学びました。3つの状態を区別しないことは、その分類をせっかく持っているのに、画面側で捨ててしまうことに当たります。
このスライドのポイント
- 3状態を区別しないと、取得中も0件も失敗も、すべて何も出ない同じ画面になる
- 利用者は「壊れた」と思い込む
- 作り手も、白い画面が読み込み中・0件・失敗のどれか切り分けられない
- 通信結果を種類で分類する意味（D-06）を、画面側で捨てている状態
一覧画面の4分岐
設計の全体像を、一覧画面を例に4つの分岐で整理します。まずデータの取得を始めたら、取得中はローディング表示を出します。取得が終わったら、結果で分かれます。成功して1件以上あれば、通常どおり一覧を表示します。成功したけれど0件なら、空状態として、次の行動への案内を出します。失敗したら、エラー状態として、失敗した事実と再試行のボタンを出します。この4分岐を、画面を作る前に決めておくことが、ここでの設計です。
このスライドのポイント
- 一覧画面の分岐を、画面を作る前に4つに決めておく
- 取得中 → ローディング表示
- 成功して1件以上 → 通常の一覧を表示
- 成功したが0件 → 空状態＋次の行動の案内
- 失敗 → エラー状態＋再試行ボタン
空状態は「案内のチャンス」
日報アプリの初回起動を考えます。まだ1件も日報を書いていないので、取得結果は0件です。ここで大事なのは、0件はエラーではなく正常だということです。正しい空状態の設計は、「日報がありません。最初の日報を書いてみましょう」という案内と、作成ボタンを出すことです。真っ白な画面は不正解です。空状態は、利用者が最初の一歩を踏み出すのを後押しできる、案内のチャンスでもあります。単に「データがありません」で終わらせず、次に何をすればよいかまで示します。
このスライドのポイント
- 例: 日報アプリの初回起動。まだ1件も書いていないので取得結果は0件
- 0件はエラーではなく正常
- 正解の空状態: 「日報がありません。最初の日報を書いてみましょう」＋作成ボタン
- 真っ白な画面は不正解。空状態は最初の一歩を後押しできる
技術サンプル: 3状態の設計表
3つの状態と、その原因、表示すべきものを、1枚の表にまとめました。ローディングは、原因が取得中であり、読み込んでいることが分かる進行表示を出します。空状態は、原因が0件であり、正常であることの説明と、次の行動への案内を出します。エラー状態は、原因が取得の失敗であり、失敗した事実と再試行の手段を出します。この表は、そのままAIへの指示書として使えます。AIへの質問例は、「この一覧画面のローディング・空・エラーの3状態の表示を、それぞれ設計してください」です。
このスライドのポイント
- 種別: table ／ 目的: 一覧画面の3状態を、原因と表示で対応づける設計表
- サンプル本体:
空状態とエラー状態を混同しない
混同しやすいのは、空状態とエラー状態です。空状態は、取得に成功したうえで結果が0件という、正常な状態です。エラー状態は、取得そのものに失敗した、異常な状態です。D-04で、通信の結果を表すステータスと、中身であるボディを分けて見たことを思い出してください。その画面版が、この2つの区別です。0件をエラーのように赤字や警告で見せると、利用者は何も悪くないのに不安になります。正常な0件は、あくまで落ち着いた案内として見せます。
このスライドのポイント
- 空状態＝取得に成功したうえで0件（正常）
- エラー状態＝取得そのものに失敗（異常）
- D-04で見た「ステータスとボディ」の画面版
- 0件を赤字や警告で見せると、悪くないのに利用者が不安になる
バイブコーディングでの確認点
バイブコーディングでの確認点です。AIに一覧画面を作らせたら、3つの状態が抜けていないかを、定型の質問で確かめます。「0件のとき、取得に失敗したとき、取得している最中、それぞれ何が表示されますか」と、3点をまとめて聞きます。AIは指示がないと、成功した場合の表示だけを作りがちです。3つの状態の表示を、最初から要件として渡しておくと、白い画面は生まれません。
このスライドのポイント
- AIに一覧画面を作らせたら、3状態が抜けていないかを定型で確認する
- 質問例:「0件のとき・取得に失敗したとき・取得している最中、それぞれ何が表示されますか」
- AIは指示がないと、成功時の表示だけを作りがち
- 3状態の表示を最初から要件として渡すと、白い画面は生まれない
まとめと次回
最後に一問一答です。データが0件のときに出すべきなのは、エラー表示と案内表示の、どちらでしょうか。……答えは、案内表示です。0件は正常な状態なので、失敗として見せず、次の行動を示します。30秒でまとめます。一覧や詳細の画面には、ローディング・空・エラーという3つの状態があり、原因も表示も違います。3つを区別せず放置すると、すべてが白い画面になります。空状態は、案内のチャンスとして設計します。次回のH-08では、操作への反応であるフィードバックと通知を学びます。関連資料は、「業務アプリの空状態デザイン集」と「画面設計チェックリスト100」です。
このスライドのポイント
- 一問一答:「データ0件のときに出すべきは、エラー表示と案内表示のどちら？」
- 答: 案内表示（0件は正常。次の行動を示す）
- 30秒まとめ: 一覧・詳細には3状態があり、原因も表示も違う／区別しないと全部白い画面／空状態は案内のチャンス
- 次回H-08: 操作への反応＝フィードバックと通知
- 関連資料:「業務アプリの空状態デザイン集」「画面設計チェックリスト100」
