新卒がペアデザインで先輩デザイナーの技を肌で学んでみた話

ペアプログラミングって知ってますか？

ペアプログラミングとはドライバー（コードを書く人）とナビゲータ（どんなふうにコード書くか指示する人）に別れて行うプログラミング手法です。
原則ドライバーは、ナビゲータの指示以外の行動をしてはいけません。

今回私は、そのデザインバージョンの「ペアデザイン」を実践したので、
感想や実践中の気付きを共有したいと思います！
（「ペアデザイン」とググるといろいろな手法が出てきますが、今回の記事ではドライバーとナビゲータに別れて行うデザイン手法のことを指します。）

ペアデザインをやってみたいと思ったきっかけ

先日部署のミーティングで、先輩デザイナーSさんからこんな共有がありました。

「最近入社したKさんのオンボーディングもかねて、Kさんがこれから担当するプロダクトのペアデザインをしました」

※ミーティング中に共有された画面のイメージ↓

この画面を見ながら私は思いました。
「俺ってグリッドとかオートレイアウトとか全然上手く使いこなせてないな、、、」
↓
「ん、待てよ？、ペアデザインって先輩デザイナーの思考や技を、実際に手を動かしながら学べる最高の機会なのでは！？」
↓
「それ僕もやってほしいです。」(チャットに投げてみた)

そして、そのチャットを拾ってもらい、経緯を説明した上でペアデザインの時間を取っていただくことになりました！（とにかく優しい先輩方に感謝...）

というわけで、いざ実践！

内容：先輩の業務の一部を、自分がドライバーとなりデザインする。
時間：30分
使用したデザインツール：Figma
会場：zoom

はじめに、今回の30分間でやりたいことの共有（今日は複数選択のピッカーコンポーネントを作る。など）をしていただき、
その後は先輩デザイナーの指示に従って作業していきました。

やっている最中に感じたこと

いざペアデザインが始まると、序盤からこれまで知らなかったデザインツールの使い方がどんどん出てきました。
また、各部品の丁寧な組み立て方に先輩の貫禄を感じました。
自分は目先の見た目調整の早さばかりを気にしていたなぁと実感。。。

操作として学ぶ部分以外で、先輩が何気なく発する独り言にもいろいろな視点があって非常に面白いと感じました。

※実際にペアデザインをしてもらっている様子↓

こんな会話がありました↓

先輩：「そこでxの今の値に-10して」
自分：（数値で配置を指定するやり方もあるのか、確かにこの方が早い時もあるな）

先輩：「やっぱ、そこはオートレイアウトじゃなくて、レイアウトグリッドにして」
自分：（ここはレイアウトグリッドなんだ、どんな使い分けなんだろう）

今回の主な学び

下記は今回の記事を書くまでに、2名の先輩デザイナーに30分ずつペアデザインをしてもらった際の主な学びです。合計1時間とは思えないぐらいの濃い時間でした。。

・パディングの作り方
・Figmaにおけるフレームの使い方
・レイアウトグリッドの使い方
・オートレイアウトの仕組み
・コンポーネントの組み立て方

感想

コンポーネントを作る時の考え方、余白の指定の仕方、見えない部分の構造の作り方など（今まで自分が苦手意識があった部分）を実際に手を動かしながら学ぶことで、頭だけでなく体に知識を染み込ませることができたと思いました。

デザインツールスキルを伸ばす方法としては、ネットにあるチュートリアルをみることもいいと思いますが、実際の業務に対して指示をもらいながらやると、圧倒的に経験値がたまる気がします。
30分という短い時間でも、多くの技を経験することができたので、やってみてよかったです！

次はこんなやり方でやりたい

最初の目的は、主にデザインツールのスキルを学ぶことでしたが、それに限らず、自分以外のデザイナーが何を考えながらどのような手順でデザインをしているのかも勉強になることがわかりました！
今後、部署でシャッフルペアデザインのようなイベントの機会を設けると、デザインツールの学習にプラスして、その人のデザインの組み立て方も知れて面白そうだなと思いました！

今回の記事を読んでいただいて「ペアデザイン面白そうだな」と思った方は、
ぜひ実践してみてください！

最後まで読んでいただきありがとうございました！