テーマをえらんで手軽に投資ができるオンライン証券サービス「フォリオ」を提供する株式会社FOLIO。この連載では、同社のエンジニアを紹介しています。今回は、ユーザーが直接触ることになる画面の作り込みを行うフロントエンドエンジニアチームから、WEB周りの開発を行う倉見洋輔さんが登場。
日本人にとって、これまで縁遠かった投資を身近なものにしようという“革命”を企てるFOLIOにとって、ユーザーエクスペリエンスは最重要事項。
複雑なことをいかに単純化するか、難しいことをどうやって簡単に操作できるようにするのか。日本の投資環境を変えるための鍵を握るフロントエンドエンジニアリングの力についてお聞きしました。
フロントエンドエンジニアは社内の“ハブ”である
「社内での“ハブ”みたいな役割かもしれないですね」
機能の集約、実装を一手に引き受け、最終的なユーザーへのアウトプットとなるプロダクトの顔をつくるフロントエンドエンジニアがそういった役割をこなすのは、どの会社でも同じかもしれませんが、FOLIOには「証券サービスである」という大きな特徴があります。
「UI/UX向上のためにデザイナーやバックエンドエンジニアと話す。また、ユーザーさんが直接触れるところなので、コンプライアンス部門ともしっかり話をしなければいけませんし、セキュリティ部門とは、事前に想定する脅威を共有しておかなければいけません。FOLIO自体が、各部署間の連携を前提に動いている会社ですが、なかでもフロントエンドエンジニアは全体をつなぐ“ハブ”のような存在かもしれません」
日本ではまだまだ身近とは言えない投資の世界を、気軽に、楽しく体験してもらうためにどうしたらいいか？ FOLIOのサービスの一翼を担うのは、フロントエンドエンジニアリングの力でした。
ここからは倉見さん自身の言葉で、フロントエンドエンジニアが担う役割について語っていただきましょう。
遵守すべきコンプライアンスとユーザビリティ
――日本人にとって「気軽に投資をする」というのはこれまでになかった概念かもしれません。まったく新しいサービスを提供するエンジニアとしては、難しい面もあるのでは？
「他のサービスとの一番の違いを挙げるとすれば、証券会社であること、もっと言えば、誰でも気軽に投資を始められる証券会社であるということですよね。一般的な証券サービスのサイトでは、まずログインをして、それから使いたい機能を探して、というフローが固まっていることが多いんです。FOLIOでは、サービス自体を気軽に始めてもらいたいという前提があるので、そこがそもそも違ってきます」
――確かに従来の証券サービスでは、操作の気軽さや手軽さよりも手堅さが求められていますよね。お金を扱うという性質上仕方のない部分もありますが、ユーザーとしては敷居の高さを感じます。
「そういう意味では、ECサイトのような気軽さを意識しているところはあります。たとえばAmazonは、アカウントを持っていない人でも買い物ができるように設計されていますよね。ああいう『気軽に始められる』ユーザーエクスペリエンスというのは意識しています」
――気軽さと同時に証券会社としてコンプライアンスについても意識せざるを得ないと思いますが、その辺りはどうやって折り合いをつけているんですか？
「証券業として遵守すべき法律や基準から逸脱したものはもちろん出せません。この部分は会社全体でそういう意識がとても高いので、それは大前提として共有しつつ、どうやったら気軽にサービスを始めてもらえるか？ 使いやすくなるか？といったことにみんなで知恵を出し合っていますね」
――気軽さを実現するためにはこうした“縛り”が窮屈に感じることも？
「普通に考えたら縛りがあるというのは窮屈なんでしょうけど、私自身、『好き勝手に自由にやっていいよ』と言われるより、縛りや制約がある中で工夫してくのに燃えてくるタイプなんですよ。制約の中でそれを当然のようにクリアしつつ、ユーザビリティも損なわない。もちろん、正直なところを言えば、面倒だなと思うこともあるんですが、それを言っても何も始まりませんよね。FOLIOで言えば、気軽に投資を始めるというユーザーエクスペリエンスをスムーズに提供するという目標に向かって、デザイナー、エンジニア、コンプライアンス、セキュリティと解決案を考えながら、なるべくユーザーに窮屈さを感じないように見せるかということを意識してやっています」
――法律やコンプライアンスをしっかり守ること、セキュアな環境を用意することもユーザーのためになるわけですからね。
「法律についても、細かく読んでいくとなるほどと思うことも多いんです。理由があって法律がある。理解を進めていくことで、ユーザーにも理解しやすい画面として反映されるんです」
――それと同時に、ユーザーの使い勝手にも寄り添っていくという。
「たとえば既存の画面の改善については、マーケティングチームが拾ってきたお客様の声や、サービスの使いづらい点など、いろいろな人の意見を吸い上げて、『こういう風に配置を変えたらいいんじゃない』とか『文言をこう変えた方がわかりやすい』という議論をしていますね。弊社では、8月にリブランディングを行ったんですが、ロゴやコーポレートミッションが一新された中で、ブランドコンセプトと据えられたのが『LIFT ME UP!』という言葉だったんです。ユーザーをそういう気持ちにさせるにはどうしたらいいか？ 使いやすさもそうですけど、これからリリースするものに関しては、すべてがこのコンセプトに沿ってつくられていくので、何か迷ったり、判断を求められるようなことがあれば、『LIFT ME UP!』に立ち返るようにしています」
マイクロサービスとフロントエンドをつなぐBFF
――冒頭、「フロントエンドエンジニアは“ハブ”である」というお話がありましたが、FOLIOさんでは、バックエンドでマイクロサービスを採用されています。こうしたサービスを集約して1つの画面に収めるという技術的な意味でもハブ的役割を担っているということでしょうか？
「そうですね。FOLIOでは、Backends For Frontends（BFF）を採用しているのですが、これによってさまざまなサービスやAPIを提供する際の問題をアーキテクチャ的に解決しようと試みています。BFFは、バックエンドとフロントエンドをつなぐ『フロントエンドのためのバックエンド』という概念で、ここ数年でAPIアグリケーションの方法論として定着してきました。FOLIOのサービスでは、口座を管理する、株価を表示するといった機能が、それぞれマイクロサービスとして機能しています。一方で、ユーザーが見る画面から直接個別のサービスを呼び出すと、ブラウザへの負荷が高まり、性能劣化などの問題を引き起こしてしまいます。BFFで各マイクロサービスの呼び出しを集約することで、これらの問題を解決しています。またBFFを設けることで、サービスUIの統一感を保ちやすいという利点もあります。マイクロサービスで多岐にわたる機能がそれぞれ独立して動いていても、フロントエンドでは、それを集約して1枚の画面で見せる。ユーザーが欲しいのはあくまでも画面を通じた“体験”なので、それをスムーズに提供するために各部署と連携してフロントエンドの一枚の画面に集約する。確かにこれもハブ的な役割ですね」
自分で書いたものが画面に直結するフロントエンドエンジニア
――倉見さんのお話からはフロントエンドエンジニアとしてのこだわりを感じるのですが、そもそもフロントエンドエンジニアになった経緯というのは？
「新卒で入社したのが野村総合研究所（NRI）だったのですが、私の業務は携帯ショップのシステムとかコンビニエンスストアで使っているシステムとか、 EC サイトとか、toC寄りの仕事が多かったんですね。そういう仕事をしている中で、業務フロー設計やバックエンドに強いメンバーは数多くいたのですが、フロントエンドを専任で担当しているメンバーはあまりいませんでした。そこから誰に頼まれるでもなく、フロントエンド周りの勉強を始めました。どんなプログラム、システムでもそれを使う人がいる限り“フロント”というのは必ず存在するわけです。そんなことを考えながら画面をつくっていたら書いたもの、インタフェースが目に見える。『これは楽しいぞ』と。その後WEBベンチャーでフロントエンドエンジニアとして仕事をして、現在に至ります」
――前職からFOLIOに新天地を求めたのはなぜですか？
「何かネガティブなことがあったということでは全くなくて、プロダクトが完成したタイミングで業務に余裕が出てきたんですね。自分に求められている役割を果たしたという達成感みたいなものもあって、追加開発や保守はあるけど、私がいなくてもワークする状況になっていくのが容易に想像できました。それで、あるときふと『俺、いらなくね？』と思ってしまって。そこからいい会社があれば移りたいなというくらいの緩い温度感で転職活動を始めて、ご縁がありFOLIOに入社しました。入社のきっかけは技術者交流を通じて知り合った現在の同僚から紹介されてという形ですけど、フロントエンドでユーザーエクスペリエンスを変えるというのはやりがいがあるなというのが入社動機であり、いまの原動力ですね」
フロントエンドエンジニアに必要な「コミュニケーションスキル」
倉見さんに、フロントエンドエンジニアに必要な資質について訊ねると、間髪入れずに「コミュニケーション能力」という答えが返ってきました。インタビューにも度々登場した「フロントエンドエンジニアは“ハブ”である」説に加えて、ユーザーが直接触れることになる画面、フロントエンドを担うエンジニアには、コミュニケーションスキルが必須なのだと納得させられます。
ユーザーが目にする画面は、フロントエンドエンジニアリングのごくごく一部に過ぎないけれど、その一部は、全体を集約した一部であることはとても重要なポイントです。
「コードを書くのに集中したい、業務を切り分けて自分の責任、裁量で仕事をしたいという“エンジニア気質”も当然ありますが、それ以上に必要なコミュニケーションをケチって、つまらないもの、不便なものをつくるのは絶対にイヤなんです」
そういえば、前回登場したセキュリティエンジニアの鈴木研吾さんは倉見さんを「声の大きい人」と評していました。物理的に声がよく通ると説明していましたが、鈴木さんの評から、倉見さんの周りに人が集まり、また集まっていなくても大きな声で他部署の人間に話しかける様子が思い浮かびます。
「投資という行為に警戒心があって、教育という観点でもお金に対してあまり学ぶ機会のない日本で、“入り口”になるサービスをつくりたい」
そのためには顔となるフロントエンドの責任は重大。「10万円から投資できる」「気になるテーマを選んで10社に分散投資できる」といったFOLIOの気軽さを本当の意味で実現するのは、エンジニア、デザイナー、コンプライアンス部門、セキュリティ部門との濃密なコミュニケ－ションによって生まれるということは間違いありません。倉見さんは、画面を通してユーザーの投資に対するマインドを少しでも前向きに、気軽なものにすることが目標だと言います。
新たなユーザーエクスペリエンスの創出と向上。日本の投資を変えるサービスFOLIOをフロントエンドエンジニアリングの力が支えています。
次回は、モバイルアプリのディレクションをしている松田さんの登場です。
倉見さん曰く「ディレクションだけでなく実装もできる。頼れるディレクター」という松田さんに、これからFOLIOの認知度、普及を高めて行くために不可欠なアプリの開発体制などを伺います。
ライター：大塚一樹
株式会社FOLIOでは、エンジニアを募集しています。
