ユーザー体験を支える_freeeのデザインシステム活用.pdf

1. 　 ユーザー体験を支える freeeのデザインシステム活用 2022.04.26
2. 　 2 早稲田大学人間科学部卒。 2017年よりfreee株式会社でインターンを始め、 2018年に新卒入社。 アプリケーションエンジニアとしてキャリアをスター トし、複数の機能開発に携わる。 2020年よりfreeeのデザインチームに異動。 デザインシステムの運用や会計モジュールのプ ロダクトデザインを担当し、現在に至る。 深田 康太 Design Engineer / Product Designer Fukada Kota
3. freeeの紹介
4. 　 Mission スモールビジネスを、 世界の主役に。 大胆に、スピード感をもってアイデアを具現化することができる スモールビジネスは、様々なイノベーションを生むと同時に、 大企業を刺激して世の中全体に新たなムーブメントを起こすことが できる存在だと考えております。
5. 　 だれもが自由に経営できる 統合型経営プラットフォーム。 VISION バックオフィス業務を統合することで、自動化と業務全体の効率化。さらに経営全体を可視化することで、 これまでにないスマートかつ最適なアクションまで実行できるプラットフォームへと進化させていきます。 プラットフォームの提供のみならず、スモールビジネスに携わる人の環境そのものを より良くしていく取り組みを行うことで、世の中の変化を促します。
6. あらゆる業務とデータがつながることで、自動化・可視化に加えてスマートで適切な経営アクションが可能に 統合型クラウドERP
7. 次のような課題、感じていませんか？
8. 8 見た目や挙動が異なるUIが増えてきてしまう 運用負荷も上がり、開発生産性が下がってきている ブランドを体現できているかわからない プロダクトはスケールしているが...
9. デザインシステムが 解決の手助けになります、というお話をします
10. 10 01　デザインシステムとは 02　構築の目的・見込まれる効果 03　freeeでの立ち上げ・運用例 04　まとめ・今後の展望 目次
11. 11 01　デザインシステムとは 02　構築の目的・見込まれる効果 03　freeeでの立ち上げ・運用例 04　まとめ・今後の展望 目次
12. 12 デザインと実装が合わさった UIコンポーネントライブラリ 一言で言うと
13. 13 デザインシステムは会社のMissionやブランド等と関わりを持ちます 指針を示すために、各種ガイドラインも用意しています 各種ガイドライン UIUX/a11y/イラスト/ライティング/etc.. MIssion/Vision Brand Core/Personality/Design Philosophy UIコンポーネントライブラリ 広義の デザイン システム 狭義の デザイン システム
14. 14 デザインシステムはプロダクト横断して利用できます デザインシステム and more..
15. 15 01　デザインシステムとは 02　構築の目的・見込まれる効果 03　freeeでの立ち上げ・運用例 04　まとめ・今後の展望 目次
16. 16 • 開発生産性の向上 • 一貫性・品質の担保 • ブランドの体現 効果として期待できるもの
17. 17 • 開発生産性の向上 • 一貫性・品質の担保 • ブランドの体現 効果として期待できるもの
18. 18 開発生産性の向上（開発プロセスとして） デザインシステムがない場合 • デザインライブラリだけがある ◦ 実装時は担当エンジニアが１から作 る必要が出てくる • 実装だけがある ◦ デザインを起こす際に、既存の画面 のスクショを元にデザインを起こすな ど デザインシステムがある場合 • デザインライブラリにあるものは実装とし ても存在する • デザインに起こす&実装するが両方ス ムーズ • コンポーネントの名前も共通しているの で、デザイナーとエンジニア間のコミュ ニケーションも円滑になる
19. 19 開発生産性の向上（プロダクトへの導入として） 前提 UIの「表層部分」と「操作によって起こること」の実装は分離でき、デザインシステムは基本的に「表層部 分」を提供している。 表層部分 ・ページタイトル ・ボタン ・リンク ・テーブル ・フォーム ・etc.. 操作によって起こること ・ページを開いた際のデータの取得 ・取得したデータの表示 ・ボタンを押した後の挙動 ・操作完了時のフィードバック ・etc.. デザインシステムで提供 storybook内のサンプル画像です
20. 20 開発生産性の向上（プロダクトへの導入として） 　新規開発時 表層部分は利用に応じて使いまわす事が できるため、 操作によっておこるロジックの部分に開発 を集中できるようになる 　既存実装の更新 表層部分を更新したい場合、デザインシス テム側を直せば、利用している全ての箇所 に反映できる 新規開発・既存部分の更新の両方で 開発生産性の向上が見込めます
21. 21 • 開発生産性の向上 • 一貫性・品質の担保 • ブランドの体現 効果として期待できるもの
22. 22 • UIとしての世の中の慣習（代表的な例はHuman Interface GuidelinesやMaterial Designなど）に沿ってい る上で、プロダクト上で見るものに差がない状態。 • 見た目から挙動がなんとなく想像できること。 • 使う&フィードバックからユーザーが学習していけること • アクセシビリティなど品質が伴うことで、誰にでも使いやすい状態がプロダクト上 で実現されている 一貫性・品質の担保
23. 23 例 これは押せそ う？ 三角のアイコン がついてるか ら、押すと開く のかな？ お！開いた！ 開いた表示から 操作を選べそ う？ キーボードでも 操作ができる！ マウスを使わな くても操作がで きた！ デザインシステムとしてUIコンポーネントを提供することで 同様の見た目・挙動・品質を担保できます 見た目から挙動が 想像できる 使う&フィードバックから ユーザーが学習 品質の担保 Aさん
24. 24 コンポーネントは組み合わせて設計され、汎用性のある単位で提供されます RightIconButton PopupBase WithPopup DropdownMenu WithDropdown DropdownButton
25. 25 • 開発生産性の向上 • 一貫性・品質の担保 • ブランドの体現 効果として期待できるもの
26. Mission, Vision スモールビジネスを、世界の主役に。 だれもが自由に経営できる統合型経営プラットフォーム。 自由 自然体 解放 ちょっとした楽しさ ユーザーに誠実&丹念に向き合いながら、マジ価値を「軽やか・前向き・遊びごころある」印象で届けきる スモールビジネスに携わる人の「自由」を支えるパートナー Brand Core freeeはユーザーにどう感じてもらいたいか Personality freeeはユーザーとどんな関わり方をするか Design Philosophy freeeはどんな世界観や体験を大切にするか たのしさスパイス あんしんインテリジェント かろやかシンプル まえむきリラックス 煩雑な情報・業務が軽やかになる わかりやすくシンプルなデザイン 安心感があり頼りになる、 ユーザーがじぶんの仕事に 自信を持てるデザイン 仕事を前向きに進められる 快適でリラックスできるデザイン ちょっとした楽しさを さらに生産性をあげるための スパイスに かろやか　　シンプル ユーザーが 受ける体験 提供時に心が けるデザイン freeeのブランドの定義
27. 27 • プロダクト以外のユーザー接点でも 一貫したブランド体現が求められる • プロダクトはデザインシステムが支え ているが、各接点であるべき形を模 索している • 提供しているブランド的価値がユー ザーにとっても良いことで、プロダクト のファンも増えていくのが理想 あらゆるユーザー接点でブランド体現は求められる サポート セールス マーケティ ング プロダクト その他 コーポレート コミュニケーション
28. 28 • 色や文字と言う細かい単位(Elements)から、イラスト・言葉等（contents）、コンポー ネントの挙動(Interaction)や画面構成(layout)まで含んだすべての表現が体験と してブランドとも関わります • デザインシステムは一貫した表現を下支えします • ブランドの指針に沿って表現されたものがユーザーの体験として積み重なること で、ユーザーにfreeeの世界観を感じてもらうことができる デザインシステムがブランド体現を支える デザインシステム elements/contents/interaction/layout Design Philosophy
29. 構築の目的・見込まれる効果 まとめ
30. 30 • 開発生産性の向上 • 一貫性・品質の担保 • ブランドの体現 デザインシステムとして取り組む良さ 上記を合わせて提供できるのがデザインシステムの良いところ また、プロダクトの変化や開発のニーズに合わせて、 継続的に積みげて構築することができます
31. 31 01　デザインシステムとは 02　構築の目的・見込まれる効果 03　freeeでの立ち上げ・運用例 04　まとめ・今後の展望 目次
32. 32 freeeにおける、デザインシステムの各フェーズ プロダクト導入 導入後の運用 ブランド刷新後 立ち上げ
33. 33 freeeにおける、デザインシステムの各フェーズ プロダクト導入 導入後の運用 立ち上げ ブランド刷新後
34. 34 • プロダクトの立ち上げ時から • プロダクトが運用に乗ってから • プロダクトが大きくなってきてから • 複数のプロダクトがリリースされてから • ブランドが確立されてから • etc… デザインシステムを立ち上げるタイミング
35. 35 • プロダクトの立ち上げ時から • プロダクトが運用に乗ってから • プロダクトが大きくなってきてから • 複数のプロダクトがリリースされてから • ブランドが確立されてから • etc… デザインシステムを立ち上げるタイミング このあたり 2019年頃から着手
36. 36 2012 2013 2014 2015 2016 2017 200 100 150 50 2020 エンジニア数（人） 2019 2018 プロダクト リリース freee 会計 freee 人事労務 freee 会社設立 マイナンバー 開業 freee申告 freeeカード アプリストア公 開 freee プロジェクト管 理 freee finance lab株式会社 設立 freeeのプロダクトと組織の状況 このあたり
37. 37 • 担当のチーム(例:PM１人、Designer１人、Engineer３人）で機能開発を進めている • デザイナーがその都度UIを考えていた • UI実装に詳しいエンジニアやデザイナーは比較的少なかった ◦ freeeではエンジニアがfront-end/server-sideを隔ず開発 • 同じような見た目でも挙動が違う、新らしく作られても古い実装はそのままなた め、新旧が異なるUIが出てくる。 • 作りを揃えようと思っても、なんとなく最近作られた物を真似て実装するなど、指 針があった物ではなかった 開発チームの状況
38. 38 • プロダクトがスケールするも、見た目や挙動が異なるUIが増えてきてしまう • 画面が増えていくに連れて運用負荷も上がり、開発生産性が下がってきている • プロダクトでブランドを体現できているかわからない 問題点（冒頭の課題はまさに過去のfreeeのことでした...） 解決策の１つとしてデザインシステムへ取り組み始めました
39. 39 • トップダウン • ボトムアップ • 外から知見のある人を呼ぶ • etc… デザインシステムの立ち上げ方
40. 40 • トップダウン • ボトムアップ • 外から知見のある人を呼ぶ • etc… デザインシステムの立ち上げ方 10%ルールなどを利用しながら 一部の有志の社員からスタートしました
41. 41 • 体制 ◦ デザイナー：2~3名 ◦ エンジニア：4~5名 • 期間 ◦ １年くらい（他の業務と並行） • やっていること ◦ よく使われるコンポーネントの定義 ◦ 色・大きさ・余白などのデザイン原則を定義 ◦ atomic designを試みるも頓挫 ◦ etc.. プロダクト導入に至るまで
42. 42 freeeにおける、デザインシステムの各フェーズ プロダクト導入 導入後の運用 立ち上げ ブランド刷新後
43. 43 • 体制 ◦ デザイナー：2~3名 ◦ エンジニア：4~5名 ◦ 導入する開発に関わるメンバー • やってきたこと ◦ シンプルな構成の画面全体に適応 ◦ 開発が入る箇所から部分的にデザインシステムを導入 ◦ 新規プロダクトは、デザインシステム利用が前提 ◦ 導入時の問題からデザインシステムのアップデートを行う 導入がはじまった頃
44. 44 • 生産性が上がる。デザインシステムなしに開発はできないという声も • デザイナーも用意されているコンポーネントを元にUIを作れる。 • コンポーネントを通してエンジニアとデザイナーのコミュニケーションもやりやすい。 • UIの一貫性と品質の対応が取りやすい。デザインシステムによって予め対応できて いる 導入した結果 デザインシステム着手前の課題に対する結果が見えてきた 一方で、利用する人も増え、改善要望も出てくるようになる
45. 45 freeeにおける、デザインシステムの各フェーズ プロダクト導入 導入後の運用 立ち上げ ブランド刷新後
46. 46 • 中央集権 • 分散型 • ハイブリッド型 • etc… デザインシステムの運用の形
47. 47 • 中央集権 • 分散型 • ハイブリッド型 • etc… デザインシステムの運用の形 コアメンバーが運用しつつ 各チームが起点となるアップデートも起こる
48. 48 • 体制 ◦ コアメンバー ▪ デザイナー：2~3名 ▪ エンジニア：4~5名 ◦ アップデートの必要性に応じて、各メンバーと協力 • 組織への浸透のための活動 ▪ サロンを開く ▪ ドキュメントを整える ▪ issueを各チームが上げやすいように ▪ その都度困りごとに答える ▪ etc.. 運用の形
49. 49 • 使う上での不明点等のヒアリング • デザインシステムが提供しているコンポーネントだけでは実現が難しかった例、変 更や追加余地のあるデザイン例を共有してもらう • デザインシステムの更新内容の周知 • etc... サロンとしてやっていること コアメンバーだけでなく利用するデザイナー・エンジニアからの声も集め、改 善に繋がる体制づくりをしています
50. 50 freeeにおける、デザインシステムの各フェーズ プロダクト導入 導入後の運用 立ち上げ ブランド刷新後
51. 51 2021年6月にfreeeのブランドの刷新が行われました
52. 52 • 刷新時に対応したこと ◦ 全プロダクトでカラーパレットやロゴ・プロダクト名称の変更 • 刷新後に取り組み続けていること ◦ ブランドに基づいた表現の指針の構築とデザインシステムへの反映 ◦ あらゆるユーザー接点でのブランド体現の実践 ブランドの刷新を受けたプロダクト対応
53. 53 全プロダクトでカラーパレットやロゴ・プロダクト名称の変更が行われる デザインシステムが導入されていることでスムーズな対応が可能に 会計freee freee会計
54. 54 • 指針の構築 ◦ Design Philosophyをプロダクトに反映させるための指針としてプロダクトデザイ ンコンパスを構築 ブランドに基づいた表現の指針の構築とデザインシステムへの反映 かろやか　　シンプル ユーザーが 受ける体験 提供時に心が けるデザイン
55. 55 • デザインシステムへの反映の例 ◦ 用途に応じて予めイラストを組み込んだコンポーネントの用意 ◦ 各コンポーネントの角丸を見直し ブランドに基づいた表現の指針の構築とデザインシステムへの反映
56. 56 • 例：ヘルプセンター・給与メール あらゆるユーザー接点でのブランド体現の実践
57. 57 01　デザインシステムとは 02　構築の目的・見込まれる効果 03　freeeでの立ち上げ・運用例 04　まとめ・今後の展望 目次
58. 58 • 今回は、デザインシステムに一般的に期待できる効果として「開発生産性」「品質・一貫性の担 保」「ブランド体現」を取り上げfreeeにおける解釈を補足した後、freeeではどのタイミングで効果を 経験してきたかという流れでお話ししました。 • freeeの場合「開発生産性」「品質・一貫性の担保」はデザインシステムを立ち上げ〜導入時から得 られた効果でしたが、ブランド刷新以降の「ブランド体現」はデザインシステムの土台があったから こそ取り組みやすくなっていると感じます。 • freeeはあくまでも１例であり、フェーズによる取り組み方は組織によって様々なはずです。 デザインシステムを構築する意義をどう捉えるか プロダクト 導入 導入後 の運用 ブランド刷 新後 立ち上げ 「開発生産性」「品質・一貫性の担保」 「ブランド体現」
59. 59 • 立ち上げへの投資や運用体制をつくる、継続して改善し続けることが必要という コストはもちろんありますが、それ以上に得られる効果も大きいです。 • ただし、デザインシステムで開発プロセスの全てが解決されるわけではなく、デザ インシステムをどう利用するかによって、デザインから得られる結果は変わります。 • ガイドラインの充実も一層させつつ、ブランド体現まで実現しやすい形を目指して いく。 • デザインシステム自体も改善の余地はまだまだあります。 デザインシステムを構築する意義をどう捉えるか
60. freeeは今後もデザインシステムの運用を続け、 さらなるユーザー体験の向上を目指します
61. スモールビジネスを、世界の主役に。