次の行動につながるデザインフィードバックの伝え方

「もっとすっきりさせてほしい」。実際に問題があるからこそ出てくる言葉かもしれません。ただ、この言葉だけでは、デザイナーに何が気になったのかは伝わりません。ページ内で複数の操作が目立ちすぎているのか、余白の取り方が不自然なのか、文章が詰まっているのか、整列がばらついているのか。すべてが重なっている場合もあります。どれか一つを妥当に直しても、レビューした側は「何もよくなっていない」と感じるかもしれません。

行動につながるデザインフィードバックは、画面の具体的な箇所と目指す結果を結びつけ、受け取った人が判断できるだけの背景を伝えます。完成形の解決策まで提示する必要はありません。問題をはっきり示し、解き方はデザイナーに委ねるコメントのほうが、役立つことも多いものです。

次の行動につながるデザインフィードバックの伝え方

役立つコメントには、たいてい場所、観察できる問題、それがなぜ重要なのかが含まれます。改善の方向性を提案してもよいのですが、問題についてまだ分かっていないことを覆い隠してはいけません。「ボタンを移動して」は操作の指示としては具体的でも、その移動で何をよくしたいのかは曖昧なままです。

架空の講座紹介ページを考えてみましょう。「ページがごちゃごちゃしている」は感想です。「冒頭で講座名、割引バッジ、ニュースレターの登録フォームが同じくらい目立っていて、受講申し込みとニュースレター登録のどちらが主な行動なのか、すぐには分かりません」なら、何が競合しているのかが伝わります。デザイナーは、レビューした人がどの装飾を嫌っているのかを推測せずに、情報の優先順位を検討できます。

最後は質問でも、方向性の提案でもかまいません。ここでは受講申し込みを最も目立たせるべきでしょうか。優先順位が未確定なら、これはよい問いです。すでに受講申し込みが目標として承認されているなら、それが最優先だと伝わる案を求めましょう。フィードバックの書式に疑問符があるからといって、決まったことまで再び議論に戻す必要はありません。

Nielsen Norman Groupのデザインレビューに関するガイドは、目標に照らしてデザインを評価すること、議論の範囲を明確にすること、レビューを対話として扱うことを重視しています。こうした原則があると、役立つフィードバックと好みの寄せ集めを分けやすくなります。以下では、この考え方を具体的な画面へのコメントに落とし込みます。

Figmaのチームが見直したのは、レビューそのものだった

Figmaが公開したデザインレビューの取り組みでは、Noah Levinが、議論が浅い、同意ばかりで役立たない、コメントを受けても作業の行き詰まりが解消しない、といったチームの声を紹介しています。チームはこれらの問題をFigmaファイルに集めて分類し、専用のSlackチャンネルで議論を続けました。そして、どの段階にも一つの会議形式を当てはめるのではなく、目的に応じてレビュー形式を使い分けました。

ここで指摘されているのは、コメントの書き方だけの問題ではありません。コメントが具体的でも、その場で扱えない議論に投げ込まれれば役には立ちません。問いがずれていたり、背景の説明が足りなかったり、誰が決めるのかが曖昧だったりすると、よく考えられたレビューでも成果につながらなくなります。

フィードバックを求める前に、制作がどの段階にあるかを伝えましょう。コンセプトの段階なら、問題設定や方向性を話し合う必要があります。完成間近のフォームなら、文言、状態、操作に目を向けるべきでしょう。レビューする人は方向性を検討するつもりで、デザイナーは余白の調整だけを残しているつもりなら、どちらも悪いことをしていなくても、不満が残ります。

講座ページの例なら、最初にこう伝えられます。「主な行動は受講申し込みにすることで合意しています。対象者と価格も確定しています。今日は、申し込みを求める前に受講条件が冒頭で十分に伝わっているか、判断を手伝ってほしいです」。これなら、今考えるべき問いを共有し、確定事項も守れます。レイアウトへの賛成を求めているわけでもありません。

同じ公開の議論には、発表者が求めているフィードバックと求めていないフィードバックをシートに記入し、会の前に進め方をすり合わせる、という提案もあります。慌ただしい議論への有効な対処です。会議の冒頭で急いで範囲を説明するのではなく、先に済ませておきます。講座ページなら、受講申し込みが目標であることと、受講条件に関する問いを招待文に記し、当日は実際の画面を見る時間に使います。建設的に話すためのルールを長々と並べるより、短く範囲を示すほうが役に立ちます。

画面を直す前に、コメントを整理する

よいレビューは、注釈を増やすだけでなく、未解決の問いを減らします。コメントを集めたら、それぞれにどのような対応が必要かを整理しましょう。

この区別は、コメントがぶつかったときに役立ちます。「ページを短くして」と「参加条件を説明して」は、重複する背景説明を削り、条件を前に移せば両立するかもしれません。一方で「別々の二つの行動をそれぞれ最優先にして」には、事業上の判断が必要な場合があります。両方のボタンを同じくらい明るくして、折衷案とするべきではありません。

観察、解釈、提案を分ける

この三つは、自信に満ちた一文にまとめられがちです。「ユーザーはこのボタンを無視するから、オレンジにして」は、観察の内容を示さないまま予測と解決策を組み合わせています。実際に無視された証拠がないなら、確定した事実ではなく、確かめたい懸念として扱うべきです。

例えば、ボタンの薄い枠線が三つの補助リンクと同じであることは、観察です。優先順位を見分けにくいかもしれない、というのは解釈です。主な行動をもっと目立たせよう、というのが提案です。この順序で伝えると、意見の違いを前向きに扱えます。その行動は意図的に補助的な位置づけなのかもしれませんし、コントラストは十分で、置き場所に問題があるのかもしれません。

コメントごとに三つの見出しを付けて段落を書く必要はありません。一つの自然な文でも区別は伝えられます。「受講申し込みのボタンが、シラバスへのリンクと同じ見た目になっています。このページでは申し込みが主な目的なので、優先順位をもっと見えやすくできませんか」。

調査で得た根拠がある場合も、その内容を正確に示しましょう。レビューした人自身が迷ったことは、一つの観察です。録画されたユーザビリティテストは別の種類の根拠で、アクセス解析の傾向もまた違います。「私はここで迷った」を「ユーザーはこのタスクを完了できない」に変えてはいけませんし、正式な調査ではないからといって、その迷いを切り捨てる必要もありません。何に基づく話なのかが分かれば、それに見合う確度で活用できます。

次のOpenDesignの例は、要素に対する未送信のコメントです。選択した単語、置き換える単語、維持するスタイルが示されています。

よくある六つのコメントを、行動につながる言葉にする

「ページをもっとすっきりさせて」

まず、何と何が注目を奪い合っているのかを確かめます。架空の講座ページの冒頭には、受講申し込みボタン、ニュースレターの登録フォーム、動画ボタン、三つのバッジ、提携先のロゴが並んでいます。適当に要素を減らせば、画面は静かになるでしょう。ただし、申し込むかを判断するために必要な情報まで消えるかもしれません。

もっと役立つコメントは、こうです。「最初の画面で、講座の対象者を説明する前に、申し込み、ニュースレター登録、動画の視聴を求めています。まず対象者と申し込みへの導線を読み取りやすくして、ニュースレターの案内を後に回せませんか」。漠然とした美的な目標ではなく、改善したい順序を伝えています。

修正版も同じ問題に照らして確認します。対象者と主な行動が分かるようになったでしょうか。分かるなら、バッジのスタイルについて別の好みを持ち出す前に、その改善を認めましょう。個々のコメントがもっともらしくても、成功の基準が次々と変わると、デザインの進め方全体が恣意的に感じられてしまいます。

「余白が何か変」

余白へのフィードバックは、どの関係が不明瞭なのかを示すと役立ちます。「余白を増やして」は密度の高い部分には効くかもしれませんが、意味のあるまとまりを崩し、関連する情報をばらばらに見せることもあります。

料金カードで、月額料金の下にある請求に関する注記より、最初の機能項目のほうが料金に近いとします。具体的にはこう伝えられます。「請求に関する注記が、見た目の上では機能一覧に属しています。料金と請求期間をまとめて読めるよう注記を料金に近づけ、その下の機能一覧との間隔はもっとはっきり空けてください」。求めているのは、ただ空白を増やすことではなく、まとまり方の変更です。

グルーピングではなく窮屈さが問題なら、それを伝えましょう。「幅の狭いレイアウトでは、段落と操作ボタンがほぼ接しています。別々の要素として読めるだけの間隔を取りつつ、このセクションのボタンだと分かる関係は保ってください」。ほかの画面幅で確認していないピクセル値を決めつけなくても、行動につながるコメントになります。

「もっと高級感がほしい」

「高級感」は、抑制の利いた印象、雑誌のような編集感、技術的な精緻さ、ラグジュアリーさ、あるいは単に値段が高そうな見た目まで指し得ます。チームが目指す性質を具体化して初めて、ブランドの意図として機能します。そうでなければ、一人は金色のグラデーションを足し、別の人は装飾をすべて取り除くかもしれません。

架空の建築ポートフォリオなら、こう伝えるとよいでしょう。「プロジェクト写真は魅力的ですが、鮮やかなバッジと丸い販促用のボタンで、小売店のような印象になっています。作品そのものにもっと視線を集めたいです。今のフォントファミリーは保ちながら、控えめな操作要素、色のバランスの抑制、プロジェクト写真の拡大を試してください」。求める性質が、目に見える選択と結びつきました。

参考画像を使うなら、どの性質を指すのかを説明しましょう。「構図と、見出しと画像が近接している関係を参考にして」は、「配色、フォント、被写体をまねて」とは違います。注目してほしい部分を一言添えるだけで、参考例が、意図せずすべてを模倣する指示になってしまうのを防げます。

まだその性質を言葉にできないなら、具体的な二つの案を比べてみます。何の違いが印象を変えるのかを問いましょう。十分に洗練されているかどうかを議論するより、コントラストの強さや写真の目立ち方を話し合うほうが簡単です。目標は、好みを共通の方向性に変えることであって、好みが存在しないことにすることではありません。

「文章が長すぎる」

長さが問題のときもありますが、順序が問題のときもあります。必要な答えが四文目に埋もれ、最初の三文は会社の抱負を説明しているのかもしれません。どの文も一様に短くするだけでは、根本の弱点は残ります。

登録ページなら、こう伝えてみましょう。「この段落は、登録後に何が起こるのかより先に、私たちの考え方を説明しています。まず利用者が得られる最初の成果と次の手順を示し、使いやすさについて繰り返している説明を削ってください」。書き手が判断すべき編集の方針が明確になります。必要な情報量に対して厳しすぎるかもしれない文字数制限を課すこともありません。

実際にレイアウト上の制約があるなら、それを示します。「幅の狭い画面では、導入文のせいで最初の入力欄が初期表示に収まりません。勤務先メールアドレスが必要だという情報は残しながら、重複する背景説明を減らせませんか」。制約は具体的ですが、タスクに必要な内容も守られています。

説明の文をすべて余計なものとして扱うのは避けましょう。重要な条件を隠した短いフォームは、何に同意するのかが分かる長めのフォームより使いにくいことがあります。行動の前に何を知る必要があるかを確かめてから、どの言葉を残すべきか判断します。

「フォームが分かりにくい」

このコメントは、ラベル、質問の順序、予想外の必須項目、送信後のメッセージのどれを指しているか分かりません。どこで迷い始めるのかを尋ねましょう。フォーム全体を丸で囲んだスクリーンショットだけでは、たいてい問題を十分に絞れません。

架空の問い合わせフォームに「会社規模」という質問があり、従業員数なのか顧客数なのかを示さずに数値の範囲だけが並んでいるとします。行動につながるコメントはこうです。「会社規模の選択肢は、単位がないので意味が曖昧です。従業員数を尋ねていることを明記し、選択肢のラベルも同じ意味になっているか確認してください」。具体的な内容の変更で、確認の基準も明快です。

別の問題なら、こうなります。「送信後のメッセージで回答が一つ不足していると表示されますが、どの項目か分かりません。該当する質問を示し、そこへ直接戻れるようにしてください」。こちらは最初の入力欄のデザインではなく、問題からの復帰に関する話です。すべての質問を作り直すきっかけにする必要はありません。

Nielsen Norman Groupの、行動につながるユーザビリティ調査結果に関する記事では、具体的で状況が分かる結果がチームの行動に役立つ理由と、利用者を責めるのではなくデザインの問題を示す必要性が説明されています。気軽なレビューでも同じ姿勢が役に立ちます。「利用者はちゃんと読まない」より、「ラベルに単位がない」のほうが有用です。

「モバイルでうまくいかない」

モバイルへのコメントには、場所と条件が必要です。ある狭い幅では読めるページも、文字を大きくしたとき、メニューを開いたとき、長いタイトルが入ったときには崩れるかもしれません。「モバイルを直して」では、再現に必要な情報が隠れてしまいます。

例えば、こう伝えられます。「狭い幅のプレビューでは、プロジェクト名が三行に折り返され、ダウンロードの操作がカードの外へ押し出されています。タイトル全体が読める状態を保ち、操作がカード内に収まるよう、カードの高さを伸ばせるようにしてください」。デザイナーには、発生条件と目指す結果の両方が分かります。

ほかにも、「ナビゲーションメニューを開くと、閉じるボタンがページタイトルと重なります。この幅でメニューを開いた状態を確認し、ボタンの位置が安定するようにしてください」と伝えられます。問題はモバイルページ全体ではなく、特定の条件で起こる一つの操作状態です。

分かっているなら、画面幅や端末の状況も添えます。「390pxで、ナビゲーションを開いた状態」なら次の人が再現して確認できます。「モバイルで」だけでは、何が失敗するのかが曖昧です。

次に必要なのは修正か、判断か、検証か

役立つコメントが、すべて即座の修正につながるわけではありません。 まだ決まっていないプロダクト上の判断を明らかにするものも、根拠の必要な仮説を示すものもあります。すべてを実装タスクに変換すると、チームは忙しくなっても、デザインの一貫性は高まらないかもしれません。

承認された目標が明確で、デザインが明らかにそれに反しているなら、通常は修正が適切です。二つの目標の衝突が見つかったなら、誰かが優先順位を決める必要があります。十分な根拠なしに行動を予測しているなら、小さなテストや確認が次の一手かもしれません。

講座ページで「受講申し込みを主な行動にして」は、その優先順位が合意済みなら修正です。「受講申し込みとニュースレターの成長のどちらを優先すべきか」は判断です。「ライブ講座か録画講座か、訪問者に伝わらないかもしれない」は、まず実際の文章を確認し、それでも不確かなら想定読者に確かめてもらう懸念です。

メモでも、この違いを保ちましょう。デザイナーに、ボタンの色を明るくすることで事業の優先順位まで決めるよう求めるべきではありません。同じように、余白の小さな修正をすべてプロダクトマネージャーが承認する必要もありません。次の行動が明確だと、それぞれが適切な立場で貢献できます。

意見が食い違ったら、タスクに立ち返る

それぞれのコメントが、何を守ろうとしているのかを考えます。そのうえで、順序、グルーピング、段階的な情報の提示によって、両方の懸念に応えられないかを確かめましょう。参加条件への答えは主な操作の近くに必要で、繰り返しの会社紹介は下へ移したり削除したりできるかもしれません。目指すのは、文字数で測る折衷案ではなく、分かりやすい情報構造です。

目標が本当に衝突するなら、何を選んだかと、その理由を記録します。例えば、購入条件に合う企業の担当者に向けたページには、気軽に訪れた人には不要な詳細を、意図的に載せることがあります。その判断は、最後に発言した人の役職ではなく、対象者と目的に基づくべきです。

両立しない見た目の指示を、黙って平均してはいけません。遊び心と厳粛さの中間を取った結果、どちらも伝わらなくなることがあります。具体的な例でトレードオフを示し、次の全体案を作る前に方向性を決めましょう。一つの焦点を絞った判断で、表面的な修正を何周もせずに済むことがあります。

OpenDesignのコメントで、具体的な画面を見ながら話す

対応するHTMLプレビューでは、OpenDesignを使って、話題にしている文章やレイアウトを確認できます。テキスト、リンク、画像、スタイルを手動で変更したり、ビューポートのプリセットで表示を確かめたり、コメントをチャットへ送ったりできます。これらの機能で、ページがどう見えるはずかという抽象的な議論を、目に見える制作物への指摘に結びつけましょう。

それでも、よいコメントには、それだけで理解できる背景が必要です。対象の要素、気づいたこと、目指す改善を示します。参考画像を添えるなら、どの特徴を修正の手がかりにするかも伝えましょう。ツールはコメントを届けますが、曖昧なコメントを自動で具体的にはしてくれません。

修正後は、同じ要素を同じ条件で比較します。もとの問題が、長いタイトルの折り返しによってボタンがカードからはみ出すことだったなら、その長いタイトルをもう一度使います。短いタイトルに置き換えると、解決していない問題が隠れてしまうことがあります。改善したかを判断できるよう、確認の条件を揃えておきましょう。

フィードバックのやり取りを、見える結果で終える

最後に、コメントがどう扱われたかを伝えます。解決したこと、理由があって提案を変えたこと、まだ判断が必要なことを、短い返答で記録できます。複数の人が別々の時間にレビューするときには、とくに役立ちます。

料金表示の例なら、こう締めくくれます。「請求に関する注記を料金とまとめ、機能一覧までの間隔を広げました。狭いレイアウトでも同じまとまりを保っています」。単に「対応済み」と書くより、変更ともとの懸念との関係が分かります。レビューする人も、具体的に何を確かめればよいかが分かります。

肯定的なフィードバックも、同じくらい具体的にしましょう。「まとまり方が変わって請求期間を見つけやすくなりました。ほかのカードでもこの関係を保ってください」なら、うまくいっていることと、その後の変更でも維持すべきことが伝わります。成功している選択を言葉にして褒めることは、単なる気遣いではなく、品質を保つ行為の一部です。