前回との接続とこの講義の役割
N-01では、設計とは実装の前に構造を決める活動だとお話ししました。今回はその第一歩として、画面を対象にします。皆さんはすでにH章で、画面の目的や情報の優先順位、状態や遷移を1つずつ学んできました。この講義の役割は、そこで別々に学んだ観点を「1画面につき1枚」の設計書としてまとめ直すことです。散らばっていた知識を、AIに渡せる形の一覧に束ねます。
このスライドのポイント
- N-01で「設計＝6決定事項を決める活動」と定義した
- 今回はその6決定事項のうち、部品と責任を「画面」という切り口で掘り下げる
- H章で1画面ずつ学んだ観点を、1枚の設計書に集約するのが役割
- 次のN-03では、同じ考え方をデータの設計書に広げる
画面設計の定義
画面設計とは、1つの画面について6つの項目を決める作業です。目的は、この画面で利用者が達成することで、H-01で学んだ考え方です。表示情報は、何を優先して出すかで、H-02の情報の優先順位に対応します。操作はG-04やI-06、状態はH-06とH-07で見た画面の状態の一覧、遷移はH-03、権限はA-08で決めた誰が使えるかの範囲です。H章で1つずつ学んだ観点が、この6項目にそのまま集まります。
このスライドのポイント
- 画面設計＝1画面ごとに6項目を決めること
- 目的（この画面で達成すること＝H-01）
- 表示情報（何を出すか。優先順位＝H-02）／操作（何ができるか＝G-04・I-06）
- 状態（通常・空・読込中・エラーなどの一覧＝H-06・H-07）
- 遷移（どこから来てどこへ行くか＝H-03）／権限（誰が見られるか＝A-08）
なぜ画面設計が必要か
画面設計が必要な理由は、抜けを防ぐためです。設計書を持たずにAIへ「一覧画面を作って」とだけ頼むと、H章でも見たとおり、状態や権限が抜けた画面ができあがります。データが1件も無いときの表示が無かったり、本来は本人しか見られないはずの情報が誰にでも見えてしまったりします。6項目の設計書という型をあらかじめ用意しておけば、こうした抜けを思いつきではなく構造として防げます。
このスライドのポイント
- 6項目を決めずに「一覧画面を作って」と頼むと、抜けのある画面ができる
- 特に抜けやすいのは「状態」と「権限」
- 状態が抜ける: データが0件のときやエラー時の表示が無い画面になる
- 権限が抜ける: 他人の申請まで見えてしまう画面になりかねない
- 設計書という型を持てば、抜けを構造的に防げる
画面設計書の構造
画面設計書の構造は、とてもシンプルです。左に6項目、右にその記入欄を並べた、縦長の表を1枚用意するだけです。この表を上から埋めていくと、目的から権限までの決定が1画面ぶん揃います。埋め終わった表は、そのままAIへの画面発注書になります。逆に、埋まらない欄が残っているなら、それはその画面についてまだ決めきれていない部分がある、というサインとして読み取れます。
このスライドのポイント
- 画面設計書＝6項目と記入欄を並べた1枚の表
- この表1枚が、そのままAIへの「画面発注書」になる
- 上から順に、目的・表示情報・操作・状態・遷移・権限を埋める
- 空欄が残る項目は、まだ決めきれていないサイン
経費一覧画面での記入例
では、経費精算アプリの経費一覧画面を例に、6項目を実際に埋めてみます。目的は、自分の申請状況の確認に絞ります。表示情報は、一覧なので日付・金額・状態を優先し、細かい内訳は詳細画面へ回します。操作は詳細を開くことと取り下げの2つです。状態は、通常の一覧だけでなく、申請が0件のとき、読み込み中、エラーのときまで洗い出します。遷移はホームから来て詳細へ進む、権限は本人分のみ、と決めていきます。
このスライドのポイント
- 題材: 経費精算アプリの「経費一覧画面」
- 目的は「自分の申請状況の確認」に絞る
- 表示情報は日付・金額・状態を優先し、細かい項目は詳細画面に回す
- 状態は通常だけでなく、0件・読込中・エラーまで洗い出す
- 遷移はホームから来て詳細へ進む、と前後をつなぐ
技術サンプル: 画面設計書の記入例（完全版）
これが経費一覧画面の設計書の完全版です。6項目がすべて埋まっており、この表をそのままAIに渡せば、1画面ぶんの発注書として機能します。読むときに特に注目してほしいのは、権限の行です。本人分のみ、という一行は、後で学ぶJ-06の検証や、カテゴリQで扱う安全設計に直接つながります。AIに渡すときは「この設計書の通りに実装し、書いていない機能は足さないでください」と添えると、範囲のずれを防げます。
このスライドのポイント
- 種別: table
- 目的: 経費一覧画面の6項目を、そのままAIに渡せる設計書として確認する
- サンプル本体:
混同しやすい概念
ここで混同しやすいのが、画面のデザインと画面設計の違いです。画面のデザインは、色や余白、配置といった見た目のことで、H-10で扱う領域です。一方で画面設計は、この講義で見てきた6項目、つまり中身の定義を指します。見た目がどれだけ整っていても、状態や権限が抜けていれば、その画面は事故を起こします。きれいに見えることと、正しく設計されていることは別だと覚えておいてください。
このスライドのポイント
- 混同: 「画面のデザイン（見た目）」と「画面設計（6項目の定義）」
- 画面のデザイン＝色・余白・配置などの見た目（H-10で扱う領域）
- 画面設計＝目的・表示情報・操作・状態・遷移・権限という中身の定義
- 見た目が良くても、6項目が欠けた画面は事故を生む
バイブコーディングでの確認点
バイブコーディングでの確認点は、画面をAIに作らせる前に、6項目の表を必ず渡すことです。特に状態と権限の2行を空欄のまま発注しないでください。状態は、正常に表示できるときだけでなく、データが0件のとき、読み込み中、エラーのときをそれぞれ書き出します。権限は、誰がこの画面を見られるのかを役割ごとに書きます。AIへの質問例としては「この設計書で、状態と権限に抜けがないか確認してください」と聞くとよいでしょう。
このスライドのポイント
- 画面をAIに作らせる前に、6項目の表を渡す
- 特に「状態」と「権限」の行を空のまま発注しない
- 状態は、正常時だけでなく0件・読込中・エラーまで書き出す
- 権限は、誰が見られるかを役割ごとに明記する
まとめと次回
最後に一問一答です。画面設計の6項目は何でしょうか。（間）答えは、目的・表示情報・操作・状態・遷移・権限の6つです。30秒でまとめます。画面設計とは、1つの画面につき1枚の設計書を書くことでした。6項目を埋めた表は、そのままAIへの発注書になり、状態と権限の抜けを構造的に防いでくれます。次回のN-03では、この設計書の考え方をデータの設計へ広げます。関連資料は「画面設計チェックリスト100」と「SaaS画面パターン100」です。
このスライドのポイント
- 一問一答: 画面設計の6項目は？
- 30秒まとめ: 画面設計は1画面につき1枚の設計書。6項目を埋めた表がAIへの発注書になる
- 次回N-03: 同じ設計書の考え方を、データの設計へ広げる
- 関連資料: 「画面設計チェックリスト100」「SaaS画面パターン100」
