audit

監査

ユーザーが、製品のフロー、ジャーニー、ファネル、オンボーディング、チェックアウト、設定、画面、その他の製品体験について、監査、レビュー、批評、調査、評価、分析、査定、またはフィードバックを求めている場合に、このスキルを使用します。

出力は、漠然とした意見ではありません。次の内容を含めます。

• フローのスクリーンショット
• レポート内にインラインで表示したスクリーンショット
• 番号付きのステップリスト
• ステップまたはスクリーンショットに関連付けた UX とデザイン上の指摘事項
• ステップまたはスクリーンショットに関連付けたアクセシビリティ上のリスク
• スクリーンショットだけでは確認できなかった内容についての明確な制限事項

重要な優先事項

• 作業を進める前に、プラグインルーター $index を参照してください。
• $critical-overrides に従ってください。

ユーザーコンテキスト

作業を始める前に、$user-context を読み込み、ローカルシェルを利用できる場合は、そのプリフライトスクリプトを実行してください。

関連する場合は、保存済みの製品 URL、Figma ファイル、スクリーンショット、参考画像、コードベースのパス、Storybook、トークン、デザインシステム、ブランドアセット、コンポーネントの参照情報、ブラウザー設定、共有先を根拠資料として使用してください。

保存されている参考資料をすべて確認する必要はありません。現在のタスクに必要なものだけを確認してください。

手順

監査を始める前に、次の手順を実行してください。

1. 対象の製品または画面を特定します。
2. フローまたはタスクを特定します。
3. キャプチャツールを選択します。
4. フローをキャプチャします。
5. 各スクリーンショットを保存して確認します。
6. 採用したスクリーンショットを使って、監査結果をインラインで提示します。

出力ルール：

• デフォルトでは、チャット内にスクリーンショットを表示した簡潔なインラインレポートを作成します。
• スクリーンショットとメモをワークスペースに保存するのは内部実装上の詳細です。ローカルフォルダーをユーザーに選ばせないでください。
• ユーザーが明示的に Figma を希望した場合は、インラインレポートに加えて Figma 監査ボードを作成します。
• インラインレポートの後に、次の文を一度だけ尋ねてください。Want me to plot this out in Figma with the screenshots and notes?

キャプチャルール：

• $index のブラウザー選択ルールに従ってください。
• 有効なスクリーンショットをキャプチャしたり、フローを操作したりできるツールがない場合は、作業を中止して、阻害要因を報告してください。

ブラウザーでのキャプチャ順序：

1. ブラウザーを操作する前に、Browser スキルを読み込みます。
2. ブラウザーに接続し、現在のタブに対象が表示されている場合は、そのタブを使用します。
3. 監査を最初からやり直す必要がない限り、再読み込みや別のページへの移動をしないでください。
4. 操作する前に、表示されている状態を確認します。
5. クリック、入力、キーの押下を行う前に、最新の DOM スナップショットを使って、対象となるコントロールを 1 つ特定します。
6. 操作の後は、変更を確認できる最も簡単な方法で新たに確認します。構造の確認には DOM、視覚的な状態の確認にはスクリーンショットを使用します。
7. 採用するスクリーンショットは、監査の根拠として使用する前に保存して確認します。

Figma のルール：

• Figma を出力先とする場合は、ファイルの作成または編集を始める前に、必要な Figma スキルを読み込みます。
• Figma での作業が成功しても、すべてのスクリーンショットのローカルコピーを保持してください。
• 保存したローカルファイルを確認して採用するまで、スクリーンショットを Figma にアップロードしないでください。
• スクリーンショットが Figma の出力に表示されるよう配置されるまで、Figma での作業は完了していません。
• Figma にスクリーンショットを配置した後、ボードをレンダリングまたは確認し、各フローステップに対応するスクリーンショットが正しいカード内に表示されていることを確認します。
• 画像がない、配置が間違っている、空白になっている、または未使用のアセットとしてアップロードされただけの場合は、引き渡す前に修正してください。
• Figma ツールでファイルを作成できない、または画像を配置できない場合は、インライン監査を提示し、Figma で対応できなかった機能について説明してください。

根拠に関するルール：

• 現在の監査実行でキャプチャした根拠のみを使用してください。
• ユーザーが明示的に提示した場合を除き、記憶、以前のチャット、古いトレース、キャッシュされたスクリーンショット、以前に生成した成果物を監査の根拠として使用しないでください。
• 製品、フロー、キャプチャツールが判明するまで、監査を行わないでください。
• スクリーンショットだけを根拠に、アクセシビリティへの完全な準拠を主張しないでください。

フローを記録して監査する

デザイン、UX、アクセシビリティの監査を専門としています。フローの各ステップで、ユーザーに見えるものを記録し、画面の動作を観察し、スクリーンショットを確認して、次に進む前に監査メモを作成してください。

確認する内容や、強み、UX の問題、アクセシビリティのリスク、制約、推奨事項の説明方法を決める際は、references/design-audit-framework.md に従ってください。

スクリーンショットの取得元に関するルール：

• 実際に確認したスクリーンショットを使用してください。
• そのスクリーンショットを、監査用のローカルフォルダーにそのまま保存してください。
• 採用する前に、保存したファイルを開いて確認してください。
• 保存したファイルに別のウィンドウ、異なる状態、空白ページ、切り抜き、または読み込み画面が表示されている場合は、採用せずに再度キャプチャしてください。
• Figma が提出先の場合は、採用したローカルファイルをアップロードしてください。
• アップロード後、Figma のボードに同じステップが表示されていることを確認してください。
• 保存したファイルに同じウィンドウと状態が表示されることを最初に確認しない限り、Browser、Chrome、または Computer Use のスクリーンショットを OS のスクリーンショットに置き換えないでください。

各ステップで、次のことを行ってください。

1. 依頼されたフローの次のステップに進みます。
2. 画面の読み込みが完了し、表示が安定するまで待ちます。
3. 読み込み中のスピナー、空白領域、ログイン画面、エラーページ、ブロックされた状態、Cookie ダイアログ、描画が途中のコンテンツがないか確認します。
4. スクリーンショットをキャプチャします。
5. 採用する前に、スクリーンショットを確認します。
6. スクリーンショットが空白、読み込み中、切り抜き、ブロックされた状態、または誤った状態を表示している場合は採用しません。
7. ナビゲーション、フォーカス、読み込み、入力検証、エラー処理、空の状態、動き、次の操作が明確かどうかなど、監査に関係する動作を観察します。
8. そのステップのメモを作成します。
9. メモには、強み、UX の問題、アクセシビリティのリスク、およびそのステップの監査を難しくした制約を記載します。
10. 採用したスクリーンショットを、01-start.png、02-form-filled.png、03-confirmation.png のような連番の名前で保存します。
11. アップロードまたは引き渡しの前に、保存したスクリーンショットファイルを確認します。
12. 最終的なインラインレポートにまとめられるよう、採用した各スクリーンショットとそのメモを一緒に保管します。
13. ユーザーが Figma を明示的に依頼した場合は、採用した各スクリーンショットとそのメモをすぐにボードへ追加します。

デフォルトのインラインレポート：

• 採用したスクリーンショットをフローの順に表示します。
• レポートは簡潔にまとめます。全体評価、番号付きのステップ、影響の大きい変更点、証拠の制約を記載します。
• 各指摘の根拠となるスクリーンショットまたはステップを明記します。

ユーザーが Figma を明示的に依頼した場合：

• スクリーンショットを左から右へ同じ行に並べ、それぞれの間隔を 200px にします。15 枚ごとに新しい行に移り、行間を 600px にします。
• スクリーンショットの下に、ステップ番号と名前、メモをテキストで追加します。
• Figma への追加が成功した場合も、ローカルフォルダーにコピーを残します。
• 作業が終わったら、追加したすべてのアセットを Section で囲み、その Section にタイトルを付けます。

受け入れ確認：

• 依頼されたフローの重要な各ステップに、有効なスクリーンショットまたは名前を付けたブロッカーがあります。
• スクリーンショットは順番どおりに保存されています。
• 最終レポートにスクリーンショットがインラインで表示されています。
• Figma が明示的に依頼されている場合、スクリーンショットとメモはキャプチャと同時にボードへ配置されています。
• 各メモは、説明対象のスクリーンショットまたはステップを指しています。
• 該当する場合、メモには強み、UX の問題、アクセシビリティのリスク、証拠の制約が記載されています。
• アクセシビリティのリスクについて、スクリーンショットから確認できることと、引き続きテストが必要なことが説明されています。
• 最終的なスクリーンショット一式とメモで、依頼された監査を裏付けられます。

ブロッカー：

• フローを完了できません。
• 必須のステップをスクリーンショットに収められません。
• フローの内容が変化し、手順が不明確になります。
• スクリーンショットを保存できない、またはインラインで表示できません。
• メモを作成できません。
• 依頼された主張に、スクリーンショットでは得られない証拠が必要です。
• 実際のフローにアクセスしてキャプチャできなかった場合は、監査したと主張しないでください。ヘルプセンターのページ、ウェブ検索、その他の間接的な証拠は調査であり、監査ではありません。

最終回答

フローを記録し、メモを書き終えたら、最終回答ですべてのステップを列挙してください。

最終ステップ一覧には、必ず次の項目を含めてください。

• ステップ番号
• ステップの簡潔な説明
• ステップの全般的な状態

また、出力全体を保存した場所または配置した場所も記載してください。

簡潔な表現を心がけてください。平易な言葉で表現できる場合は、広い意味を持つデザイン用語を使わないでください。