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

by fkady

Slide 1

Slide 1 text

　ユーザー体験を支える freeeのデザインシステム活用 2022.04.26

Slide 2

Slide 2 text

　 2 早稲田大学人間科学部卒。 2017年よりfreee株式会社でインターンを始め、 2018年に新卒入社。アプリケーションエンジニアとしてキャリアをスタートし、複数の機能開発に携わる。 2020年よりfreeeのデザインチームに異動。デザインシステムの運用や会計モジュールのプロダクトデザインを担当し、現在に至る。深田康太 Design Engineer / Product Designer Fukada Kota

Slide 3

Slide 3 text

freeeの紹介

Slide 4

Slide 4 text

　 Mission スモールビジネスを、世界の主役に。大胆に、スピード感をもってアイデアを具現化することができるスモールビジネスは、様々なイノベーションを生むと同時に、大企業を刺激して世の中全体に新たなムーブメントを起こすことができる存在だと考えております。

Slide 5

Slide 5 text

　だれもが自由に経営できる統合型経営プラットフォーム。 VISION バックオフィス業務を統合することで、自動化と業務全体の効率化。さらに経営全体を可視化することで、これまでにないスマートかつ最適なアクションまで実行できるプラットフォームへと進化させていきます。プラットフォームの提供のみならず、スモールビジネスに携わる人の環境そのものをより良くしていく取り組みを行うことで、世の中の変化を促します。

Slide 6

Slide 6 text

あらゆる業務とデータがつながることで、自動化・可視化に加えてスマートで適切な経営アクションが可能に統合型クラウドERP

Slide 7

Slide 7 text

次のような課題、感じていませんか？

Slide 8

Slide 8 text

8 見た目や挙動が異なるUIが増えてきてしまう運用負荷も上がり、開発生産性が下がってきているブランドを体現できているかわからないプロダクトはスケールしているが...

Slide 9

Slide 9 text

デザインシステムが解決の手助けになります、というお話をします

Slide 10

Slide 10 text

10 01　デザインシステムとは 02　構築の目的・見込まれる効果 03　freeeでの立ち上げ・運用例 04　まとめ・今後の展望目次

Slide 11

Slide 11 text

11 01　デザインシステムとは 02　構築の目的・見込まれる効果 03　freeeでの立ち上げ・運用例 04　まとめ・今後の展望目次

Slide 12

Slide 12 text

12 デザインと実装が合わさった UIコンポーネントライブラリ一言で言うと

Slide 13

Slide 13 text

13 デザインシステムは会社のMissionやブランド等と関わりを持ちます指針を示すために、各種ガイドラインも用意しています各種ガイドライン UIUX/a11y/イラスト/ライティング/etc.. MIssion/Vision Brand Core/Personality/Design Philosophy UIコンポーネントライブラリ広義のデザインシステム狭義のデザインシステム

Slide 14

Slide 14 text

14 デザインシステムはプロダクト横断して利用できますデザインシステム and more..

Slide 15

Slide 15 text

15 01　デザインシステムとは 02　構築の目的・見込まれる効果 03　freeeでの立ち上げ・運用例 04　まとめ・今後の展望目次

Slide 16

Slide 16 text

16 ● 開発生産性の向上 ● 一貫性・品質の担保 ● ブランドの体現効果として期待できるもの

Slide 17

Slide 17 text

17 ● 開発生産性の向上 ● 一貫性・品質の担保 ● ブランドの体現効果として期待できるもの

Slide 18

Slide 18 text

18 開発生産性の向上（開発プロセスとして）デザインシステムがない場合 ● デザインライブラリだけがある ○ 実装時は担当エンジニアが１から作る必要が出てくる ● 実装だけがある ○ デザインを起こす際に、既存の画面のスクショを元にデザインを起こすなどデザインシステムがある場合 ● デザインライブラリにあるものは実装としても存在する ● デザインに起こす&実装するが両方スムーズ ● コンポーネントの名前も共通しているので、デザイナーとエンジニア間のコミュニケーションも円滑になる

Slide 19

Slide 19 text

19 開発生産性の向上（プロダクトへの導入として）前提 UIの「表層部分」と「操作によって起こること」の実装は分離でき、デザインシステムは基本的に「表層部分」を提供している。表層部分・ページタイトル・ボタン・リンク・テーブル・フォーム・etc.. 操作によって起こること・ページを開いた際のデータの取得・取得したデータの表示・ボタンを押した後の挙動・操作完了時のフィードバック・etc.. デザインシステムで提供 storybook内のサンプル画像です

Slide 20

Slide 20 text

20 開発生産性の向上（プロダクトへの導入として）　新規開発時表層部分は利用に応じて使いまわす事ができるため、操作によっておこるロジックの部分に開発を集中できるようになる　既存実装の更新表層部分を更新したい場合、デザインシステム側を直せば、利用している全ての箇所に反映できる新規開発・既存部分の更新の両方で開発生産性の向上が見込めます

Slide 21

Slide 21 text

21 ● 開発生産性の向上 ● 一貫性・品質の担保 ● ブランドの体現効果として期待できるもの

Slide 22

Slide 22 text

22 ● UIとしての世の中の慣習（代表的な例はHuman Interface GuidelinesやMaterial Designなど）に沿っている上で、プロダクト上で見るものに差がない状態。 ● 見た目から挙動がなんとなく想像できること。 ● 使う&フィードバックからユーザーが学習していけること ● アクセシビリティなど品質が伴うことで、誰にでも使いやすい状態がプロダクト上で実現されている一貫性・品質の担保

Slide 23

Slide 23 text

23 例これは押せそう？三角のアイコンがついてるから、押すと開くのかな？お！開いた！開いた表示から操作を選べそう？キーボードでも操作ができる！マウスを使わなくても操作ができた！デザインシステムとしてUIコンポーネントを提供することで同様の見た目・挙動・品質を担保できます見た目から挙動が想像できる使う&フィードバックからユーザーが学習品質の担保 Aさん

Slide 24

Slide 24 text

24 コンポーネントは組み合わせて設計され、汎用性のある単位で提供されます RightIconButton PopupBase WithPopup DropdownMenu WithDropdown DropdownButton

Slide 25

Slide 25 text

25 ● 開発生産性の向上 ● 一貫性・品質の担保 ● ブランドの体現効果として期待できるもの

Slide 26

Slide 26 text

Mission, Vision スモールビジネスを、世界の主役に。だれもが自由に経営できる統合型経営プラットフォーム。自由自然体解放ちょっとした楽しさユーザーに誠実&丹念に向き合いながら、マジ価値を「軽やか・前向き・遊びごころある」印象で届けきるスモールビジネスに携わる人の「自由」を支えるパートナー Brand Core freeeはユーザーにどう感じてもらいたいか Personality freeeはユーザーとどんな関わり方をするか Design Philosophy freeeはどんな世界観や体験を大切にするかたのしさスパイスあんしんインテリジェントかろやかシンプルまえむきリラックス煩雑な情報・業務が軽やかになるわかりやすくシンプルなデザイン安心感があり頼りになる、ユーザーがじぶんの仕事に自信を持てるデザイン仕事を前向きに進められる快適でリラックスできるデザインちょっとした楽しさをさらに生産性をあげるためのスパイスにかろやか　　シンプルユーザーが受ける体験提供時に心がけるデザイン freeeのブランドの定義

Slide 27

Slide 27 text

27 ● プロダクト以外のユーザー接点でも一貫したブランド体現が求められる ● プロダクトはデザインシステムが支えているが、各接点であるべき形を模索している ● 提供しているブランド的価値がユーザーにとっても良いことで、プロダクトのファンも増えていくのが理想あらゆるユーザー接点でブランド体現は求められるサポートセールスマーケティングプロダクトその他コーポレートコミュニケーション

Slide 28

Slide 28 text

28 ● 色や文字と言う細かい単位(Elements)から、イラスト・言葉等（contents）、コンポーネントの挙動(Interaction)や画面構成(layout)まで含んだすべての表現が体験としてブランドとも関わります ● デザインシステムは一貫した表現を下支えします ● ブランドの指針に沿って表現されたものがユーザーの体験として積み重なることで、ユーザーにfreeeの世界観を感じてもらうことができるデザインシステムがブランド体現を支えるデザインシステム elements/contents/interaction/layout Design Philosophy

Slide 29

Slide 29 text

構築の目的・見込まれる効果まとめ

Slide 30

Slide 30 text

30 ● 開発生産性の向上 ● 一貫性・品質の担保 ● ブランドの体現デザインシステムとして取り組む良さ上記を合わせて提供できるのがデザインシステムの良いところまた、プロダクトの変化や開発のニーズに合わせて、継続的に積みげて構築することができます

Slide 31

Slide 31 text

31 01　デザインシステムとは 02　構築の目的・見込まれる効果 03　freeeでの立ち上げ・運用例 04　まとめ・今後の展望目次

Slide 32

Slide 32 text

32 freeeにおける、デザインシステムの各フェーズプロダクト導入導入後の運用ブランド刷新後立ち上げ

Slide 33

Slide 33 text

33 freeeにおける、デザインシステムの各フェーズプロダクト導入導入後の運用立ち上げブランド刷新後

Slide 34

Slide 34 text

34 ● プロダクトの立ち上げ時から ● プロダクトが運用に乗ってから ● プロダクトが大きくなってきてから ● 複数のプロダクトがリリースされてから ● ブランドが確立されてから ● etc… デザインシステムを立ち上げるタイミング

Slide 35

Slide 35 text

35 ● プロダクトの立ち上げ時から ● プロダクトが運用に乗ってから ● プロダクトが大きくなってきてから ● 複数のプロダクトがリリースされてから ● ブランドが確立されてから ● etc… デザインシステムを立ち上げるタイミングこのあたり 2019年頃から着手

Slide 36

Slide 36 text

36 2012 2013 2014 2015 2016 2017 200 100 150 50 2020 エンジニア数（人） 2019 2018 プロダクトリリース freee 会計 freee 人事労務 freee 会社設立マイナンバー開業 freee申告 freeeカードアプリストア公開 freee プロジェクト管理 freee ﬁnance lab株式会社設立 freeeのプロダクトと組織の状況このあたり

Slide 37

Slide 37 text

37 ● 担当のチーム(例:PM１人、Designer１人、Engineer３人）で機能開発を進めている ● デザイナーがその都度UIを考えていた ● UI実装に詳しいエンジニアやデザイナーは比較的少なかった ○ freeeではエンジニアがfront-end/server-sideを隔ず開発 ● 同じような見た目でも挙動が違う、新らしく作られても古い実装はそのままなため、新旧が異なるUIが出てくる。 ● 作りを揃えようと思っても、なんとなく最近作られた物を真似て実装するなど、指針があった物ではなかった開発チームの状況

Slide 38

Slide 38 text

38 ● プロダクトがスケールするも、見た目や挙動が異なるUIが増えてきてしまう ● 画面が増えていくに連れて運用負荷も上がり、開発生産性が下がってきている ● プロダクトでブランドを体現できているかわからない問題点（冒頭の課題はまさに過去のfreeeのことでした...）解決策の１つとしてデザインシステムへ取り組み始めました

Slide 39

Slide 39 text

39 ● トップダウン ● ボトムアップ ● 外から知見のある人を呼ぶ ● etc… デザインシステムの立ち上げ方

Slide 40

Slide 40 text

40 ● トップダウン ● ボトムアップ ● 外から知見のある人を呼ぶ ● etc… デザインシステムの立ち上げ方 10%ルールなどを利用しながら一部の有志の社員からスタートしました

Slide 41

Slide 41 text

41 ● 体制 ○ デザイナー：2~3名 ○ エンジニア：4~5名 ● 期間 ○ １年くらい（他の業務と並行） ● やっていること ○ よく使われるコンポーネントの定義 ○ 色・大きさ・余白などのデザイン原則を定義 ○ atomic designを試みるも頓挫 ○ etc.. プロダクト導入に至るまで

Slide 42

Slide 42 text

42 freeeにおける、デザインシステムの各フェーズプロダクト導入導入後の運用立ち上げブランド刷新後

Slide 43

Slide 43 text

43 ● 体制 ○ デザイナー：2~3名 ○ エンジニア：4~5名 ○ 導入する開発に関わるメンバー ● やってきたこと ○ シンプルな構成の画面全体に適応 ○ 開発が入る箇所から部分的にデザインシステムを導入 ○ 新規プロダクトは、デザインシステム利用が前提 ○ 導入時の問題からデザインシステムのアップデートを行う導入がはじまった頃

Slide 44

Slide 44 text

44 ● 生産性が上がる。デザインシステムなしに開発はできないという声も ● デザイナーも用意されているコンポーネントを元にUIを作れる。 ● コンポーネントを通してエンジニアとデザイナーのコミュニケーションもやりやすい。 ● UIの一貫性と品質の対応が取りやすい。デザインシステムによって予め対応できている導入した結果デザインシステム着手前の課題に対する結果が見えてきた一方で、利用する人も増え、改善要望も出てくるようになる

Slide 45

Slide 45 text

45 freeeにおける、デザインシステムの各フェーズプロダクト導入導入後の運用立ち上げブランド刷新後

Slide 46

Slide 46 text

46 ● 中央集権 ● 分散型 ● ハイブリッド型 ● etc… デザインシステムの運用の形

Slide 47

Slide 47 text

47 ● 中央集権 ● 分散型 ● ハイブリッド型 ● etc… デザインシステムの運用の形コアメンバーが運用しつつ各チームが起点となるアップデートも起こる

Slide 48

Slide 48 text

48 ● 体制 ○ コアメンバー ■ デザイナー：2~3名 ■ エンジニア：4~5名 ○ アップデートの必要性に応じて、各メンバーと協力 ● 組織への浸透のための活動 ■ サロンを開く ■ ドキュメントを整える ■ issueを各チームが上げやすいように ■ その都度困りごとに答える ■ etc.. 運用の形

Slide 49

Slide 49 text

49 ● 使う上での不明点等のヒアリング ● デザインシステムが提供しているコンポーネントだけでは実現が難しかった例、変更や追加余地のあるデザイン例を共有してもらう ● デザインシステムの更新内容の周知 ● etc... サロンとしてやっていることコアメンバーだけでなく利用するデザイナー・エンジニアからの声も集め、改善に繋がる体制づくりをしています

Slide 50

Slide 50 text

50 freeeにおける、デザインシステムの各フェーズプロダクト導入導入後の運用立ち上げブランド刷新後

Slide 51

Slide 51 text

51 2021年6月にfreeeのブランドの刷新が行われました

Slide 52

Slide 52 text

52 ● 刷新時に対応したこと ○ 全プロダクトでカラーパレットやロゴ・プロダクト名称の変更 ● 刷新後に取り組み続けていること ○ ブランドに基づいた表現の指針の構築とデザインシステムへの反映 ○ あらゆるユーザー接点でのブランド体現の実践ブランドの刷新を受けたプロダクト対応

Slide 53

Slide 53 text

53 全プロダクトでカラーパレットやロゴ・プロダクト名称の変更が行われるデザインシステムが導入されていることでスムーズな対応が可能に会計freee freee会計

Slide 54

Slide 54 text

54 ● 指針の構築 ○ Design Philosophyをプロダクトに反映させるための指針としてプロダクトデザインコンパスを構築ブランドに基づいた表現の指針の構築とデザインシステムへの反映かろやか　　シンプルユーザーが受ける体験提供時に心がけるデザイン

Slide 55

Slide 55 text

55 ● デザインシステムへの反映の例 ○ 用途に応じて予めイラストを組み込んだコンポーネントの用意 ○ 各コンポーネントの角丸を見直しブランドに基づいた表現の指針の構築とデザインシステムへの反映

Slide 56

Slide 56 text

56 ● 例：ヘルプセンター・給与メールあらゆるユーザー接点でのブランド体現の実践

Slide 57

Slide 57 text

57 01　デザインシステムとは 02　構築の目的・見込まれる効果 03　freeeでの立ち上げ・運用例 04　まとめ・今後の展望目次

Slide 58

Slide 58 text

58 ● 今回は、デザインシステムに一般的に期待できる効果として「開発生産性」「品質・一貫性の担保」「ブランド体現」を取り上げfreeeにおける解釈を補足した後、freeeではどのタイミングで効果を経験してきたかという流れでお話ししました。 ● freeeの場合「開発生産性」「品質・一貫性の担保」はデザインシステムを立ち上げ〜導入時から得られた効果でしたが、ブランド刷新以降の「ブランド体現」はデザインシステムの土台があったからこそ取り組みやすくなっていると感じます。 ● freeeはあくまでも１例であり、フェーズによる取り組み方は組織によって様々なはずです。デザインシステムを構築する意義をどう捉えるかプロダクト導入導入後の運用ブランド刷新後立ち上げ「開発生産性」「品質・一貫性の担保」「ブランド体現」

Slide 59

Slide 59 text

59 ● 立ち上げへの投資や運用体制をつくる、継続して改善し続けることが必要というコストはもちろんありますが、それ以上に得られる効果も大きいです。 ● ただし、デザインシステムで開発プロセスの全てが解決されるわけではなく、デザインシステムをどう利用するかによって、デザインから得られる結果は変わります。 ● ガイドラインの充実も一層させつつ、ブランド体現まで実現しやすい形を目指していく。 ● デザインシステム自体も改善の余地はまだまだあります。デザインシステムを構築する意義をどう捉えるか

Slide 60

Slide 60 text

freeeは今後もデザインシステムの運用を続け、さらなるユーザー体験の向上を目指します

Slide 61

Slide 61 text

スモールビジネスを、世界の主役に。