エンジニアリングとデザインの接点
ーー
今回の「バックステージ インタビュー」では、前回に引き続き、フロントエンドエンジニアの大木尊紀さんをお招きしてお話をうかがいたいと思いますが、今日のテーマは、「デザインとエンジニアリング」という視点でお話をうかがいたいと思います。
FOLIOのエンジニアは、デザインチームと近い距離でプロジェクトを進めるという、他社では珍しい手法で開発を行なっていて、これが面白いシナジーを生んでいるよう。
ということで、今回は大木さんに加えて、デザイナーの松岡さんもお呼びして、座談会形式でお届けしたいと思います。
さて、早速ですが、今日はよろしくお願いします。
大木さん、松岡さん（以下、大木、松岡）：
こちらこそよろしくお願いします。
デザイナーと近い場所で働くというメリット
ーー
エンジニアとデザイナーがこういう形でディスカッションをするというのは、なかなか珍しいかもしれませんね。
デザインとエンジニアリングは、両極端に存在するようなイメージがあります。
早速ですが大木さんに質問です。エンジニアとして、デザイナーと近い場所で仕事ができるメリットはありますか？
大木：
そうですね、色々あるのですが、デザインデータに不具合があったり、システム的な要件が漏れていたりする時に、すぐコミュニケーションを取ってデザインを作ってもらえる部分が良いところですね。
私は色々な案件を手がけているのですが、ある案件の場合、その組織はデザイン部とプロダクトチームが別にあるんですね。
そしてあるプロジェクトを動かすときは、わざわざデザイン部にデザインの依頼を投げるんですね。
そうするとデザイン部の中のスケジュール調整とか、プロダクトのことを俯瞰で見ていないデザイン部の方々が結構色々言ってくることがあって、説明が二度手間になることがあるんです。
でも我が社の場合は、プロダクトチームの中にデザイナーがいるので、コミュニケーションも円滑ですし、スケジュールの調整も楽ですし、そういう部分において、デザイナーとエンジニアの距離が近いのは、仕事がしやすいですね。
松岡：
私が前に働いていた会社も同じようなタイプでした。デザイン部も、フロントエンドも、開発もディレクターも、全員が別のグループで、ミーティングの時だけ集まるんですよ。
そうすると、同じマインドを共有できないんですね。心の距離もありますし、プロダクトへの理解の距離もありますし、その結果として、コミュニケーションコストがとても高くなってしまうんです。
ーー
コミュニケーションコストが高くなることの、一番の弊害ってなんですか？
大木さん：
たとえば、プロダクトの中で、ユーザーの人がどうやって使ってくれるかを想定しますよね。
そして「システム的にはこういう流れがあるから、こういうデザインが欲しいよね」となった時に、ユーザーの流れとかシステム的な話は難しい部分が多いので、コミュニケーションがきちんとしていないと、こちらが想定している物と全然違うものが上がってくることはよくあります。
ある部分だけフォーカスして見ると、いい感じのデザインなんだけれど、前後に幅を広げて、俯瞰で見てみると違和感があるといいますか、もう少し改善した方がいいポイントが見えるデザインが上がってくるんですよね。
そして組織が違うと、「すいません、ちょっと違いまして……」というのをわざわざ別の部署に伝えにいかないといけないんですよ。
ーー
それはとても面倒ですね。松岡さんもデザイナーの視点で同じようなことを思っていらっしゃるのですか。
松岡：
はい、その気持ちはとてもわかります。
画面でのUI（ユーザー・インターフェイス）はすごくベストなんだけれど、全体のUX（ユーザー・エクスペリエンス）で見たら適切ではない、というようなことが起きやすくなります。
デザイナーもその一画面だけにフォーカスしてアサインされると、そこしか見えづらくなってしまうんですね。
ですから、そのプロダクトにずっと関わってデザインするのと、そうでなくて一部分だけ見てデザインする人では、ズレが生まれますよね。
ーー
なるほど、確かに部署とかプロジェクトチームが離れているのに、同じプロダクトを作らないと行けない場合、コミュニケーションが円滑にいかないと、齟齬が生まれたり、無駄な時間を削がれてしまいますよね。
その点FOLIOでの開発は、コミュニケーションにおけるストレスがゼロとはいわないけれど、限りなくゼロに近い感で進められてこれたのですか？
大木：
僕の場合はそうですね。
作業効率化でもっとも大切なこと
ーー
コミュニケーションにおいてノーストレスであることは、仕事においてどんなメリットがありましたか？具体的にあれば教えてください。
大木：
松岡さんと前に話したことがあるのですが、定期的に定例の打ち合わせがありまして、その場で私の考えていることを松岡さんがデザインに落とし込んでくれて、その場で関係者の確認も取れてOKが出る、という工程はすごくいいですよね。
これはでも、日頃から毎日コミュニケーションを取って、同じコンテキストを共有できているから、日々の30分程度の短い定例でも円滑な意思疎通が図れるんですよね。
もし組織が分かれていたら、前段階の話を説明して、それを踏まえてデザインに落とし込んでもらって、それをこちらがまたフィードバックする。これだけでもかなりの時間がかかりますよね。
こういう部分に工数を取られないことは、とてもいいことだと思っています。
ーー
松岡さんはデザイナーから見て、その部分はどうですか？
松岡：
私も大木さんと同じく、やりやすいと思っています。
関係者に確認してもらってから承認をもらうのは、すごく時間がかかりますから、ミーティングの中でライブでデザインして、その場に意思決定者もエンジニアもデザインの責任者もいれば、そこで決められることもありますからね。
ーー
ライブで方向性が決まる、という部分について詳しく聞かせてください。
30分のミーティングで、エンジニアである大木さんが意見をだして、それを松岡さんがデザインにその場で落として、意思決定者もその場にいて、短い時間で色々なことが決まって進んでいくということですか？
松岡：
はい、デザインチームはFigmaというデザインツールを使っているのですが、それをモニターに映して、皆が話していることを、その場で私がデザインに落とし込んでいくんですよ。
私の作業工程が全部見えるので、その途中で「これはいいね」、「いや、これはちょっと違いますね」と議論しながら、その場で取り入れた方がいいことを、その場にいる人に聞きながら、形になっていく、というイメージです。
ーー
他の会社でも、こういう風にして形に落とし込んでいく場合ってあるんですか?
大木：
もちろん、導入している会社もありますが、組織が大きくなるとどうしても部署やチームがバラバラになってしまうので、少ないですね。
数人のスタートアップでやっている組織なんかは、こういう風に作っていますが、私たちの会社は今70人ほどでプロダクトが4つあるのですが、この規模感でこの方法を取り入れているのは少ないかもしれませんね。
ーー
デザインもそうですか？こういう手法は珍しいですか？
松岡：
珍しいと思います。私は今まで、こういう風にライブででものごとが決まっていくという環境にいたことはないですね。
今までの会社は部署で完全に分断されていましたし、承認者も別にいましたから、その場で決められるということはありませんでした。
だからすごく時間がかかっていて、FOLIOで30分で決まることって、前の会社だと１、２週間かかっていたかもしれません（笑）。
ーー
そんなに違うんですか!?それはかなり作業効率が上がりますね。逆にこのやり方のデメリットってあるんですか？
大木：
私はデメリットは全くないですね。助かっています本当に。
松岡：
デメリットですか……。あえて言うならば、良い関係性ができてないと難しいと思います。
というのも、デザイナーによっては途中経過を見られたくないという人もいますから、その場合この方法は難しいですね。
あとはスピードがないと話を聞きながらデザインできないので、スピードがあるデザイナーでないと負担に感じるかもしれません。
ーー
なるほど、良い人間関係と手を動かすスピードですか。
大木：
あと、コミュニケーションをきちんと取れるデザイナーでないと難しいですね。
FOLIOで働くことの面白さとは？
ーー
大木さんにお聞きしたいのですが、今まで色々なデザイナーとお仕事されてきたと思いますが、エンジニアから見て「あ、やりづらいな」と思うデザイナーは、どういう特徴があるんですか？
大木：
そうですね、コンテキストが共有できないデザイナーとは仕事しづらかったですね。
これは人というよりは、組織的な話なのですが、私の前職はデザイナーがCDO一人だったんですが、その人が３つのプロダクト全てのデザインを手がけているという、少し特殊な職場だったんです。
その人はすごく優秀で、手もすごく速かったのですが、プロダクトのミーティングにあまり参加しないんですよ。だから、「こういうのを作りたいね」とプロダクトチームで決めて、それをデザイナーに伝える、という作業方法をしていたんです。
それでもクオリティーの高いデザインが上がってくるのですが、全体像が見えないので、こちらの意図とは違うデザインがあがってくるという場合もあり、完成までに時間がかかることがありました。
ーー
ということは、「クオリティーが高い＝素晴らしいプロダクト」であると一概には言えないということですね。
大木：
そうですね、一面だけ見るとデザインとしてのクオリティーは高いんですが、全体を見るとそうではない、ということはありますよね。
特にこだわりが強いデザイナーの場合は、ある一点はすばらしいのですが、俯瞰して見たときに、おや？と思うことがあるので、その部分ではコミュニケーションがうまくいかないことは経験しました。
ーー
お二人からお話をうかがっていると、エンジニアとデザイナーの連携というのは必要不可欠で、表面的な部分ではなくて、深層の部分、全体を通してエンジニアリングとデザインというのはクロスしていかないと、良いプロダクトにはならない、ということですかね。
大木：
個人的にはそう思います。確かにベストなデザインというのは世の中にあると思います。
「ここがこうなったらとても使いやすい」みたいな。でも弊社の場合は特にシステム的な制約でできないこともあるんですよね。
その制約の中でできるだけ使いやすいアプリケーションを開発するためにデザインとエンジニアリングの力を融合させてひ日々奮闘しています。難しい部分ですがやりがいを感じるところでもあります。
ーー
エンジニアの視点で見て、「FOLIOで仕事をするとデザイナーとこういう面白いことができます」みたいなことがあったら教えてください。
大木：
そうですね。先ほど松岡さんがお話していたFigmaは、私が導入したいとお願いして会社に導入したツールなんです。
周りのスタッフはどう思っているのかわからないですが、ああいうFigmaのようなデザインツールを導入することで、エンジニアがデザインの部分に関われるので、デザインに興味があるエンジニアには面白い職場だと思います。
あとは、組織があまり明確に分かれていない点がいいですね。色々意見を言いたい時に、部署が分かれていると意見を言いにくいですよね。
でも「このUIをもう少しこういう風に変えたい」と思ったら、比較的そういう意見を言いやすい環境ではありますね。自分でも提案できますし、面白い職場だなと思います。
ーー
ちなみに、Figmaの利便さは、松岡さんも感じてますか？
松岡：
そうですね。便利なツールだと思っています。
ーー
Figmaでデザイン部分をエンジニアと共有できることは、エンジニアとのコミュニケーションを円滑にしてくれて、作業効率が上がるからですか？
松岡：
そうですね、基本的にFigmaを導入してよかったなと思います。
でも、このツールには一つデメリットがありまして、デザイナーとエンジニアの間に信頼関係がないとファイルを共有できないですよね。
大木：
うん、それはわかる。確かにそうですよね。
ーー
その理由を教えてください。なんでツールを使うのに信頼関係が必要なんですか？
松岡：
あのツールは、デザイナーの頭の中が全部見えてしまうんですよ。つまり、制作過程がオープンになってしまうんです。
だから、Figmaを見れる人全員と信頼関係ができてないとダメですね。デザイナーは、制作途中のものなのに、その制作途中の部分を突っ込まれたりすると、困ってしまいます。
ーー
確かに、完成形でないものを見られるのは嫌がる人は多いかもしれませんね。
松岡：
そうなんです。これはデザイナーに限らず、どんな仕事でも同じですよね。
完成形じゃない、という前提で見せているのに、「ここはダメだね。ここは変だよ」と突っ込まれるのって嫌じゃないですか。
でも「完成する前に指摘を入れてはダメだよ」とルールを決めたとしても、メンバー全員がやりづらくなりますよね。
でもここの環境であれば、信頼関係があるので、Figmaというツールが有効だなと思っています。
大木：
Figmaのコミュニティーでも、そんな話が出ていましたね。Figmaはデザイナーのプライバシーを侵害しているのではないか？と。
私をはじめ日頃からFigmaをよく使っている人はあまりそういう意識がないと思うので、オープンに自分のアイデアとか途中経過の制作物が他の人に見られてもあまり気にしないのですが、たとえばAdobe製品などを使っている人は、完成した物を人に見せることに慣れているので、途中経過の物まで見せるのは、人によってはハードルが高いですよね。
ーー
ちなみに、エンジニアである大木さんは、たとえば自分の書いているコードを途中で見られたりするのは、抵抗あったりしないんですか？（笑）
大木：
そうですね、ちょっと違いますが、たとえばライブコーディングとかは結構恥ずかしいと思うことはあります。
小さな勉強会などでライブコーディングしてみんなに見せながらデモしたりしますが、これはちょっと恥ずかしいですよね（笑）。ショートカットの具合とか、プログラミングのスピード感とか、タイポしてることを見られるのは恥ずかしいかもしれませんね（笑）。
松岡：
これはデザイナーとエンジニアで違う感覚だと思うのですが、基本的にデザイナーは、途中経過を見られる人が嫌な人の方が多いのではないかと思います。
でも信頼関係があれば全然大丈夫です。だから今の環境だと何の問題もないんですよね。前の会社だと絶対に嫌でしたけど（笑）。
ーー
松岡さんにお聞きしたいのですが、デザイナーから見て、「こういうエンジニアの人は働きやすい」というポイントはありますか？
FOLIOのエンジニアに求められるもの
松岡：
そうですね、デザイナーではない職業の人が、デザインの話をしてくれるのはありがたいですね。知識はないけど興味はある、でも全然いいと思います。
というのも、アプリやウェブサービスにおいてはどこからどこまでが「デザインの領域」とするのか難しいところだと思うんです。プロダクトについて話すということは、デザインについて話すことになってくるので、どうしてもデザインのことを知らないといけないんですね。
だから興味を持っているという状態は、問題解決に近づいているということですから、すごくプラスだと思います。
ですから、デザインに少しでも興味がある、知りたい、という人は働きやすいですし、コミュニケーションを取りやすい職場だと思いますよ。
それで言うと大木さんはデザインのことがすごく好きなんだろうなと思います（笑）。
ーー
エンジニアである大木さんが、デザインに興味がありそうだという部分はどんな点で感じますか？
松岡：
前回の記事を読んだのですが、大木さんがデザイン部の部長・吉原さんの話をしていて、大木さんはUIデザイン以外にもグラフィックなんかにも興味があるんだろうなとは感じていました。それはポジティブな印象を受けていました。
ーー
エンジニアの立場から、デザイナーである松岡さんにお聞きしたいことはありませんか？
大木：
そうですね、エンジニアと仕事していく際に、どういう風に関わったらデザイナーとして嬉しい、やりやすい、というのはありますか？
エンジニアの人は、デザイナーとどう関わっていいか分からない、という人が結構多いので、色々思っていても口に出せないことが結構あると思うんです。
松岡：
そうですね、たとえば、UIの改善のデザインが出てきた時などには、気になることがあればなんでも言った方がいいと思います。
デザイナーにもこだわりのあるポイントと、特にこだわらないポイントがあると思うんです。こだわらないポイントは、フロントエンドや開発の知識があれば実はもっとよくできるかもしれないのですが、そこはデザイナーは気づかないんですよね。
だからそういう部分に意見をくれたらヒントになると思いますし、静止画で問題を解決しようとしても上手くいかないことが、エンジニアリングやUXを大切にしたら実現できるかもしれないですよね。
だからプロダクトに関することで、気になることがあれば、いつでもなんでも言っていいと思いますよ。
大木：
なるほど。逆に松岡さんから見て、エンジニアの立場である私に聞きたいことはありますか？
松岡：
UIデザインは、静止画で表現できないことも多いですよね。
UIデザインをエンジニアと議論する時に、どういう風にこちらのやりたい意図を伝えるのが一番いいんですか？
ProtoPie（プロトパイ）などのモックアップを作るツールを使って見せるのがいいのか、それともインターネットでCSSアニメーションなどを探してきて、「こういう風にしたいです」と伝えるのがいいのか？ 伝える方法にいつも悩んでいます。
大木：
実は僕もどうやって伝えたらいいか悩んでいます（笑）。
というのもデザイナーからのいいアイデアも、実装できないと意味ないんですよね。ですから、デザインツールで綺麗に作られると、逆に困るときもありますね（笑）。
色々な制約があるので、そのアイデアはちょっと実装できません、ということもありますし、逆にデザイナーの人に実装してもらうのも大変ですし、悩みますね。
松岡：
なるほど、そうなんですね。確かにProtoPieできれいにモックアップを作ったとしても、実現できないこともあるんですよね。
大木：
そうですね、きれいなモックアップを作りすぎてしまうと、「それ、できませんね、じゃあどうしますか？」みたいな議論になり、上手くいかなくなることが僕の経験上結構多いんですよね。
特にアプリにくらべてWEBのページはアプリでできることができなかったり、アニメーション入れると重たくなったりしてしまうので、だんだんアイデアを削ぎ落としていく議論が結構難しいんですよね。
でもきれいに作っていただいた方がわかりやすいことは確かなので、そのあたりを上手にコミュニケーションして「これはできる、でもこれはできない」ということをやりとりするのがいいのではないかと思います。
ーー
そろそろ時間が近づいてきました。今日は本当にありがとうございました。最後にお二人から何かありますか？
大木：
エンジニアを募集しています！ 切実に募集しています！
松岡：
私もデザイナーを募集しています！（笑）
ーー
今日はありがとうございました！