🍥
freee Tech Night「freeeのデザインシステムのその先へ」イベントレポート
公開
2025-04-14
更新
2025-04-14
文章量
約3594字
はじめに
2025年1月30日、フリー株式会社が主催する「freee Tech Night」が開催されました。今回のテーマは「freeeのデザインシステムのその先へ」。社内で長年育んできたデザインシステム「vibes（バイブス）」を礎に、新たに生まれつつある標準UIやデザインプリンシプルの話題を中心に、freeeのエンジニアとデザイナーが実践している取り組みが共有されました。ここでは、当日のセッション内容や質疑応答での印象的なポイントをご紹介します。
イベント概要
本イベントは19時にスタート。会場のフリー株式会社本社19Fには、UIやUXに関心を持つオフライン参加者が集い、オンライン配信も同時に行われました。オープニングでは、司会のゆりあさんから注意事項やイベントの目的が案内され、その後フロントエンドエンジニアの大橋さん（以下、たみさん）とデザイナーのshikakunさんがゲストとして登壇。イベント後半のQ&Aでは、視聴者から寄せられた質問を取り上げながら、freeeのデザインシステムが抱える課題や今後の展望が率直に語られました。
vibes（バイブス）から見えた可能性と限界
vibes誕生の背景
freee社内では、かつて各プロダクトごとにUIがばらばらな状態が続き、CSS設計やアクセシビリティなどに関するノウハウも属人的でした。そうした課題解消のため、2018年頃から「vibes」というデザインシステムを作り始め、リアクトコンポーネントの形で社内全体へ配布。 ボタン・フォーム・ダイアログといった小さな単位（アトミックデザインでいうアトム、モレキュール）を中心にまとめたことで、開発スピードが大きく向上し、見た目やアクセシビリティもある程度統一できたといいます。
OSSとしての公開と社内定着
vibesは2024年末にはOSS化され、社外にも公開されています。社内では、ほぼすべての新規プロダクトがvibesを利用し、既存プロダクトも段階的に置き換えを進行中。エンジニアが「どのボタンを使えばよいか」を迷わずに済む環境をつくったこと、実装のベストプラクティスを先取りして盛り込み続けたことが、普及と定着の大きな要因となりました。
しかし、vibesの普及とともに新たな問題も浮上しました。単一のボタンやテーブルは統一できたものの、それらをどう組み合わせ、どういう画面構成にするかはプロダクトごとに任されていたため、画面全体を見たときのブレは依然として残っていたのです。
デザインプリンシプルと標準UIの誕生
デザインプリンシプル
そうした背景から、freeeでは「フリーとしてのUI/UXとは何か」を言語化すべく、デザインプリンシプルを定義しました。 たとえば、
業務のまとまりごとに処理画面を分け、必要な機能に絞り込む
決定的な誤操作に繋がる箇所以外は説明文を削り、業務に必須な情報だけを素早く認知できるようにする
反復操作時のスピードを優先し、中級者にとって効率的な画面設計にする
といった原則を12項目設定。業務ドメインのUIを作りがちなfreeeだからこそ「学習済のユーザーがサクサク使えるUIが大切」という考え方を基に、緻密に設計された部分がとても印象的です。このデザインプリンシプルを共有しておくことで、各プロダクトや開発担当がバラバラにUIを作ったとしても「フリーらしさ」に収束させやすくなったそうです。
標準UIというアッパーレイヤー
vibesはアトムやモレキュールといった小さな粒度のコンポーネントを提供していましたが、それらを組み合わせた画面全体（アトミックデザインでいうオーガニズム以上）は未カバーでした。そこで新たに生まれたのが「標準UI」です。 標準UIでは、たとえば「データの一覧画面」「レコードの詳細画面」「検索フィルター＋一覧」といった、SaaSプロダクトで頻出する単位をひとまとめのコンポーネントとして提供します。既存のvibesと組み合わせることで、同じ画面構造を再発明する手間を省きつつ、全体のUI/UXをより統一できるようになりました。
新たな壁と解決へのアプローチ
画面一括コンポーネントの課題
標準UIを導入した結果、新規の画面を作る段階では大きく工数削減に成功しましたが、既存画面の置き換えには思わぬハードルがありました。たとえば画面単位のコンポーネントに多くのプロパティが集中しすぎ、ドキュメントを理解するコストが膨れ上がる問題です。 また、vibesや標準UIではロジック面（URLクエリの状態管理や入力フォーム管理など）も含んでいるため、既存実装とマージしにくいケースが出てきたという声もありました。
柔軟性を高める「分割」の方針
こうした反省を踏まえ、最近では1画面をさらにヘッダー・コンテンツ・フッターなどに分解し、段階的に導入しやすい構造に変えようと取り組んでいるそうです。ロジック部分もUIから切り離し、既存のAPI連携やフォーム管理ライブラリと組み合わせやすくする設計方針にシフト。 一方で、画面を好き勝手に並べられるようにしてしまうと、一貫性が崩れるのではないかという懸念もあります。しかし「デザインプリンシプル」を土台に据え、レビューやドキュメントでカバーする形にするというのがfreeeの判断です。「標準UIを使ったほうが圧倒的に楽だし、アクセシビリティにも配慮できる」と開発者に思ってもらうことを目指しつつ、自由度とのバランスを取るわけです。
Q&Aで際立ったポイント
Q: 標準UI導入率を高めるには？
vibesが普及した方法論と似ていて「使わなきゃ損」と思えるメリットを明確に伝えるのがカギだそうです。例えばアクセシビリティや高度なUI表現を、少ない工数で実装できる利点を見せ、そこに付加価値を感じてもらう。最終的に全プロダクトが同じパーツを使うわけではなく、固有の事情は尊重されますが、それ以外の大部分を標準化で置き換えられるようスコープを拡張しているとのことです。
Q: コンポーネントが増えすぎて迷いませんか？
ドキュメント整備はもちろん、vibesや標準UIなどを学習済のAIに質問できるようにするなど、新しいアプローチも試されているそうです。もともと人間が読んで理解しやすいドキュメントを用意しているため、AIとの相性も良く「こういう場面ではどのコンポーネントが適切か？」と自然言語で投げると、最適なコンポーネント候補を返してくれる仕組みを試しているとのことでした。
Q: デザインプリンシプルはどう運用している？
項目自体は12個あり「業務を見極めて画面を分割する」など比較的抽象度が高いものの、それを踏まえてレビューのプロセスを組んだり、経営層の目線と擦り合わせたりしているそうです。画面単位で、実際に「フリーらしさ」が体現されているかをチェックし合う会を開くことで、プリンシプルを実際のUIに落とし込んでいるとのことでした。
全体を踏まえた感想 —「固める」から「進化する」へ—
vibesは多くのコンポーネントを統合し、開発生産性とUIの統一感をもたらした成功事例と言えます。しかしfreeeは、そこに安住せず「標準UI」という上位レイヤーを整備し、大規模かつ多様化するプロダクトのUI/UXをさらに高めようとしているのが印象的でした。 特に、画面全体で「どうあるべきか」をデザインプリンシプルで言語化し、そのうえで具体的な実装パターンとして標準UIを提供する流れは、業務アプリケーション特有の反復操作や学習コストを深く考慮しているからこそのアプローチだと感じます。一方で「分割」「ロジック分離」「ドキュメント整備」といったキーワードからは、画面一括コンポーネントの罠にどう対応しているかが垣間見えました。 また、AIが補佐するドキュメント検索や、経営層を巻き込んだUIレビューなど、新旧様々な方法で「デザインシステムをどう使いやすくするか」を模索している点は、これから先の進化を予感させます。デザインシステムは一度作って終わりではなく、ユーザーや組織の変化に応じて「どうアップデートするか」こそが重要だと改めて感じたセッションでした。
以上、2025年1月30日に開催された「freee Tech Night『freeeのデザインシステムのその先へ』」のレポートでした。バイブスや標準UIがどのように発展し、チームに浸透していくのか、今後も注目していきたいと思います。ユーザー体験向上と開発効率を同時に実現する設計思想は、多くの開発現場が学ぶヒントになるのではないでしょうか。freeeの次の一手から、ますます目が離せません。
Yardでは、テック領域に特化したスポット相談サービスを提供しています。
興味がある方は、初回の無料スポット相談をお申し込みください。
また、資料請求やお問い合わせもお待ちしております。テック領域の知見を獲得し、事業成長を一緒に実現していきましょう。
