Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

fkady
May 19, 2022

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

fkady

May 19, 2022
Tweet

More Decks by fkady

Other Decks in Design

Transcript

  1. 18 開発生産性の向上(開発プロセスとして) デザインシステムがない場合 • デザインライブラリだけがある ◦ 実装時は担当エンジニアが1から作 る必要が出てくる • 実装だけがある

    ◦ デザインを起こす際に、既存の画面 のスクショを元にデザインを起こすな ど デザインシステムがある場合 • デザインライブラリにあるものは実装とし ても存在する • デザインに起こす&実装するが両方ス ムーズ • コンポーネントの名前も共通しているの で、デザイナーとエンジニア間のコミュ ニケーションも円滑になる
  2. 19 開発生産性の向上(プロダクトへの導入として) 前提 UIの「表層部分」と「操作によって起こること」の実装は分離でき、デザインシステムは基本的に「表層部 分」を提供している。 表層部分 ・ページタイトル ・ボタン ・リンク ・テーブル

    ・フォーム ・etc.. 操作によって起こること ・ページを開いた際のデータの取得 ・取得したデータの表示 ・ボタンを押した後の挙動 ・操作完了時のフィードバック ・etc.. デザインシステムで提供 storybook内のサンプル画像です
  3. 22 • UIとしての世の中の慣習(代表的な例はHuman Interface GuidelinesやMaterial Designなど)に沿ってい る上で、プロダクト上で見るものに差がない状態。 • 見た目から挙動がなんとなく想像できること。 •

    使う&フィードバックからユーザーが学習していけること • アクセシビリティなど品質が伴うことで、誰にでも使いやすい状態がプロダクト上 で実現されている 一貫性・品質の担保
  4. 23 例 これは押せそ う? 三角のアイコン がついてるか ら、押すと開く のかな? お!開いた! 開いた表示から

    操作を選べそ う? キーボードでも 操作ができる! マウスを使わな くても操作がで きた! デザインシステムとしてUIコンポーネントを提供することで 同様の見た目・挙動・品質を担保できます 見た目から挙動が 想像できる 使う&フィードバックから ユーザーが学習 品質の担保 Aさん
  5. Mission, Vision スモールビジネスを、世界の主役に。 だれもが自由に経営できる統合型経営プラットフォーム。 自由 自然体 解放 ちょっとした楽しさ ユーザーに誠実&丹念に向き合いながら、マジ価値を「軽やか・前向き・遊びごころある」印象で届けきる スモールビジネスに携わる人の「自由」を支えるパートナー

    Brand Core freeeはユーザーにどう感じてもらいたいか Personality freeeはユーザーとどんな関わり方をするか Design Philosophy freeeはどんな世界観や体験を大切にするか たのしさスパイス あんしんインテリジェント かろやかシンプル まえむきリラックス 煩雑な情報・業務が軽やかになる わかりやすくシンプルなデザイン 安心感があり頼りになる、 ユーザーがじぶんの仕事に 自信を持てるデザイン 仕事を前向きに進められる 快適でリラックスできるデザイン ちょっとした楽しさを さらに生産性をあげるための スパイスに かろやか  シンプル ユーザーが 受ける体験 提供時に心が けるデザイン freeeのブランドの定義
  6. 27 • プロダクト以外のユーザー接点でも 一貫したブランド体現が求められる • プロダクトはデザインシステムが支え ているが、各接点であるべき形を模 索している • 提供しているブランド的価値がユー

    ザーにとっても良いことで、プロダクト のファンも増えていくのが理想 あらゆるユーザー接点でブランド体現は求められる サポート セールス マーケティ ング プロダクト その他 コーポレート コミュニケーション
  7. 35 • プロダクトの立ち上げ時から • プロダクトが運用に乗ってから • プロダクトが大きくなってきてから • 複数のプロダクトがリリースされてから •

    ブランドが確立されてから • etc… デザインシステムを立ち上げるタイミング このあたり 2019年頃から着手
  8. 36 2012 2013 2014 2015 2016 2017 200 100 150

    50 2020 エンジニア数(人) 2019 2018 プロダクト リリース freee 会計 freee 人事労務 freee 会社設立 マイナンバー 開業 freee申告 freeeカード アプリストア公 開 freee プロジェクト管 理 freee finance lab株式会社 設立 freeeのプロダクトと組織の状況 このあたり
  9. 37 • 担当のチーム(例:PM1人、Designer1人、Engineer3人)で機能開発を進めている • デザイナーがその都度UIを考えていた • UI実装に詳しいエンジニアやデザイナーは比較的少なかった ◦ freeeではエンジニアがfront-end/server-sideを隔ず開発 •

    同じような見た目でも挙動が違う、新らしく作られても古い実装はそのままなた め、新旧が異なるUIが出てくる。 • 作りを揃えようと思っても、なんとなく最近作られた物を真似て実装するなど、指 針があった物ではなかった 開発チームの状況
  10. 40 • トップダウン • ボトムアップ • 外から知見のある人を呼ぶ • etc… デザインシステムの立ち上げ方

    10%ルールなどを利用しながら 一部の有志の社員からスタートしました
  11. 41 • 体制 ◦ デザイナー:2~3名 ◦ エンジニア:4~5名 • 期間 ◦

    1年くらい(他の業務と並行) • やっていること ◦ よく使われるコンポーネントの定義 ◦ 色・大きさ・余白などのデザイン原則を定義 ◦ atomic designを試みるも頓挫 ◦ etc.. プロダクト導入に至るまで
  12. 43 • 体制 ◦ デザイナー:2~3名 ◦ エンジニア:4~5名 ◦ 導入する開発に関わるメンバー •

    やってきたこと ◦ シンプルな構成の画面全体に適応 ◦ 開発が入る箇所から部分的にデザインシステムを導入 ◦ 新規プロダクトは、デザインシステム利用が前提 ◦ 導入時の問題からデザインシステムのアップデートを行う 導入がはじまった頃
  13. 47 • 中央集権 • 分散型 • ハイブリッド型 • etc… デザインシステムの運用の形

    コアメンバーが運用しつつ 各チームが起点となるアップデートも起こる
  14. 48 • 体制 ◦ コアメンバー ▪ デザイナー:2~3名 ▪ エンジニア:4~5名 ◦

    アップデートの必要性に応じて、各メンバーと協力 • 組織への浸透のための活動 ▪ サロンを開く ▪ ドキュメントを整える ▪ issueを各チームが上げやすいように ▪ その都度困りごとに答える ▪ etc.. 運用の形