Communitygithub.com

ワイヤーフレームフィードバック&批評

ワイヤーフレームのフィードバック依頼や批評の実施、ステークホルダーレビューの準備、曖昧なフィードバックの処理、レビュー後のアクション計画立案に使用します。

ワイヤーフレームフィードバック&批評 とは?

このスキルは、ワイヤーフレームのフィードバック依頼、批評の実施、レビュー後のフィードバック処理を体系的にサポートします。コリタ・ケントの「創作と分析は同時に行わない」という原則に基づき、批評を構造化された分析として定義。フィードバックを求める際は「目標、段階、具体的な質問」を明確にし、30/90ルールで適切なタイミングを指示します。フィードバックを与える際は「問題を述べ、解決策はデザイナーに委ねる」という分析的なアプローチを推奨。レビューの進行役は議論を促進し、専任のノートテイカーが詳細を記録します。すべてのフィードバックは5段階でトリアージし、却下する場合は理由を記録することで信頼を維持します。Claude CodeなどのAIエージェントがデザインワークフローで活用できるよう、具体的なフレーズ例や反復プロセスを詳細に提供します。

対応~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/heyviet/wireframe-skills/tree/HEAD/skills/wireframe-feedback

お気に入りのAIに質問する

このエージェントスキルを事前に読み込んだ状態で新しいチャットを開きます。

ドキュメント

ワイヤーフレームフィードバック&批評 は何をしますか?

概要

創作と分析は異なるプロセスです — 決して同時に行わないでください(コリタ・ケントのルール8)。批評は構造化された分析です。定義された基準に基づいてデザインを評価し、次のクリエイティブパスに進むための十分な実用的な情報を収集したら終了します。目標はユーザーのためのより良いデザインであり、合意、承認、または現バージョンの擁護ではありません。あなたはあなたのデザインではありません。

使用タイミング

  • ワイヤーフレームのどの段階でもフィードバックを依頼する場合 — 初期コンセプトから最終詳細まで
  • チーム批評、ステークホルダーレビュー、または非同期コメントラウンドをファシリテートする場合
  • 曖昧または解決策形式のフィードバックを実用的な問題に変換する場合
  • レビュー後のコメントの山を整理して計画にまとめる場合
  • 使用しない場合: ユーザビリティテスト — 批評は専門家/チームの分析です。ユーザーの証拠には実際のユーザーと実際のタスクが必要です
  • 使用しない場合: 承認ミーティング — 批評はデザインを改善します。承認は別の意思決定の場であり、目的が異なります。

フィードバックを依頼する

依頼を明確にする — 目標、段階、質問

  • 「何か意見は?」とは決して聞かないでください。 オープンな依頼は反応的な趣味のコメントを生みます。次の3つを明確に述べてください:その画面が果たすユーザーゴール、作業の進捗度、および具体的な質問。「これはゲストユーザー向けのチェックアウトフローで、約30%完了しています。ステップの順序は正しいですか?支払いの前に欠けているものはありますか?」
  • 30/90ルール(Jason Freedman, 42Floors):早期に「30%フィードバック」を依頼します — レビューアーは詳細が未完成であることに同意し、構造と方向性に集中します。完了間近に「90%フィードバック」を依頼します — 大きな変更はせず、詳細を修正します。デザインごとに最低2つのチェックポイントを設けます。
  • 忠実度はフィードバックのレベルを示します。 ローファイスケッチは構造的なインプットを促し、洗練されたワイヤーフレームはピクセルレベルの細かい指摘を促します。方向性のフィードバックが欲しいときにハイファイを提示すると、間違ったレイヤーに対するコメントが確実に寄せられます。
  • 対象外を明示します。 「ビジュアルスタイルは仮置きです — フォントと間隔は無視してください」と伝えることで、無駄なコメントのクラス全体を防げます。
  • アイデアを一人で限界まで進めたときに依頼します。 その停滞が合図です。早期の依頼が最も難しい(未完成の作品を見せる恐れ)と同時に最も価値があります — 90%ではなく30%でその前例を作ります。

レビューアーと質問をマッチさせる

  • チームメンバー(PM、開発、リサーチ、デザイン) — フローロジック、実現可能性、一貫性。ユーザーとプロダクトを擁護し、メモ係も兼務できます。
  • 主題専門家 — ドメインの正確性(トレーディングアプリの注文フロー専門家)。早期に招待します。彼らはめったに依頼されず、たいてい歓迎します。
  • ステークホルダー — 目標の整合性と制約。積極的に関与している人は早期に、上位の人は認識のために後で招待します。
  • 意見が不要な人を招待しないでください。 招待された人は全員参加が期待されます。傍観者は部屋を希釈し、コメントの山を膨らませます。

建設的なフィードバックを与える

以下の5つの特性は、Adam ConnorとAaron Irizarryの『Discussing Design』(出典による適応)から来ています。建設的なフィードバックは信頼に基づき(共通の目標:プロダクトを改善する)、分析的で(デザインを部分に分解し、タスクへの影響を追跡する)、具体的で(要素と失敗を名前で特定する)、オープンエンドで(問題を述べ、解決策はデザイナーに委ねる)、客観的で(個人的な好みではなくユーザーゴールから主張する)、そして実用的(次のイテレーションで使用可能)です。注意すべき2つの非生産的なモード:反応的(「これ嫌い」 — 純粋な感情、分析なし)と方向指示的(「設定に入れて」 — 問題が述べられていない解決策)。

問題、解決策ではない

観察から始め、それをユーザーの目標に結び付け、修正は自由に委ねます。どうしても提案する必要がある場合は、まず理由を述べてください — 根底にある問題のない提案は評価も改善もできません。

言い回しの書き換え

悪い例(反応的/曖昧/方向指示的)良い例(分析的、ユーザーに結びつけて)
「ナビがわかりにくい」「ナビがプライバシー設定へのパスを隠しています — 私たちのリサーチによると、ユーザーがここに来る目的です」
「このボタンが好きじゃない」「'キャンセル'は編集のキャンセルではなく、サブスクリプションのキャンセルと読まれる可能性があります」
「CTAを目立たせて」「CTAが視覚的に目立っていません。これがこの画面のプライマリアクションであれば、ユーザーは見逃すでしょう」
「これを設定ページに移動して」「このブロックがチェックアウトタスクを中断しています。設定ではなくインラインに配置した理由は何ですか?」
「このフォームは国際的に機能しない」「米国以外のユーザーはこれらの住所フィールドをマッピングできません。国ごとにラベルをローカライズすることを検討してください」
「大好きです!」「シングルカラムレイアウトはタスクを直線的に保ちます — その品質をチェックアウトの残りの部分でも維持してください」

ポジティブフィードバックは、具体的である場合にのみ価値があります。何が機能し、なぜ機能するのかを名前で示し、イテレーションで生き残り、誤ってデザインから削除されないようにします。

判定の前に質問

デザイナーの思考プロセスを引き出す質問から始めます:なぜこのパターン?このシナリオでユーザーの意図とどのように整合する?正しい問題を解決しているか?実現不可能なことは?他に検討した方向性は?欠けているものは?— その後で評価します。

フィードバックを受け取る

  • アクティブリスニング: 聞いた内容を言い換えて確認します(「つまり懸念は配置ではなくラベルですか?」)— 話し手が確認するまで。防御のリハーサルではなく、聞くことに集中させ、曖昧なコメントを正確にします。
  • 非生産的なフィードバックを掘り下げ、却下しないでください。 反応的および方向指示的なコメントには、通常、本当の問題が含まれています。「それはどういう意味ですか?」「これはユーザーのタスクにどのように影響しますか?」で変換します。
  • 反論せずに記録します。 各コメントにその場で反論するとセッションが消耗します。明確にし、記録し、後で判断します。

批評の実施

構造(フローサイズのレビューで45分)

  1. 枠組み設定 — 5分。 目標、段階(30%または90%)、具体的な質問、グラウンドルール(問題を解決策、コメントはウォークスルー中か後か — どちらかをアナウンス)。
  2. ウォークスルー — 10分。 最初に機能とフローの概要、次に画面ごとに、ユーザーの用語で説明:「ユーザーがここに来ると、Yを選択してXを実行できます」。12画面のうち最初の画面をいきなり開かないでください。
  3. ディスカッション — 25分。 設定された質問に対して分析をファシリテート。
  4. クローズ — 5分。 参加者に感謝し、次に行うことを伝え、サマリーを約束します。

役割

  • ファシリテーター(通常は発表者):プレゼンター、メディエーター、タイムキーパーを兼ねます。会話を導きます — 枠組みを確立し、分析に議論を保ち、行き詰まったら前に進め、実用的な詳細を収穫します。導くだけで、決して擁護しません。
  • ノートテイカー — 専任で、ファシリテーターは兼務しません。 ファシリテーションと詳細な記録は両立しません。項目ごとに:どのワイヤーフレーム、画面のどの領域、コメント、誰が言ったか。付箋またはワイヤーフレームツール内のライブコメントで、部屋から見えるようにします。コメント者を名前でタグ付けし、確認できるようにします。
  • 参加者: 積極的な貢献者。各自が招待された理由を知っています。

ファシリテーションのテクニック

  • ラウンドロビンで開始:各人が順番に — 最も声の大きい人が枠組みを設定するのを防ぎます。
  • 静かなメンバーを積極的に募ります。会話が遅い人やグループで話したくない人のために、後で非同期チャンネルを提供します。フォローアップの時間はかかりますが、完全なカバレッジを得られます。
  • 異議のための有効な経路を維持します(David Dylan Thomas) — セッション内で意見の相違が正当な出口を持たない場合、後で拒否権として再浮上します。
  • 「私だったら…」をユーザーにリダイレクトします。 個人的な好みのコメントには「私たちが知っていることに基づいて、ユーザーはここで何をするでしょうか?」
  • 望むフィードバックを自らモデル化し、議論が趣味や解決策に流れたら明示的にリセットします。
  • デザインが批評に失敗することは、批評の成功です。 分析によってデザインが目標を満たしていないことが示された場合、イテレーションを節約したことになります — そう言って次に進みます。
  • 非同期批評も機能します:レビューアーが自分のペースでワイヤーフレーム領域にピン留めされたコメントを投稿します。ファシリテーターが統合し、タグ付けし、不明な項目をフォローアップします。同じルール — 枠組み設定された依頼、具体的な質問、名前付きコメント。

フィードバックへの対応

すべてのアイテムをトリアージ

すべてのフィードバックを1つの共有シートに記録します — アイテム、画面、誰が言ったか、ステータス。Donna Spencerの5つのステータス(『Presenting Design Work』より):

ステータス意味次のアクション
同意 — 今すぐ受け入れ、簡単次のパスに組み込む
同意 — 後で受け入れ、今回のイテレーションではなし対象段階とともにバックログへ
調査が必要現在の情報では判断不可質問と方法を特定する
明確化コメントが理解できない(非同期でよくある)コメント者に確認する
却下実装しない理由を記録し、目標または問題文に結び付ける
  • 却下は正当な結果です — ただし、記録された理由がある場合のみ。黙って無視すると、プロセスの基盤である信頼が損なわれます。
  • 新しい方向性を採用する前に、問題文に立ち返ってください。 それはユーザーの目標に資するものですか、それとも最後に話した人の気まぐれですか?多数決によるデザインはめったに成功しません。
  • 誤った前提に基づくフィードバックは、パッチではなく調査を引き起こします。 批評によって欠落したケース(サインアップフローが「確認メールが届かない」を処理していなかった)が明らかになった場合は、再描画する前にオプションを検討します(おそらく技術レビューも含む)。

ループを閉じる

  • サマリーを参加者と共有します:何がレビューされたか、誰が参加したか、各アイテムのステータス。再描画する前に、人々が応答、明確化、または追加する時間を与えます。
  • 次のラウンドでは、古いバージョンと新しいバージョンを並べて、各変更を駆動したフィードバックとともに表示します — レビューアーは即座に何が動いたか、なぜかを理解します。
  • フィードバックはサイクルです: 統合 → 再描画 → 再批評。ワイヤーフレーム作成中の定期的な批評は、デザインプロセス全体で最もコストのかからないリスク低減策です。

必要なコンテキスト

  • 求めている応答の種類 — 探索、コンセプト間の選択、または1つのデザインの分析。
  • 忠実度、およびそれが何が確定しているかを示すもの。
  • レビューアーが判断するために必要な目標と制約。
  • 誰が部屋にいるのか、そしてなぜ各人がそこにいるのか。 全員招待はノイズを生みます。
  • 既に決定され、議論の余地がないこと。 言わなければ、再審議されます。

評価手順

  1. 依頼を明確にします:どの段階、どの決定、具体的に何を検討してほしいか。
  2. アーティファクトの前に、目標と制約をレビューアーに伝えます。
  3. 分析に基づいて批評を実施します — 好みではなく。解決策は問題にリダイレクトします。
  4. 各フィードバックを5つの特性に対してテストします:信頼ベース、分析的、明確かつ具体的、オープンエンド、客観的。
  5. 曖昧な反応を、ユーザータスクに関連付けられた観察に変換してから行動します。
  6. 何に行動するか、何を延期するか、何を却下するかを決定します — 却下には記録された理由が必要です。
  7. ループを閉じます:何が変わったか、何が変わらなかったかをレビューアーに伝えます。

出力形式

依頼内容:<探索 | 選択 | 分析> on <具体的な領域>
コンテキスト:目標 <…> 制約 <…> 既に決定 <…>
受信したフィードバック → 観察として再表現:
  "<生のコメント>" → "<分析的、ユーザータスクに結びつけて>"
行動する:<リスト>  ·  延期する:<リスト>  ·  却下する:<アイテム — 理由>
ループクローズ:<何が変わったかを誰に伝えたか>

クイックリファレンス

状況パターン
初期コンセプト、方向性が不明瞭30%依頼 — 構造のみ、ローファイアーティファクト、詳細は未完了と宣言
最終段階のワイヤーフレーム90%依頼 — 詳細修正、大きな変更はなし
曖昧なフィードバック(「目立たせて」)明確化の質問:「現在のバージョンがユーザーにどのような問題を引き起こしていますか?」
解決策形式のフィードバック解決策を評価する前に、根底にある問題を尋ねる
レビューアーが「私だったら…」と言うユーザーにリダイレクト:「私たちのリサーチに基づいて、ユーザーは何をするでしょうか?」
声の大きい人が支配するラウンドロビン、静かなメンバーを名前で募る
グループで話さないレビューアー非同期フォローアップチャンネル、ファシリテーターが統合
分散/タイムゾーンが分かれたチームピン留めコメントによる非同期批評、名前付きでフォローアップ
複雑なマルチ画面フローの提示最初にフロー概要、次に画面、ユーザーの用語で説明
レビュー後のフィードバックの山5ステータスのトリアージ:今すぐ / 後で / 調査 / 明確化 / 理由付き却下
ステークホルダーの趣味 vs ユーザー目標問題文に照らして仲裁、文書化
セッション終了感謝 + 次のステップ + 項目別ステータスのサマリー
次のレビューラウンド新旧を並べて、駆動したフィードバックとともに表示

アンチパターン

間違い修正
依頼として「何か意見は?」目標、段階、1つか2つの具体的な質問を述べる
方向性の質問にハイファイワイヤーフレーム忠実度を希望するフィードバックレベルに合わせる
最初のレビューまで90%まで待つ30%チェックポイント — 変更コストが高くなる前の早期フィードバック
ファシリテーターがメモを取る専任ノートテイカー、ワイヤーフレーム + 領域 + コメント + 誰を記録
各コメントにその場で反論明確化、記録、トリアージで判断
ミーティング内で再デザイン批評は分析する。創作は熟考後の別のパス
「可視性のために」全員招待この段階を前進させる意見を持つ人のみ招待
反応的/方向指示的なコメントを却下掘り下げる:「どういう意味?」 / 「これはユーザーのタスクにどのように影響する?」
すべてのコメントを取り入れる問題文に照らしてトリアージ。多数決デザインは失敗する
フィードバックを黙って無視すべてのアイテムにステータス、「却下」には記録された理由
批判的なコメントのみ何が機能し、なぜかを名前で示し、イテレーションで生き残らせる
批評を承認ゲートと見なす別の場:批評は改善、承認は決定

コンパニオンスキル

状況同時使用
批評の前後でのワイヤーフレームの提示、バージョン管理、共有wireframe-collaboration
批評コメントを趣味ではなく名前付きヒューリスティックに基づかせるdec-nielsen-heuristics, usability-heuristics
受け入れ可能で個人的にしない、難しい批評を届けるsi-corrective-feedback
フィードバックを「却下」とマークする前に — まず最強のバージョンを述べるblind-steelman

Individual skills in this repo

This repo contains 1 individual skill — each has its own dedicated page.

関連スキル