前回との接続——UXの土台になる工程
前回のH-01では、画面の部品であるUIと、利用開始から目的達成までの体験全体であるUXを区別しました。今回のH-02は、そのUXの土台になる部分です。どれだけボタンの見た目を磨いても、目的の機能がどこにあるか分からなければ体験は良くなりません。情報設計は、その「どこに何があるか」を設計の対象として引き受ける工程です。
このスライドのポイント
- 前回H-01: UI（触れる部品）とUX（体験全体）を区別した
- 今回H-02: そのUXを左右する土台＝「どこに何があるか」を扱う
- ボタンの見た目を磨いても、目的の機能が見つからなければ体験は良くならない
情報設計とナビゲーションの定義
情報設計とは、利用者が目的の情報や機能へ迷わず辿り着けるように、四つのことを決める作業です。一つ目は分類、つまり機能や情報をどのグループに分けるか。二つ目は優先順位、どれを目立たせるか。三つ目はラベル、それぞれに付ける名前です。四つ目は探し方で、検索やナビゲーションを指します。ナビゲーションとは、メニューのように画面間を移動するための案内のことです。この四つがそろって初めて、利用者は迷わず目的へ辿り着けます。
このスライドのポイント
- 情報設計＝目的の情報・機能へ迷わず辿り着けるよう、分類・優先順位・ラベル・探し方を決めること
- 分類＝どのグループに分けるか／優先順位＝どれを目立たせるか
- ラベル＝それぞれに付ける名前／探し方＝検索・ナビゲーション
- ナビゲーション＝画面間を移動するための案内（メニュー等）
なぜ情報設計が必要か
この設計を知らないと、機能はあるのに見つけられないアプリになります。作った本人は場所を覚えているので気づきにくく、初めて使う利用者だけが迷ってしまいます。さらにAIに「メニューを作って」とだけ頼むと、機能を作った順に並べただけの分類が返ってきがちです。それは作り手の都合の並びであって、利用者が探しやすい並びとは限りません。だからこそ、分類は人間が方針を渡す必要があります。
このスライドのポイント
- 機能はあるのに見つけられないアプリになる
- 作った本人は場所を覚えているので気づきにくく、初めての利用者だけが迷う
- AIに「メニューを作って」とだけ頼むと、作った順に並べただけの分類が返りがち
- 分類は人間が方針を渡す必要がある
情報設計の4点セット
情報設計は、四つの要素を順に決めていくと組み立てられます。分類では、機能を利用者の行動を軸にグループへ分けます。優先順位では、よく使う機能ほど手前や上に置きます。ラベルでは、そのグループや機能に利用者が使う言葉で名前を付けます。探し方では、数が多い場合に検索を用意します。この全体を貫く原則が、作り手の内部構造ではなく利用者の言葉で分類する、という考え方です。
具体例——経費アプリのメニュー
経費アプリのメニューで考えてみます。良い分類は「申請する・確認する・設定」のように、利用者がやりたい行動で分けたものです。一方でつまずく分類は「経費マスタ・承認フロー・帳票」のように、作り手が中で管理している構造で分けたものです。後者は、経費を申請したいだけの利用者にはどこを押せばいいか伝わりません。同じ機能でも、行動で名付けるか内部構造で名付けるかで、辿り着きやすさが大きく変わります。
このスライドのポイント
- 良い分類（利用者の行動）: 申請する・確認する・設定
- つまずく分類（作り手の内部構造）: 経費マスタ・承認フロー・帳票
- 後者は「経費を申請したいだけの利用者」に何を押せばいいか伝わらない
- 同じ機能でも、名付け方で辿り着きやすさが変わる
技術サンプル——情報設計をAIと検討する質問
情報設計をAIと一緒に検討するときの質問例です。一つ目は、機能の一覧を渡して「利用者の行動を軸に3〜5グループへ分類してください」と頼むもの。AIは機能を作った順ではなく、行動でまとめ直してくれます。二つ目は、付けた名前について「このラベルは初めての利用者に通じますか。社内用語ではないですか」と確認するものです。読み方のポイントは、分類の軸を明示している点と、ラベルを社内用語かどうかで点検している点です。
混同しやすい概念——作り手の分類 vs 利用者の分類
混同しやすいのは、作り手の分類と利用者の分類です。作り手の分類は、データベースの構造や社内の管理区分をそのままメニューにしたもので、作る側には自然に見えます。利用者の分類は、その人がやりたい行動や目的でまとめたものです。メニューは必ず後者、利用者の行動を軸に作ります。前者のままだと、機能はあるのに使いこなせない、という状態を生んでしまいます。
このスライドのポイント
- 作り手の分類: データベースの構造・社内の管理区分をそのままメニューにしたもの
- 利用者の分類: やりたい行動・目的でまとめたもの
- メニューは必ず後者（利用者の行動）で作る
- 作り手の分類のままだと「機能はあるのに使いこなせない」を生む
バイブコーディングでの確認点
AIがメニューや画面構成を提案したら、辿り着きやすさを具体的な数で確認します。たとえば「初めて使う人が『経費を申請したい』と思ったとき、何回のクリックで辿り着きますか」と聞いてみましょう。クリック回数が多ければ、その機能の優先順位や分類を見直す合図です。前回のH-01で学んだとおり、見た目の話なのか流れの話なのかを分けて指示するのがコツです。
このスライドのポイント
- AIが提案したメニュー・画面構成は、辿り着きやすさを数で確認する
- 質問例:「初めて使う人が『経費を申請したい』と思ったとき、何回のクリックで辿り着きますか」
- クリック回数が多ければ、優先順位や分類を見直す合図
- H-01のとおり、見た目の話か流れの話かを分けて指示する
まとめと次回へ
最後に一問一答です。メニューの分類の軸にすべきなのは、内部構造と利用者の行動の、どちらでしょうか。少し考えてみてください。答えは、利用者の行動です。30秒でまとめます。情報設計とは、分類・優先順位・ラベル・探し方を、利用者の言葉で決める作業でした。作り手の内部構造で並べないことが要点です。次回のH-03では、画面から画面への移動である画面遷移を設計します。関連資料は「業務整理質問集100」と「SaaS画面パターン100」です。
このスライドのポイント
- 一問一答:「メニューの分類の軸にすべきは、内部構造と利用者の行動のどちら？」→ 利用者の行動
- 30秒まとめ: 情報設計＝分類・優先順位・ラベル・探し方を、利用者の言葉で決める
- 次回H-03: 画面から画面への移動＝画面遷移
- 関連資料: 「業務整理質問集100」「SaaS画面パターン100」
