AIに「引き算のUI」を出力させるプロンプト指定のコツ
AIにUIを生成させるときは、データや機能を指定するだけでなく、その画面の目的と情報の扱い方まで伝えます。たとえば、次のプロンプトを、画面生成の指示に付け加えてみてください。
プロンプト例
この画面では、ユーザーが現在の目的に対して必要な情報をすばやく理解し、次の行動を選ぶことができる必要があります。
（情報を表示する目的を説明する）
情報設計の観点から、初期表示に出す情報、折りたたむ情報、別画面に分ける情報を整理してください。
主要情報と補助情報の視覚的な優先順位を明確にし、ユーザーの認知負荷を下げてください。
ポイントは「認知負荷を下げてください」という制約を明示することです。
たとえば、商品のデータベースを使う場面で、「データベースを使って一覧画面を作ってください」とだけ指示すると、AIはデータベース内の項目をできるだけ使おうとしかねません。そこに上記の条件を加えることで、必要な情報の選別や、初期表示と詳細画面の分担を促せます。
とはいえ、AIが作成した画面を見て、情報量が適切かを判断するのは決まりがあるわけではありませんので、簡単に目安をお伝えしましょう。
生成された画面を確認する際は、まず初見のユーザーが「この画面で何を選択すべきか」を瞬時に理解できるかを検証します。ファーストビューに主要情報として10個も20個も並んでいる場合は、過密状態です。画面の目的を理解して通過するまでに1〜2分を要する状態も、情報過多のシグナルと言えます。表示優先度を再設計し、初期表示を上位3項目程度に絞り込むなどの引き算を試みてください。
ただし、情報を無条件に削ればよいというわけではありません。ユーザーが物件を評価するために必要な情報まで削ぎ落としてしまうと、今度は判断材料が不足します。過剰な情報は認知負荷を高めますが、過度な削ぎ落としはトレードオフとして選択の阻害につながります。重要なのは、ターゲットユーザーの目的に応じた「必要最小限の情報量」を見極めることです。
優先順位を整理しないまま機能を拡張し続けると、本番運用後に利用頻度の低いUI要素が画面を圧迫することになります。一度リリースした機能は、一部でも利用者が存在する限り簡単には廃止できません。だからこそエンジニアは、コードを書く前の設計段階で情報設計を行い、「何を初期表示し、何を非表示にするか」まで考慮しておく必要があります。
この記事のまとめ
- 多機能であることと、使いやすいことは違う
- 単に情報を追加するだけの設計は、ユーザーの迷いを増幅させる
- エンジニアにも「表示しない情報」を選択する引き算の設計思想が求められる
情報設計とは、単に表示項目を減らすことではありません。ユーザーの目的を起点に主要情報と補助情報を分類し、適切なコンテキストで届けるプロセスです。すべての情報を一画面で表現しようとせず、一覧、詳細、そして利用目的に応じて画面の役割を分離することで、多機能でありながら操作性に優れたUIを実現できます。
生成AIは、与えられたデータや機能を使い、見た目の整った画面をすばやく生成してくれます。しかし、ドメイン固有の優先順位や、人間が初見でつまずくポイントの補正は、エンジニアによる意図的なガイドラインが必要です。新機能を実装する前に、まず「何を出さないか」を検討するUIの引き算を実践してみてください。
