様々な職種の「橋渡し」ができる、理想のフロントエンドエンジニアを目指して
今回はFOLIOでフロントエンドエンジニアとして活躍している大木尊紀（@takanoripe）へのインタビューです。エンジニアでありながら、ディレクター的、デザイン的な思考でプロダクトの開発に寄与している大木は、どういう思いでFOLIOに入社して、どんな仕事をしているのでしょうか？
今回の聞き手は、FOLIOのバックエンドエンジニア・村上拓也（@Mura_Mi） でお届けします。
―大木さん、今日はよろしくお願いします。最初に、自己紹介をお願いしたいのですが、2018年10月にFOLIOに入社される前は、どんなお仕事をされていたんですか？
株式会社フォーデジットデザインで、大手自動車メーカーやゲームメーカーのウェブサイトリニューアルに携わった後、株式会社スマートドライブに転職しまして、車両管理サービスやカーリースサービスの開発に携わり、フロントエンドの開発やサービス設計を担当していました。
―フロントエンドエンジニアと一口にいっても、領域が広いと言われますよね。その領域の中でも大木さんが得意な部分を教えてください。
私は、ディレクターや制作系の出身なので、FOLIOの他のフロントエンドのメンバーよりも、デザイン寄りの話や、情報設計の部分を踏まえてフロントエンドの開発ができる点が、自分のストロングポイントかな、と思います。また最近では、デザインツールと、フロントエンドの開発をどう結びつけて上手に連携できるのか？という点が気になっていまして、それを実現したいですね。
―Figmaを使ったフロントエンドの開発について、今年の6月のイベントでプレゼンされていましたが、それもその実現に関係しているのですか ？
そうですね。特に私が制作会社にいた時は、デザイナーの発言力が強くて、開発側（エンジニア側）の意見は、二の次にされてしまっていたんです 。例えば当時使っていた AdobeのPhotoshopなどは、デザイナー側の要望に応えるツールですので、なかなか開発に落とし込みにくくて工数が増えてしまっていました。
でも最近のSketchやFigmaなどのアプリケーションは、プラグインが充実していたり、プラグインを作って活用することで 、エンジニアリング的に問題を上手に解決でき、もっと楽にデザイナーの意図を実装できて、より良いプロダクトを作れるのではないか？と考えています。
―大木さんは、フロントエンドという職種の中でもデザインが得意ということですが、その言葉だけを聞くと、「一人で開発して、一人でデザインも考えて、一人で実装する」というイメージだったのですが、今のお話をうかがうと、少々違うようですね。
つまり、デザインの知識や視点を持ちつつ、フロントエンドで開発の仕事をしている、ということです。デザイナーは社内にいるので、デザインの部分はその方にお任せしつつ、デザイナーが意図したデザインを上手に実装に反映できるために、自分で勉強したり経験してきたデザイン的な知識や思考を、開発に取り入れている、ということですね。
―先日、大木さんが登壇された「Battle Conference Under30」で使われた資料の中に「デザイナーの意図を聞けるようになる、ということがデザインを学ぶことの重要性だ」とありました。本当にその通りだと思うのですが、そういう思考になったきっかけを教えてください。
私が駆け出しの頃の話なのですが、ある制作会社で開発の仕事をしていたんです。その会社はデザイナーの力が強くて、ディレクターとデザイナーが全部決めてしまっていたんです。その結果、自分が関わったサイトが、とても使いづらいものに仕上がってしまった、という経験があったんです。
友人や技術のコミュニティーの人にそのサイトを見せても「あまり良くないよね」という反応をもらってしまい……。私はその時「あまり良くない」というフィーリングはわかりつつも、具体的に「何がどう良くないのか？」という論拠がわからず、デザイナーにフィードバックすることができませんでした。
そんな風に「これでいいのかな？」と疑問を感じながら実装したプロダクトが多くて、そうすると「これ俺が作ったんだぜ」と、自分の関わった仕事に胸を張れない。でもエンジニア一人では何もできませんし、デザイナーがデザインしたものがなければ、フロントエンドは何も作れません。だからデザイナーにちゃんとフィードバックできて、自分が納得したものを作れるようになりたいな、と思ったのがきっかけです。
―なるほど、そんな経験をされたんですね。でも、そこからデザイナーと意思疎通して、自分が考えているプロダクトを開発できるのは、かなり大変だったのではないですか？具体的に大変だった部分を教えてください。
昔ディレクターをやっていた時に、ワイヤーフレームをつかって情報設計をおこなっていたのですが、ユーザー心理や色使いをどうするか？という部分は当時全くの門外漢だったんですね。今でもあまり自信がないのですが（笑）。でもそこから、自分で雑誌を作ってみたり 、 WEBサイトを作ってみたりとアウトプットを繰り返しつつ、フィードバックももらうことで、その辺りの勘所もつかめてきているように思えます。
あと、デザインというのはフィーリングや感性の部分が大きいのかな、と以前は思っていたのですが、心理学をはじめとする科学的な部分もデザインには大切で、そういうことを知るとデザインって本当は論理的な世界なんだな、ということがわかってきました。そうすると色や形、黄金比などにだんだんと抵抗がなくなってきて、デザインの背景にある論理を知ると、デザインの意図が見えてきて、少し前進しましたね。
―FOLIOという会社は、UXやUIにおいて、デザインにすごくこだわっている会社だと外部の人から見られることが多いのですが、実際に入社されていかがでしたか？
そうですね、社内のデザイナーの方に、プロダクトのデザインの意図を聞くと、ちゃんと答えてくださるので、ただフィーリングで作っているのではなくて、ロジカルに考えて作っているんだなと知りました。すごく良いことですよね。
―今はFOLIOでどんな業務をされているんですか？
具体的な仕事は、FOLIOのプロダクトで「ワンコイン投資」というものがあるのですが、その開発チームに所属してフロントエンドの開発をしながら、他のプロジェクトも見ていたりもします。
―「ワンコイン投資」とは、どんなプロダクトですか？
スマホのLINEアプリ上 からでも500円から積立投資を始められる 、というプロダクトです。あらかじめ積立金額を決めて、自分にあったペースで積立投資ができる んです 。LINE Pay を使って決済するので、全部スマホの中で完結する、というのがこのプロダクトの大きな特徴ですね。LINEさんのプラットフォーム内で動いてるものなので、トーン＆マナーはLINEさんの色を意識しつつ、FOLIOのサービスの説明もしなくてはいけないので、デザインや画面設計の面で気をつけていますね。
LINEさんのプラットフォーム内で動いてるものなので、トーン＆マナーはLINEさんの色を意識しつつ、FOLIOのサービスの説明もしなくてはいけないので、デザインや画面設計の面で気をつけていますね。
―入社してすぐに、その「ワンコイン投資」にかかわっていたんですか？
そうですね、入社した頃は、これ以外にも「おまかせ投資」というプロダクトにも関わっていたのですが、「ワンコイン投資」の開発もやっていました。
―「ワンコイン投資」は、LINEさんのトーン＆マナーとFOLIOのサービスを連携させることがミッションの一つだったようですが、開発当時、実際のデザインについてデザイナーとディスカッションするときや決め事を作る時は、どのように作業を進めていましたか？
開発初期のころは、スケジュールがタイトだった、という理由もありますが、作業の進め方をキッチリと決めて「これが終わったら次！」みたいに進めるのではなくて、かなり流動的に進めていました。まずデザイナーの人がモックアップを作って、それを見て、次週の打ち合わせで確認して修正してまた見せて……というサイクルを繰り返したりしていましたね。
最初の頃は、デザイナーが作った物に対してフィードバックをする会を何度か繰り返して、どういう見せ方をしていくか？という議論をしていました。私は初期の頃 、ワイヤーフレームをあまり書いておらず、デザイナーがワイヤーフレームとデザインの中間のようなものを作ってくれて、それをベースに議論して、フィードバックして、それをLINEの担当者に見せてフィードバックをもらって直して、という作業を繰り返していました。
―別会社と作業を進めるにあたり、プロダクトに対するトーン＆マナーや考え方が違うのは当然だと思うのですが、どういう部分が大変ですか？
そうですね。見た目のデザインや、細かい部分もとても大切なのですが、サービスの設計や機能の設計の面でもきちんと議論できるように気をつけてコミュニケーションを取るように心がけています。LINEさんとウチの会社は、当然組織の構造も違いますし立場も違います。
プロジェクトを進める上でも、ディスカッションの場で議論の焦点がズレたりすることがありますから、議論の上でお互いがフォーカスする点もきちんとすり合わせながら、プロジェクトを進めていくことを意識しています。このように他社との関係性を保ちながら、自社のプロダクトを作るというのは、あまり経験がないことなので、試行錯誤しながら日々開発を進めています。
―大木さんは、ある種デザイナーとエンジニアの架け橋のような存在だと思うのですが、そういう立場での働き方も、組織によって役割分担や仕事のやり方は全然違いますよね。違う組織間での仕事のやり方のギャップを埋めるのは大変なのでは？
そうですね。同じプロダクトに関わっているチームだとしても、組織や職種が違えば温度感や視点が違うのは当然ですし、そこのギャップを埋めるのは大変ですが、やりがいはありますね。
―もともと、ディレクションをやられていたんですよね。プロジェクトの方向を決めることが本当の意味でのディレクションだと思うのですが、当時のディレクションの経験は、今の仕事に役に立っていますか？
私がディレクションをやっていた時は、立場的に下だったので、プロジェクトを総括してディレクションするポジションではなかったんですよね。私の上にもっと大きな視点でディレクションを取るポジションの人がいまして、そこから降ってくる細かいタスクのディレクションをこなしていく、という仕事をしていました。
ワイヤフレームを書いたりする仕事はありましたが、本当の意味でディレクションをする、という仕事はあまりなかったんです。
そういう経験が今の仕事に生きているとするならば、LINEさんから大きなディレクションをいただいた時に、そのディレクションを受ける側の、いろいろな人のいろいろな気持ちが理解できる点ですかね。
―いわゆる「ディレクター」からのキャリアシフトで、エンジニアリングサイドにシフトした理由は先ほどうかがいましたが、ディレクターからデザイナー的な視点を持って仕事をするようになったきっかけはあるのでしょうか？
今から少々、しょーもない話をしていいですか？（笑）
実は昔、デザイナー、それも広告代理店のアートディレクターに憧れていたんですよ。当時読んでいたデザイン雑誌『ブレーン』に、どこかの広告代理店のアートディレクターのインタビューが掲載されていたんです。その内容が「地方のある寂れた商店街が、デザインの力で課題を解決して改善した」というものだったんです。それを読んで「デザインで課題解決した！なんて言ってみたい」と思ったんです（笑）。
私は大学時代、工学部で飛行機を作る勉強をしていまして、周囲にはモノを作ることに喜びを感じる、職人気質の人が多かったんです。それはとても素晴らしいことなのですが、私の場合、モノを作って満足というよりも、モノを作って何かをすることの方に興味があったんです。
私が飛行機を好きだった理由は、空を飛びたいとか、飛行機はカッコいいという思いがあって、自分で作った飛行機が動いて、それに人を載せて飛ばしてみたいからだったんですね。でも私の周りには、そういう思いでモノを作っている人があまりいなかったので、面白くないな、と思っていました
WEBの世界に来たのは、プログラミング自体が好きな人もいますが、プログラミングをしてプロダクトを作ったその先のことを話す人が多くて、その中でもアートディレクターという存在は、それを語る際たる存在だと感じていたんです。だから私はアートディレクターを目指すためにデザイナーになろうと思い、ディレクターをやっていたんです。
ディレクターからデザイナーになるというキャリアパスをその時は想像していたのですが、開発を受託するディレクターは、やることがあまりないんですね。仕事を発注する側のディレクターは、生き生きとして好きなことを提案するのですが、受託側はパッシブだったので、この先伸び代がないな、と思ったんです。
―確かに、受け仕事側の立場だと、ディレクションすることは少ないかもしれませんね。
それと、私がやっていたディレクターという仕事は、自分に何も残らないな、という気持ちがあったんですね。確かに私はプロジェクトに関わっていますが、一つサイトがリリースされたとしても、コード書いたのも、デザインを作ったのも、企画を練り上げたのも自分ではない。自分は何をしているんだろう？と思ってしまったんです。何かをしてるんだけど、何もしてないという感じがありまして（笑）。
もともと大学でプログラムを少し書いていたので、エンジニアになった方が自分の足りないところを補えるのかな？と考えたのと、ディレクターの仕事をして気づいたのですが、アートディレクターが言っているようなことは、エンジニアやデザイナーなどの、手を動かす側の人間も言えるなと思ったんです。
アートディレクター側は立場上声が大きくなりやすいですが 、エンジニアやデザイナーは、プロジェクトを立ち上げて実装して課題を解決しましたと言えるし、そのプロダクトをユーザーの人に使ってもらえたりできますし、そんな理由で制作会社のエンジニアに転職したんです。
―大木さんのそのキャリアは、ある種の理想かもしれませんね。なかなかディレクター、エンジニア、デザイナーの壁を超えられずに悩んでいる方は多いですよね。
いえいえ、「デザインで課題解決」という言葉を、いつか言いたいだけです（笑）。
―「ワンコイン投資」のプロジェクトは、今現在（2019年7月）においてはどういうフェーズなんですか？
新しいプロジェクトの関係で言えないことが多いのですが、新しい機能をリリースする話が進んでいまして、その議論をここ2ヶ月ぐらいずっとしています。社内のスタッフの意見や、ユーザーインタビューから吸い上げたアイデアなどを実装するために動いています。
―今のプロジェクトにかかわっていて、面白いなと感じることは何ですか？
今までの私の仕事は、マーケティングの人と話すことが少なかったんですが、今はマーケティングの人が近くなったことですね。今までの打ち合わせは、プロダクトマネージャーとデザイナーとエンジニアという、開発側だけでやっていて、マーケティングの人は出席しなかったんですが、今はマーケティング部も一緒に同じチームでミーティングをやったりしています。
毎朝、朝会を やっているのですが、そこでマーケティング施策の話などを共有するのですが、これはとても素晴らしいなと思っています。
―どういう部分に素晴らしいと感じますか？
2点あるのですが、まず1点目は、マーケティングの人はトレンドに対する感度が高いということです。そして2点目は、「数字を軸に、透明感のある議論ができる」ということです。
例えばユーザーから、「このサービスではこんな通知が送られてきた」 という話や、マーケティングの人がユーザーインタビューを通してユーザーの意見を吸い上げてフィードバックをもらったり、現在目標の数字に対する途中経過がどのぐらいで、どんな施策をおこなうのか、という話を共有しています。
マーケティングの方がやっている仕事の中にも、フロントエンドのエンジニアが絡んでくるタスクがありますし、マーケティング部のアイデアや要望などを、開発のスタッフと交わしてプロダクトに取り込めるのはいいことだと思います。
―「数字に透明感がある」というのは素晴らしいですね。透明感というのは、一次情報 がきちんと見えていることだと思います。ちなみに大木さんは、そのプロジェクトにおいて、デザイナーとどういう風に関わっていますか？
ここ2ヶ月ぐらいは、プロダクトのデザインよりもプロトタイプやコンセプトデザインを作る部分にかなりリソースを割いていたので、デザイナーが直接エンジニアと話す機会は少なかったように思えます。デザイナーと深く関わっていくのは、これからのフェーズになりそうですね。
―ちなみに、今のプロジェクトに関わっているデザイナーの方は、どういう方々ですか？
吉原さんと松岡さんという、二人のデザイナーがいらっしゃいます。吉原さんはこのプロジェクトだけでなく、フォリオ全体のデザインを統括するポジションにいる方なので、そのあたりのバランスを考えながら、今のプロダクトのデザインを担当されています。
松岡さんは、具体的なコンセプト案を作ったり、これから実装しようとしている機能のデザインを作っていただいてます。全体のコンセプトを考えるのは吉原さん、実際に手を動かして形にしてくれているのが松岡さん、という棲み分けですね。
―お二人のデザイナーとお仕事をしていて、どういう部分が頼もしいですか？
吉原さんは、コンセプトを考えるのがすごく上手で、どういう方向を目指したいのかを、きちんとまとめてくださったり、おまけにものすごく手が早いんですよね。キャラクター案なども、さっとラフを描いてくれて、「おっいいね！」ってチーム内が盛り上がるのがすごくいいですよね。
あとは、プロダクトマネージャーと一緒にLINEさんとコンセプト詰める議論をしていた時に、そこに一緒に参加してコンセプトデザインを詰める作業をしたのですが、まとまった物がないと相手になかなか納得してもらえないので、コンセプトを形にする力はすごいなと思いました。
―大木さんはFOLIOに入る前、制作会社に勤務されていたんですよね。FOLIOにジョインするきっかけがあれば教えてください。
制作会社で働いている時、ディレクターからエンジニアになったのですが、何かを作っていても何も作ってないような感じから抜けられなかったんですね。言われた物を作って終わって……という状態が続いたり、私が作ったサイトが、いつの間にか誰かの手によって改造されて、キメラのような姿になってしまったんです。何のサイトかは守秘義務がありますので言えないですけどね。
ウェブサイトを作るのは色々な仕事が短期間でできるので楽しかったのですが、いくら作っても発注を受けて作ったものですから、「自分で作ったもの」感が薄いんですよね。そういう状況の中で、「自分の物として作れる仕事がしたいな」と思うようになってきたんです。自社でサービスをやっていて、自分ごととして開発に携わりたいと仕事を探してたら、FOLIOで働いているエンジニアの、諸見里圭太さんから誘ってもらったんです。
―入社する前に聞いていた会社の話と、入ってからのイメージにギャップはありましたか？諸見里さんから聞いていた話もあると思いますが。
それが、彼からは何も聞かされてないんですよ（笑）。私が「転職しようと思ってるんだ」と彼に話したら「じゃあウチ来る？」って誘われて、気づいたら面談の日程が決まってて、会社の事前情報もないので、自分で調べたりブログを読んだりして面接行ったら後日に諸見里さんから「どうする？CTOに会う？」という話になり、当時のCTOにお会いして、入社が決まった、みたいな感じです（笑）。
そんなことで、入社前には社内の業務内容はあまり聞かされてなかったのですが、私の周りに証券会社で働いている人が数名いて、その人たちからは証券会社における情報漏洩防止や個人情報の扱いがとても厳しいという話は聞いていました。実際に入ってみたら本当に厳しくて、文言一つ一つもコンプライアンス部に確認しないといけないですし、それが業務にも当然影響が出てきますよね。
でも面白いし素晴らしいなと思ったのが、厳しいルールがある中で、どうやったら自分たちのやりたいことを実現できるか？厳しいのは仕方ないので、どう工夫すれば自分たちのやりたいことが可能になるのか？そこをみんなで考えて仕事を前に進めていこうとする点ですね。
―この記事を読んでくださっている方は、FOLIOに興味がある方が多いと思います。そんな方々に「こういう人と働きたい！」「FOLIOではこんなことができますよ！」などはありますか？
そうですね、「仕事上制約があるけれど、それも含めて楽しめる人」は合っていると思います。私もそこに面白さを感じで入社しましたし。私の前の仕事は車関係で、この業界も制約がたくさんあったのですが、 その制約の中でプロダクトを作るのは面白いですよね。制約のないプロダクトは世の中にたくさんありますが、それは結構個人でも作れてしまいますよね。
たしかにそれも面白いかもしれませんが、もっと制約のある中で「これはこうしたら実現できる！」というのを探りながら形にしていく楽しさ、制約がある中でプロダクトを作ることを楽しめる人は、FOLIOでの仕事に楽しさを感じられるかもしれませんね。
―確かに私もそこは同意見です。自由に好きなことをやるのもいいですが、自分のスキルが上がるのは、制約がある環境で自分のパフォーマンスを発揮してプロダクトを作り上げた時ですよね。そういう自信はFOLIOで働くと得られるメリットかもしれません。
少々話は脱線しますが、大木さんはWEBフォントの本などを書かれていますよね。FOLIOは副業を推奨しているのですが、副業の知識と本業の知識が相乗効果でお互いのプラスになっている部分はありますか？
そうですね、WEBフォントでは、最近FOLIOでもGoogle Fontsを利用するようにしたのですが、あれは本に記したノウハウが本業に生きたと思っています。
―なるほど。そろそろお時間が迫って来ました。最後に、大木さんの夢や野望があれば教えてください。
夢や野望ですか……。急に話が大きくなりましたね（笑）。夢なのか野望なのかわからないですけど、いつか海外に移住したいと思い、いろいろ考えています。別に海外に移ったからと言って、何があるわけではないんですが（笑）、人生のどこかで移住したいなという気持ちがあります。
それと、フロントエンジニアの地位が上げられるようなことをできたらいいな、と思っています。過去に給料が低くて虐げられた記憶はないですし、スケジュールが圧迫されるなか無下に扱われる、のような経験もないですが、話を聞いたり世間を見ると、マークアップの方やフロントエンドエンジニアの人は、あまり重要なポジションとして認知されていないなという話も耳に入ってきたりするので、その部分を解決したいので、講演に登壇したりしています。
最近「フロントエンド 」と言っても範囲が広がってきて、サーバーサイドから来る方、デザイナー側から来る方などがいて、少々カオスになっているので、そのあたりも含めて多くの人にフロントエンドの仕事を理解してもらえるように動けたらいいなと思っています。
―なるほど！これからもよろしくお願いします。本日はありがとうございました。
こちらこそありがとうございました。
