デザインプロセスの共有をペアデザイン・リモート環境でやってみた

こんにちは！　UIデザイナーのmarinです。
新型コロナウイルスの流行に伴い、2020年2月よりスペースマーケットでもリモートワークが推奨となり、約半年が経過しようとしています。
コロナ禍以前でも週に1度はリモートワーク日だったので、比較的リモートワークに慣れているのもあって大きな混乱は特にありませんでしたが、フルリモート環境におけるペアデザインは初めての試みだったため、その時の知見を残します。

今回のペアデザインの内容

ペアデザイン実施の背景や意図、また、それによって手法が異なるため、ペアデザインといっても様々ですが、今回は「実際仕上がったデザインのプロセスを、シニアデザイナーがジュニアデザイナーに細かく具体的に伝える」というのが主な内容です。もちろん一緒に手を動かしはしますが、イチから二人で何かを作っていくペアデザインではなく、過去にシニアが作ったデザインを分解し、ジュニアにプロセスを詳細に伝えていく形にしました。

そもそもなぜペアデザインをしたのか
デザイン部ではシニア・ジュニアとデザイナーの区分があり、ジュニアがシニアのデザインプロセスに興味を持ったから、というのと、シニア側からもスキルの向上という点でジュニアに伝達する必要がありました。
完成したデザインに大してこのデザインはこういう理由で作りましたと言葉で伝えるよりも、実際に制作過程を見た方が制作者がどういう過程や理論で作り上げたかより細かに知ることが出来ますし、作業の途中でわからないことがあったら質問することができるため、やる価値があると感じたためです。また、エンジニアチームでも時折ペアプログラミングを実施しており、その姿を見ていて、デザインでも同じことができそうだなぁと思っていたののも大きいです。

何を題材にするか
もともとジュニアから相談を受けていたのがバナーの制作仮定だったので、過去に私が作成したバナーを分解しそのプロセスを伝えることにしました。
本当なら新しいバナーを一緒に作っていく、ということをやりたかったのですが、この実施を決めた期間は両人ともに施策が佳境で時間が取りづらい時期だったため、1時間で説明が収まりそうなバナーの分解がちょうどよかったという事情もあります。

役割

ペアブログラミングだとナビゲーター（指示）とドライバー（実装）に分担してやる例をよく見かけますが、今回のペアデザインはデザインプロセスを詳細に伝達するというお題なので、やることはとてもシンプルです。

制作者（シニア）
デザインの細部を詰める時に悩んだこと等、細かいところまで具体的に話しながら手を動かす。
質問者（ジュニア）
シニアの制作過程を見聞きし、気になった部分に都度質問をする。隣のアートボードで一緒に作っていく。

使用ツール

特別なものは使っておらず、普段チームで使用しているツール、Figma とSlack の2つだけです。

デザイン：Figma
普段チームで使用しているUIデザインツールです。Figma はデフォルトの機能で複数人の共同編集ができ、かつ瞬時に同期されるため、リモート環境においてこれより優れたデザインツールはおそらくないでしょう。Figma のおかげでかなりスムーズでした。
ただ欠点もあって、普段Photoshop やIllustrator で作るような、ビジュアル重視のデザインには不向きです。Figma はUIデザイン作成ツールなので、派手な装飾を作ったり細かく文字詰めをする等の作業には向いていないため。
そのため、今回の実施例だと不向きっちゃ不向きなのですが（もともとPhotoshop で作っていたものなので）、完璧に再現するというよりはプロセスを伝えるのが目的なので問題はなかったです。

音声通話：Slack
普段使ってるチャットツールのSlack を音声で繋ぐだけです。普段のミーティングはZoom を使用しているのですが、Figma のおかげでお互いのモニタで画面を見ながら会話するため画面共有等の機能は一切必要ないので、Slack の音声通話で十分です。なぜZoom を使わないのかというと、単純に立ち上げるのがめんどくさいだけです……。Slack だと「やりましょうか！」と一声をかけて通話ボタン押すだけなので圧倒的に楽。
たまーに音声の聞こえが悪かったりもしますが、ほぼ問題ないレベルです。

一連の流れ

細かいフローについては全てを言葉で説明していくことが出来ないので、ざっくりですがこの時の流れを解説します。

1.お題に使用するバナーを決める

2.Figma に作業用プロジェクトを作りわかりやすいところにバナーを貼って、バナーと同じサイズのアートボードを2つ作っておく。ひとつはバナーの分解用で、もうひとつはジュニアが一緒に作業していく場として。
下準備が出来たらSlackの通話を開始。

3.作りはじめの手順を口頭で説明していく（ベンチマークの説明や当時の仕様書を共有し確定事項を伝える）

4.一緒に作業開始。シニアは当時作ったバナーの作成手順をなぞりつつ細かいところまでプロセスを喋りながら手を動かす。ジュニアも作業を手伝いながら、疑問点があれば即座に質問する。

5.4を何回も何回も繰り返していき、元のバナーとほぼ同じ形のものを作り上げる

良かった点

ジュニア
0から完成に至るまでのデザイン制作過程を見て、疑問点や気になったことをその都度、作業のさなかに質問出来る、というのがとてもよかったようです。
文字だと伝わりづらいのですが、たとえば、私はデザインを作る時に白黒ベースで作ることが多いので、どうしてそのタイミングで色を入れたのか・なぜその色を使うのか等の細かい質問も、リアルタイムで伝えることが出来て、実際に自分がデザインを作る時の手順の参考にもなったようです。

シニア
自分のデザインの制作過程を製作〜完成までイチから事細かに伝える機会は今までなかったため、自分がどういうところで躓きがちなのか可視化することが出来たことと、今まで頭の中だけで済ませていたことも、言語化することで、デザインの理由を客観視することが出来ました。
また一緒にデザインを作っていく中でジュニア側からもブラッシュアップするためのデザイン細部の提案があり、自分ひとりだけでは出来ない新たなデザインの閃きもありました。

リモート環境
特に書くことがないほど、困った点はありませんでした。会社で二人でPCを並べて話すのと同じレベルです。むしろお互いモニターに集中しながら話が出来るので、リモートの方が集中しやすくよいのでは？と思うぐらいです。

終わりに

お互いに得たものがとても多かったことと、このペアデザイン内容を部内で共有したら他のデザイナーも興味を示してくださり、つい最近デザイン部全体で他のデザイナーのプロセスの共有をしてもらう会を開きました（もはやペアではないんですが。笑）
1時間という短い制約の中ではありますが、私自身も他の方の作成過程を0から完成まで見ることがないので、人によって手順や考え方が違うので、非常に学びが多いです。
ひととおり共有会が終わったら、今度は2人で一緒に何かを作っていく、よく言われてる手法のペアデザインもやってみたいと思っています。