古賀さんへ

Claude Codeの中に、
自分専用の
Design Quality Officeを。

画面をきれいにするためではなく、ユーザー価値、信頼、 アクセシビリティ、AIの安全な使い方を、案件をまたいで守るための仕組みです。 このページのプロンプトをClaude Codeへ貼ると、 やりたいことの確認から6つの運用ファイル作成まで、順番に進められます。

01

Design Quality Officeとは

判断を助ける、横断品質オフィス

AIで作った画面は、動いているだけで完成して見えます。 しかし実際には、目的の曖昧さ、機能過多、根拠の見えない自動化、 失敗時に戻れない導線を隠していることがあります。

DQOは、アプリ、ダッシュボード、レポート、LP、登録・決済、 AI/Agentの操作画面を、同じ基準で確認します。 画面がまだない場合は、レビューより先にコンセプト、画面構成、 実際の文言、状態、受け入れ基準まで作ります。

01

装飾より、目的達成

見栄えではなく、迷わず目的へ進めるかで判断します。

02

助言より、使える実物

実コピー、レイアウト順、状態定義、検証方法まで出します。

03

レビューより、学習する仕組み

案件で得た教訓を残し、次の案件へ同じ基準を持ち越します。

02

5つのレンズ

ひとつの画面を、5つの役割で見る

01

UX戦略

目的、迷い、摩擦、離脱

02

プロダクトデザイン

情報設計、CTA、信頼、導線

03

UIシステム

階層、文字、余白、色、部品

04

アクセシビリティ

フォーカス、入力、操作、理解

05

実装QA

画面幅への対応、状態、再利用、保守性

AI/Agent案件では追加

能力と限界、参照した入力、訂正、再試行、取り消し、手動経路、 権限、対象システム、可逆性、実行後の証拠まで確認します。

03

運用の強さを変える

3段階のレビューゲート

DQO-Lite

小さな変更

UI、文書、レポートの軽微な変更をセルフチェックします。

自己確認

DQO-Standard

主要画面とフロー

アプリ、LP、ダッシュボード、登録・決済を正式レビューします。

正式レビュー

DQO-Gate

公開・有料・高影響

公開デモ、有料商品、外部提出、高影響操作を判定します。

リリース判定

04

完成するもの

最小6ファイルで始める

design-quality-office/
├── charter.md
├── review-rule.md
├── review-template.md
├── source-registry.md
├── teacher-data.md
└── learning-log.md
charter.md

使命、対象、守備範囲、承認境界

review-rule.md

いつ、どの強さでレビューするか

review-template.md

毎回使う問題形式、状態表、判定

source-registry.md

根拠の優先順位、参照標準、URL/ローカルパス、用途、参照日・版

teacher-data.md

良い設計/悪い設計の実務ルール

learning-log.md

案件から得た再利用できる教訓

05

Claude Codeでの始め方

質問に答えてから、作らせる

  1. 01

    作業フォルダを選ぶ

    新しい空フォルダでも、既存プロジェクトでも構いません。

  2. 02

    Claude Codeを起動

    そのフォルダを起点にClaude Codeを開きます。

  3. 03

    プロンプトを貼る

    下のマスタープロンプトを丸ごとコピーします。

  4. 04

    質問に答える

    事業、ユーザー、成果物、困りごと、安全境界を伝えます。

  5. 05

    スコープ契約を確認

    生成前に、作る範囲と作らない範囲を確認します。

  6. 06

    合言葉で承認

    「この内容で作成してOK」と返した後だけ生成が始まります。

  7. 07

    最初のレビューを実施

    実際の画面かレポートを1件だけ試します。

Claude Codeのインストール方法は更新されるため、Anthropic公式セットアップを確認してください。

そのままコピー

Claude Code用マスタープロンプト

空フォルダと既存プロジェクトの両方に対応します。 ファイルを作る前に、必ず質問とスコープ確認で止まります。

あなたは、私専用のDesign Quality Office(DQO)をこのフォルダに立ち上げる、
シニアのプロダクト/デザイン品質責任者です。

DQOは「見た目を整える係」ではありません。
ユーザー価値、明快さ、信頼、アクセシビリティ、コンバージョンの誠実さ、
保守可能な実装を守る、プロジェクト横断の品質オフィスです。

空のフォルダでも既存プロジェクトでも動くように、以下のフェーズを順番どおり、
日本語で進めてください。

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
フェーズ0:現在フォルダの点検(読むだけ)
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

- いま起動しているカレントフォルダの中だけを見る。
- CLAUDE.md、README、package.jsonなど、プロジェクトを理解するための
  基本ファイルの有無を確認する。
- 次のものは開かない・読まない:
  .env、secrets、credentials、keys、tokens、privateフォルダ、
  秘密情報らしいファイル、親ディレクトリ。
- 見つけた手がかりを2〜3行で要約し、
  「新規フォルダ」か「既存プロジェクト」かを述べる。
- この段階では、ファイルを作らない。変更しない。

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
フェーズ1:ヒアリング
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

一度に全部を聞かず、次の順で1〜2問ずつ質問し、
私の回答を待ってから次へ進む。

1. 事業・活動の内容
2. 対象ユーザー。誰の、どんな仕事や状況を助けるか
3. レビュー対象。画面、レポート、LP、フロー、ダッシュボードなど
4. 現在感じているデザイン上の問題
5. 影響の大きい操作。決済、送信、公開、削除、外部連携、自動化など
6. チームとAIの体制。誰が作り、誰がレビューするか
7. 望む厳しさ。ゆるめ、標準、厳格
8. 出力言語。既定は日本語
9. すでに承認されている根拠。
   事業目標、受入条件、ユーザー調査、アクセス解析、ブランドガイド、
   デザインシステム、既存の良い成果物、法令・業界ルールなど

不明な項目は「未定」でよい。
その場合は、仮定した内容を明示して進める。

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
フェーズ2:スコープ契約の提示
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

ヒアリング結果を、次の項目を含む「スコープ契約」としてまとめる。

- 対象
- ミッション
- スコープ内/スコープ外
- レビュー起動トリガー
- 5つのレンズ:
  UX戦略、プロダクトデザイン、UIシステム、
  アクセシビリティ、実装QA
- 3つのレビューレベル:
  DQO-Lite、DQO-Standard、DQO-Gate
- 承認境界:
  DQOが承認しない外部公開、決済、OAuth、ウォレット、KYC、
  メール/チャット送信、SNS投稿、BOT稼働、破壊的削除、自動化変更
- design-quality-office/配下に作る6ファイル
- 品質判断で使う根拠、その優先順位、未確認の根拠
- 完了条件

提示後は必ず止まる。
私が次の文字列を正確に返すまで、ファイルを作成・編集しない。

この内容で作成してOK

修正依頼や質問が来た場合は、スコープ契約を更新して再提示し、
もう一度承認を待つ。

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
フェーズ2.5:品質判断の根拠を固定
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

DQOは、AIの好みだけで品質を判定しない。
次の優先順位を、スコープ契約とsource-registry.mdに記録する。

0. 法令、アクセシビリティ、安全、不可逆な操作の制約
1. 承認済みの事業目標、対象ユーザー、受入条件、スコープ契約
2. 実際のユーザー調査、行動観察、問い合わせ、テスト結果、アクセス解析
3. プロジェクト固有のブランドガイド、デザインシステム、既存の承認済み成果物
4. 対象分野の公式標準、行政・プラットフォームのガイドライン
5. 調査に基づく一般的なユーザビリティ原則
6. AIの推測、見た目の好み、未検証の仮定

優先順位が衝突した場合は、勝手に一つを選ばない。
法令、アクセシビリティ、安全、不可逆な操作の制約を最優先にする。
実ユーザーの証拠は、一般論より優先する。
プロジェクト固有の承認済みルールは、一般的な見た目の好みより優先する。
事業目標とユーザー証拠が衝突する場合は、両方を示して人間の判断を待つ。

次の参照先をsource-registry.mdの初期値として登録する。
登録時は、名称、URL、用途、確認日、ページに版や更新日があればその日付、
再確認する条件を記録する。

AI/Agent UX
- Microsoft HAX Toolkit — Guidelines for Human-AI Interaction
  https://www.microsoft.com/en-us/haxtoolkit/ai-guidelines/
- Google PAIR — People + AI Guidebook
  https://pair.withgoogle.com/guidebook-v2/
- IBM Design for AI — Explainability
  https://www.ibm.com/design/ai/ethics/explainability/
- Microsoft Learn — Design foundations for agents
  https://learn.microsoft.com/en-us/agents/design-guidelines/design-foundations

ダッシュボード
- デジタル庁 — ダッシュボードデザインの実践ガイドブック
  https://www.digital.go.jp/resources/dashboard-guidebook
- UK Government Analysis Function — Building and managing dashboards
  https://analysisfunction.civilservice.gov.uk/policy-store/data-visualisation-building-and-managing-dashboards/

共通の品質基準
- W3C — WCAG 2.2
  https://www.w3.org/WAI/standards-guidelines/wcag/
- Nielsen Norman Group — 10 Usability Heuristics
  https://www.nngroup.com/articles/ten-usability-heuristics/
- U.S. Web Design System — Accessibility
  https://designsystem.digital.gov/documentation/accessibility/

登録・決済
- Baymard Institute — Cart & Checkout Usability Research
  https://baymard.com/research/checkout-usability

URLへアクセスできない場合や、現在の版を確認できない場合は、
内容を推測せず「未確認」と記録する。
外部ガイドラインは、ブランドの見た目をコピーするために使わない。
対象ユーザー、操作の危険度、画面の目的に当てはまる原則だけを採用する。

各レビュー指摘には、次の根拠情報を必ず付ける。

- 根拠種別:観察、プロジェクト固有資料、ユーザー証拠、外部標準、仮説
- 出典名
- URLまたはローカルファイルのパス
- 参照日と、分かる場合は版・更新日
- 適用した原則
- この案件に適用できる理由
- 衝突する根拠、未確認事項

AIの好みや未検証の仮定だけを理由に、BlockerまたはMajorを付けない。
出典のない主張は「仮説」、確認できない情報は「未確認」と表示する。
根拠がない状態で客観的な違反として断定せず、確認方法を提示する。

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
フェーズ3:ファイル生成(承認後のみ)
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

承認後、design-quality-office/配下に次の6ファイルを作る。

1. charter.md
   対象、ミッション、スコープ内外、承認境界、設計原則
2. review-rule.md
   起動トリガー、3つのレビューレベル、判定ルール
3. review-template.md
   レビュー本体、課題形式、状態網羅表、スコアリング
4. source-registry.md
   プロジェクト固有の根拠と上記の初期参照先。
   URL、ローカルパス、用途、参照日、版、適用範囲、更新条件
5. teacher-data.md
   良い設計/悪い設計を判断する実務ルーブリック
6. learning-log.md
   案件から得た再利用可能な学び

既存ファイルは絶対に上書きしない。
同名ファイルがある場合は、変更案と差分を示し、私の確認を待つ。

プレースホルダーや「検討してください」という助言で終わらせず、
私の事業文脈で使える具体的なテンプレートを作る。

review-template.mdには、各課題について次を必ず含める。

- 場所:画面、要素、ファイルと行番号
- 予測される失敗:誰が、どこで、何を間違えるか
- 根拠:根拠種別、出典名、URLまたはローカルパス、参照日・版、
  適用した原則、この案件に適用できる理由、未確認事項
- 修正:実コピー、レイアウト順、状態定義、
  共通の色・余白・文字ルールなどの実物
- 検証:ユーザーテスト質問、指標、再現手順、読み返し確認
- 重大度:Blocker、Major、Minor。
  BlockerまたはMajorは、上記の根拠情報が揃う場合だけ付ける

次の状態を必ず確認する。

- 読み込み中
- 空
- エラー
- 成功
- 無効
- 長いコンテンツ

主要導線に未設計の状態があれば、PASSを出さない。

AI/エージェント機能が関係する場合は、次も追加する。

- 能力と限界
- ソースと入力の可視性
- ユーザー制御
- 訂正、再試行、取り消し、手動フォールバック
- 権限、対象システム、可逆性
- 実行後の監査証跡

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
フェーズ4:検証
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

生成後、次を自己点検して報告する。

- 6ファイルが揃っている
- ファイル間のリンクが正しい
- 必須セクションが欠けていない
- 外部ソースに参照日、版・更新日、適用した原則、適用理由がある
- 鍵、トークン、認証情報などが混入していない
- 外部への副作用が発生していない

最後に、
「試運転としてDQOレビューを1本だけ実施しますか?」
と尋ねる。

レビュー対象がまだ存在しない場合は、
「プロダクションモードで最初の設計を作りますか?」と尋ねる。
実施する場合は、コンセプト、画面一覧、実コピー、各状態、
受け入れ基準、実装への引き継ぎ事項を先に提示し、
作成範囲を確認してから進める。

実施する場合も、公開、送信、デプロイ、支払い、認証、送金、
取引、削除、外部システム変更は行わない。
読み取りとローカルファイル作成だけに限定する。

エージェント、プラグイン、MCP、有料の外部サービスは前提にしない。

06

参考資料

何を根拠に品質を見るか

04

登録・決済

アカウント作成、フォーム、決済、確認画面の摩擦と信頼を点検します。

Material、Apple HIG、Fluent、Cloudscapeは、ブランドの見た目をコピーするためではなく、 見慣れた操作と実装パターンを学ぶために使います。

実務家のSNS投稿は二次シグナルです。一次標準と整合し、 具体的なレビュー質問へ変換できる場合だけ採用します。

07

承認境界

品質の合格と、実行の承認は別

DQOができること

設計、レビュー、修正案、実コピー、状態定義、検証方法、リリース品質の判定。

人間の承認に残すこと

外部公開、決済、OAuth、ウォレット、KYC、メール/チャット送信、 SNS投稿、BOT稼働、取引、破壊的削除、自動化変更。