こんにちは！はじめまして、freeeの統合UI部のshikakunと申します。職種としてはデザイナーなんですけれども、WebとWebの技術が好きで、フロントエンドのコードも書きながら、freeeのデザインシステムの開発と運用に携わっています。よろしくお願いします。
というところなんですけど、あの、freeeって、使ったことありますか。freeeについて、どんな印象を持っていらっしゃるでしょうか。
freeeと言いましても、freeeにはたくさんのプロダクトがありまして、ここに載せているのも一部です。会計、人事労務、販売など、扱っている業務はさまざまですが、ユーザーから見ればどれも「freee」ですし、プロダクトを使っていて起きたできごとは、すべて「freee」の印象として受け取られるのではないかと思います。
すこし個人的な話になりますが、僕は2024年に入社しまして、それまでは前職でfreee会計を使って経費精算をしたり、副業で個人事業主として確定申告をしたり、青色申告をするためにfreee開業で開業届を作ったりする、ひとりのユーザーでした。
当時の自分がfreeeのことをどう思っていたかというと、会計とか開業届とか、自分では仕組みがよくわからないけど、やらなきゃいけないことがあるときに、伴走してくれたり、肩代わりしてくれたりする存在でした。そういう好意的な印象こそが、ブランドだったのではないかと思うんです。
ここで、freeeのブランディングの歴史を振り返ってみたいと思います。2013年に最初のプロダクトであるfreee会計をリリースしたときのロゴは、こんな感じでした。それから毎年のようにプロダクトが増えて、規模が大きくなり、成長を続けていくなかで、2018年にはvibesというデザインシステムの開発が始まり、2021年にはfreeeのビジョンにあわせてブランドロゴも変わって、つばめの形もスマートになりました。
2021年のリブランディングでは、デザインファームのTakramさんにも関わっていただいて、世界観やデザイン原則の言語化、カラーパレットをはじめとしたブランドアセットの整備が行われました。これらはbrand.freee.co.jpというURLでWebサイトとして公開されています。
また、デザインシステムのvibesも、2年前のスナップショットではありますが、OSSとして公開していまして、ソースコードを誰でも見ることができます。
いまではfreeeの多くのプロダクトで、Webフロントエンドがvibesを含む標準化されたUIコンポーネントで作られていて、プロダクトの美観や操作感を統一し、アクセシビリティを確保する仕組みになっています。
僕は前職でもデザインシステムの開発を担当していたんですけど、その経験から見ても、こんなふうに社内のムーブメントとして、デザインシステムがここまで浸透している組織は、けっこう珍しいのではないかと思っています。
こうして、目指すブランドの姿がきちんと言語化され、その実装としてのデザインシステムも使われていて、めでたしめでたし……というわけではなく、課題も感じていました。
例えば、ランディングページやバナー広告といった、プロダクトを知ってもらう接点でのコミュニケーションデザインと、プロダクトの画面とのトーンのずれ。業務アプリはどうしても質素になりがちですし、デザインシステムは必要になったコンポーネントを作り足してきたものなので、全体を見渡したときの一貫性や、目指すブランドの姿を体現できているのかというところまでは、正直手が回っていませんでした。後追いで定義されたデザインプリンシプルとの整合性も、課題のひとつでした。
また、経営メンバーがレビューする場で「freeeのロゴを隠せば、他社のプロダクトのように見えるよね」みたいに指摘されたこともありました。これはけっこう大事な発言だったと思っていて、プロダクトのUIはシンプルで使いやすく統一感があれば十分というわけではなく、freeeのブランドイメージを体現する、ユーザーとの貴重な接点でもある。経営判断として、そういう情緒的な価値も求められているんだなと気づかされました。
UX白書 日本語訳版をもとに作成
よく「ユーザー体験」と言いますが、ユーザーの体験はプロダクトの利用中だけを指しているのではなく、広告で知って、じゃあ使ってみようかなと思ったり、使ったあとに便利だったなあって思い出したりする、そういう瞬間が積み重なったものです。
そうして積み重なった体験のうち、良い体験を覚えておく手がかりになるのが、名前やロゴ、そしてビジュアルなどの記号です。記号は、次も良い体験が起こることを約束し、その約束が果たされると、記号の意味はさらに強くなります。そのような循環によって、ブランドはゆっくり築かれていくものです。
知らないロゴのステッカーやノベルティをもらっても全然うれしくないように、あるロゴを見て好きだと感じるのは、そのロゴの向こうに、使うなかで重ねてきた良い体験の思い出があるからです。freeeでいえば、つばめのシンボルマークや、「freee会計」「freee人事労務」といった名前が記号なわけですが、ロゴが隠れたら別のプロダクトに見えるなんて、それだけでは足りないのではないか。
そういった背景から、デザインシステムの「美観」を刷新することで、プロダクトの画面の中にブランドの記号を増やすプロジェクトを行うことになりました。
美観っていう呼び方が独特ですけど、デザインという言葉は広すぎるので、freeeでは表層の見た目を指すときに「美観」と呼ぶのが定着しているので、ここでも美観と呼びたいと思います。具体的にどのように進めていったのか、順を追って紹介します。
まず、ブランドの記号を増やした画面とはどのようなものか、美観を刷新したあとのプロダクト画面のイメージ画像をチームで作成しました。
これまでに作られてきたコンポーネントを、単体ではなく、同じリズムで項目が並ぶ一覧画面、複雑に入り組んだフォーム、要素の少ない設定画面など、freeeでよくある画面を構成しながら俯瞰し、配色や文字、余白のルールを決めていきました。
ブランドカラーである青を記号のひとつとして多く取り入れたうえで、テキストが中心になりがちな業務アプリだからこそ、人の名前の隣に頭文字で表現したビジュアル要素を添えて視覚的に認識しやすくしたり、タグにモチーフをあしらって楽しさを演出するといったアイディアも生まれました。このような完成形をステークホルダーに提案し、刷新する方向性について合意を得ました。
そうやって全体像を作成するなかで決まったルールを、抽象化してデザイントークンとして定義していきます。
色は、リブランディングで整備されたカラーパレットをもとに、より豊かな階調や意味を表現できるように、明度の段階を増やしたり、色相をずらして新たな色を追加したりしました。そうやって選択肢を増やしたうえで、意味を伝えるSemantic Colorと、装飾に使えるDecoration Colorに分類しました。
白の背景とのコントラスト比が3:1になる段階も用意し、例えばテキストフィールドの境界線がWCAG 2.1のコントラスト比の達成基準を満たせるように調整しました。
美観の刷新にあたっては、画面のすべての要素について、なぜその美観なのか、根拠を説明できるようにしたいと考えました。文字のサイズのバリエーションは、16pxを基準にした調和数列を根拠に算出し、行の高さや要素の高さ、余白は原則として4の倍数になるように設定することで、バーティカルリズムを揃えています。これにより、表やフォームのフィールドといったグリッドのレイアウトが多い業務アプリは、特に美しく整えられるのではないかと考えました。このあたりは、鈴木丈さんの記事「音楽、数学、タイポグラフィ」で詳しく解説されているプラクティスを実践させていただきました。
こうした細部は、プロダクトを開発するうえで、どうしてもこだわるのが難しい部分かと思います。だからこそ、その細部へのこだわりをデザインシステムが引き受けています。質素になりがちな業務アプリを美しく整えることは、結果的にユーザーの業務を楽しくすることにつながり、それはfreeeだからこそできる、社会への貢献のひとつだと信じています。
もともとfreeeのプロダクトではアイコンにMaterial Iconsを使用していましたが、美観を刷新するこの機会に、内製することにしました。会計や人事労務といったfreeeが扱う業務には、一般的なアイコンでは表しにくい概念が多いという背景もありますが、テキストが中心となる業務アプリだからこそ、画面の中の数少ないビジュアル要素であるアイコンのトーンが、プロダクトの印象を決めると考えたからです。
Figmaのライブラリも、新たに定義したデザイントークンに基づいて、すべて作り直しました。
そうやって設計したUIコンポーネントの新しい美観を実装していくわけですが、freeeにはプロダクトがたくさんあるので、新しい美観への移行にかかるプロダクト側のコストを、できるだけ小さくしたいと考えました。
そこで、コンポーネントごとに従来の美観と新しい美観の両方を持たせておき、アプリのルートにあるVibesProviderにbrandedというオプションを指定することで、配下のコンポーネントがまとめて新しい美観に切り替わる仕組みを採用しました。
また、大量のコンポーネントを実装するために、作業の手順と美観のルールをまとめ、それに沿ってClaude CodeやCodexが実装するスキルを整備しました。基本的にAIエージェントにソースコードの編集を担当してもらい、人間は判断に集中するという体制です。これにより、プロジェクトの経緯や実装の手順を完璧に把握していなくても、チームの誰もが同じ品質で速く作業を進められ、分担して取り組めるようになりました。
プロダクトの美観が一度に大きく変わると、日々の業務で使っているユーザーは戸惑います。プロダクトにとっても、すべての画面をまとめて切り替えるのは大きな負担です。そこで、まずはグローバルナビゲーションやヘッダーといった、プロダクトを横断して共通する要素に絞って段階的にリリースを行い、現在は画面のコンテンツ領域へと範囲を広げているところです。
こういった取り組みを、全社向けの説明会を複数回開催したほか、希望するチームには個別にも説明を行い、社内のたくさんのメンバーに協力していただきながら進めています。
ブランドは、ユーザーの良い体験が積み重なって作られます。UIの美観は、その体験を思い出すための記号のひとつです。一貫した記号が良い体験を約束し、プロダクトがその約束を果たす。それを繰り返すうちに、ブランドはすこしずつ築かれていきます。「ブランドが感じられるUI」とは、この約束の一端を担うUIのことです。
AIが業務を肩代わりする場面が増え、ユーザーとプロダクトの接点は、画面だけでなくチャットやCLIにも広がっています。これからは、言葉づかいや機能の振る舞いも、記号のひとつになるでしょう。どのような接点であっても、ユーザーの体験や情緒的価値を形づくるUIであることに、変わりはありません。
スモールビジネスを世界の主役にするために、freeeはAIの時代だからこそ、UIと、情緒的価値に投資していきます。ありがとうございました。
この記事は、freee 技術の日 2026のセッション「ブランドが感じられるUIのデザイン」の資料とスピーカーノートをもとに構成しました。