人事の井上（@inoueray）です。テックなブログに失礼します。CTOの篠原が「フロントエンドの方と面談や面接をした際に『デザイナーとどのように関わっているのか？』という質問をよく貰う。」とぼそっと話していたので、本日はフロントエンドエンジニアとデザイナーに、お互いの関わり方について話をしてもらってきました。
Profile
井原 雄太郎 Yutaro Ihara
MF KESSAI唯一のフロントエンドエンジニア。学生時代、HTML5にクロスプラットフォーム開発の可能性を見出したところからフロントエンドエンジニアライフが始まる。
新卒では某国民的SNSの会社に入社し、QAチームにいる開発エンジニアというポジションから社会人キャリアをスタート。その後SNSのPC版や広告配信プラットフォームのバックエンド、Androidアプリのクライアントとバックエンド等、フロント以外の幅広い領域のエンジニアリングを経験。転職を期にやっとフロントエンド開発にしっかり取り組めると思ったのも束の間、新プロジェクトが立ち上がったことを機に、フロントを書きつつバックエンドも書く生活に。ちなみにこの頃に現MF KESSAI CTO篠原と出会っている。
その後はPHPエンジニアを名乗りつつフロントを書く生活を送るなどしていたが、そんなとき篠原から声がかかり、2017年5月に立ち上げ初期のMF KESSAIへ入社。「やっとフロントエンド専任だ！」と思いきや、しょっぱなからGoもちょっと書いたり最近はNode.jsでBFFを書いたりと、やっぱりバックエンドも書く生活を送りつつある。
佐藤 如美 Yukimi Sato
デザイナー。2007年3月、阿佐ヶ谷美術専門学校 時空デザイン科卒業。新卒入社した会社では受託開発のUIデザインや自社グループウェアのUI/UXデザインをはじめとして幅広い領域に従事。2018年1月にMF KESSAI入社。デザインに加えプロダクト開発のディレクションも行う。 インタビュー当時、まもなく産休・育休取得予定。noteで公開しているデザイナーインタビューにも出演中。
本編
佐藤 如美（以下、佐藤）： CTOの篠原さんがフロントエンドエンジニアの人と採用面談をしていると、よく「デザイナーとの関わり方」について質問されるらしいんですよ。それで、「なんとなく自分の印象で答えるよりは、本人たちに喋ってもらおう」ということらしいです。
井原 雄太郎（以下、井原）： なるほど。
佐藤： こういう質問が良くあるのってどういう理由なんですか？フロントエンドエンジニアの気持ちとしては。
井原： 例えば会社によっては「デザイナーの力が強すぎて、上がってきたものを作るだけしかできない」ってケースもあるにはあるので、そういう環境では無いか、ちゃんと話し合える環境なのかどうかってことは確認したくなりますね。
あとは細かい業務の役割分担のところがどうなっているのか確認したいとか。コーディングまではデザイナーがやってくれるのかな？みたいな。
まぁ１つめの理由が大きいとは思いますが。
佐藤： MF KESSAIでは、割とデザイン作っている段階のレビューで井原さん巻き込んじゃってるし、色々フィードバックもくれますよね。
実装出来る/出来ないという話とか、「今までこのパターン無かったよね」みたいなこれまでの経緯をふまえた話、あとはUIとしての違和感、みたいな感覚的なものも伝えてもらっているので助かってます。作っているうちにデザイナーが忘れてしまったり見落としてしまう観点を指摘してくれるので。
そういう意味では「全力で話し合える環境だよ」って回答な気がしますね。
井原： そうですね。自分のスタンスとしては、基本的にはデザイナーの描いている世界観を実現したいと思っているんですけど、それこそ「今までこのパターン無かったな」とか、あるいは「これは実装が難しくなるな」って時はコメントしていますね。
佐藤： なので、「今までこのパターン無かった」とか「実装難しい」が最後のほうで分かることの無いように、「これいける？」ってジャブは早めに打たせて貰ってます。
井原： 「作れるけど、諸々絡み合って3か月くらいかかるよ」みたいに話もその中で出たりしますしね。極論作れないものって無いので、工数とかをふまえて「本当にやる？」って。
佐藤： デザイナーが考える理想の未来があって、それに対して井原さんから工数や技術的な観点を貰いながら、現実的にはどう作っていくべきなのか、みたいなところを一緒に話しながら煮詰めていく感じだよね。
井原： 役割分担って考えるとどう表現して良いか難しいけど、まぁ、そんな感じじゃないですかね。とはいえ自分としては気づいたことは伝えて最終判断を任せる、くらいのスタンスで話をしてますけどね。最終的に「これでいく」と決まったら作るので。
佐藤： あとは正常パターン/異常パターンとかPC/スマホ、文字数少ない/多いとか、そういうパターンで抜けちゃうものとかもあるので、そういう部分もフォローしてもらっているのも助かります！
デザイナーがシステムを把握しきれていなくて仕方がなく発生してしまうものもあるので…。
井原： 個人的には「デザイナーがシステムを理解している」という状態が理想だとは思っているんだけど、MF KESSAIの場合はデザイナーがディレクターとしての役割も担っているので、システム理解まで求めるのはさすがに負荷が高いよね。なのでレビューの段階で自分がその観点を補っている感じかな。
佐藤： 本当にありがたい。
― フロントエンドエンジニアの方が気になるかもしれないので、データの渡し方についても話して欲しいです。
佐藤： MF KESSAIの場合は、XDですね。XDにコメント付けておいて、そのURL共有するみたいな感じ。あとは切り出しが必要なパーツだけ別で渡してます。
とはいえ、CSSのフレームワークもあるので、「このUIパーツ使って良しなに･･････」ってお気持ちで指定しています。お気持ち。
井原： 長く運用しているシステムについては特に、理想としてはUIパーツ集を作ってそれを基に会話すべきだと思うんですけど、作るの大変なんだよね、実際何度か頓挫してるし。しかも、あれば良いのは確かなんだけど、そのコスパが良いのかも分からないし、ちゃんとメンテするか？って話もあるし、なかなか手が出しづらい。
ただパーツ集が無いことが原因で、「これってこのパーツで良いの？」という会話が増えてしてしまうんですよね。パーツ集があると「これが汎用パーツだよ」ってことにもなるので分かりやすいんですよ。
過去に「この画面専用」として作ったはずのパーツが他に使われようとしているシーンもあったりはしましたし（笑）。
佐藤： すみません。これからの課題ですね…。こういう話もあるので、最終的に渡すときには「後は作るだけ」って状態にできるよう、出来るだけ密なコミュニケーションを取り続けることは心がけていきたいです。
井原： 自分としてもそれが大事だと思います。ただ、最近はプロジェクトも複数になってきていてそれが充分に出来なくなりつつあるので、早く二人目のフロントエンドエンジニアに入社して欲しい…。
― じゃあ最後に、井原さんが思うMF KESSAIの面白いところをアピールしてください。
井原： え！分かりました。
ホント何でもできるんですよ。新しい技術を試してみることが凄くやりやすい。最近はブログが書けていないのですが、とにかく新しい技術が登場したら「入れてみようぜ」って感じで。
実際、新しいプロジェクトがちょくちょく立ち上がるので、そのたびに新しい技術を入れています。これまで社内向けのサービスも含めていくつかリリースしているけど、同じ環境のものって無いんじゃないですかね。
新しい技術を勉強しながら仕事ができるのはとても良いです。もちろんそれでスピード落ちるのはダメなので、ある程度スピードを出しながら、ではありますけど。
佐藤： なんでそんなガンガン新しい技術を導入できるんですかね。
井原： 技術的な要因としては、マイクロサービス化をしていてフロントエンドとバックエンドが疎結合なので、フロント側の自由度が高く保たれているって要因もあるとは思いますね。
ただそれ以上に、MF KESSAIの文化として「テクノロジーによって解決するぞ」という意識は特に強いですし、「良くなるならやろう。やってダメなら作り直そう」っていうスクラップ＆ビルドの価値観もあって、それが技術的なチャレンジを後押ししているというところがあるんだと思います。
これができる環境ってなかなか無いと思いますので、ご興味のある方は是非。
さいごに
いかがでしたでしょうか。この記事を通じて、MF KESSAIのフロントエンドエンジニアとデザイナーの関わり方が具体的にイメージできるようになっていれば幸いです。
MF KESSAIのフロントエンドエンジニア、あるいはデザイナーに興味を持って頂いた方は、下記ページからエントリーを頂けると嬉しいです。まずはカジュアル面談から、ざっくばらんにお話しましょう。