突然ですが、ライブペインティングってありますよね？
観客が見ている前で、ペインティングの過程を見せながら完成させるパフォーマンスです。
実は最近、これと同じように、開発チームのメンバー全員がいるところでデザインの過程を公開し、エンジニアから意見をもらいながらその場でデザインを完成させる、という方法を試してみました（名付けてライブデザイン？）。
要するに、エンジニアとのペアデザインです。
これがとても良かったので、ぜひ紹介させてください。
なぜ、エンジニアとペアデザインを行ったのか？
普段デザインをする中で、私自身は以下のような課題に直面していました。
😔 デザイン段階でエンジニアリング観点が抜けていて、デザイン決定後に見積もってみたら想定より開発期間が長くなった
😔 技術的難易度が高いことがデザイン決定後にわかり、再検討が発生した
😔 エンジニアの視点から解決策を引き出しづらい
小まめにエンジニアから意見をもらうよう心がけていましたが、これらの問題を解決することはできませんでした。そんな中、エンジニアから、
🧑💻 Eng「デザイン詰められてなくてもいいので、ゼロから一緒に考えてみましょう」
と言われ、
🧑🎨 私 「エンジニアと一緒にデザインを作ってしまえば良さそう。そうだ、デザインの過程を全部共有しよう！」
と思いつきました。
そしてやってみると、次のような結果に繋がりました。
😁 技術的な課題や論点を早期に発見でき、デザインや仕様に即フィードバックしてブラッシュアップできる(手戻りが激減した)
😁 PdMに対して、デザインパターンを実装工数（開発期間）の当たりをつけた状態で提案でき、意思決定してもらいやすくなった
😁 「なぜこのデザインなのか？」の説明コストが節約された
😁 (+α)デザイナーもエンジニアもお互いの専門性や勘所を学び合えている
それでは、具体的にどうやっているのかを説明します。
やり方
全部で3ステップあります。
1. ゴールと作業手順を書き出す
その日のデザイン作業のゴール（完了条件）と作業手順を書きます。
具体例
今日のゴール
デザインの改善案について、パターンの洗い出しと提案を整理する
作業ステップ
- 前提の確認（ユーザーの課題、要件など）
- デザインパターンの洗い出し
- 他社のUIリファレンス
- ブレスト
- 各パターンのデザイン制作
- 各パターンのメリデメ整理
- 提案するデザイン、そのロジックを詰める
2. 会場を用意する
弊社はGatherを導入しているので、そこで行なっています。
基本的にエンジニアが常駐しているので、みんなが集まっているところに行って
「これからデザイン作業を公開するので、ぜひコメントやアイデアください！」と呼びかけます。
3. ペアデザイン（ライブデザイン）
下記の2つが1画面に収まるように配置してから画面共有し、デザイン作業を開始します。
- 今日のゴールと作業手順
- デザインツール（Figma）
ポイントは、エンジニアにゴールと手順が見えるようにすること、考えていることを発話しながらデザインを作ることです。
そうすることで「作業の目的は何か？」「今全体のどの工程をやっているのか？」「なぜこのデザインにしているのか？」「何を考えているのか？」が周囲に伝わり、コメントしてもらいやすくなります。実際、こんなやり取りがありました。
🧑🎨 Des「既存のアカウント画面と同様に、ユーザーが情報を入力できるようにフォームをここに置いて...と」
🧑💻 Eng「ん？ここの情報は既存の画面と違って、ユーザーに入力させなくてもDBから取って来れるのでフォーム要らないのでは？」
🧑🎨 Des「そうか！ここはフォームではなく、シンプルに画面に表示すればいいですね」（余計な検討を1つしなくて済んだな）
このように意見をタイムリーにデザインに反映することで、手戻りを防ぎ、デザインや仕様を決めるまでのリードタイムを短縮できます。
「このデザインは工数かかりすぎないか？」「これ以上良い案が浮かばない」など、少しでも迷ったりわかんないことが出てきたりしたら、すぐに確認したり、アイデアを求めましょう！
ゴールの達成までに長いときは2時間くらいかかることもあります。
しかし、手戻りや工数が膨れることが減ると考えると、トータルでは時間を短縮できています。
さいごに
この記事ではエンジニアとのペアデザインについて紹介しました。
全員の時間を同期的に使うため、フロー効率が高く、リソース効率が低い方法です。
あらゆる状況でこの方法が最適とは限りませんが、プロダクトのクオリティやスピードを全員で向上させるには有効な方法だと思います！
それでは、今年もラスト1ヶ月、最後まで良いプロダクトを作るために頑張っていきましょう！
Happy Merry Christmas！