Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

© 2023 Findy Inc.

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

© 2023 Findy Inc. 最後に

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

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

Slide 38

Slide 38 text

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