freeeらしさをAIとともに作る / Creating the freee Experience with AI

「 freee技術の日2026 」での発表資料です。
発表動画（5時間12分ごろより）

Transcript

1. freeeらしさを AIとともに作る ⼭本 伶（@ymrl） 2026年10⽉3⽇
2. UIデザイナー‧フロントエンドエンジニア 山本 伶 (@ymrl) freeeで干支が一周しました。 あのころは若手だったのじゃ。 freeeのデザインシステムは わしが育てた。
3. freeeらしさを AIとともに作る
4. freeeらしさとは？
5. 「freeeらしさ」といっても、いろいろある • ブルーとホワイト、つばめのロゴ、⻘いボタン • 難しそうに⾒えない、わかりやすい、親しみやすい • ちょっとした楽しさがある、かわいらしい • 肩肘張らない、⾃然体でいる、⾃由な感じ • いろんなものと連携できる、freeeの製品どうしも繋がってる • 無駄が省かれている、合理的、効率的 • 会社の中でみんなで使う • 代表的な機能、⾃分の使っている機能のイメージ
6. 全てのプロダクトでfreeeらしさを提供するために: freeeらしさを詰めこんだ デザインシステム
7. デザインシステム = UIコンポーネント + ガイドライン 標準UIコンポーネント デザインガイドライン アクセシビリティ ガイドライン • UIを構成する部品。 2018年にvibesと名付けて 育ててきた • freeeのUIデザインが どうあるべきかを規定 • 幅広い⼈が使えるために 守るべきことを規定 • 社内のConfluenceに 公開されている • 「使える」状態の定義 • プロダクトを横断して ⾒た⽬と挙動を揃えられる • TypeScriptで書かれた Reactのコンポーネント • 2018年頃から、形を変えな がら現在まで引き継がれて きた • 便利なチェックリストつき • a11y-guidelines.freee.co.jp
8. AIが登場する前の開発スタイルの例（UI関連の部分） • Figmaでモックを作成 ◦ デザインガイドラインを参照 ◦ UIコンポーネントを使用 • PRD（要求定義書）を書く 要求定義 （PdM） • アクセシビリティチェックを実施 UIデザイン （デザイナー） 設計‧実装 （エンジニア） • バックエンドの設計・実装 • フロントエンドの設計・実装 ◦ UIコンポーネントを使用 • 動作確認 • アクセシビリティチェックを実施 テスト （QA）
9. AIで実装が⾼速化→合わせて前後の⼯程も急ぐ必要 • 実装が早く終わるので、 • 次々実装されるので、 • PdMに合わせて急いだり 次を考えないといけない • エンジニアに合わせて急いだり 要求定義 （PdM） UIデザイン （デザイナー） 急ぐ 急ぐ 設計‧実装 （エンジニア） 次々テストしないといけない テスト （QA） 急ぐ AIが⼯数を圧縮 • AIがやってくれるのでめっちゃ早い 急ぐ
10. AIがUIを⽣成し、アクセシビリティをチェックする 要求定義 （PdM） UIデザイン （デザイナー） AIによるUI生成ツール「 cutter」 • cutterがPRDからUIモックを生成 • デザイナーがレビューと修正・調整できる PRD cutter（AIによるUI⽣成） • 生成されたコードは実装に流用可能 テスト （QA） 実装 AIアクセシビリティチェック AIによるアクセシビリティチェック 設計‧実装 （エンジニア） • アクセシビリティチェックの一部をAIが行う • エンジニアが自らチェックできる • 最終的なチェックをQAが行う
11. 既存のデザインシステムをもとに、AI⽤スキルを提供 標準UIコンポーネントスキル デザインガイドラインスキル • コンポーネントごとの使い⽅ドキュメントと • デザインガイドラインをAIが読めるようにする TypeScriptの型情報などを提供 • ソースコードから⽣成 • ConfluenceのガイドラインをMarkdown化して さらにスキルに変換 UI組み⽴てスキル アクセシビリティチェックスキル • UIコンポーネントとガイドラインスキルを使⽤ • アクセシビリティチェックの⼀部を⾃動化 • デザインシステムを使ったUIの設計‧実装 • TypeScriptコードと、ブラウザ表⽰を確認 • cutter（UI⽣成ツール）の⼼臓部 • 曖昧さの伴うチェックができ、扱いやすい
12. スペシャリストによるUIレビューを実施 • スペシャリストなデザイナーがUIをレビューして、質を担保 ◦ リリースされる、あらゆるUIに対するレビューを実施 ◦ デザイナーの関与度合いの薄いプロジェクトのUIの品質担保 ◦ レビューを通して、デザイナーを育成する • UI設計をドキュメント化したものをレビュー ◦ なぜ、誰に対して、何をするために、どんな変更をするのか記載 ◦ ⼀部はPRDから⽣成し、⼈間が画⾯設計の情報を追加 • コメントを収集して、⼀部のレビューを⾃動化、改善のループを回す ◦ レビューの内容を収集して、ナレッジとして蓄積 ◦ ガイドラインと組み合わせて、AIによる⾃動レビューを実現 ◦ 蓄積されたナレッジから、ガイドラインへの追記をAIが提案
13. これからの課題 • まだまだ「freeeらしいUI」の⾔語化や細密なルールが⾜りない ◦ ⼈間たちにうっすらと共有されていた、「freeeらしさ」がまだある ◦ ⻑い説明を書く、情報を開閉して⾒せたがるなど、AI独特の癖がある ◦ 専⾨知識でハルシネーションしがち（アクセシビリティ分野で顕著） • ⼈間の創造性を活かしていきつつ、AIを活⽤していくには？ ◦ チャットによる⾔語だけの作業で創造性は発揮できる？ ◦ 試⾏錯誤のツールとして何が適切なのか？その作業フローとは？ • ⼈間の仕事はどこに残るのか？そこに求められる「技術」とは？ ◦ UIのレビューをガイドライン化していったとき、残るものは？ ◦ これまでの仕事が⾃動化されていく世界で⼈材を育成するには？
14. 個⼈的な想いとして: UIはソフトウェアのうち、⼈間のユーザーに最も近接する部分です。 どんなに論理的に正しく作られていても、⾔葉の選び⽅や表現の仕⽅によっては、 ⼈間にとっては便利でない、よくわからない、使えない、なんてことが起こります。 これは⼈間が喋るとき、表情や声のトーンや間のとり⽅、服装や髪型などによって、 印象や理解の度合いが変わるように、⼈間の感性の世界にある現象でしょう。 AIに任せられる部分を増やしていきつつ、それがユーザーに提供するに⾜るもなのか 最終的に判断できるのは⼈間だけです。そこだけは⼈間がやりつづけるべきです。