エンジニアとデザイナーでおこなうペアプログラミングの良さ

長田 太彪のプロフィール画像
エンジニア 長田 太彪

937 view

エンジニア界隈では実務をこなしながらチームを育てる手法としてペアプログラミングというものがあるが、この手法はエンジニアとデザイナーが協業する際にも取り入れる価値があるのではないかと思う。

内容としては、1人が実装しながら常に何を考えているか発話するドライバーを担当し、もう1人はナビゲーターとなって実装者に対しリアルタイムでレビューや質問を行い、最終的な成果物を生み出す。

この手法のよいところは、リアルタイムで発話したりフィードバックを得ることで、メンバー間で知識を共有できることと、常にレビューをされている状態のためコードの品質が担保されるだけでなく、実装後の認識のずれがなくなる、といったことが挙げられる。

これらのうち最後に挙げた「認識のずれ」は、デザイナー×エンジニアのように他業種と協業する際にも発生しやすい問題だ。モーションの調整やブラウザ幅の可変時の見え方などでよく生じる。この問題に対するアプローチはいくつかある。

例えば、手描きのラフを共有する方法。デザイナーの負荷が軽く、なんとなくのイメージが伝わるため大きなずれは生じにくい。また、より具体的な画面イメージをデザインツールでつくってしまう方法もある。デザイナーの負荷はかなり高くなるものの、細部までの再現性は上がる。

しかしこれらの手法には1つ問題点がある。どんなに頑張ってイメージを作ったとしても、その指示を読み取るエンジニアが認識を誤ってしまえば、デザイナーの意図とは違った実装をしてしまうという問題だ。なのでそういった問題が発生しないように、イメージを共有するだけでなく、お互いが納得いくまで議論して実装する必要があると思う。

例えばある案件のモーション調整では、デザイナーと一緒に1つの画面を見てリアルタイムでフィードバックを得ながらの実装を行ったが、ほぼ1日で完成系までもっていくことができ、その後大きく調整が入ることはなかったと思う。可変時の挙動についても同様だ。このときに手戻りが少なかった理由としては至極単純で、ナビゲーターが正しい道を示し、細かくフィードバックすることでドライバーが誤った方向にハンドルを切るリスクを抑え、最短の道を進むことができたからだ。これもある意味ペアプログラミングといえるだろう。

ペアプログラミングの内容については上述した通りではあるが、エンジニアとデザイナーでする際は、エンジニアの実装を待つ時間が発生するのでリアルアイムの必要はない。しかし、1つの画面を見ながら細かく認識をすり合わせて進めていくこの手法は認識のずれが発生しづらいだけでなく、相手がどのようなことを考えているのかを知るよい機会になる。

たまに、私に依頼したらいい感じに調整してくれる、と言っていただくことがあるが、それは、これまで協業した経験から「たぶんこのときはこうしてほしいんだな」と推測できるからだ。この手法は皆がそうなる手助けをしてくれるだろう。

また、2人で1つのことをするので作業が遅くなるように感じるかもしれないが、認識にずれがあった場合に再調整の時間がかかることを考えるとむしろ効率的であるとも思う。

テキストやイメージだけではどうしても伝わりきらないことは往々にしてある。そういう時は相手(ときにはチーム全体)と一緒に1つの画面を見て議論しながら実装するようにしたい。

関連する日報

    他責的な思考に陥らないためのヒント

    1,645 view

    山川優理子のプロフィール画像
    山川優理子 デザイナー
    ベイジに転職して二か月のディレクターが感じた、フルリモートで築かれる職場文化

    413 view

    川向健太のプロフィール画像
    川向健太 コンサルタント
    Slackで組織カルチャーを作る!当社の自作スタンプ活用例

    2,164 view

    古口 真凜のプロフィール画像
    古口 真凜 バックオフィス
    「ゆるふわ会議」撲滅法

    1,235 view

    野上 恵里のプロフィール画像
    野上 恵里 コンサルタント
    「ゆるふわ提案」撲滅法

    2,339 view

    大舘 仁志のプロフィール画像
    大舘 仁志 コンサルタント
上に戻る