こんにちは。

FOLIO人事の井上です。

弊社のクリエイターをインタビュー形式でご紹介する「FOLIO Creators Interview」。

第3回は、フロントエンドエンジニア編です。

創業メンバーの竹村さん、SNSなどでは「よしこ」として知られる吉田さんより、FOLIOにおけるフロントエンド技術から、デザイナーと連携して理想のUXを実現する開発体制まで、話を聞きました。

証券会社には、Webの良さが活かされていなかった

－竹村さんは創業メンバーですが、どういった理由でジョインしたんですか？

竹村：広野くん（弊社Chief Design Officer）に紹介されて代表の甲斐さんと会ったことがきっかけです。そのとき勤めていた会社ではWebの研究をしていたのですが、Web自体はあまり伸びしろが無いほど良くなっていて、今ひとつ面白くないなと感じていました。一方で、証券会社にはWebの良さがほとんど活かされていなかったんです。

これからは他の業界にもWebが浸透していく時代になると確信して、甲斐さんからお話を聞いた次の週くらいにはジョインすることを決めました。当時はテーマ投資というアイデアがあるくらいで、開発メンバーもフロントエンド、バックエンド、デザイナーがそれぞれ1人だけでした。

▼ FOLIOフロントエンドエンジニア 竹村 光

FOLIOはまさに自分が使いたいと思えるサービスだった

－吉田さんは入社して2か月が経ちますね。きっかけは何だったんですか？

吉田：3月頃に竹村さんから連絡をもらって、初めてFOLIOを知りました。リリース前なのにコーポレートサイトにはメンバーが40人くらい並んでいて、よくわからない会社だと思って一度断ってしまいました（笑）。その後、まったく別の機会に友達とたまたまFOLIOの話になった時に、友達が「あの会社凄く良いよ」って勧めてくれたんです。ちょうどβ版がリリースされたり、広野くんのブログが話題にもなっていたので気になって一度会社に遊びにきて、そこから1週間後には入社を決めていました（笑）。

－吉田さんも即決（笑）。決め手は何だったんでしょう？

吉田：「テーマ投資」というサービスのコンセプトに強く惹かれたことが大きな理由です。私自身、株や投資に興味はあったものの知識がなく、ハードルが高いと思っていたんですね。FOLIOはそういった部分を払しょくしてくれる、まさに自分が使いたいと思えるサービスでした。また、優秀な人だけを採るというスタンスも良いなと思いましたね。それぞれの領域のプロフェッショナルなメンバーたちと背中を預け合って働くというのが理想だったのですが、その理想にかなり近いと思いました。

－「甲斐さんの言葉が刺さった」という話もされていましたね。

吉田：そうですね。最終面接のときに、証券業界で活躍されていた甲斐さんの口から「クリエイターをリスペクトしている」という旨の言葉を聞けたことがとても心に残りました。会社のトップが作る側のことをどれだけ理解してくれているかというのは、とても大事なんです。

もっとミクロな観点だと、クリエイターサイドもビジネスサイドもデザインをとても尊重していることも大事です。私、転職先を探す上でプロダクトのデザインを重視していたんです。入社後に自分がそれを作ることになるので、モチベーションに関わるんですよね。「この会社いいな」と思ったとしても、サービスが明らかに使いにくい構成だったり、ぱっと見て好感を持てるビジュアルでなかったりすると、二の足を踏んじゃうんですよ。

でもFOLIOにはリリース前なのに主戦力級のデザイナーが3人もいて、洗練されたデザインや使いやすさへの徹底的なこだわりが感じられたので、その部分にもすごく惹かれました。

▼ FOLIOフロントエンドエンジニア 「よしこ」こと吉田 真麻

エンジニアとデザイナーの、持ちつ持たれつの開発体制

－なるほど。それほどデザインに力を入れて開発しているわけですが、エンジニアとデザイナーではどのように仕事の棲み分けをしていますか？

竹村：明確な区切りがあるわけではないものの、基本的にビジュアルデザインやViewのコーディングあたりまではデザイナーに任せて、それ以降のロジックの部分はこちらで組んでいますね。

吉田：これまで経験してきた会社にはコードを書けるデザイナーがあまりおらず、デザインを画像でもらってすべて自分でコーディングしていました。でもFOLIOのデザイナーは、みんなコードが書けるんです。中途半端なコードだと直すのが大変で二度手間になってしまうんですけど、彼らはコードに対する美意識も持っているので、安心して任せられますね。

竹村：一般的な棲み分けだと、デザイナーが作ったHTMLにエンジニアがJavaScriptでロジックを組んでいきます。ですがFOLIOではReactを使っているので、Viewの中にロジックも含まれていて、ある程度のスキルを持って組まないとバグを生みやすいんですよね。でもFOLIOのデザイナーはキャッチアップが早くてすぐに対応できる。持ちつ持たれつの良い開発体制ができていますね。

吉田：FOLIOでは自然と「コーディングはこっちで巻き取りたい」よりも、「自分の持っているノウハウをシェアしたい」という気持ちになれます。デザイナーもコーディングが出来るようになれば、結果的にチーム全体でのアウトプットが増えるので、「レビューは丁寧にしよう」と思います。デザイナーもレビューを真摯に受け取ってくれるので、本当に良い関係です。

－吉田さんはデザインに対しても頻繁にフィードバックすると聞きました。

吉田：今までの会社でも、できるだけフィードバックをするように心がけていました。きちんとした感性のあるデザイナーなら、フィードバックをされること自体は嫌がらないだろうという気持ちがあって、それを信じて貫いています。

竹村：僕もかなり言いますね。「これ分かりにくくない？」とか。もちろん相手もきっぱりと答えてくれます。ユーザビリティの高いサービスは、デザイナーの視点だけではなくエンジニアの視点も大事ですね。

吉田：私たちだけでなく会社のメンバーは皆、ユーザーとしての観点を持っているので、専門的なことは分からなくても、引っかかることがあったらフィードバックしますね。ユーザビリティの高いサービスを作るのなら、そういう視点は不可欠だなと思います。

社内システムの開発では新しい技術への挑戦も

－フロントエンドの技術的なお話も聞きたいですね。

竹村：フロントエンドはReact・ReduxをベースとしたSingle Page Applicationで構築しています。証券システムは求められる品質水準がとても高いので、「新しいから」というだけで気軽に技術を取り入れることは出来ません。だからと言って、枯れた技術に囚われすぎると革新的なサービスは作れない。FOLIOは証券会社ですが、扱っているものが違うだけでWebサービス会社でもあるので、いま主流となっている技術を取り入れました。

－新しい技術を取り入れるときは、どのように選定しているんですか？

竹村：フロントエンドチームで新しい技術をキャッチアップして、取捨選択しています。例えば、吉田さんが社内用に作った名刺作成アプリの「MEICY」では、FOLIOのサービスサイトでは使っていないフレームワークを試していました。

吉田：MEICYはデザイナーの工数削減のために、名刺の入稿データを簡単に作れるツールが欲しいということで始めたもので、Vueで作っていますね。触ったことのない技術を試してみたくて。FOLIOはReact、前職ではAngularを使っていたので、Vueでやってみようかなと言ったら社内の皆が「GOGO」って（笑）。サイドプロジェクトで新しい技術を試して、良いものはサービスサイトの方にも取り入れていけると良いですね。

－「MEICY」はどんな風に作ったんですか？

吉田：開発自体は1人でやりました。2日くらいだったと思います。Webから出力したデータが印刷に耐えうるのかが心配だったので、早めにそこの検証だけ済ませてしまおうと開発していたら、ほぼできあがってしまって（笑）。動くものを見せたらデザイナーがすぐにビジュアルデザインやロゴを作ってくれて、ちゃんとしたサービスらしい見た目になりました。社内システムのデザインにも積極的に関わってくれたのは嬉しかったですね。

▼名刺作成アプリ「MEICY」（FOLIOの社内ツール）

お互いをリスペクトし合える関係性に

―竹村さんはUI周りだけでなく、証券システム特有の複雑な要件の実装も担当していますよね。

竹村：そうですね。株式の配当金や株式分割、株数の調整周りの実装はかなりの工数がかかりますが、一般的なWebの企業なら関わることがないであろう金融畑の方たちとやり取りが出来るので、新鮮で勉強になりますね。

吉田：私はまだビジネスサイドと関わる機会が少ないので、週1の全体ミーティングで社員全員が集まって話をする時間が好きです。せっかくひとつの会社に業種や分野が違う人が集まっているので、もっと交流したい気持ちがありますね。これまで証券系のバックグラウンドを持つ人とは関わる機会がなかったので、もっと知っていきたいです。

例えば、投資戦略に関わるメンバーの「テーマに入れる株の銘柄を選定する」というお仕事ひとつとっても、畑が違いすぎてどんなふうに進めているのか想像すらできない。こちらからもっと理解して距離を縮めるために、1時間でも社内職業見学とかしたいぐらいです（笑）。

－竹村さんと吉田さんって、まだ一緒に仕事を始めて2か月弱くらいかと思うんですが、既にすごくいい信頼関係が築けていますよね。お互いどんな印象を持っていますか？

竹村：吉田さんは、仕事も早いしクオリティも高いし、さらに言うとセンスもいい。デザインに対するフィードバックも定性的ではなくしっかりとした理由があって、納得感があるんですよね。

吉田：入社してデザイナー陣のコーディングが早すぎることに焦っていたので、仕事早いと言われると素直に嬉しいです（笑）。

竹村さんは、一緒に働いていて安心感があります。開発の面でもそうですが、加えてプロジェクトの全体を見ながら各所と連携をとって前に進めていくような仕切り力があるので、とても心強いです。社内からも愛され、厚く信頼されている感じがしますね。

－それでは最後に、FOLIOのフロントエンドを今後こうしていきたい！という気持ちをお聞かせください。

吉田：JavaScriptの型のチェックはもっと強固にしたいですね。Flowの適用も進んできているので、それが終わればベースの部分はだいぶ整ってくるのかなと思います。あとは、せっかくデザイナー側でデザインのガイドラインなどを考えてくれているので、storybookなどを使ってコーディングのときにも参照できる、動くドキュメントにしていけたらいいなと思います。

竹村：僕はフロントを「デザインとシステムをつなぐハブ」だと思っているので、双方の観点から常にUXが最大になる選択をしていけるチームにしていきたいです。また、Webはどんどん新しい技術が生まれているので、それをうまく使って、証券はもちろんのこと、Webにも今までになかったような表現や体験を作っていければと思います。そういう意味では「フロントエンド」という枠にとらわれすぎず、広い視野を持って取り組んでいきたいですね。

－なるほど。今後のサービスの発展にも期待が持てますね。ありがとうございました！