ホワイトボードツールを使ったプロダクトデザインプロセス
プロダクト開発には、さまざまなプレーヤーやステークホルダーが関わります。
その中でよく直面する問題は、「仕様などに関する議論が収拾つかなくなる」ということです。
これまで僕は、UXデザイナー・UIデザイナーとしていくつかのプロダクトを手がけてきました。最近の経験から、ホワイトボードツールを使って情報を整理することでプロジェクトがスムーズに進むことが多いと実感しています。この記事では、その具体的な方法と効果について紹介します。
前提: ホワイトボードツールとは
Miro, FigJam (Figma も), Whimsical など、デジタル上に無限に広がるキャンバスに図形や文字を自由に配置できるツールのことを指します
どんなものか - 成果物
構造化された議論と関係性のノード
ほとんどのホワイトボードツールには「セクション」という機能があります。
「利用シナリオの時系列変化」「問題の構造」「Pros & Cons」などを図で可視化・整理した単位をセクションとして管理します。これらの関係性を矢印などで結んでいくことで、議論や意思決定といったプロジェクトのプロセスが自然と可視化されていきます。
プロダクトプロジェクトにおける思考・議論・意思決定の地図として機能する
こうしてできたアウトプットは、プロダクト開発における様々な思考プロセス、チームでの議論内容、そして重要な意思決定を視覚的に記録します。
各要素の関係性が明確に示されるので、プロジェクトの全体像を把握しやすく、また過去の決定事項への参照も容易になります。
これにより、チーム全体で一貫した理解を共有し、効率的なプロジェクト進行を支援する重要なツールとなります。
ここから、デジタルプロダクトデザインのプロセスとそこで頻出する問題を起点として、この手法を実践する理由とアウトプットの効果について見ていきましょう。
なぜやるのか？ - 5つの理由
1. 自分の考えを共有しやすい
このマップの作成は、まずプロジェクトに関する自分の理解・考えを論理的に整理するところから始まります。
具体的には下記のようなもので、プロジェクトビルディングから体験設計にかけて、自分がそれぞれ「こんな認識・理解をしてるよ、こう考えてるよ」というのが伝わるように可視化しています。
プロダクト・サービスの目的や提供価値
プロジェクトが始まった背景
上位の体験における登場人物
体験のフロー（asis / tobe）
現状の問題とその構造
視覚的な整理と関係性の明示により、チームメンバーとプロジェクトの概要を効果的に共有・すり合わせできます。
キックオフなどの初期ミーティングでは、このボードを活用してファシリテーションを行い、そこで生まれた議論や課題を新しいセクションとして追加・整理していきます。
そして議論のフェーズに入っていくと、往々にしてこんな問題が発生します。
2. 人によって思い描いてる構図が違う
人の頭の中にイメージを作らせるように気をつけてしゃべってくれる人は結構少ないです。
業界知識が豊富な人や、プロジェクトへの理解が深い人同士が会話すると、視覚的な補助なしのコミュニケーションで話が抽象的になり、ラリーも速いため、他のメンバーが置いていかれがちです。
そして傍から見ていると、お互いが思い描くイメージに少しずつズレが生じていることがよくあります。
このようなミーティングは、話している本人たちだけが満足して終わり、実質的な成果が得られません。
このような状況では、積極的に議論の構造を可視化し、「今の話はこういうことですよね？」と確認しながら共通認識を築くことで、より生産的な議論を展開できます。
例えば、複数の条件分岐を含むフロー
パターンを整理したマトリクス
※ リアルタイムでの整理は疲れるし難しいため、ミーティング後に整理して確認する順番でも十分効果があります。（ミーティングを録画しておくと漏れなく確認できますし、最近はAIが要点を整理してくれたりもします）
各セクションで区切った議論には、必ずタイトルをつけることをお勧めします。このタイトリングは、後の整理で大きな価値を発揮します。
また、こんな問題もよく発生します。
3. 人はたまに、今してる議論のトピックと違うことを話す
このように議論のトピックを可視化してタイトルをつけていくと、「話し手が今何について話しているか」が頭の中で明確になってきます。
そうすると、「今の議論が本題からずれている」ということも分かりやすくなります。
伝える時も、「それ、ここの話ですよね？今これの議論なので先にこちらを片付けてからそのトピックに移りましょうか」のように、相手に気づきを促しやすく軌道修正がスムーズになります。
議論が蓄積されていくと、それぞれの議論の関係性が見えてきて、つながりを示すパスを引けるようになります。
例えば、
ある結論が前提となって、新たな議論が展開された
ある構造の特定の部分について、さらに詳細な構造化をした
これができると、下記の問題を解決できます。
4. 人はたまに、過去の結論と違う前提で話す
プロジェクトには多くの人が関わります。
新しくプロジェクトに参加したメンバーは、これまでの前提を十分に理解していないことがよくあります。また、プロジェクトが長期化すると、過去の意思決定を忘れて違う結論を前提に議論が展開されることもあります。
そんな時、「それはここで結論出てるよね」「こういう理由でこうなったよね」をマップを見直して再確認したり、新しいメンバーに説明することができます。
一箇所に議論の内容がまとまっており、パスでつながっているので説明も容易ですし、受け取り手も構造的に理解ができて、キャッチアップがスムーズです。
過去の意思決定が間違っていることに気づき、再議論をすることもあります。その時は、「ここの前提が間違ってるから、これ以降の議論はしなおしたほうがいいな」と影響範囲の把握もしやすくなります。
5. 伝達・共有が楽になる
プロジェクトの議論には全員が常に参加できるわけではありません。また、プロジェクトが進むにつれてメンバーは増えていきます。
メンバーの情報キャッチアップの質と速度は、チームのパフォーマンスを最大化するための重要な要素です。
通常、Notionなどの社内ドキュメントツールやプレゼンテーション資料を通じて情報共有が行われますが、メンバーはこれらの複数の資料を順次確認しながら、徐々に理解を深めていく必要があります。
ドキュメントを見せながら説明する場を想像してみてください。
適切なドキュメントやページを探し出したり、情報を行き来するのに手間取って話がスムーズにいかないことが結構ありませんか？
こういう状況で、プロジェクトの議論が関係性を含めて構造化された形で一つのファイルに整理されていることは、説明する側にも受ける側にも大きな価値をもたらします。
もちろん、他の資料が役に立たないわけではないです。各セクションや可視化したオブジェクトに補足情報としてドキュメントへのリンクを貼っておくのもおすすめです。
そうしておくと、「マップを使って概要を把握して、深く知りたい場合はリンクを辿ってドキュメントを読み込む」みたいなメンバーのキャッチアップ体験が実現できます。
今のところこういう効果を実感しています
プロジェクトの意思決定がスムーズになる
個々の議論とその関係性についての認識がチーム内で共有されると、プロジェクトメンバーは問題・施すべき解決策の解像度が上がり、意思決定がスムーズになるとともに、チームの納得度も向上します。
その結果、UIの設計やプロトタイプなど、後続タスクのアウトプットに関する議論もスムーズに進むようになります。
もちろんデザイナー自身の解像度も上がっているので、自然とアウトプットの精度も上がります。
結果として、その後の意思決定の質、スピード、そしてチームの納得度が向上するいいサイクルが生まれます。
情報整理力・思考力が向上する
これはデザイナー自身の成長についての話です。
情報の可視化を通じて、効果的な伝達方法を工夫するようになり、自然と情報設計のスキルが磨かれていくのを実感しています。
また可視化の前段階として、問題や議論の抽象化・構造化などの思考作業を何度も繰り返し行うことになります。
この継続的な実践を通して、思考力や情報整理力も向上していると感じます。
どうやってやんの？
おすすめツールは Whimsical
個人的に、Miro や FigJam は多くの人が参加しコラボレーションをするような活動（発散系）に向いている気がしています。そういう目的でプロダクトが設計されているのではないかなと。
対して、Whimsical は情報を整理する時にとても効果的だなと、使ってみて思います。
具体的にはこういうところが使いやすいです。
四角などのシェイプで囲うと中のオブジェクトを自動で囲ってくれる
囲ったオブジェクトはドラッグすると一緒に動く
Figma のセクションやフレームみたいな感じ
セクションを何重にも入れ子にできる
シェイプに文字やアイコンを容易に入れられる
アイコンをクリックして別のアイコンに変更できる
関係性を表す矢印がすぐに引ける
矢印にテキストを入れられる
詳細などの拡張情報を書き込めるオブジェクトも配置できる（Card という機能）
UI ツールみたいなのも配置できる
これらの機能により、かなり直感的に頭に浮かんでいるもの（人の頭に浮かんでいると思われるもの）を瞬時にボード上に表現でき、もたつくことがありません。
個人的には、Figma, Notion と同じぐらい流行ってほしいし応援しているツールです。
Figma でも代用可能
今関わっているプロジェクトは、情報の統制をしっかりと行なっており、持ち込みのツールは基本使わない環境なので、代替案として Figma を使って同じような運用をしています。
具体的には、Figma で情報・体験整理キット的なコンポーネントを作っておいて、それと Simpleflow というプラグインで矢印を生成して整理しています。
Figma を使った整理ならではの利点として、プロダクトのデザインシステムと連動することで、プロダクト内のアイコンや色のルールなどを踏襲して可視化・情報整理ができます。
これは、改めてどこかで整理しようと思います。
デザイナーが責任を持って整理し続けることをおすすめします
ちなみにこの可視化の活動は、複数人でするより一人が可視化をして、都度関係者に認識合わせをするスタイルがおすすめです。
理由はメンテナンスが楽だからです。
他のメンバーにはツールのコメント機能などを使ってもらい、デザイナーが意見や情報を吸い上げ、整理するのがいいと思います。
まとめ
情報を可視化することがプロジェクトの推進をスムーズにするという話は、昨年行った Spectrum Tokyo Festigal 2024 の中で、登壇されていた方のプレゼンテーションの中でも言及されていました。
イベント中に登壇者の方と直接お話できたのですが、プロジェクトの中で上記のような効果が実感できているという話でした。
もし、プロジェクトの進行に問題を抱えている方がいたら、よかったら試してみてください。
何かの役に立てば幸いです。