デザイントークンの適用率計測とその活用

Transcript

1. © 2023 Findy Inc.
   デザイントークンの適用率計測とその活用
   松本 芳郎 2023.06.15
   

   View Slide

2. © 2023 Findy Inc.
   @m-yoshiro
   松本 芳郎 / Matsumoto Yoshiro
   ファインディ株式会社 / Findy
   フロントエンドエンジニア。
   GMOペパボ株式会社でデザイナー → 株式会社マネーフォワードでフロ
   ントエンドエンジニアに転身。
   そして、2023年11月にファインディ株式会社にジョイン。Findy転職
   のデザインシステム構築と推進に注力中!
   @bennkyougirai
   

   View Slide

3. © 2023 Findy Inc.
   想定している視聴者像
   ● 初めて、デザイントークンやUIコンポーネントライブラリに取り組
   んでいるデザイナー・フロントエンドエンジニア
   ● デザイントークンという言葉を聞いたことがある
   この発表の(私の)ゴール
   ● みなさまの環境やプロセスで何かしら「試せる」ことが
   見つかること
   はじめに
   

   View Slide

4. © 2023 Findy Inc.
   話の流れ
   1. Findyのデザインシステムの現在地
   2. なぜ、デザイントークンの適用率を計測したのか
   3. デザイントークン適用率の計測
   4. デザイントークン適用率の活用
   5. Appendix: 計測方法 (資料公開する際に追加します)
   

   View Slide

5. © 2023 Findy Inc.
   1. Findyのデザインシステムの
   現在地
   

   View Slide

6. © 2023 Findy Inc.
   ぶっちゃけると
   まだ赤ちゃんです
   

   View Slide

7. © 2023 Findy Inc.
   Findyのデザインシステムの現状
   ● 対象はFindy転職のみ
   ● デザイン原則などの基礎部分は未着手
   ● 作業効率化を優先している
   ○ デザイントークンの適用
   ○ FigmaのUIコンポーネント整備
   小さく試そうとしてるフェーズ
   

   View Slide

8. © 2023 Findy Inc.
   今日のお話しの舞台
   ● デザイントークンをプロダクトへ適用しはじめた頃
   2023年2月
   ● デザイントークンを構築
   2023年3月
   ● 一部のデザイントークンを適用開始
   ● デザイントークン適用率を計測開始
   ● 角丸のトークンをほぼ置き換え完了
   2023年4月
   ● デザイントークンの適用方針を変更
   

   View Slide

9. © 2023 Findy Inc.
   2. なぜ、デザイントークンの適用率
   を計測したのか
   

   View Slide

10. © 2023 Findy Inc.
    ざっくりいうと、
    進行が行き詰まりそうだったから
    

    View Slide

11. © 2023 Findy Inc.
    当時の状況
    ● デザイントークンをプロダクトへ適用しはじめた頃
    2023年2月
    ● デザイントークンを構築
    2023年3月
    ● 一部のデザイントークンを適用開始
    ● デザイントークン適用率を計測開始
    ● 角丸のトークンをほぼ置き換え完了
    2023年4月
    ● デザイントークンの適用方針を変更
    

    View Slide

12. © 2023 Findy Inc.
    当時のデザイントークンの適用戦略
    ● スタイルの対象プロパティの値を直接トークンに差し替える！
    つまりこういうこと
    

    View Slide

13. © 2023 Findy Inc.
    しかし、Findy転職のUIはまだまだ伸び代(課題)が多い
    共通化されていない
    UIコンポーネント
    複雑なスタイル
    読めない影響範囲
    etc.
    

    View Slide

14. © 2023 Findy Inc.
    課題感
    ● 進捗管理が難しい
    ○ ページやコンポーネントを進捗管理の単位として活用できない
    ○ 数を追うと機能追加や削除の影響で簡単に監視が破城する
    ○ ステークホルダーとのコミュニケーションがとりづらくなる
    ● 「トークンを適用すること」 自体が目的になりつつあった
    ○ 適用することはあくまで手段である
    ○ トークンを適用することで、何を達成したいのかが不透明
    ● この進め方が適切なのか
    ○ 膨大な差し替え対象...
    

    View Slide

15. © 2023 Findy Inc.
    解決策としてデザイントークンの計測を試みた
    

    View Slide

16. © 2023 Findy Inc.
    3. デザイントークン適用率の計測
    

    View Slide

17. © 2023 Findy Inc.
    計測した指標
    ● デザイントークン適用率
    スタイルプロパティ別の [トークン適用数 / プロパティの総数]
    適用されていない 適用されている
    ※CSSを前提としてます。
    

    View Slide

18. © 2023 Findy Inc.
    適用率計測の狙い
    ● 進捗を管理できるようにする
    ● デザイントークン適用と解決したい事柄を接続する
    ● デザイントークンの適用方針を見直すきっかけになる
    

    View Slide

19. © 2023 Findy Inc.
    ● データの収集
    ○ コードを検索して対象を抽出
    ● データの整形
    ○ Google シートで頑張る
    尺の都合で、計測方法は資料の公開時に
    補足資料として掲載いたします 🙏
    雑に計測してみた
    

    View Slide

20. © 2023 Findy Inc.
    

    View Slide

21. © 2023 Findy Inc.
    ● Kuja適用率
    ○ デザイントークン適用率
    ● バリエーション数
    ○ 値のバリエーション数
    シートの内容
    

    View Slide

22. © 2023 Findy Inc.
    4. デザイントークン適用率の活用
    

    View Slide

23. © 2023 Findy Inc.
    適用率計測の狙い
    ● 進捗を管理できるようにする
    ● デザイントークン適用と解決したい事柄を接続する
    ● デザイントークンの適用方針の見直し
    

    View Slide

24. © 2023 Findy Inc.
    進捗を管理できるようにする
    

    View Slide

25. © 2023 Findy Inc.
    進捗を管理できるようにする
    ● 率で監視しているので進捗がわかりやすい
    ○ 機能追加・削除によるコード量の変化に振り回れない
    ○ 率の増加によって進行していることが実感できた (適用を始めた初期は...)
    ● プロパティ毎の適用率の上限値がわかった
    ○ 一つのプロパティにつき、50 ~ 60 %の適用率が限界
    ● ステークホルダーと話がしやすい
    

    View Slide

26. © 2023 Findy Inc.
    ちなみに、適用率の共有は定例会でラフにやってます。
    現在(右図)はもっと簡素化してます
    コマンドでサマリーを出せるようにしてる。
    

    View Slide

27. © 2023 Findy Inc.
    デザイントークン適用と
    解決したい事柄を接続する
    

    View Slide

28. © 2023 Findy Inc.
    デザイントークン適用と解決したい事柄を接続する
    ● ゴールを言語化し、アクションの意義を明確にする
    ○ 適用という行為と意義を接続する媒体として、デザイントークン適用率を使う
    デザイントークン適用率が増える
    トークンに置き換わることで、
    値のバリエーションが減る
    限定的だが、UIの一貫性の向上に貢
    献するだろう
    

    View Slide

29. © 2023 Findy Inc.
    デザイントークン適用と解決したい事柄を接続する
    ● ゴールを言語化し、アクションの意義を明確にする
    ○ 適用という行為と意義を接続する媒体として、デザイントークン適用率を使う
    デザイントークン適用率が増える
    トークンに置き換わることで、
    値のバリエーションが減る
    限定的だが、UIの一貫性の向上に貢
    献するだろう
    ゴール：
    指標：
    意義： ばらつきを減らすことでUIの一貫
    性の向上に貢献する。
    デザイントークン適用率
    デザイントークンを活用している状態
    

    View Slide

30. © 2023 Findy Inc.
    デザイントークンの
    適用方針の見直し
    

    View Slide

31. © 2023 Findy Inc.
    一部プロパティの適用目処がついた頃、問題が見えてきた
    

    View Slide

32. © 2023 Findy Inc.
    この時の課題感
    ● デザイントークン適用の作業量が膨大
    ● カラー系のトークンから難易度があがる
    ○ 意味としての整合性、仕様の確認、etc..
    ● 適用を進めても、開発がラクにならない
    

    View Slide

33. © 2023 Findy Inc.
    そして適用方針の見直した
    ● UIリファクタリングと並行する方針に変更
    ○ UIコンポーネントをその過程で作成
    ○ そこにデザイントークンを適用する
    ● 見通し
    ○ UIコンポーネントの適用が進めば、
    デザイントークン適用率の上昇につながるだろう
    

    View Slide

34. © 2023 Findy Inc.
    最後に
    

    View Slide

35. © 2023 Findy Inc.
    雑にやる
    ● 精度を求めない
    ● 利用する上で十分であれば、雑なもので運用する
    ■ 私の場合は、ステークホルダーとのやりとりできれば十分だった
    

    View Slide

36. © 2023 Findy Inc.
    現在の伸び代 (課題)
    ● UIのコンポーネント作りに入り、適用率の変動が小さくなった
    → 進捗が見えずらい
    ● カバレッジの向上がそもそもデザインシステムの推進として効果的
    なのか(個人的な悩みです)
    

    View Slide

37. © 2023 Findy Inc.
    ご清聴ありがとうございました
    

    View Slide

38. © 2023 Findy Inc.
    Appendix
    (資料公開時に追加)
    

    View Slide