ユーザーファーストなUI/UXとは？つみたてNISA詳細画面開発について
こんにちは。22年にバックエンドエンジニアとしてsustenに入社した道祖土です。
本記事は、sustenのつみたてNISA開発をエンジニア目線で語るシリーズの第一弾です！この記事では、入社後初めて関わった大規模プロジェクトである、つみたてNISA機能開発の話を通して、sustenで働くエンジニアの実際の業務内容や、そのやりがいについて書いていきます。
開発したもの
つみたてNISA機能の開発のなかで、私は大きく分けて
つみたてNISA詳細画面
ダッシュボードやポートフォリオのつみたてNISA対応
口座開設時や投資開始時の診断機能の改修
を担当しました。
それぞれのプロジェクトでお話したいことはたくさんあるのですが、特にsustenでの開発体験の色々な面をご紹介できそうという観点で、この中で今回は「つみたてNISA詳細画面」(以下詳細画面)にフォーカスしたいと思います。
つみたてNISA詳細画面とは
詳細画面は画像のように、ユーザーの方々がご自身のつみたてNISAのご利用状況を一覧できる画面です。
今年どのくらい積立をしているかや、現在の積立設定から年末までにどのくらいつみたてNISAとしての税金がかからない枠を使うことができるが視覚的にわかります。 また、投資したものに今どれくらいの価値があるか、投資したものが買ったときと比べて今どれくらい利益が出ているか、あるいは損が出ているか、過去の利用状況なども確認できます。 特につみたてNISAで運用を開始した方には日常的に見ていただく画面だと思いますので、わかりやすさと情報量の両立が必要でした。
エンジニアとしての目線で考えると、最初にプロジェクトに取り掛かるときには「そこまで大変ではなさそうだな」というのが第一感でした。 表示に用いる項目はデータベースに保存されており、それらを用いたバックエンド側での計算もそれほど難しいものではないと想定されたからです。
しかし、実際に取り組んでみると実装以外の点で様々苦労があり、またそれがやりがいでもあったので、以下何点か難しかったポイントを振り返りたいと思います。
難しかったポイント
表示項目の検討
最初にデザインの話です。 プロジェクトに取り掛かる時点では、デザインのたたき台はあったものの、どんな項目をどのように表示するかは明確には定まっていない状態でした。 プロジェクトの責任者として、まずはこれらの表示項目を確定させる必要がありました。
こだわったのは、ユーザーファーストの精神で検討を重ねることと、様々な角度から時間をかけて検討することでした。 他社がどのような項目を表示しているかの綿密な調査は大前提として行いました。 しかしそれらをそのまま踏襲するのではなく、表示項目の項目名や内容、注意書きにいたるまで、ユーザーの方々がわかりやすく、使いやすいかどうかをチーム全員で検討しました。
「『口数』という概念は分かりづらいのではないか」 「各種法的な帳票との整合性はどうか」 といった具体的な意見から、 「証券会社という側面だけではなく、運用会社としての側面を持つsustenでは、お客様に長期の資産運用をしていただけるようなUIが良いのではないか」 という概念的な話まで、様々な意見が活発に出されました。
今回の開発では「つみたてNISA機能」という大きなまとまりでのリリースが必要で、小さくリリースしてテストするということが難しかったので、UIやUXを継続的に改善するというプラクティスが使えませんでした。 そのような難しい条件下でしたが、十分な議論を重ねることで、結果としてとても見やすい画面になったと思っています。
かけた時間もさることながら、エンジニアやデザイナーだけではなく、CEOにいたるまで幅広いメンバーで話し合ったことも様々な観点からの意見が反映される結果につながりました。 調査の手伝い、ミーティングでの積極的な発言、案をすぐ実際のデザインに落としこむスピード感…等など、チーム一丸となって前向きに取り組んでいただいたことに感謝しています。
少し見にくいかと思うので、改善後の拡大版も載せておきます！
勘定系システムとのつなぎ込み
次に他のシステムとのつなぎ込みについての話です。
sustenではユーザーの方々それぞれのつみたてNISAの口座を管理する勘定系システムを自社開発し、管理しています。（これはかなり珍しいことなのではないかと思います!）
勘定系システムとは、ユーザーやファンドのお金の流れを管理するためのシステムです。 今回の詳細画面で表示する各項目は、このシステムから値を適宜取得して、様々な計算をする必要がありました。 しかし当時入社間もない私はこのシステムの複雑性に戸惑いました。特に、いつ各レコードが作成されているのか、テーブル毎のレコードが参照している日付はいつなのかの理解が非常に難しかったです。
金融取引において、ある商品の売買が成立した日と、ユーザーの方々にその商品が受け渡される日は別で、受け渡される日は通常売買の数日後となります。 詳細画面ではその性質上、基本的に「受け渡された商品の金額」について表示する必要があり、勘定系システムの中でどのように処理が進んでいくのかをつぶさに追いながら、表示時点でのユーザーのつみたてNISA口座の状態を把握する必要がありました。 コードやExcel上で表現されている処理の流れをみていても、自力ではなかなか理解することが難しかったのですが、この際、金融のプロが身近にいて気軽に相談できるsustenの環境はとてもありがたく、また勉強になりました。 特につみたてNISAの勘定系システムの設計にも携わっていた運用管理部の齋藤さんには毎度泣きついて様々なことを教えてもらいました。
一つ一つ疑問点を解消し、理解しながら実装できたので、詳細画面の実装が終わる頃には勘定系システムの仕様の理解もかなり進んでいたと思います。 金融のプロに気軽に質問できることや、自前の勘定系システムをもっていてその仕様がブラックボックス化していないことは、sustenで開発をすることの大きな魅力だと思っています。
エッジケースでのテスト
最後に品質担保の話です。 詳細画面は色々な状態のユーザーが利用する画面です。また前述したように、参照する日付も重要になってくるので、様々な組み合わせのパターンでテストを行う必要がありました。この際に助けられたのが各部署の品質保証のためのテスト（以下QA）体制でした。
開発していた当時、入社後数ヶ月しか経っておらず細かいドメイン知識のキャッチアップはまだまだな面もありました。 今回、詳細画面のQAは外部のQAエンジニアの方に作っていただいたきました。その際、開発合宿を通して事前にドメイン知識について認識のすり合わせをして理解していただき、細かいQA項目を作成してもらいました。
▼開発合宿記事
もちろん、ユニットテストは丁寧に書いていましたが、仕様に深い理解のある方が、実装者と違う目線で項目を作成し、その項目をもとにQAが行われたことは、大きなバグなくリリースできたことに大きく寄与したと思っています。開発を通して手を動かしながらドメイン知識を学ぶことができる一方、しっかりとしたQAがある安心感があるのはとても快適な開発体験でした。
リリース、そして…
上述のように様々な課題はありましたが、なんとかチームで協力し、リリース日に無事、他機能と同様詳細画面をリリースすることができました🎉 無事リリースを終え、本番での動作を確認した後にオフィスで食べたピザはとても美味しかったのを覚えています。
しかし、勘のよい読者の方ならお気づきかもしれませんが、安心するにはまだ早かったのです…。 詳細画面は、ユーザーの方々の運用が始まって初めて様々な表示項目に動きが出ます。 リリース日の時点では運用の始まっているユーザーはいないため、詳細画面の真価がためされるのは「ユーザーの運用が始まってから」だったのです。
果たして、詳細画面は期待通り動くのでしょうか…？
失敗から学ぶ文化
恐れていた事態が発生してしまいました。 非課税口座の状況で表示の誤りが見つかってしまったのです。
この誤りには本番での表示確認作業を行っている際に社内で気がつくことができたので、即座に影響範囲などを調査し、原因の特定に当たりました。 幸いなことにユーザーの方々への影響は軽微で、修正も容易だったので直ぐに修正作業が行われました。 根本的な原因は様々ありますが、主には詳細画面実装後の勘定システム側の仕様変更を私が追いきれていなかったことでした。
修正及びコードレビューは迅速に行われ、当日中に完了することができましたが、影響が軽微かつ、日付が変わると表示が正常化されることも修正過程でわかっていたので、焦ってデプロイせず丁寧にQAを行う方針となりました。ここから勘定系システム側のQAシナリオを利用した丁寧なQAを行い、数日後に本番の修正が完了しました。
sustenにはもともと、障害が発生すると速やかにslackチャンネルにその詳細を投稿し、障害の解決後にその報告書を作る文化がありました。 しかし、障害の履歴としての役割は果たせているものの、チームでの振り返りに役立てることができておらず、後に読み返したときにどうしてそのような判断をしたのか等がわからないドキュメントになってしまっている点が問題になっていましたのです。つみたてNISAの開発では、スケジュールに余裕がなかったこともあり、他にも細かい障害が何件か発生してしまいました。
これを機に、ポストモーテムを作成し、失敗から学ぶという取り組みを一層進めていきたいと考え、GoogleのSRE本を参考に「ポストモーテムとは？」を紹介するドキュメントと、ポストモーテムのテンプレートを作成しました。
この取り組みはチームの方々も快く賛同してくださり、現在ではポストモーテムを作成して障害を学びに変える文化が根づいています。
ポストモーテムについての取り組みは、また別の機会にご紹介したいと思います！
詳細画面については、引き続き勘定システム側のQAの結果を借りて、実際のユーザーの行動とその結果をトラックし、UIの表示を確認するというテストを導入し、障害の再発防止に努めています。
まとめ
今回つみたてNISA機能開発における詳細画面の開発について記事にまとめることで、自分自身でもこのプロジェクトを振り返る良い機会となりました。詳細画面は最初は小さな機能かと思っていたのですが、他機能との関わりも多く、また関係者が多かったため意外に難産で、かなり印象的なプロジェクトとなりました。
つみたてNISA機能開発全体を振り返ると、やはり期限があるがゆえの時間的制約が大きく、プレッシャーも感じました。しかしそれ以上にチームとして助け合って一つのゴールに進んでいくという結束力が高まったことが今の開発チームの資産になっていると思います。
そして、今後も新たな機能開発や新規事業を控えているなかで、一緒にこの局面を乗り越えてくれるエンジニアを募集しています。sustenには下記の全てが揃っています。
金融とテクノロジーが高度に融合したプロダクト
主体性を持ってより良いユーザー体験を生み出そうとする開発メンバー
各々が専門性を持ち、他部署であっても快くその知識や経験を還元する文化
ポストモーテムの例のように新しいことをやってみて、継続的に改善していく土壌
是非一緒に働いてくださる方をお待ちしています！