👨💻
freee Tech Night「freeeのデザインシステムのその先へ」 イベントレポート
公開
2025-02-13
文章量
約2655字
2025年1月30分 freee Tech Night「freeeのデザインシステムのその先へ」 の記事です。
今回のfreee Tech Nightは……？
freeeのプロダクト開発を支える デザインシステム にフォーカス！
「vibes（バイブス）」というリアクトベースのUIコンポーネントから始まり、全社的なデザイン統一と開発生産性向上を目指してきたfreeeが、さらにもう一歩踏み込んだ「その先」の話 —「標準UI」 や 「デザインプリンシプル」、さらには AI導入 の展望など、現在と未来に迫るトークを展開しました。
今回のfreee Tech Nightはオンサイト＋オンライン配信形式。登壇者も来場者も熱量高く、会場では「標準UI」や「デザインシステム」というキーワードが飛び交いました。
トークタイム：freeeのデザインシステムの現状と未来
今回のメインセッションでは、freeeのデザインシステムを牽引するエンジニア・デザイナーが登壇。
「vibes」から始まったデザインシステム がどう変遷してきたのか、いま抱える課題、そして今後の方向性が熱く語られました。
登壇者
1. 「vibes」の歩みと成果
freeeでは2018年頃から 「vibes」 というデザインシステムを社内展開。
- 背景：多様なプロダクトでボタンやフォーム、テーブルなどがバラバラに実装され、生産性やUIの統一性に課題。
- アプローチ：Reactコンポーネント ＋ Figmaコンポーネントの両面からなるデザインシステムを用意し、エンジニア/デザイナーが共通言語で開発できるように。
- 効果：
- 開発生産性の向上（CSS記述量の削減 等）
- UIの統一感・アクセシビリティ向上
- エンジニアとデザイナーの共通言語化
vibesはOSS公開中！実際にストーリーブックでボタンやテキストフィールド、ダイアログなど膨大なコンポーネントが確認可能。GitHubリポジトリもあるので、興味のある方は必見。
2. 新たな課題と「標準UI」の誕生
vibesによってUIの最小単位は揃ったが、画面全体のレイアウトや構成をチームごとに組み合わせるため、下記のような課題が発生。
- 同じような目的の画面なのに、各プロダクト間で微妙にレイアウトや操作感が異なる
- 機能や要件を満たすために“車輪の再発明”状態になりがち
- より高いレベル（一覧画面、詳細画面など画面単位）のUI標準が必要
そこでfreeeは、「標準UI」 という“より大粒度”のUIコンポーネント群を提供開始。
- アトミックデザイン でいうオーガニズム〜テンプレート相当のレイヤー
- ボタンやフォームだけでなく、「一覧+フィルター」「詳細閲覧・編集」「ドロワーでの操作」など画面レベルのパターンをライブラリ化
- ゆくゆくは業務アプリに共通する画面パターンをこれ1つにまとめ、「車輪の再発明」をなくす狙い
3. デザインプリンシプルとブランドらしさ
もちろん、画面のパターン化には「どんなUIがフリーらしいのか」の定義が不可欠。freeeでは 「デザインプリンシプル」 を策定し、「こうあるべき」という原則を明確化。
- 例1：業務のまとまりごとに処理画面を分け、必要な機能に絞る
- 例2：自己説明的なテキストは載せず、決定的な誤操作だけガードする
- 例3：反復操作の速度を優先し、中級者をターゲットにUIを組むこれら原則を画面の設計時に立ち返ることで、「フリーらしいUI」「業務アプリとして効率的なUI」をブレなく実装できるよう目指している。
今後の方向性 & 質疑応答
課題1：柔軟すぎると複雑化、固すぎると置き換えに苦戦
- 1ページを1コンポーネント で完結させるアプローチは導入が簡単そうに見えるが、固有のロジック・要件が多い既存画面との整合を取るのが大変。
- プロップスが肥大化し、ネストが深くなりがち。
- 解決策：柔軟に「オーガニズム単位」で分解し、段階的に置き換えやすい設計へ。
課題2：ブランド・アクセシビリティとの整合
- デザインプリンシプルがあっても、それがどの程度プロダクト全体で徹底されているかはまだ道半ば。
- デザイントークン を整備して色や角丸・余白などをロジカルに管理し、ブランドらしさを落とし込みたい。
- 経営メンバーや関係チームと「同じ画面を見ながら」合意形成していくアプローチが進行中。
課題3：AIへの期待
- 「vibes」や「標準UI」をAIに学習させ、チャット的にプロンプトを書くだけで画面実装が吐き出される 未来が見えつつある。
- そのためにも、プロパティ設計・ドキュメント整備が重要。人にとって分かりやすいライブラリはAIにとっても扱いやすい。
まとめ：freeeデザインシステムの「その先」へ
- デザインシステムの成熟「vibes」でアトム〜モレキュールレベルを標準化し、次は「標準UI」で画面パターンを統一。そこに デザインプリンシプル を活用し、フリーらしさやUX向上をブレなく実現する。
- チーム全体でアップデート中エンジニアはプロップス設計や既存ロジックとの組み合わせ方を再検討、デザイナーはブランドや業務UXの本質に踏み込む。経営メンバーとの合意形成も進行中で、社内でどんどん浸透していく姿勢。
- AIや先端技術も視野に“ボタンを置く”だけでなく、“業務フローごと・画面そのもの”を標準UIとして定義し、さらにAI支援でスピード＆統一を実現する未来図。
“デザインシステムの次なるステージ” を切り拓くfreee。
既存コンポーネントの置き換えや、画面単位の統合を押し進めるその姿からは、どのプロダクトにも悩みの種となりがちな「UIのバラつき」「再発明」を本気で解消しようという強い意志が感じられました。
Yardでは、テック領域に特化したスポット相談サービスを提供しています。
興味がある方は、初回の無料スポット相談をお申し込みください。
また、資料請求やお問い合わせもお待ちしております。テック領域の知見を獲得し、事業成長を一緒に実現していきましょう。
