きっぷが好きなエンジニアがデザイン哲学を意識してUI開発をした話

こんにちは、freee会計チームでWebエンジニアをしているe-mohaです。4月に入社しました。

この記事では、先日プレスリリースが発表されたきっぷUIの開発についてご紹介します。

まだプレスリリースをご覧になっていない方は以下のリンクをご確認ください。

今回は、freeeのプロダクトのデザイン方針である「Design Philosophy」を意識してUI開発をしました。

Design Philosophyの4つのキーワードに沿って、解説していきます。

"かろやかシンプル"

「かろやかシンプル」というキーワードでは、業務の面倒な事務作業のストレスから開放するためにシンプルでわかりやすいデザインを心がけることを定義しています。

きっぷUIでは、右上のつばめが大空を飛んでいるような雰囲気を感じさせる爽快な雰囲気を連想させています。最初から爽快な雰囲気をイメージしていたわけではなく、もともとはJRの緑のきっぷ(マルス券と呼ばれています)をベースにUIを考えていました。

見た目と色合いは実際のきっぷに近いですが、freeeのプロダクトデザインとは乖離したものになっています。これではプロダクトの統一感がなくなってしまうのでユーザーがわかりにくいと感じてしまいます。

このまま、余白や文字の大きさを揃えてリリースは出来ますが、デザインをブラッシュアップするためにデザイナーに手伝ってもらうことにしました。

最初のきっぷUIは、本物のきっぷに近いものでしたが、何回も検証を繰り返してリリースした見え方になっています。

"まえむきリラックス"

きっぷUIは、デザインとしての見え方の変更だけではないと考えています。

freee会計は、事業所の経理の方だけでなく従業員の方も利用するプロダクトです。この記事を読んでいる皆さんも毎月様々な経費精算をしていると思います。

経費精算等の申請作業は、毎月行うものなので面倒に感じる人が多いでしょう。私はプロダクトをつくる開発者としてユーザーの皆さんに積極的に申請をしてもらえるようなものづくりをしていきたいと考えています。

会計のアプリケーションは、どうしても業務ソフトウェアのようなUIになりがちですが、ユーザーに寄り添ったデザインにしていくことで申請時のストレスを軽減することに繋がると思っています。

"あんしんインテリジェント"

申請の承認作業などで月末に業務に追われる人は多いはずです。スマートな作業をするためには情報の整理が重要だと考えています。

きっぷUIは、表示している情報にほとんど差はないものの視認性が大きく向上しています。特に発駅と着駅が強調されていることで、交通経路の概要が一目で把握できるようになりました。的確に情報を提示することで確認コストを減らすことが出来ると期待しています。

"たのしさスパイス"

「たのしさスパイス」はこの開発で最も大切にしているキーワードです。プロダクトを触るユーザーに楽しいと感じてもらうだけでなく、freeeをつくる私たちもたのしさを意識して開発するのが毎日仕事をする上で重要だと思います。

交通経路を表示するためにきっぷのデザインを参考にしましたが、最近は交通系ICカードの普及で紙のきっぷを使う機会は減っています。デジタル化が進みアナログなものを見る機会が減っているのであえてアナログなものを遊び心として取り入れることに面白さを私は感じています。

数年後、freee会計で経費精算をするときにきっぷと認識できるユーザーがどのぐらいいるかは分からないですが、鉄道ファンや普段あまり鉄道に乗らない人にも親しみやすいUIにすることを意識しているのでユーザー同士の話の種になれば良いと思います。

今回のUI開発は、私が鉄道が好きできっぷを収集していることがきっかけでした。freeeに入社してから1ヶ月半で自分の趣味を携わるプロダクトに注入できるのは貴重な体験で、デザイナーやブランドチームを巻き込んで取り組めたのも面白さを感じました。

私は、開発しているプロダクトをより使いやすくして、煩わしいユーザーにとってストレスに感じる作業を極力減らしていきたいと思っているので、今後も何かしらの形で改善を続けていきたいと思います。

最後に余談ですが私たちが電車に乗るときに使う「きっぷ」は平仮名で表記します。覚えておいて損はしないはずです。