概要
みなさんは、ペアデザインと聞いて、どのようなことをイメージしますか？
🤔 「2人でデザインする？」
🤔 「ペアプロ・モブプロのデザイナー版？」
🤔 「FigmaやXDとか使うの？」
こんなことをイメージしたのではないのではないのでしょうか？
おおむね、間違っていません。
ペアデザインとは、複数人で同じデザインを見て、より良いデザインにするために、
意見・アイディアを出し合いながらデザインを詰めていくデザイン手法です。
この記事では、そんなペアデザインの良い点とペアデザインの手法・やり方についてまとめました。
※ 普段UI/UXデザインについてペアデザインをおこなっているので、UI/UXデザインを軸にまとめました。
ペアデザインとは？
1つのプロジェクト・1つのページを1人でデザインしているとこのようなことが起こります。
👦🏻 「ここのデザイン完成したんで、レビューお願いします。」
👩🏼 「はーい！ わかりました。確認しますね！」
... 💻 デザインを見てみると ...
👩🏼 「あーー何もわからない」
👩🏼 「どうしてこのデザインにしたの？？？？？」
👩🏼 「そうしたの背景はなに？？？？？」
こんな感じに、デザインした背景がなにも知らされていない中で、
レビューしても、何もフィードバックできません。
これがいわゆるデザインの属人化というやつです。
このようなデザインの属人化を防ぐためにやるのが、ペアデザです。
ペアデザインでは、職種問わず、複数人で同じデザインを見て行います。
そのため、
👩🏼 「どうしてこのデザインにしたの？」
などのわからないことが直接聞けたり
👩🏼 「こっちの挙動の方が使いやすくない」
と提案しながら、デザインを良くしていくことができます。
つまり、
ペアデザインとは、複数人で同じデザインを見ることで、
意見・アイディアを出し合いながらより良いデザインを作っていくデザイン手法です。
ペアデザインの目的といいところ
ペアデザインを導入して実際にやってみると、ペアデザインのいいところは、デザインの属人化を防ぐことができることやより良いデザインになることだけではありませんでした。
僕が、ペアデザインが良いと感じたのは、大きく分けるの4つです。
- デザインの属人化を防ぐことができること
- より良いデザインになること
- デザイン作成までの時間が短縮できること
- スキルが向上すること
この4つがペアデザインの目的になりそうです。
デザインの属人化を防ぐことができること
ペアデザインでは、デザインの説明をする機会・時間を作ることができます。
そのため、プロジェクトに関係のないメンバーでも、プロジェクトについて知ることができるので、属人化を防ぐことができます。
また、プロジェクトの概要だけでなく、プロジェクトの背景や目的も詳細に説明できたり
わからないことをすぐに質問したりできるため、普段の口頭での共有より、理解が深まります。
より良いデザインになること
ペアデザインでは、デザインのアイディアを発散させながら進めます。
そのため、１人では思いつかなかったアイディアを、UI/UXをデザインに落とし込むことができるので、より良いデザインにすることができます。
また、新しいアイディアだけではなく、「この場合どうする？/あの場合どうする？」といった
考慮できていなかった仕様や状況が洗い出すことができるため、デザインの抜け漏れも防ぐことができます。
デザイン作成までの時間が短縮できること
ペアデザインでは、複数人でやるため、1人でやるより圧倒出来に完成するまでの時間が短縮されます。
特に短縮される部分は、アイディアを発散させる時間や意思決定までの時間、レビューの時間です。
※意外でしたが、実際に手を動かしてデザインを作っている時間は、あまり変わりませんでした。
スキルが向上すること
ペアデザインをデザイナー同士でやることで、お互いに得意な部分を教え合うことができます。
そのため、できなかったことができるようになったり、知らない部分が明確になることで、
お互いのスキルが向上します。
ペアデザインのタイミング
ペアデザインは、闇雲にやればいいというわけではありません。
僕が、ペアデザインの良い部分を活かせるなと感じたタイミングは３つです。
- 情報構造や全体のレイアウトを決めるとき
- コンポーネント単位でデザインするとき
- レビューのとき
情報構造や全体のレイアウトを決めるとき
プロジェクトを進める上で、情報構造や全体のレイアウトを決めるのは大切で、
UI/UXを作っていくときの最も根幹の部分です。
重要で根幹の部分のことは、1人だと決めきれないことが多く発生します。
そのため、ペアデザインをすることで意思決定を早め、
スムーズにプロジェクトを進行させることができます。
コンポーネント単位でデザインするとき
ボタンやヘッターといったコンポーネントには、検討できるデザインのパターンが多く、UXに関わってきます。
そのため、ペアデザインをすることで、UI/UXのアイディアを発散さて、
ユーザー体験をいいものにできます。
レビューするとき
レビューでは、必要なデザインがちゃんと揃っているかを確認することを含め、最終チェックになります。
そのため、ペアデザインをすることで、複数人でチェックし
デザインや仕様の抜け漏れなく、開発することができます。
ペアデザインの進め方
ペアデザインの進め方はこんな感じです。
- 【事前準備】 ペアデザインの準備を行う
- 【Step1】 背景を共有する
- 【Step2】 ペアデザインのゴールを共有する
- 【Step3】 作成中のデザインを共有する
- 【Step4】 ペアデザインする
【事前準備】 ペアデザインの準備を行う
事前準備では、ペアデザインを行うデータの敲き作成します。
ペアデザインのタイミングごとに準備するのは、こんな感じです。
情報構造や全体のレイアウトを決めるとき → ワイヤーフレーム
コンポーネント単位でデザインするとき → コンポーネントのデザインデータ
レビューするとき → 完成したデザインデータ
ある程度、議論の内容をイメージして、
※ 各チームで必要なものが異なる可能性があるのでご注意ください
【Step1】 背景を共有する
【Step1】から、実際に集まって、ペアデザインを始めます。
【Step1】では、このデザインをおこなっている背景や目的、プロジェクトで達成したいことやゴールを共有します。
この共有を忘れると、前提知識がずれてしまい、適切な意見交換、アイディア出し、Feedback等ができなくなってしまうので、丁寧にやりましょう。
【Step2】 ペアデザインのゴールを共有する
【Step2】では、このペアデザインで達成したいゴールを共有します。
この共有を忘れると、話したい内容がずれ、本題が解決しないまま、タイムアップしていまいます。
タイムマネジメントも大事ですが、話がそれないように注意しましょう。
そのため、1回のペアデザインでは、1つの議題がポイントです。
【Step3】 作成中のデザインを共有する
【Step3】では、作成したデザインを共有しながら、デザインの背景も一緒に共有します。
また、議論したい部分や課題に感じている部分を一緒に共有するとスムーズにペアデザが進みます。
この共有を忘れると、背景を考慮してないトンチンカンなFeedbackをいただく可能性があります。
ちゃんとしたFeedbackを頂くためにも、作成したものだけでなく、背景についても共有しましょう。
【Step4】 ペアデザインする
【Step4】 では、実際にペアデザを行います。
複数人で同じデザインを見ながら、
議論したい内容を話し合います。
まとめ
この記事では、そんなペアデザインの良い点とペアデザインの手法・やり方についてまとめました。
ペアデザインを導入することで、
デザインの属人化を防ぐことができたり、
デザインの質をよくすることができたり、
デザイン作成までの時間が短縮することができたり、
メンバーのデザインスキルを向上させることができたり
といいことが多いです。
ただ、複数人の30分~60分くらい手を止めていただくとこになるので、
ちょっとしたデザイン等で実践するのは、適切ではないかもしれないです。
そのため、ペアデザインをしたときの見返りとコストは検討し、
実施するか、実施しないかを判断する必要がありそうです。
ぜひ、ペアデザインを導入してみて、みてください。
最後まで読んでくださってありがとうございます！
さらに詳しい内容を聞きたい方は、Devトークで直接お話しましょう！
X(Twitter)でも情報を発信しているので、良かったらフォローお願いします！