Knowledge OS Design Principles v1.0.0 — Phase 4 Screen Guidelines

Introduction

この章の役割

Phase 3では、ボタン、カード、色、余白などの共通部品を定義しました。 Phase 4では、それらの部品を各画面でどのように組み合わせるかを定義します。

この章は、完成画面の見た目を固定するものではありません。各画面が果たすべき役割と、利用者が迷わないために守るべき構造を固定するものです。

画面を作る前に、利用者がその画面で達成することを1つ決める。 その目的に直接関係しない情報や操作は、別画面、補助領域、または段階的表示へ移します。

対象画面

全画面共通ルール
ホーム
資料一覧
資料詳細
資料追加
AIに聞く
検索
設定
ヘルプ
処理状況
共通状態設計
Cursor向け実装ルール
画面レビュー基準

各画面で定義する項目

目的

利用者がその画面で達成することを定義します。

配置

情報と操作をどこに、どの順番で置くかを定義します。

優先順位

最初に見せるものと、後から見せるものを定義します。

状態

初回、通常、Loading、Empty、Errorなどを定義します。

禁止事項

その画面で実装してはいけないUIを定義します。

完成条件

実装完了と判断するための確認項目を定義します。

01 — Common Screen Rules

1 全画面共通ルール

画面の基本構造

主要画面は、原則として次の4領域から構成します。

1. グローバルナビゲーション ホーム、資料、検索、AIに聞く、設定、ヘルプ

2. ページヘッダー ページタイトル、説明、主要操作

3. メインコンテンツ その画面の目的を達成するための中心領域

4. 補助情報 フィルター、メタ情報、関連項目、補足操作

ページヘッダー

項目	ルール
タイトル	画面名を短い日本語で表示する。
説明	画面でできることを1文で説明する。
主要操作	右上にPrimaryボタンを原則1つ置く。
戻る操作	一覧から詳細へ移動した場合のみ表示する。

情報の表示順

1

現在の目的

この画面で何を確認・実行するか。

2

必要な情報

判断や操作に必要な資料・状態・説明。

3

主要操作

目的を達成するための次の操作。

4

補助情報

履歴、詳細設定、関連資料など。

主要操作の数

Primaryボタンは原則1つ。
Secondaryボタンは2つ程度まで。
頻度の低い操作はメニュー内へ移す。
危険操作は通常操作から離す。

画面タイトルの標準名称

画面	表示名	使用しない名称
ホーム	ホーム	ダッシュボード、Overview
資料一覧	資料	ナレッジ、Vault、Repository
資料追加	資料を追加	Ingestion、Import Center
AI質問	AIに聞く	AI Chat、RAG Console
検索	検索	Semantic Search、Explorer
設定	設定	Configuration
ヘルプ	ヘルプ	Documentation Portal
処理状況	処理状況	ジョブ一覧、AI処理一覧、Job Queue

画面に機能名を並べない OCR、Embedding、RAG、LLM、Vector DBなどの技術用語を、一般利用者向け画面の主要見出しに使用してはいけません。

「資料一覧」は設計上の分類名利用者向けの画面タイトルとナビゲーション名は「資料」に統一します。「資料一覧」は、設計・開発上の画面分類名としてのみ使用します。

02 — Home

2 ホーム

目的

利用者がKnowledge OSを開いた直後に、現在の状態と次に行うべき操作を理解できるようにします。

ホームは全機能を紹介するメニュー画面ではありません。利用者が日常業務へすぐ戻るための出発点です。

利用者が知りたいこと

最近使った資料はどこか。
処理中・確認待ちの資料はあるか。
今日行うべきことはあるか。
新しい資料を追加するにはどうすればよいか。
検索やAIへの質問をどこから始めるか。

基本配置

ページヘッダー 「ホーム」＋必要に応じて短い挨拶または説明

最優先領域 検索欄、または今日確認すべき案内

最近使った資料 最大5件程度

確認が必要な項目 読み取り失敗、未確認、処理停止など

よく使う操作 資料を追加、AIに聞く、検索

優先順位

1

確認が必要な状態

処理失敗や未確認資料がある場合に最優先表示します。

2

検索または質問の入口

資料を探す行動をすぐ開始できるようにします。

3

よく使う操作

資料追加などの代表操作を案内します。

02 — Home / Details

ホームの詳細ルール

推奨レイアウト例

ホーム

資料を探したり、最近の作業を続けたりできます

表示するもの

資料検索への入口
最近使った資料
確認が必要な状態
資料追加への入口
AIに聞くへの入口

表示してよいもの

最近追加された資料
お気に入り資料
前回の続き
初回利用者向けの簡単な案内
システム接続状態の重要通知

使ってはいけないもの

意味のないグラフや件数カード
機能をすべて並べた巨大メニュー
AI利用回数など、業務価値と関係の薄い数値
派手なウェルカムアニメーション
製品紹介バナーの常設
複数のPrimaryボタン
利用者が閉じられないお知らせ
毎回表示されるチュートリアル

初回利用時

資料が1件もない場合は、通常のダッシュボードを表示せず、初回Empty Stateを表示します。

まず、最初の資料を追加しましょう PDF、Word、画像などを登録すると、資料の内容を検索したり、AIに質問したりできます。主要ボタンは「資料を追加」とします。

完成条件

最初に何をすればよいか5秒以内に分かる。
確認が必要な問題を見落としにくい。
最近の作業へ2操作以内で戻れる。
資料追加への入口が明確である。
不要な統計カードがない。

03 — Document List

3 資料一覧

目的

登録済みの資料を、見つける、確認する、整理するための画面です。

ファイル管理ソフトのように複雑な操作を提供するのではなく、業務資料を内容から探し、必要な資料へ到達することを最優先にします。

基本配置

ページヘッダー 「資料」＋説明＋「資料を追加」

検索欄 資料名・内容・タグ・顧客名を検索

絞り込み 文書種別、更新日、タグ、保存場所

表示切り替え 一覧表示またはカード表示

資料一覧 資料名、種類、更新日、主要タグ

ページ操作 件数、並び替え、ページ送り

優先順位

1

資料名と内容

目的の資料か判断できる情報を最初に見せます。

2

検索と絞り込み

一覧を眺め続けずに目的資料へ到達できるようにします。

3

更新日と種類

資料の新しさと形式を判断できるようにします。

4

補助操作

編集、移動、削除は必要時だけ表示します。

資料1件に表示する情報

情報	重要度	ルール
資料名	最重要	2行以内。省略時は全文確認可能にする。
内容の抜粋	高	検索時またはカード表示時に表示する。
文書種別	中	PDF、Word、画像など一般名称で表示する。
更新日	中	年月日で表示する。
タグ	中	最大3件まで表示する。
保存場所	低	必要な場合のみ補助表示する。

03 — Document List / Details

資料一覧の詳細ルール

一覧表示とカード表示

一覧表示

資料数が多く、名前や日付を比較する場合に使用します。

業務利用の標準表示とする。
1行の情報量を限定する。
操作列を常時大きく表示しない。

カード表示

内容の抜粋や画像プレビューが重要な場合に使用します。

1〜3列で表示する。
カード内に操作を詰め込みすぎない。
高さを揃えるために文字を削りすぎない。

資料を開く操作

資料名または行全体をクリック可能にする。
ダブルクリックを必須にしない。
開くボタンを各行へ重複表示しない。
キーボードでも開けるようにする。

複数選択

複数選択は、削除、タグ付け、エクスポートなど、実際に一括処理が必要な場合のみ提供します。

通常時はチェックボックスを目立たせすぎない。
選択開始後に一括操作バーを表示する。
選択件数を明示する。
危険操作は確認ダイアログを表示する。

並び替え

初期状態は「更新日の新しい順」を基本とします。

更新日
追加日
資料名
文書種別

AI関連度やスコアを通常一覧の初期並び順に使用してはいけません。

使ってはいけないもの

ファイル名だけの一覧
各行に5個以上の操作アイコン
意味の分からないAIスコア
大量の色付きタグ
横幅を超える過剰な列
自動で変化する並び順
マウスホバーしないと資料名が読めないUI
削除を確認なしで実行する操作

Empty State

まだ資料が登録されていません PDF、Word、画像などの資料を追加すると、ここから内容を確認・検索できます。主要操作は「資料を追加」です。

検索結果なし

条件に一致する資料が見つかりませんでした検索語を短くするか、絞り込み条件を解除してください。「条件をすべて消す」操作を表示します。

完成条件

資料名、種類、更新日を一覧で確認できる。
検索と絞り込みが混同されていない。
目的の資料を少ない操作で開ける。
補助操作が資料名より目立っていない。
0件時に次の操作が案内される。

04 — Document Detail

4 資料詳細

目的

1つの資料について、内容を読む、情報を確認する、必要に応じて整理・活用するための画面です。

資料詳細では、AI要約やメタデータではなく、元の資料そのものを主役にします。

基本配置

上部ナビゲーション 「資料に戻る」＋パンくず

資料ヘッダー 資料名、種類、更新日、主要操作

資料本文・プレビュー PDF、Word抽出文、画像など

補助パネル タグ、保存場所、関連資料、処理状態

活用操作 AIに聞く、要点を見る、コピー、元ファイルを開く

優先順位

1

元資料の内容

最も広い領域を使用し、読める状態にします。

2

資料名と基本情報

何を見ているかを常に確認できるようにします。

3

資料を活用する操作

AIへの質問、コピーなどを補助的に提供します。

4

メタデータ

タグや保存場所は補助パネルへ配置します。

資料ヘッダー

項目	配置	ルール
資料名	左上	省略しすぎず、全文確認可能にする。
種類・更新日	資料名の下	補助文字で表示する。
主要操作	右上	「AIに聞く」など1つに絞る。
その他操作	メニュー	名前変更、移動、削除など。

04 — Document Detail / Details

資料詳細の詳細ルール

プレビュー領域

資料本文を最も広い領域で表示する。
PDFはページ移動、拡大縮小を提供する。
抽出テキストは読みやすい行幅にする。
画像は画面幅に合わせて表示する。
元ファイルを外部アプリで開く操作を用意する。

AI要約

AI要約を表示する場合は、資料本文の代わりではなく、補助情報として提供します。

初期状態で資料本文より大きく表示しない。
「要点を見る」など利用者操作で展開する。
要約の根拠となる箇所へ移動できるようにする。
要約を元資料と混同しない見た目にする。
自動生成であることを控えめに説明する。

タグ編集

閲覧中にタグを追加・削除できる。
編集状態と閲覧状態を明確に分ける。
自動提案タグは勝手に確定しない。
AI提案は「候補」として表示する。

使ってはいけないもの

AI要約だけを表示し、元資料を隠す
メタデータを画面中央に大きく表示する
資料を開くたびに自動でAI処理を開始する
編集・削除ボタンをPrimary表示する
根拠箇所のないAI回答
保存されていない変更を説明なく破棄する
プレビュー失敗時に真っ白な領域を表示する

プレビューできない場合

この資料は画面内で表示できません元のアプリで資料を開くか、抽出したテキストを確認してください。「元ファイルを開く」と「抽出テキストを見る」を表示します。

読み取りエラーの場合

資料の文字を正しく読み取れませんでした元の資料は保存されています。内容を手動で確認するか、もう一度文字を読み取ってください。

完成条件

元資料が画面の主役になっている。
資料名と現在位置を常に確認できる。
AI要約と元資料が視覚的に区別されている。
元ファイルを開く操作がある。
プレビュー失敗時の代替手段がある。

05 — Add Document

5 資料追加

目的

利用者が迷わず資料を選択し、登録結果を確認できるようにします。

OCR、インデックス、Embeddingなどの内部処理を意識させず、「資料を追加する」という一つの行動として設計します。

基本フロー

1

選ぶ

ファイルまたはフォルダを選択します。

2

確認する

選択した資料と保存先を確認します。

3

登録する

資料を読み込み、保存します。

4

結果を見る

成功・失敗と次の操作を確認します。

基本配置

ページヘッダー 「資料を追加」＋追加できる形式の説明

ファイル選択領域 ドラッグ＆ドロップ＋「ファイルを選ぶ」

選択済み資料 資料名、種類、容量、件数

登録設定 保存先、タグ、重複時の扱い

実行操作 「資料を登録」

ファイル選択領域

ドラッグ＆ドロップだけに依存せず、必ず「ファイルを選ぶ」ボタンを用意します。

ここに資料をドラッグするか、ファイルを選んでください PDF、Word、Excel、テキスト、画像を追加できます。

設定項目の優先順位

項目	初期表示	ルール
ファイル選択	表示	必須。
保存先	表示	初期値を設定し、変更可能にする。
タグ	表示	任意。候補を提案してよい。
重複時の処理	必要時のみ	重複を検出した場合に表示する。
OCR設定	非表示	詳細設定へ移す。
AIモデル選択	非表示	通常利用者には表示しない。

05 — Add Document / Details

資料追加の詳細ルール

登録中の表示

複数の処理を内部で行う場合でも、技術名ではなく、利用者が理解できる作業内容を表示します。

資料を確認しています
文字を読み取っています
検索できるように準備しています
保存しています

10件中3件を登録しています現在：「相続手続きの進め方.pdf」

登録完了

8件の資料を登録しました 2件は内容の確認が必要です。「登録した資料を見る」と「確認が必要な資料を見る」を表示します。

一部失敗

成功した資料まで失敗扱いにしてはいけません。

8件を登録し、2件は登録できませんでした登録できなかった資料と理由を一覧で確認できます。

重複資料

重複が見つかった場合は、利用者に次の選択肢を示します。

既存の資料を開く
新しい版として登録する
今回の登録から除外する

「上書き」のように影響範囲が分かりにくい表現は避けます。

使ってはいけないもの

最初から大量の技術設定を表示する
ドラッグ＆ドロップだけを提供する
ファイル選択直後に確認なしで登録を開始する
進捗の分からない全画面スピナー
一部失敗時に全件を最初からやり直させる
AIモデルやOCRエンジンの選択を必須にする
成功後に次の操作を案内しない

キャンセル

登録開始前は自由にキャンセルできる。
登録中に停止可能な場合は「登録を中止」を表示する。
中止しても登録済み資料が残る場合は説明する。
画面を閉じるだけで不明な中断状態を作らない。

完成条件

利用者が登録できる形式を理解できる。
ファイル選択方法が2通り以上ある。
登録前に対象資料を確認できる。
処理中に現在の作業と進捗が分かる。
成功・一部失敗・失敗が区別される。
完了後の次の操作が案内される。

06 — Ask AI

6 AIに聞く

目的

登録した資料をもとに質問し、回答と根拠資料を確認する画面です。

一般的な雑談チャットではなく、社内・業務資料を確認するための質問機能として設計します。

利用者が達成すること

質問を入力する。
回答を読む。
回答の根拠となる資料を確認する。
必要に応じて追加質問する。
回答をコピーまたは業務へ活用する。

基本配置

ページヘッダー 「AIに聞く」＋登録資料をもとに回答する説明

質問入力欄 自然な文章を入力

対象範囲 すべての資料、選択資料、フォルダ、タグ

回答結論、説明、注意事項

根拠資料 資料名、該当箇所、資料を開く

追加操作 コピー、追加質問、質問をやり直す

優先順位

1

質問と回答

利用者が求めた内容を読みやすく表示します。

2

根拠資料

回答の直後に、参照した資料を表示します。

3

対象範囲

どの資料を調べた回答か確認できるようにします。

4

技術情報

モデル名などは通常表示しません。

06 — Ask AI / Details

AIに聞くの詳細ルール

初期画面

空のチャット欄だけを表示してはいけません。何を質問できるか具体例を示します。

資料の要点

この資料の重要な点を3つに整理して

手続き確認

相続手続きで必要な書類を教えて

比較

この2つの契約書の違いを整理して

質問入力欄

複数行入力に対応する。
Enter送信と改行方法を明確にする。
送信ボタンには「質問する」と表示する。
質問対象が限定されている場合は入力欄近くに表示する。
入力中の内容を不用意に消さない。

回答の構造

結論または直接的な回答
必要な説明
不明点または注意事項
参照した資料
追加で確認できること

根拠資料

根拠資料は回答の下に常時表示し、折りたたみの中だけに隠してはいけません。

項目	必須
資料名	必須
該当箇所の抜粋	可能な限り必須
ページ番号	取得可能な場合
資料を開く	必須
関連理由	必要に応じて

回答できない場合

登録されている資料からは確認できませんでした質問を言い換えるか、関連する資料を追加してください。推測だけで回答を埋めてはいけません。

資料に矛盾がある場合

資料によって記載内容が異なりますそれぞれの記載内容と資料の更新日を並べて示し、どちらかを勝手に正しいと確定しません。

使ってはいけないもの

根拠資料のない断定回答
一般チャットのような過剰な挨拶
回答より大きいAIロゴやキャラクター
モデル名・温度・トークン数の常時表示
根拠資料を折りたたみ内だけに隠す
質問送信時に過去回答を消す
「AIなので間違うことがあります」だけで責任を終える
利用者確認なしの自動保存・自動更新

完成条件

初めてでも質問例から使い方を理解できる。
回答対象となる資料範囲が分かる。
回答と根拠資料がセットで表示される。
回答不能時に次の行動が案内される。
AIより資料が信頼の中心になっている。

07 — Search

7 検索

目的

資料名、本文、タグ、顧客名、案件名などから、必要な資料や該当箇所を見つける画面です。

資料一覧の絞り込みよりも、資料の内容を横断して探すことを中心とします。

資料一覧内検索との違い

画面	目的
資料一覧	登録済み資料を整理しながら探す。
検索	資料の中身を横断して答えや記載箇所を探す。

基本配置

ページヘッダー 「検索」＋資料名や内容から探せる説明

検索欄 画面上部に大きく配置

検索条件 文書種別、期間、タグ、保存場所

検索結果概要 件数、検索語、適用中の条件

検索結果 資料名、該当箇所、更新日

検索結果1件の構造

資料名
一致した文章の抜粋
検索語のハイライト
文書種別・更新日
該当箇所を開く操作

優先順位

1

一致した内容

なぜ検索結果に出たかを理解できるようにします。

2

資料名

該当内容がどの資料にあるか示します。

3

絞り込み条件

検索範囲を調整できるようにします。

4

検索技術

ベクトル検索などの内部方式は表示しません。

07 — Search / Details

検索の詳細ルール

検索欄

画面上部に48px以上の高さで配置する。
検索語を入力後も保持する。
入力中のみクリアボタンを表示する。
Enterでも検索できる。
検索履歴は必要な場合のみ提供する。

プレースホルダー

良い例

資料名、顧客名、文書の内容を入力

悪い例

Semantic Query

検索結果の表示

検索語に一致した文章を2〜4行表示する。
検索語を背景色と太字で強調する。
抜粋の前後が途中の場合は省略記号を付ける。
該当ページへ直接移動できるようにする。
同じ資料内の一致箇所をまとめてもよい。

並び順

初期状態では、内容との関連性を優先しつつ、利用者が理解できる表示にします。

「関連度 0.823」のような内部スコアは表示しません。必要な場合は「内容がよく一致」「一部一致」など、理解可能な表現へ変換します。

検索候補

入力途中の候補は、次の範囲に限定します。

過去に使った検索語
登録済みタグ
顧客名または案件名
資料名

AIが勝手に長い質問文を補完する機能は標準では使用しません。

検索結果なし

「遺産分割協議」に一致する資料が見つかりませんでした「遺産分割」など短い言葉で検索するか、絞り込み条件を解除してください。

使ってはいけないもの

検索結果の理由が分からない一覧
資料名だけの検索結果
意味の分からない関連度スコア
検索語を変更すると勝手に条件が解除される動作
検索結果0件で何も案内しない画面
通常検索とAI質問を混在させすぎるUI
フィルターを常時すべて展開する表示

完成条件

検索欄が画面内で最も分かりやすい。
結果に出た理由を抜粋から理解できる。
該当箇所へ直接移動できる。
検索条件を簡単に解除できる。
結果なしの場合に改善方法が示される。

08 — Settings

8 設定

目的

利用者がKnowledge OSの動作、保存先、AI接続、表示方法などを確認・変更する画面です。

一般利用者向け設定と、管理者・開発者向け設定を同じ場所に混在させてはいけません。

設定カテゴリ

一般

表示、起動時の動作、通知など。

資料

保存先、取り込み、重複処理など。

AI

AI利用方法、接続先、APIキーなど。

ローカルAI

Runtime接続、モデル状況など。

プライバシー

外部送信、履歴、ログなど。

詳細設定

管理者・開発者向けの高度な設定。

基本配置

ページヘッダー 「設定」＋動作を変更できる説明

設定ナビゲーション 左側または上部のカテゴリ一覧

設定内容 カテゴリごとのフォーム

保存操作 変更がある場合のみ表示

危険な操作 初期化、データ削除などを最下部に分離

優先順位

1

設定名と説明

何を変更する設定か理解できるようにします。

2

現在の設定値

現在どう動いているか確認できるようにします。

3

変更結果

変更すると何が変わるか説明します。

4

技術詳細

必要な利用者だけが確認できる場所へ分離します。

08 — Settings / Details

設定の詳細ルール

設定名の書き方

良い例

資料の保存先
起動時にホームを表示
クラウドAIを使用する
外部へ送信する前に確認する

悪い例

Storage Path
Startup Route
Enable Cloud Provider
External Transmission Guard

設定説明

設定名だけで影響が分かりにくい場合は、直下に1〜2文の説明を表示します。

外部へ送信する前に確認するクラウドAIを利用するときに、送信する資料と内容を確認する画面を表示します。

保存方式

即時反映できる簡単な設定は自動保存してよい。
複数項目が関連する場合は「変更を保存」を使用する。
保存済み・未保存の状態を明確にする。
保存後は「設定を保存しました」と具体的に通知する。

APIキー

初期表示では値を隠す。
表示切り替え操作を用意する。
コピー操作を提供する場合は慎重に扱う。
接続確認ボタンを用意する。
保存成功と接続成功を区別する。

接続状態

状態	表示例
接続済み	正常に接続されています
未設定	まだ接続情報が設定されていません
接続失敗	接続できませんでした。設定内容を確認してください
確認中	接続を確認しています…

詳細設定

高度な設定は、通常の設定一覧から分離し、「詳細設定」として折りたたむか別ページへ移します。

モデルパス
ポート番号
タイムアウト
ログレベル
インデックス再構築

危険な操作

データの初期化登録した資料と設定が削除されます。通常設定から十分に離し、Danger Zoneとして最下部に配置します。

使ってはいけないもの

一般設定と開発者設定の混在
説明のないスイッチ
保存ボタンを押すまで現在値が分からないUI
接続失敗を赤い点だけで示す表示
APIキーを常時平文表示する
危険操作を通常ボタンと並べる
初期化を確認なしで実行する

完成条件

一般利用者向け設定だけで主要機能を設定できる。
設定名から変更内容を予測できる。
現在値と変更結果が分かる。
接続状態が文章でも表示される。
危険操作が通常操作から分離されている。

09 — Help

9 ヘルプ

目的

利用者が操作に迷ったときに、自分で解決方法を見つける画面です。

製品仕様書や技術ドキュメントではなく、実際の操作をやさしい日本語で案内します。

v1.0.0での実装方針ヘルプ画面は、外部マニュアルへの入口として実装します。アプリ内に長大なマニュアルを複製しません。アプリ内で完結するヘルプは、将来のバージョンで段階的に拡充します。

基本配置

ページヘッダー 「ヘルプ」＋困っていることを検索できる説明

ヘルプ検索 操作名や困りごとを入力

よく使う案内 資料追加、検索、AIへの質問、設定

カテゴリ はじめに、資料、検索、AI、設定、トラブル

サポート情報 バージョン、問い合わせ先、診断情報

優先順位

1

困りごとの解決

利用者が行いたいことから案内へ到達できるようにします。

2

操作手順

短い手順と画面名で説明します。

3

トラブル対応

原因よりも、まず直し方を示します。

4

技術情報

サポート時に必要な情報として下部へ配置します。

推奨カテゴリ

はじめに
資料を追加する
資料を探す
AIに質問する
資料を整理する
設定を変更する
困ったとき

09 — Help / Details

ヘルプの詳細ルール

ヘルプ記事の構造

何ができるか
操作する前の確認
手順
操作後にどうなるか
うまくいかない場合

手順の書き方

良い例

左側の「資料」を開きます。
右上の「資料を追加」を押します。
追加するファイルを選びます。
「資料を登録」を押します。

悪い例

Document Repositoryへ遷移し、 Ingestion Dialogから対象リソースを選択します。

検索キーワード

記事タイトルだけでなく、利用者が入力しそうな言葉でも見つかるようにします。

記事タイトル

資料を削除する

画面内ヘルプ

その場で解決できる短い説明は、ヘルプ画面へ移動させず、対象画面内に表示します。

入力欄の補足
設定の影響
エラーの解決方法
初回操作の案内

問い合わせ

自力で解決できない場合の問い合わせ方法を用意します。

問い合わせ先
必要な情報
製品バージョン
エラー内容のコピー
診断情報の出力

診断情報を送る場合は、含まれる情報を利用者に説明します。

使ってはいけないもの

開発者向けREADMEをそのまま掲載する
技術用語だけで構成した記事
古い画面画像を放置する
文章だけで長く説明し続ける
検索できない巨大マニュアル
「管理者に問い合わせてください」だけの案内
エラーコードだけを検索させる設計

完成条件

利用者の困りごとから記事を探せる。
操作手順が実際の画面名称と一致している。
1手順に複数操作を詰め込んでいない。
うまくいかない場合の対応が書かれている。
問い合わせ時に必要な情報を取得できる。

10 — Processing Status

10 処理状況

目的

資料の登録、文字の読み取り、検索の準備、AI処理などの進み具合と、確認が必要な処理を確認する画面です。

「AI」を前面に出さず、利用者の資料に対して何が行われているかを中心に表示します。状態の名称・色・アイコン・文言は、Phase 8の状態定義に従います。

優先順位

1

要確認・失敗

利用者の対応が必要な処理を最優先で表示します。

2

処理中

現在何をしているかを具体的に表示します。

3

処理待ち

これから実行される処理を表示します。

4

完了・履歴

完了した処理は控えめに表示し、必要な場合のみ履歴を確認できるようにします。

表示項目

項目	ルール
対象資料	資料名を表示し、資料詳細を開けるようにする。
処理内容	「文字を読み取る」など、利用者の言葉で表示する。
現在の状態	Phase 8の状態名・色・アイコンで表示する。
開始日時・完了日時	年月日と時刻で表示する。
進捗	件数が分かる場合は「10件中3件」と表示する。
次に必要な操作	確認する、もう一度試すなどを表示する。

操作

結果を見る。
内容を確認する。
もう一度試す。
処理を中止する。
完了した処理を履歴から非表示にする。

使ってはいけないもの

内部ジョブIDの常時表示
RAG、Embeddingなどの技術用語
失敗理由をエラーコードだけで表示する
完了した処理を大量に常時表示する
AI処理だけを特別扱いする派手な画面
画面全体をスピナーで覆う表示

完成条件

確認が必要な処理をすぐ見つけられる。
処理ごとに状態と次の操作が分かる。
一部失敗が全失敗と区別されている。
技術用語が利用者向け表示に出ていない。
処理中でも他の画面操作を続けられる。

11 — Screen States

11 共通状態設計

各画面は通常状態だけでなく、初回、Loading、Empty、 Error、Offlineなどを必ず設計します。

必要な状態

状態	必要な表示
初回	機能の説明と最初の操作。
通常	主要情報と操作。
Loading	処理内容と必要に応じて進捗。
Empty	データがない理由と次の操作。
一部失敗	成功した内容と失敗した内容を分ける。
Error	問題、影響、解決方法。
Offline	利用可能な機能と利用できない機能。
権限なし	理由と必要な対応。

状態を画面全体に広げる条件

画面全体をLoadingやErrorへ置き換えるのは、主要内容を一切表示できない場合だけです。

一部だけ読み込み中なら、その領域だけLoadingにする。
関連資料取得失敗でも、元資料は表示する。
AI接続失敗でも、資料閲覧と通常検索は残す。
通知取得失敗でも、ホーム全体をエラーにしない。

ローカルAI未接続

ローカルAIに接続できません資料の閲覧と通常検索は利用できます。 AIへの質問を利用するには、設定から接続を確認してください。

クラウドAI未設定

クラウドAIはまだ設定されていませんローカルAIを使用するか、設定からAPIキーを登録してください。

権限がない場合

この資料を開く権限がありません資料の管理者にアクセス権を確認してください。技術的な権限コードは表示しません。

12 — Cursor Implementation Rules

12 Cursor向け実装ルール

Cursorやその他のAI開発支援ツールは、既存画面の見た目だけを模倣するのではなく、本章で定義した画面目的と優先順位に従って実装します。

共通指示

Knowledge OS Design Principles v1.0.0の
Phase 3「UI Design System」と
Phase 4「Screen Guidelines」に従って実装してください。

画面を実装する前に、次を確認してください。

1. この画面の目的を1文で定義する
2. 利用者の主要操作を1つ決める
3. Primaryボタンを原則1つにする
4. 必須情報と補助情報を分離する
5. 通常、初回、Loading、Empty、Errorを設計する
6. AIより資料を主役にする
7. 技術用語を一般利用者向け画面へ出さない
8. 既存コンポーネントを優先して再利用する
9. Phase 3のSpacing、Typography、Colorを使用する
10. 本章の禁止事項に該当するUIを追加しない

画面実装前の出力

Cursorはコードを変更する前に、次の内容を簡潔に整理します。

【画面名】
資料一覧

【画面の目的】
登録済み資料を探し、内容を確認する。

【主要操作】
資料を開く。

【Primaryボタン】
資料を追加。

【主要情報】
資料名、内容の抜粋、文書種別、更新日。

【補助情報】
タグ、保存場所、その他操作。

【必要な状態】
通常、資料なし、検索結果なし、Loading、取得エラー。

既存画面を修正する場合

現在の機能と画面要素を一覧化する。
Phase 4の画面目的と一致するか確認する。
不要な要素を先に削除する。
既存機能を壊さない範囲で配置を整理する。
共通コンポーネントへ置き換える。
状態別表示を追加する。
ビルドと主要操作を確認する。

機能を勝手に削除しない UI上不要に見える機能でも、既存業務で使用されている可能性があります。非表示、移動、統合を行う場合は、機能の呼び出し経路を維持してください。

12 — Cursor Screen Prompts

画面別のCursor指示

ホーム

ホーム画面をScreen Guidelinesに従って実装してください。

目的：
利用者が現在の状態と次の操作を理解する。

優先順位：
1. 確認が必要な状態
2. 検索または質問の入口
3. 最近使った資料
4. よく使う操作

必須：
- 「資料を追加」をPrimaryボタンにする
- 最近使った資料を最大5件表示する
- 確認が必要な資料を表示する
- 初回利用時は専用Empty Stateを表示する

禁止：
- 意味のない統計グラフ
- 全機能のカード一覧
- AI利用回数などの表示
- 複数のPrimaryボタン

資料一覧

資料一覧画面をScreen Guidelinesに従って実装してください。

目的：
登録済み資料を探し、内容を確認する。

必須：
- ページ上部に検索欄
- 文書種別、更新日、タグの絞り込み
- 資料名、種類、更新日、主要タグを表示
- 行またはカード全体から詳細を開ける
- 資料なしと検索結果なしを分ける
- Primaryボタンは「資料を追加」

禁止：
- 各行に多数の操作アイコン
- AI関連度スコアの表示
- ファイル名だけの一覧
- 確認なしの削除

資料詳細

資料詳細画面をScreen Guidelinesに従って実装してください。

目的：
元資料を読み、必要に応じて整理・活用する。

必須：
- 元資料プレビューを主領域にする
- 資料名、種類、更新日を上部に表示
- AI要約は補助領域に置く
- 根拠箇所へ移動できるようにする
- 元ファイルを開く操作を用意する
- プレビュー失敗時の代替表示を用意する

禁止：
- AI要約だけを表示する
- メタデータを主役にする
- 画面表示時の自動AI実行
- 削除ボタンのPrimary表示

資料追加

資料追加画面をScreen Guidelinesに従って実装してください。

目的：
資料を選び、登録し、結果を確認する。

必須：
- ドラッグ＆ドロップとファイル選択ボタン
- 登録前の選択資料確認
- 保存先と任意タグ
- 登録中の処理内容と進捗
- 成功、一部失敗、失敗の結果表示
- Primaryボタンは「資料を登録」

禁止：
- 技術設定の初期表示
- ファイル選択直後の自動登録
- 進捗のない全画面Loading
- 一部失敗時の全件再実行要求

12 — Cursor Screen Prompts

画面別のCursor指示・続き

AIに聞く

AIに聞く画面をScreen Guidelinesに従って実装してください。

目的：
登録資料へ質問し、回答と根拠資料を確認する。

必須：
- 初期画面に質問例を表示
- 質問対象の資料範囲を表示
- 回答の直下に根拠資料を表示
- 資料名、該当箇所、資料を開く操作
- 回答不能時に次の操作を案内
- 回答と元資料を明確に区別する

禁止：
- 根拠資料のない断定
- AIロゴの過度な強調
- モデル名やトークン数の常時表示
- 根拠資料を折りたたみだけに隠す
- 利用者確認なしの自動確定

検索

検索画面をScreen Guidelinesに従って実装してください。

目的：
資料の内容を横断して必要な記載箇所を見つける。

必須：
- 上部の大きな検索欄
- 資料名と一致箇所の抜粋
- 検索語のハイライト
- 文書種別、期間、タグの絞り込み
- 該当箇所へ直接移動
- 0件時の改善案内

禁止：
- 資料名だけの結果
- 内部関連度スコア
- 検索理由の分からない表示
- 通常検索とAI回答の混在

設定

設定画面をScreen Guidelinesに従って実装してください。

目的：
製品の動作、保存先、AI接続などを確認・変更する。

必須：
- 一般、資料、AI、プライバシー、詳細設定に分類
- 設定名と説明を併記
- 現在値を明確に表示
- 保存状態を表示
- 接続確認を提供
- 危険操作を最下部に分離

禁止：
- 一般設定と開発者設定の混在
- 説明のないスイッチ
- APIキーの平文常時表示
- 危険操作と通常操作の並列配置

ヘルプ

ヘルプ画面をScreen Guidelinesに従って実装してください。

目的：
利用者が操作方法やトラブルの解決策を見つける。

必須：
- ヘルプ検索
- よく使う操作への入口
- 困りごと別カテゴリ
- やさしい日本語の手順
- 問い合わせ方法
- バージョンと診断情報

禁止：
- 開発者READMEの流用
- 技術用語だけの記事
- 検索できない長大なマニュアル
- 問い合わせだけに誘導する回答

13 — Implementation Structure

13 推奨コンポーネント構成

画面ごとにすべてを直接実装せず、共通部品へ分割します。

共通レイアウト

AppShell
├── GlobalSidebar
├── AppHeader
├── PageContainer
│   ├── PageHeader
│   ├── PageContent
│   └── PageFooter
└── GlobalFeedback
    ├── ToastContainer
    ├── SystemBanner
    └── ConfirmDialog

ホーム

HomePage
├── PageHeader
├── GlobalSearchEntry
├── AttentionPanel
├── RecentDocuments
├── QuickActions
└── HomeEmptyState

資料一覧

DocumentsPage
├── PageHeader
├── DocumentSearchBar
├── DocumentFilterBar
├── DocumentViewSwitcher
├── DocumentList
│   ├── DocumentListRow
│   └── DocumentCard
├── DocumentPagination
└── DocumentEmptyState

資料詳細

DocumentDetailPage
├── BackNavigation
├── DocumentHeader
├── DocumentViewer
├── DocumentMetadataPanel
├── DocumentSummaryPanel
├── RelatedDocuments
└── DocumentErrorState

資料追加

DocumentImportPage
├── PageHeader
├── FileDropZone
├── SelectedFileList
├── ImportSettings
├── ImportProgress
├── ImportResult
└── DuplicateDocumentDialog

AIに聞く

AskAiPage
├── PageHeader
├── QuestionScopeSelector
├── QuestionComposer
├── SuggestedQuestions
├── AnswerView
├── SourceDocumentList
└── AskAiErrorState

検索

SearchPage
├── PageHeader
├── GlobalSearchInput
├── SearchFilterBar
├── SearchSummary
├── SearchResultList
│   └── SearchResultItem
└── SearchEmptyState

設定とヘルプ

SettingsPage
├── SettingsNavigation
├── SettingsSection
├── SettingsField
├── ConnectionStatus
├── SaveStatus
└── DangerZone

HelpPage
├── HelpSearch
├── FeaturedHelpTopics
├── HelpCategoryList
├── HelpArticle
├── SupportInformation
└── DiagnosticInformation

14 — Screen Review Checklist

14 画面レビュー基準

目的

画面の目的を1文で説明できる。
画面内の主要操作が1つに絞られている。
目的と無関係な情報が前面に出ていない。
利用者が次に行うことを理解できる。

配置

ページタイトルが左上にある。
主要操作が右上または自然な終点にある。
最重要情報が画面上部にある。
補助情報が主領域を邪魔していない。
危険操作が通常操作から離れている。

優先順位

元資料がAI情報より優先されている。
利用者の作業が製品紹介より優先されている。
状態通知が必要な場合に見落としにくい。
低頻度操作が常時目立っていない。

文言

画面名が一般的な日本語になっている。
ボタンから操作結果を予測できる。
専門用語を必要以上に使用していない。
エラーに解決方法が書かれている。
Empty Stateに次の操作がある。

状態

初回状態が設計されている。
Loading状態が設計されている。
Empty状態が設計されている。
Error状態が設計されている。
一部失敗が全失敗と区別されている。
接続切れ時も利用可能な機能が残る。

アクセシビリティ

本文が16px以上である。
主要操作の高さが44px以上である。
キーボードで操作できる。
フォーカス位置が見える。
色以外でも状態を理解できる。

AI機能

回答に根拠資料が表示される。
回答できない場合に推測で埋めない。
AI処理が勝手に確定操作を行わない。
技術情報が通常利用者へ露出していない。
AI機能が利用できなくても資料を扱える。

15 — Definition of Done

15 画面の完成条件

コードが動作し、ビルドが成功しただけでは、画面実装は完了ではありません。

実装完了

既存機能が維持されている。
主要操作が正常に完了する。
画面遷移が正しく動作する。
データの保存・取得が正常に動作する。

デザイン完了

Phase 3のDesign Tokenを使用している。
Phase 4の配置と優先順位に従っている。
独自の色・余白・ボタンを追加していない。
画面幅が変わっても利用できる。

状態設計完了

初回状態を確認した。
データ0件を確認した。
Loadingを確認した。
通信・処理失敗を確認した。
一部失敗を確認した。

文言確認完了

専門用語が一般的な日本語になっている。
ボタン名が具体的である。
エラー文が利用者を責めていない。
成功時に完了対象が分かる。

操作確認完了

マウスで主要操作を確認した。
キーボードで主要操作を確認した。
連続クリックによる二重実行がない。
キャンセルと戻るが正しく動作する。
危険操作に確認がある。

利用者が説明なしで目的を達成できたとき、その画面は完成です。 実装者が説明できることではなく、利用者が迷わず使えることを完成基準にします。

Closing

画面は機能の置き場所ではありません

画面は、利用者が目的を達成するための道具です。機能を増やすたびにボタンやカードを追加すると、製品は徐々に使いにくくなります。

新しい機能を追加するときは、「どこに置くか」より先に、「この画面の目的を邪魔しないか」を確認します。

ホームは戻る場所。
資料一覧は見つける場所。
資料詳細は読む場所。
資料追加は登録する場所。
AIに聞くは根拠とともに確認する場所。
検索は記載箇所を探す場所。
設定は動作を変える場所。
ヘルプは困りごとを解決する場所。

最終判断基準

この画面の目的は1つか。
最も重要な情報が最初に見えるか。
次の操作を迷わず選べるか。
不要な機能を見せすぎていないか。
失敗した場合の戻り方が分かるか。
AIより資料と利用者が中心になっているか。
他の画面と同じルールで動いているか。