AIでアプリ画面を作る前に、情報設計とデザインシステムの「6つ」を決める
使いやすさは画面を作る前にほぼ決まる。見た目を整えても「情報が見つからない」「同じ操作なのに言葉が違う」「画面ごとに部品の使い方が違う」は直らない。
どんな問題を解決するか / いつ使うか
AIで画面を速く作れるほど、設計しないまま画面だけ増えて、使いにくさがそのまま残る。アプリやWebサービスの画面をAIに作らせる前、またはノンデザイナーが画面を作り始める前に使う。
先に決める6つ
- 誰が、何を完了したいか
- どんな情報が登場するか（例：本、メモ、タグ、ユーザー）
- 情報同士がどうつながるか（1冊の本に複数のメモ、など）
- どの導線で完了まで進むか
- どの部品とルールで表すか（ボタン、一覧、フォームの使い方と言葉の統一）
- 空・エラー・完了をどう見せるか
1〜4が情報設計（IA：何を、どこに置くか）、5〜6がデザインシステム（どのルールと部品で表すか）にあたる。
AIへの渡し方の例
6つを短い文書にして、画面を頼む前に読ませる。「この文書の導線どおりに画面一覧を出して。各画面で使う部品と、空・エラー・完了の状態も列挙して。画面を作るのはその確認のあと」と頼むと、画面ごとにばらばらな部品や言葉が出にくい。
注意点
- 6つ目は抜けやすい。完成後にもエージェントに点検させるとよい（公開前に、エージェントに「データが0件のとき」の画面を全部点検させ、空の状態を作らせる、FigmaのAIエージェントで、既存画面から「読み込み中・空・エラー」などの抜けている状態を洗い出す）。
- 言葉の統一（同じ操作は同じ名前）も部品のルールとしてDESIGN.mdに書いておく。
- 投稿者は具体例とチェックリストを無料のnote記事にまとめている（本文は未取得）。
出典
- 投稿者: @kawai_design
- 投稿: @kawai_design · 2026-10-17
- 収集日: 2026-10-17（JST）