atom.nocode-builder.organize-user-roles-and-screens
利用者別の画面要件を整理する
利用者別の画面要件を整理する アプリを作る前に「誰が」「どの画面を」「何のために」使うのかを一覧にしておくと、あとから「この画面、いらなかったかも…」という手戻りを防げます。レストランに例えると、お客さん用のメニュ...
成果物成果物このレッスンが終わったとき、あなたの手元に残る具体的な成果物です(例: 公開済みの Web ページ、動作するフォームなど)。
証跡証跡成果物が正しく作れたことを確認するためのチェックリストです(例: ブラウザで動作する、フォーム送信で値が保存される)。
メディアメディアレッスン内に出てくる図や動画のスロットです。実際の画面やイメージで理解を補助します。
レッスン本文
利用者別の画面要件を整理する
アプリを作る前に「誰が」「どの画面を」「何のために」使うのかを一覧にしておくと、あとから「この画面、いらなかったかも…」という手戻りを防げます。レストランに例えると、お客さん用のメニュー表と、キッチン用の注文票と、店長用の売上レポート——それぞれ見る人が違えば、必要な情報もレイアウトも変わりますよね。このレッスンでは、AIチャット(ChatGPTやClaude)を相棒にして、あなたのアプリに必要な「利用者×画面」の一覧表をサクッと作ります。
このレッスンで手に入るもの
- 成果物: 利用者(ロール)ごとに必要な画面を整理したMarkdownドキュメント
- 目安時間: 10〜15分
- 必要なもの: AIチャットツール(ChatGPT、Claude、どちらでもOK)とテキストエディタ
前提を確認する
始める前に、次の2つが頭の中にあるか確認してください。
- あなたが作りたいアプリのざっくりしたイメージ(例:社内の備品管理アプリ、イベント予約アプリ など)
- そのアプリを使う人が誰か、なんとなくの見当(例:一般ユーザーと管理者、のように)
まだ「何を作るか決まっていない…」という方は、先にアプリのコンセプトを固めるレッスンに取り組んでみてください。
ステップ1: 利用者(ロール)を洗い出す
まず「このアプリを使う人は何種類いるか?」を整理します。AIに手伝ってもらいましょう。
AIへのプロンプト例
私は「社内の備品管理アプリ」を作ろうとしています。
このアプリを使う人の種類(ロール)を洗い出してください。
それぞれのロールについて、以下を教えてください:
- ロール名
- そのロールの人がアプリで主にやりたいこと(1〜3個)
- 他のロールとの違い
ポイント: 「社内の備品管理アプリ」の部分を、あなた自身のアプリ名に置き換えてください。
良い例と悪い例
良い例(具体的で区別がはっきりしている):
- 一般社員:備品の検索・予約をする人
- 備品管理者:在庫の追加・廃棄を管理する人
- 部門長:部門の利用状況を確認する人
悪い例(あいまいで区別がつかない):
- ユーザー
- 管理者
- その他
→ 「ユーザー」だけでは、どんな操作をする人なのかわかりません。具体的な行動で区別しましょう。
ステップ2: 各ロールに必要な画面を書き出す
ロールが決まったら、それぞれの人が「どんな画面を見るか」を一覧にします。
AIへのプロンプト例
先ほど整理した3つのロール(一般社員、備品管理者、部門長)について、
それぞれが必要とする画面を一覧にしてください。
各画面には以下を含めてください:
- 画面名(短くわかりやすく)
- その画面でできること(1〜2行で)
- 表示する主な情報
出力イメージ
AIの回答を、次のような表にまとめましょう。
| ロール | 画面名 | できること | 主な表示情報 |
|---|---|---|---|
| 一般社員 | 備品一覧 | 備品を検索・閲覧する | 備品名、画像、在庫状況 |
| 一般社員 | 予約フォーム | 備品の利用を予約する | カレンダー、空き状況 |
| 備品管理者 | 在庫管理 | 備品の追加・編集・廃棄 | 全備品リスト、ステータス |
| 部門長 | 利用レポート | 部門の利用状況を確認 | 月別グラフ、コスト集計 |

ステップ3: 画面の優先順位をつける
すべての画面を一度に作るのは大変です。「最初に絶対必要な画面」と「あとから追加してもいい画面」を分けましょう。
AIへのプロンプト例
この画面一覧について、優先度を「必須(なければアプリとして成り立たない)」
「あると便利(後から追加OK)」の2段階で分類してください。
理由も一言添えてください。
良い例と悪い例
良い例(判断基準が明確):
- 必須:備品一覧 → 「これがないと備品を探せず、アプリの存在意義がない」
- あると便利:利用レポート → 「運用が始まってからでも間に合う」
悪い例(全部「必須」にしてしまう):
- 必須:備品一覧、予約フォーム、在庫管理、利用レポート、通知設定、ユーザー管理…
→ 全部を必須にすると最初のリリースが遠のきます。「これがないとアプリとして成り立たない」で絞りましょう。
ステップ4: ドキュメントとしてまとめる
ここまでの内容を1つのMarkdownファイルにまとめます。テキストエディタ(メモ帳やVSCodeなど、何でもOK)を開いて、以下のテンプレートに沿って書いてみましょう。
# [あなたのアプリ名] 画面要件一覧
利用者ロール
- ロール1: 説明
- ロール2: 説明
ロール別画面一覧
ロール1
| 画面名 | できること | 主な表示情報 | 優先度 |
|---|---|---|---|
| ○○画面 | ~する | ○○、△△ | 必須 |
ロール2
(同じ形式で)
次にやること
- 必須画面から画面設計(ワイヤーフレーム)を始める
> **コツ**: AIに「この内容をMarkdownのテンプレートにまとめて」と頼むと、整形もやってくれます。

できあがりを確認する
次の3つが揃っていれば、このレッスンは完了です。
- ロールが2つ以上書き出されていて、それぞれの役割が一言で説明されている
- 各ロールに画面が1つ以上紐づいていて、「できること」と「表示情報」が書かれている
- 優先度が「必須」と「あると便利」に分かれている
足りない部分があれば、AIに「この一覧で抜けているロールや画面はありますか?」と聞いてみましょう。
よくあるつまずきと対処法
「ロールが1種類しか思いつかない」
→ AIに「このアプリで管理者的な操作をする人はいますか?」「データを見るだけの人はいますか?」と聞いてみてください。たいていのアプリには「使う人」と「管理する人」の最低2ロールがあります。
「画面が多すぎて収拾がつかない」
→ まず「ログインしてから最初にやること」だけに絞ってください。1ロールあたり2〜3画面で十分です。細かい設定画面などは後回しにしましょう。
「AIの回答が抽象的すぎる」
→ プロンプトに具体例を追加しましょう。「例えば備品管理アプリなら『一般社員:備品検索画面、予約画面』のように、画面名を具体的にしてください」と伝えると改善します。
種類: markdown_doc
検証: basic_manual_check_v1
証跡証跡成果物が正しく作れたことを確認するためのチェックリストです(例: ブラウザで動作する、フォーム送信で値が保存される)。
メディア
必須
なし
あると楽
なし