本文へスキップ
ui.design

Implementation

コーディングエージェント向け修正指示に変換する

レビュー結果はそのままでは実装タスクになりません。何を直すか、なぜ直すか、どう確認するかを揃えると、Codex、Claude Code、Antigravity、Cursorなどに渡しやすくなります。

ui.design: handoffui.design: tasks-json

まず確認する症状

  • 所見はあるが、開発者がどこから直すべきか分からない。
  • 修正後の確認条件がなく、直ったか判断できない。
  • レビュー所見は理解できるが、開発者やコーディングエージェントが触る範囲と完了条件を判断できない。
  • 修正、検証、再スキャン、残課題化の流れが分かれておらず、1つの大きな依頼になっている。

なぜ問題か

  • 自動開発では、曖昧な指摘よりも受け入れ条件つきの小さな作業単位が重要です。
  • ツール名に依存しないMarkdown/JSONにすると、顧客の開発環境を選びません。
  • AI実装では、曖昧な改善案よりも、対象、制約、受け入れ条件、検証コマンドが揃った小さなタスクが成功しやすくなります。
  • 成果物をMarkdownやJSONで残すと、別の人や別のエージェントが途中から再開しやすくなります。

診断で見る指標

目的の明確さ
対象UI/URL
修正方針
acceptance criteria
再スキャンで見る項目
対象URL/画面/コンポーネント
非目標と触らない範囲
自動検査と目視確認
再スキャン結果
残課題Issue化
1タスク1目的
対象ファイル候補
非目標
確認コマンド
再スキャン項目

修正方法

最小修正

所見をタスクへ分解する

1タスク1目的にし、該当URL、症状、期待結果を入れます。

推奨修正

受け入れ条件を必ず付ける

目視、キーボード、スマホ、自動検査、再スキャンの確認条件を明記します。

さらに改善

zipで渡せる構成にする

report.md、tasks.json、findings.json、acceptance_criteria.md、修正指示をまとめます。

受け入れ条件

  1. 01PCとスマホの両方で目視確認し、主なCTAまたは操作対象が迷わず見つかる。
  2. 02キーボード操作、読み上げ補助、または自動検査で再発しやすい項目を確認する。
  3. 03修正後にui.designで再スキャンし、同じ所見が残る場合は原因を分解する。
  4. 04各タスクに、目的、対象、変更内容、非目標、受け入れ条件、確認コマンドまたは確認手順がある。
  5. 05修正後に、解消した所見、残った所見、新しく出た所見、確認不能な所見を分けて記録している。
  6. 06AIに渡す指示は、目的、対象、制約、修正方針、受け入れ条件、確認方法を含む。
  7. 07複数レーンの課題は、CV、UX、アクセシビリティ、SEO、計測のどれを先に直すか分かれている。

コーディングエージェント向け修正指示

目的: 診断所見をコーディングエージェント向けの小さな修正タスクへ変換してください。各タスクに対象URL、問題、修正方針、受け入れ条件、再スキャン確認項目を含めてください。 追加確認: handoffには『サイトを良くして』ではなく、所見ID、対象URL、変更範囲、触らない範囲、完了条件を含めてください。

参考資料

よくある失敗

  • 特定ツール名だけを前提にしたプロンプトにする。
  • 見た目だけを整え、見出し、リンク、フォームラベルなどの意味構造を直さない。
  • 1つの指摘だけを直し、同じ原因から出た別画面の再発を確認しない。
  • 広すぎる一括依頼をAIへ渡し、関係ないリファクタリングやUI変更を混ぜる。
  • 結果JSON、report.md、tasks.json、証跡画像のどれを正として見るか決めない。

関連ページ