LLMアプリの画面を作る前に読むUI/UX設計の書籍ガイド｜待ち時間・出典・訂正しやすさを設計する4冊

社内向けのAIチャットを作ると、リリース後に上がってくる声はだいたい似ています。「何を聞けばいいのか分からない」「返事が来るまで固まって見える」「もっともらしいが根拠が分からない」「少しだけ直したいのに、最初から入力し直すしかない」。どれもモデルを差し替えて直る種類の不満ではありません。画面の側、つまりUIとUXの設計で受け止める話です。この記事では、LLMアプリやAIエージェントの画面を作る前に読んでおきたい実在の日本語書籍を4冊、段階順に紹介します。なお本記事は書籍紹介であり広告を含みます。価格・版・在庫・目次は変わるため、最新は各出版社の公式ページでご確認ください。

LLMアプリのUIが引き受けているもの#

まず前提を揃えます。従来の業務アプリのUIは、決まった入力に対して決まった結果が返ることを前提に組み立てられていました。ボタンを押せば保存され、検索すれば同じ条件で同じ件数が返る。UIの仕事は、その決定的な処理を分かりやすく並べることでした。

LLMを組み込んだ画面は、この前提を3つ崩します。1つ目は、出力が確率的であること。同じ入力でも文面が変わり、ときどき間違えます。2つ目は、待ち時間があること。生成が終わるまで数秒から数十秒かかり、処理中の状態が長く続きます。3つ目は、入力の自由度が高すぎること。テキストボックスは何でも受け付けるので、利用者は何を頼めるのかを画面から読み取れません。

この3つが、そのままUIの論点になります。何ができるか分かる入口をどう作るか。途中経過をどう見せるか。答えの根拠をどう示すか。利用者が結果を直したいときにどうさせるか。そして失敗したときにどう戻すか。いずれも「文章生成の精度」とは別の軸であり、プロンプトを磨いても解決しません。

すでに整理されている前例がある#

こうした論点は、生成AIブーム以前から人間とAIの相互作用(Human-AI Interaction)として研究されてきました。Microsoft Researchが公開している「Guidelines for Human-AI Interaction」は、20年以上の知見を18項目に集約したもので、CHI 2019で発表されています。18項目は「Initially(最初の接触時)」「During interaction(利用中)」「When wrong(誤ったとき)」「Over time(時間の経過とともに)」の4フェーズに分かれます。

冒頭のG1は「Make clear what the system can do(システムに何ができるかを明確にする)」、G2は「Make clear how well the system can do what it can do(それをどの程度うまくできるかを明確にする)」です。誤ったときのフェーズにはG9「Support efficient correction(誤りを効率よく編集・修正・復帰できるようにする)」、G10「Scope services when in doubt(迷うときは曖昧性解消を行うか、機能を段階的に縮退させる)」、G11「Make clear why the system did what it did(なぜそう振る舞ったのかの説明にアクセスできるようにする)」が並びます。2019年の文書ですが、いま社内AIチャットに寄せられる不満のほとんどは、この18項目のどれかに対応づけられます。

Google PAIRの「People + AI Guidebook」も同じ系譜の公開資料で、Mental Models、Explainability + Trust、Feedback + Control、Errors + Graceful Failureといった章立てで、利用者の期待をどう作り、説明と信頼をどう設計し、誤りをどう扱うかを扱っています。どちらも無償で読めます。

AIアプリの症状と、対応するUIの論点#

止まっているチームから出てくる症状を、UI側の論点に対応づけると次のようになります。

右の列は、どれも新しい話ではありません。UI設計の書籍が長く扱ってきた領域です。だからこそ、AIアプリを作る人がいまさら基礎の本を読む価値があります。

選書の軸を4段階で決める#

UI/UXの本は守備範囲がかなり違います。画面要素の作り方を教える本、画面の構造の決め方を教える本、実装とガイドラインに落とす本、人間の認知の原理を語る本。同じ棚に並んでいても読者も前提も別物です。次の4段階のどこで詰まっているかを決めてから選ぶことをおすすめします。

4冊すべてを読む必要はありません。語彙が足りないなら1、チャット以外の画面設計で迷っているなら2、実装で状態の伝え方に困っているなら3、判断の根拠がほしいなら4、と1冊に絞るほうが身につきます。

1. 全体像と語彙を揃える(UIデザインの教科書［新版］)#

最初の1冊は、UIデザインの前提を体系的に整理した入門書です。原田秀司氏の著書で、翔泳社から2019年1月21日発売、B5変型判208ページ。2013年刊行の『UIデザインの教科書』をもとに、構成と内容を全面的に書き直した新版です。

目次は、第1章「デザインの目的とUI/UX」、第2章「物理的な制約」、第3章「ソフトウェアの影響」、第4章「人間の認知特性」、第5章「階層と構造」、第6章「ナビゲーションとインタラクション」、第7章「デザインを形にする」という流れです。デバイスや入力手段の違いから始まり、パフォーマンス、色や形や動きの認知、インタラクションコスト、一貫性、階層の深さと広さ、現在地の示し方、トップ・一覧・詳細の関係まで順に進みます。

LLMアプリを作る立場から見ると、第3章と第4章と第5章の価値が高いと考えられます。第3章にはパフォーマンスの節があり、表示速度が体験に与える影響を扱います。生成に数秒から数十秒かかるLLMアプリでは、この観点が最初から必要になります。第4章のインタラクションコストと一貫性は、「入力欄だけ置いて、あとは利用者が考える」という設計がなぜ使われないかの説明になります。第5章の「トップ・一覧・詳細」や「わからないとは何か」は、チャット履歴・保存した回答・参照資料をどう配置するかを考えるときの土台です。

扱っていない範囲も押さえておきましょう。刊行は2019年で、生成AIやチャットUIを前提にした記述は含まれません。コードも扱わないため、実装の指針は別途必要です。ビジュアルデザイン(配色やタイポグラフィの美学)を深く学ぶ本でもありません。あくまで、使いやすさの理由を言語化するための地図として読む本です。

UIデザインの教科書［新版］ マルチデバイス時代のインターフェース設計(翔泳社)

広告

著者: 原田秀司 / 出版社: 翔泳社 / 2019年1月21日発売 / B5変型判208ページ。デザインの目的、デバイスの制約、ソフトウェアの影響、人間の認知特性、階層と構造、ナビゲーションとインタラクション、デザインを形にする方法までを図解つきで体系的に扱います。デザイン未経験のエンジニアやディレクターが語彙を揃えるのに向いています。生成AIやチャットUI前提の記述、コードによる実装の解説は含まれません。

Amazonで見る楽天で見るYahoo!ショッピングで見る

※価格・在庫は変動します。最新の情報は各販売サイトでご確認ください。

2. チャット欄の外側を設計する(オブジェクト指向UIデザイン)#

2冊目は、画面の構造を決める原則を扱う書籍です。ソシオメディア株式会社・上野学氏・藤井幸多氏の著(上野学氏監修)で、技術評論社のWEB+DB PRESS plusシリーズから刊行されており、2026年7月23日に改訂新版(A5判376ページ)が出ています。改訂は前半部の図版のカラー化と「改訂新版あとがき」の追加で、本文は2020年6月5日刊の初版から変更がありません。

主題は、タスク(やること)ではなくオブジェクト(もの)を起点にUIを設計するという考え方です。目次は、第1章「オブジェクト指向UIとは何か」、第2章「オブジェクト指向UIの設計プロセス」、第3章「オブジェクト指向UI設計の実践」、第4章「ワークアウト：基礎編」、第5章「ワークアウト：応用編」、第6章「オブジェクト指向UIのフィロソフィー」という構成で、後半には基礎編と応用編を合わせて18題の実践演習が用意されています。

なぜLLMアプリでこの本が効くのか。チャットUIは、突き詰めると極端にタスク指向的なインターフェースだからです。利用者は毎回「やること」を文章で宣言しなければならず、システムの側には名詞が現れません。動くものは作れますが、利用が増えると必ず次の要求が出ます。過去のやりとりを探したい、よく使う指示を保存したい、参照させる資料を管理したい、エージェントの実行履歴を確認したい。これらはすべてオブジェクトで、一覧と詳細を持つ画面が必要になります。会話ログ、プロンプトテンプレート、ナレッジソース、実行タスク、承認待ちの操作。この名詞の洗い出しと、一覧から詳細へ至る構造の設計こそが、本書の扱う範囲です。

ワークアウトを実際に手を動かして解くかどうかで、得られるものはかなり変わります。読むだけでも考え方は分かりますが、タスク指向の要件文からオブジェクトを抽出する作業は、練習しないと身につきにくい種類の技能です。

こちらも範囲の限界があります。本文の内容は2020年の初版から変わっておらず、生成AIやエージェントは扱いません。ビジュアルデザインやアニメーション、マイクロコピーの書き方も主題ではありません。また、原則を強く打ち出す本であるため、業務システムの制約でタスク指向にせざるを得ない場面の折り合いは、読者側で判断する必要があります。

［改訂新版］オブジェクト指向UIデザイン――使いやすいソフトウェアの原理(技術評論社)

広告

著者: ソシオメディア株式会社、上野学、藤井幸多(上野学 監修) / 出版社: 技術評論社(WEB+DB PRESS plusシリーズ) / 2026年7月23日発売 / A5判376ページ(2020年6月刊の同名書籍の改訂新版。前半部の図版をカラー化し、巻末に「改訂新版あとがき」を追加。本文自体に変更はありません)。タスクではなくオブジェクトを起点にUIを設計する考え方と設計プロセスを解説し、基礎編・応用編あわせて18題のワークアウトで手を動かして学べます。チャット欄の外側(履歴・テンプレート・参照資料・実行タスク)の画面構造を設計したい人に向いています。生成AI固有の話題、ビジュアルデザイン、文言の書き方は主題ではありません。

Amazonで見る楽天で見るYahoo!ショッピングで見る

※価格・在庫は変動します。最新の情報は各販売サイトでご確認ください。

3. 途中経過と状態の伝え方を実装に落とす(Webアプリケーションアクセシビリティ)#

3冊目は、Webアプリケーションのアクセシビリティを現場の改善として扱う書籍です。伊原力也氏・小林大輔氏・桝田草一氏・山本伶氏の共著で、技術評論社のWEB+DB PRESS plusシリーズとして2023年2月27日発売、A5判576ページ。

目次は、第1章「Webアクセシビリティとは」、第2章「Webアクセシビリティの基礎」、第3章「フォームの改善」、第4章「UIデザインの改善」、第5章「複雑なUIパターンの改善」、第6章「デザインシステムとアクセシビリティ」、第7章「アクセシビリティの組織導入」、第8章「アクセシブルなUI設計の原理を導く」、付録「支援技術と利用状況」という構成です。HTMLとWAI-ARIAの使い方から、フォームの設計、複雑なUIパターン、デザインシステムへの組み込み、組織的な推進までを扱います。

LLMアプリでこの本が効くのは、AIの画面が動的な更新の塊だからです。ストリーミング表示は、生成の進行に合わせて画面の一部が短い間隔で書き換わり続ける仕組みです。Claudeの公式ドキュメントでもServer-Sent Eventsによる逐次出力が案内されているとおり、実装としては標準的になりました。一方で、この「勝手に変わる領域」をどう知らせるかは別の問題です。WCAG 2.2の達成基準4.1.3「Status Messages(ステータスメッセージ)」は、フォーカスを移動させずに提示される状態変化を、支援技術がプログラム的に判別できるようにすることを求めています。実現手段としてはARIAのライブリージョン(aria-live)がよく使われますが、更新が頻繁すぎると読み上げが追いつかず、かえって使えなくなります。

この種の判断、つまり「どの更新を通知し、どれを黙らせるか」「生成中であることをどう伝えるか」「中断ボタンをどこに置き、どう名前を付けるか」は、アクセシビリティの実装知識がそのまま設計の解像度になります。加えて第3章のフォーム改善は、プロンプト入力欄・添付ファイル・設定パネルといったAIアプリの入力周りに直接効きます。

一方で、この本はビジュアルデザインの教科書ではありませんし、Web以外のプラットフォームは対象外です。576ページと厚く、通読よりも該当章を引く使い方が向いています。また当然ながら、AI特有のパターン(出典の提示、確信度の伝え方)そのものは扱いません。

Webアプリケーションアクセシビリティ――今日から始める現場からの改善(技術評論社)

広告

著者: 伊原力也、小林大輔、桝田草一、山本伶 / 出版社: 技術評論社(WEB+DB PRESS plusシリーズ) / 2023年2月27日発売 / A5判576ページ。HTMLとWAI-ARIAの基礎から、フォーム、UIデザイン、複雑なUIパターン、デザインシステム、組織導入、UI設計の原理までを扱います。ストリーミング表示のような動的更新の通知設計や、入力フォームの作り込みを実装レベルで固めたい人に向いています。分量が多く、通読よりも該当章を引く使い方が現実的です。

Amazonで見る楽天で見るYahoo!ショッピングで見る

※価格・在庫は変動します。最新の情報は各販売サイトでご確認ください。

4. 認知の原理で判断の土台を作る(誰のためのデザイン？ 増補・改訂版)#

4冊目は、認知科学者D.A.ノーマンによるデザインの古典です。新曜社から2015年4月20日に刊行された増補・改訂版で、四六判520ページ。訳は岡本明氏、安村通晃氏、伊賀聡一郎氏、野島久雄氏の4名です。

章立ては、第1章「毎日使う道具の精神病理学」、第2章「日常場面における行為の心理学」、第3章「頭の中の知識と外界にある知識」、第4章「何をするかを知る―制約、発見可能性、フィードバック」、第5章「ヒューマンエラー？いや、デザインが悪い」、第6章「デザイン思考」、第7章「ビジネス世界におけるデザイン」です。

AIアプリの文脈で読むと、第4章と第5章が刺さります。第4章の主題である発見可能性(discoverability)とフィードバックは、まさにいまのAIチャットが抱えている問題そのものです。何ができるのかが画面から発見できず、いま何が起きているのかのフィードバックも薄い。書名のとおり、これは利用者の理解力の問題ではなくデザインの問題として扱われます。

第5章は、エラーを利用者の不注意として片づけるのではなく、エラーが起きる前提でデザインすべきだという立場を取ります。AIアプリでは、間違えるのが利用者側だけではなく、システム側も間違えます。誤った出力が出たときに、利用者が気づけるか、直せるか、取り消せるか。この3点をデザインの責任として捉える視座は、本書がいちばんはっきり示しています。第3章の「頭の中の知識と外界にある知識」も、プロンプトの書き方を利用者の記憶に頼らせるのか、画面側に置くのかという判断に直結します。

限界も明確です。原著は日用品を中心に論じた本で、Webアプリやチャット画面の具体的な作り方は書かれていません。実装手順もパターン集も載っていません。520ページと長く、読み切るには時間がかかります。今日の実装に効く即効性はない代わりに、他の3冊やAIガイドラインの内容を評価するための物差しが手に入る、という位置づけの本です。

誰のためのデザイン？ 増補・改訂版 認知科学者のデザイン原論(新曜社)

広告

著者: D.A.ノーマン / 訳: 岡本明、安村通晃、伊賀聡一郎、野島久雄 / 出版社: 新曜社 / 2015年4月20日刊行(増補・改訂版) / 四六判520ページ。発見可能性、概念モデル、制約とフィードバック、ヒューマンエラーの捉え方といったデザインの原理を扱う古典の全面改訂版です。個別のパターンを自分で評価できる土台がほしい人に向いています。Webアプリの実装手順やUIパターン集ではないため、今日の画面を直す即効性は期待しないほうがよいでしょう。

Amazonで見る楽天で見るYahoo!ショッピングで見る

※価格・在庫は変動します。最新の情報は各販売サイトでご確認ください。

4冊の使い分けと、書籍で埋まらない部分#

役割と、いま詰まっている場所から選ぶための対応表です。

4冊に共通する限界が1つあります。どれも生成AIの本ではないため、AI特有のパターンは書かれていません。そこは前述のMicrosoftのガイドラインやGoogle PAIRのGuidebookのような公開資料、および各プラットフォームのデザインガイドラインで補うことになります。逆に言えば、モデルの世代交代で内容が古びないのもこの4冊の性質です。

AIアプリ特有のUXパターンと、書籍の知識のつなぎ方#

ここからは、LLMアプリでよく議論になる5つのパターンを、上の4冊とAIガイドラインのどこにつながるかという形で整理します。

入口: 何ができるかを画面で伝える#

空のテキストボックスは、何でもできるように見えて何も示していません。Microsoftのガイドラインの最初の2項目(G1・G2)が「何ができるか」「どの程度うまくできるか」を明確にせよと置いているのは、この問題が最初の接触時に起きるからです。Google PAIRのMental Modelsの章も、利用者が最初に形成する期待をどう設計するかを扱っています。

実務的な打ち手は地味です。よく使われる依頼を数件、実行可能な形で並べる。対象データの範囲(いつからいつまでの、どの部署の資料か)を明記する。苦手なこと(計算、最新情報、社外への回答)を最初に書く。このとき、例文を並べるだけでなく「テンプレート」というオブジェクトとして保存・共有できるようにしておくと、2冊目の考え方につながります。

途中経過: ストリーミングの見せ方#

Nielsen Norman Groupがまとめている応答時間の3つの限界は、0.1秒で即座に反応していると感じられ、1.0秒で思考の流れが途切れず、10秒で利用者の注意がその対話に留まる限界だとされています(Jakob Nielsen、1993年の記述に基づく記事)。LLMの生成は多くの場合この10秒に届きうるため、ストリーミングによる逐次表示で「動いている」ことを示すのが標準的になりました。

ただし、ストリーミングは万能ではありません。文章が流れ続けると読み始めるべきかどうか迷いますし、途中の誤りを見て不安になる利用者もいます。エージェントのように複数の手順を踏む処理では、生の出力を流すより「いま何の段階か」を段階で示すほうが伝わることがあります。そして支援技術への通知は、3冊目とWCAG 2.2の4.1.3が扱う領域です。中断ボタンを常に出しておくのも、費用と体感の両面で効きます。

根拠: 出典と確信度の提示#

RAGを使っているなら、参照した文書へのリンクを回答のどこに置くかが体験を左右します。末尾にまとめて並べるのか、文ごとに付けるのか、クリックで該当箇所にジャンプできるのか。PAIRのExplainability + Trustの章は、説明が信頼につながる条件と、説明が逆に過信を生む場合の両方を扱っています。

確信度の伝え方は難しい論点です。モデルが出す数値をそのまま百分率で見せると、根拠のある確率のように受け取られます。Microsoftのガイドラインの例示では、推薦の文脈で「we think you'll like(あなたは気に入ると思います)」といったヘッジ表現が挙げられています。数値よりも、参照できた資料の件数や更新日、検索にヒットしなかった事実を示すほうが、利用者の判断材料としては誠実な場面が多いはずです。

訂正: 惜しい出力を捨てさせない#

Microsoftのガイドラインが「When wrong」というフェーズを独立して置き、G9で効率的な訂正を求めているのは、AI機能では誤りが例外ではなく通常の状態だからです。ここで必要なのは、再生成ボタンだけではありません。出力の一部を選んで直す、指示を1行足して差分だけ作り直す、前の回答に戻す、といった操作の設計です。

『誰のためのデザイン？』の第5章が示す「エラーはデザインの問題である」という立場は、そのままこの設計に使えます。利用者が間違った指示を出したときも、システムが間違った出力を返したときも、責めるべき相手を探すのではなく、戻れる経路を用意するのがデザイン側の仕事だという整理です。

失敗と承認: 止まり方を決めておく#

PAIRのErrors + Graceful Failureの章が扱うように、AI機能は失敗するものとして設計します。検索に何もヒットしなかった、生成が制限に達した、ツール呼び出しが失敗した。それぞれで画面に何を出し、次に何ができるかを決めておく必要があります。Microsoftのガイドラインが挙げるG10「Scope services when in doubt」は、確信が持てないときに曖昧性を解消するか、機能を縮退させよという指針です。

エージェントのように実際の操作を行う機能では、これが承認の設計と直結します。どの操作の前に人の確認を挟むか、確認画面に何を出すかは、UIの問題であると同時にリスク設計の問題です。

本を読む前と読んだ後にやること#

書籍は、読む前の準備で得られるものが変わります。自分のアプリの症状を先に言語化しておくと、どの章を重点的に読むかが決まります。

読んだ後は、いきなり全画面を作り直すのではなく、影響範囲の小さいところから試すのが現実的です。

この順序は、影響範囲の小ささと効果の出やすさで並べています。画面構造の作り直しは最後です。先に入口と失敗時の文言を直すほうが、投入コストに対する効果が大きい場面が多いと考えられます。

本記事に記載した書名・著者・訳者・出版社・刊行時期・ページ数・判型・目次は、各出版社の公式書誌ページおよび版元ドットコムの書誌情報(frontmatterのsources)で確認できた範囲の情報です。版・価格・在庫・目次は改定されるため、購入前に各公式ページで最新情報をご確認ください。各書籍の「扱っていない範囲」の記述は、公開されている目次と内容紹介から判断できる範囲の整理で、本文全体を網羅的に検証したものではありません。Microsoft ResearchのGuidelines for Human-AI Interactionの項目名と4フェーズ区分はCHI 2019のcamera-ready PDF、章立ての記述はGoogle PAIRのPeople + AI Guidebook、応答時間の3つの限界はNielsen Norman Groupの記事、ステータスメッセージの要件はWCAG 2.2の達成基準4.1.3に基づきます。

よくある質問#

まとめ#

LLMアプリの体験は、モデルの性能だけで決まりません。何ができるか分かる入口があるか、待っている間に何が起きているか伝わるか、答えの根拠を確認できるか、惜しい出力を直せるか、失敗したときに戻れるか。この5点は、生成AI以前からUI設計が扱ってきた問題の言い換えでもあります。

今回紹介した4冊は守備範囲が異なります。全体像と語彙を揃える本、画面の構造を決める原則の本、実装とガイドラインに落とす本、認知の原理を押さえる本。いずれも「これを読めばAIアプリが良くなる」種類の本ではなく、いま何が分かっていないのかをはっきりさせてくれる本だと捉えるのが実態に近いはずです。まずは手元の不満を5つに分類し、いちばん件数の多いところに対応する1冊から始めてみてください。画面の改善は、原因を言葉にできた瞬間から進み始めます。