デザイナー×エンジニア対談 より良いUXのためのコラボレーションとは
※giftee engineer blogから転載
（この記事は2023年に取材・執筆されたものであり、記事内の部署名や役職は当時のものです）
デザイナーとエンジニアでプロダクト開発におけるコラボレーションについて対談してみました。
こんにちは、エンジニアの egurinko です。ギフティは 2023年10月28日に行われた Vue Fes Japan 2023 で Silver スポンサーとしてブース出展を行いました。
そのブースで配布したプロダクトブックに記載したデザイナーとエンジニアの対談内容がとても良かったので、技術ブログでも紹介したいと思います。
対談の概要
このトークセッションでは、ギフティのデザイナーとエンジニアがプロダクト開発でどのようにコラボレーションして良質なUXを生み出そうとしているのかを語ってもらいました。
インタビュアーは Engineering Manager の渡邊、インタビュイーは写真の左上のエンジニアである私、同じくエンジニアで写真右下の yashi、デザイナーで写真右上の hanakuma が務めています。
ギフティのデザイナーとしての働き方
渡邊 では最初に hanakuma さんの自己紹介からお願いします。
hanakuma 株式会社ギフティのクリエイティブ本部でデジタルプロダクトデザイナーをやっているhanakumaです。ギフティのクリエイティブ本部では、株式会社ギフティとして世に出すあらゆるもののクリエイティブを統括しています。会社のロゴをはじめとした企業としてのブランディング構築やWebサイトのデザインのほか、販促イベントや社員へ配布されるノベルティなどのあらゆる制作物に加えて、ギフティが開発・提供しているプロダクトのデザインも手がけています。
僕はデジタルプロダクトデザイナーとして、Webやアプリなどのデジタルプロダクトの画面設計をしたり、KPIに対してユーザー視点で課題を見極めて解決策を考えたり、派生してグラフィックのデザインをしたりしています。
渡邊 プロダクトデザイナーとして、どんなことを意識して仕事をしていますか？
hanakuma 基本的には要件を満たすものを作ることに加えて、常にそれ以上のものを提示したいと思っています。たとえば、ある依頼に対してその要件を満たすものを提示しつつも、他にもこんな考え方があるんじゃないか？など幅広く考えるきっかけを作りユーザーの目的をいかに簡単に達成できるようになるかをずっと考えています。
また、ギフティではブランドボイスとしてパーソナリティや語り口が共有されているので、ユーザーとのコミュニケーションにおいてギフティらしい表現ができているかなどはいつも意識しています。
あとは、できるだけ組織の壁をなくしたいと思っていて、クリエイティブ、エンジニア、ビジネスチームが縦割りになることなくお互いの領域を理解しあって仕事することができるような関係性を意識しています。
渡邊 プロダクトをデザインするプロセスを教えてください。
hanakuma デザインプロセスはプロダクトのフェーズや状況によって変わります。基本的にはカスタマージャーニーを作ったりリサーチをしたりしてユーザーを理解することから始まることが多いのですが、Day1からFigmaを使ってプロトタイピングを始めることもあります。
よくあるデザイン思考などのプロセスどおりに進めても最終成果物としてうまくいく時もあればそうでない時もありましたし、さくっと頭の中で整理したものを作って触りながら、ペーパーワークに戻って整理し、作っては考えてというように、右脳と左脳を行ったり来たりしながらデザインすることが多いです。
デザイナーから見たエンジニアとのコラボレーション
渡邊 プロダクトデザイナーとしてエンジニアとどのように関わっていますか？
hanakuma そもそも人として関わる時には、できるだけいろんな人の意見や思っていることをちゃんと引き出すことができるように心がけています。エンジニアとの関わりでは、自分でもできるだけ技術的なことを理解していけたらいいなと常々考えているので、オフィスでエンジニアと顔をあわせたときには積極的に話かけて、最新のフレームワークの話とか技術的なトレンドを聞いたりして色々教えてもらっています。
渡邊 エンジニアとどんな風に協働しているのかも教えてください。
hanakuma 最近開発したプロダクトでは、スクラムチームにジョインして一緒に開発を進めてきました。毎週のスクラムイベントに参加して開発の状況や課題をシェアしたり、デザインをチーム全員で見る時間を作って認識をあわせたりして、デザイナーとエンジニアとがチームとして連携して進めることができました。すべてのプロダクトチームでこのやり方ができるわけではありませんが、エンジニアが思っていることを直接聞くことで理解を深めることができましたし、チームとして一緒に取り組むことでスピードもかなり上がりました。
リリース後にはチーム全体でふりかえり会をしました。プロジェクトの立ち上げ期、まだチームとしてメンバーが固まっていない頃の初期メンバーがどんなことで悩んでいたのか、どういう感情だったのかなども知ることができました。2次フェーズ3次フェーズと開発が続いていくプロダクトでは、このようにチームとしてふりかえりをして今後のことをチームで考える機会というのがとても重要だと感じました。
渡邊 コミュニケーション面で工夫していることはありますか？
hanakuma エンジニアとのコミュニケーション面でいうと、デザインについてエンジニアに相談することもとても大事にしています。デザインが本当に実現できるのか、実現するためにどのくらい大変なのかを事前にしっかり確認するようにしています。
ギフティのエンジニアは、フロントエンドもバックエンドもどっちもできるので、判断のスピードが圧倒的に早いです。デザインを見せたときに「ここはバックエンド側と調整しないと…」みたいなことがないんです。
あとは、フィードバックがとても多いのも特徴的だと思います。デザインに対するフィードバックによって新たな視点に気付かされることも多く、アイデアをブラッシュアップしながらプロダクトがどんどん良くなって行く感覚が本当に楽しいですね。エンジニアからも色んな意見をもらえますし、そもそも論からフィードバックされることも多々あります。こういう文化は全然違うんじゃないかと思っています。
あとこれはエンジニアだけではなくビジネスサイドも含めてですが、最終的にユーザーのことを一番考えているということも強く感じます。ビジネスサイドであれば売上やKPI、エンジニアであれば工数や拡張性・保守性を重視すると思いますが、そこを大事にしつつもその先に使う人のことをしっかり考えて向き合っている人が本当に多いです。
エンジニアから見たデザイナーとのコラボレーション
渡邊 ではエンジニアの視点から、デザイナーとの関わりで意識していることを教えてください。
yashi お話を聞いてとても共感したのが、僕もエンジニアとしてデザイナーの視点や考えをできるだけ理解したいと思っているということです。
僕は以前からデザインにとても興味があって、デザイナーがどんな風に見ているのか、どんなことを考えてどういうことを気にしているのか、をもっと知りたいと思っています。なので、デザインを見たときに「こうデザインしたのは何故ですか？」「どういう意図があるんですか？」ということをよく聞いています。これを繰り返すことで、エンジニアがデザイナーに対する理解を深めて一緒にいいものが作れると思っているので、デザイナーとの関わり方として意識しているところです。
スクラム開発に hanakuma さんが関わった話を聞いて、これまでの弊社のプロダクト開発プロセスはエンジニアだけに閉じていたようにも思えました。今後はエンジニアだけではなく他のステークホルダも開発の流れに巻き込んでいくことをもっとやっていきたいなと思っています。
これは僕らの規模感だからこそできることでもあると思います。デザイナーとエンジニアが何十人とか何百人という規模になってしまうと逆に動きづらくなって難しいだろうなと。今くらいのチームサイズだからこそやりやすいし、やったほうがお互い楽しいし、何よりスピード感のある開発ができるのだと思います。
関係性のところでは、デザイナーとエンジニアとが近い距離で一緒に作っていくっていう雰囲気は弊社ならではだと思います。デザインとエンジニアが分業ではなく一緒にやっていけるのはとてもやりやすいですね。もちろんギフティでも全てのチームで同じようにやれているわけではないかもしれませんが、同じゴールを見ながら一緒にプロダクトづくりをしていくことは、今後もやっていきたいです。
デザインシステムにおけるコラボレーション
渡邊 いまデザインシステムの構築が進んでいますが、これはどんな風に始まったんですか？
hanakuma ギフティでは個人向けや法人向け、地方自治体向けなど複数の市場に向けたプロダクトがあります。特に法人向けの事業では多様なニーズに対応する多くのプロダクトが開発されており、複数のプロダクトをまたいで UI の整合性をとる必要性が強くなってきたことがデザイナー間での課題にあがってきました。その解決策のひとつとしてコンポーネントライブラリを作っていきましょうというのが始まりでした。
最初から全社的に取り組むのは大変なので、まずはデザイナーだけで必要としていた部分の整理からはじめていき、次に「いまこういうことをやっています」というのを社内のポータルで少しずつ発信しながら徐々に浸透させていきました。
その後は新しく開発される複数のプロダクトをデザインする中で、共通のデザインやコンポーネントを整理して適用していき、そこからこの取り組みに理解を示してくれたエンジニアの eguchi さんがジョインして、デザインシステムと呼ぶプロジェクトとして一緒に構築を進めていったという経緯です。
渡邊 どんな風に進めていったんですか？
hanakuma 基本的にはデザインチームの定例ミーティングにエンジニアにも入ってもらって、デザイン側では把握できない実装側の意見やフィードバックをもらいながらブラッシュアップしていきました。
エンジニアにジョインしてもらってからもう一度カラーの整理をやり直したりすることもあって、進んでは戻ってを繰り返すこともありますが、着実に使えるものができている実感もありますしメンバーはみんな楽しんでやれていると思います。
渡邊 このデザインシステム構築は、エンジニアの立場からはどう感じていますか？
eguchi デザインシステムって結構難しくて、デザイナーとエンジニアの違いが如実に出るんです。例えば、ボタン1つをどこまで洗練させるかっていうだけでもデザイナーとエンジニアとで認識の違いや考え方の違いがすごく出ます。
ジョインして最初に感じたのはそういうギャップで、簡単に言えばデザイナーは人間に詳しく、エンジニアは構造化に詳しい。こういう違いに対して、お互いの得意分野を活かしながら歩み寄って向き合っていく必要があります。
先ほど hanakuma さんから「人として関わる」というお話がありましたけど、まさに自分もそれを最初に感じました。なので「デザインシステムとは」という大げさなところからではなく、まずはシンプルに仲良くなるというところから始めた気がします。
デザインに意図を込めるというようなことはエンジニアは得意ではないですし、デザインシステムの目指すべき形はデザイナーが答えを持っていると思っています。逆にエンジニアが得意なのは構造化で、自分はエンジニアとしてデザイナーからデザインの意図を引き出しながら、システムとして構造化していくことに力を注いでいます。
そうやって、お互いの得意分野を発揮してデザインシステムを作り上げることを意識してやっています。
コラボレーションへの思い
渡邊 これまでの話から、デザイナーとエンジニアがお互いを理解しあうことがとても大事だというのがみなさんに共通していたのが印象的でした。
eguchi 繰り返しになりますが、得意分野はみんな違うんですよね。その得意な部分をそれぞれ 100% を発揮できるような環境や関係性を整えていくことが大切だと思っています。
そういう環境であるためにはお互いに歩み寄ることが大切で、エンジニアもデザイナーのことを詳しく知るとか、反対にデザイナーにエンジニアのことを知っていただくということがとても重要だと思っています。これはビジネスサイドとのコラボレーションにも言えることですね。
yashi 僕はエンジニアとして、デザインの可能性を狭めたくないと思っています。デザイナーがやりたいことが技術的制約のために実現できない、というようなことを極力なくしたいんです。
デザイナーが実現したいことを技術的に叶えることがエンジニアの責務だと思っているので、いい意味で無茶ぶりしてもらいたいですし、そこに応えていけるようにエンジニアとして努力し続けていきたいと思っています。
hanakuma デザイナーも技術的なところを知ってしまうと、ついつい組みやすさを優先するようになりがちで、「エンジニアにこれ言ったら嫌だろうな」とかを結構考えるようになってしまって、技術を学ぶことのメリット・デメリットを説かれたこともあります。。
それでも、やっぱり技術を理解することは重要だと思っています。お互いの得意なところを活かしあってデザイナーとエンジニアとが、一緒にプロダクトに向き合うことでよりよい体験を作っていけると思っているので、これからもいい感じにコラボレーションしていけたらと思っています。
こんな環境で働いてみたい方は
これでデザイナーとエンジニアのコラボレーションに関する対談は終了となります。
ギフティでは職種を横断したコラボレーションをしてみたいエンジニア/デザイナーを絶賛募集中です。気になる方は、是非一度カジュアル面談でもなんでも良いので一度お話ししましょう！