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

プロダクトと並行して育てるデザインシステム / A Design System Growing In Parallel to the Product

MakotoOmura
December 09, 2022

プロダクトと並行して育てるデザインシステム / A Design System Growing In Parallel to the Product

Spectrum Tokyo Design Fest 2022のイベントで登壇した際の資料です

MakotoOmura

December 09, 2022
Tweet

More Decks by MakotoOmura

Other Decks in Design

Transcript

  1. Spectrum Tokyo Design Fest 2022
    プロダクトと並行して育てるデザインシステム
    合同会社DMM.com
    CTO室 兼 VPoE室 大村 真琴
    1

    View full-size slide

  2. 大村 真琴
    Twitter: @05mkt
    CTO室とVPoE室に所属
    19年11月中途入社の4年目
    Webアクセシビリティやっていき
    コードも書くデザイナー
    DMMでは、DMMポイントの管理アプリのDMMポイントクラブの立ち上
    げからUX設計。iOS/AndroidをストアにリリースさせるまでのUI設計を
    担当し、ネイティブアプリのアクセシビリティにも注力。現在はフロン
    トエンドグループにてデザインシステム構築の技術支援を行う。とくに
    デザイントークンの設計に力を入れている。
    2

    View full-size slide

  3. 話すこと
    DMMの会社紹介
    フロントエンドグループ 紹介
    なぜデザインシステムに取り組むのか
    デザインシステム「Turtle」の現状
    DMM Tech Visionからみるデザインシステム
    プロダクトと並行して育てるデザインシステム
    今後
    3

    View full-size slide

  4. 会社紹介
    4

    View full-size slide

  5. 60以上の事業数
    出典 : 数字で見るDMM https://dmm-corp.com/figures/ 5

    View full-size slide

  6. 3,914万人の会員数
    出典 : 数字で見るDMM https://dmm-corp.com/figures/ 6

    View full-size slide

  7. 売上の3,055億円
    出典 : 数字で見るDMM https://dmm-corp.com/figures/ 7

    View full-size slide

  8. 従業員数4,407名
    出典 : 数字で見るDMM https://dmm-corp.com/figures/ 8

    View full-size slide

  9. 職種別比率
    -
    エンジニア 27.9%
    -
    営業・企画 18.4%
    -
    デザイナー 11.4%
    -
    運営 10.0%
    -
    管理・事務 9.6%
    -
    ディレクタ 7.7%
    -
    プランナー 5.1%
    -
    マーケター 5.0%
    -
    その他 4.5%
    出典 : 数字で見るDMM https://dmm-corp.com/figures/ 9

    View full-size slide

  10. 平均年齢 : 35.6歳

    年代別昇順
    - 20~25
    歳 2.8%
    - 26~29
    歳 16.8%
    - 30~35
    歳 32.9%
    - 36~39
    歳 19.3%
    - 40~45
    歳 17.9%
    - 46~49
    歳 6.6%
    - 50
    歳~ 3.6%
    出典 : 数字で見るDMM https://dmm-corp.com/figures/ 10

    View full-size slide

  11. フロントエンドグループ
    プラットフォーム事業本部 第3開発部
    フロントエンドグループ
    フロントエンド領域 : 6名
    デザイン領域 : 2名(私含む)
    以降の表記
    プラットフォーム事業本部 = PF
    フロントエンドグループ = FEG
    11

    View full-size slide

  12. FEGのミッション(デザイナー視点)
    最高のプロダクトをエンドユーザーに最速で提供する
    やってること
    最高の開発環境(エコシステム)の整備
    すべてのプロダクトのエコシステムへの組み込み
    12

    View full-size slide

  13. 主に提供していること
    モノレポ基盤
    静的アセット配信基盤「Panda」
    コードレビューによる技術水準の向上
    デザインシステム「Turtle」
    13

    View full-size slide

  14. なぜデザインシステムに取り組むのか
    これまで問題提起されていたこと
    変更用意性の低さ
    開発効率の悪さ
    拡張性の低さ
    出典:DMM プラットフォームのフロントエンド開発を支えるエコシステム - DMM inside
    https://inside.dmm.com/entry/2022/08/29/dmm-frontend-ecosystem 14

    View full-size slide

  15. 変更容易性の低さ
    DMMは各チーム・プロダクトのフロントエンドがそれぞれ独立して開発
    PFではコーディングを別部署に依頼
    バックエンドのエンジニアが保守をするというのが主な体制
    フロントエンド専業不在で、技術選定やアーキテクチャなどをPFの中だけで独自に実装
    されていた
    システムの歴史も長く、簡単にはリファクタリングできない
    結果
    フロントエンドの保守性は悪く
    既存のシステムに継ぎ足し改修ばかり
    抜本的な改善が困難
    15

    View full-size slide

  16. 開発効率の悪さ
    簡単にリファクタリングできない
    フロントエンドをリードできる人間が少ない状況
    PHPから段階的にモダンなフロントエンドへの転換も腰が重くなる
    共通コンポーネント、ロギング、認証のような仕組みをプロダクトごとに最初から作る
    必要があった
    結果
    プロダクトごとに独自思想でUI設計を行う
    各チームが独自思想で開発したので最低限のエコシステムもなく
    サイロ化が進行
    16

    View full-size slide

  17. 拡張性の低さ
    PFでは、サービスによって機能を拡張したいケースがあります。
    たとえば、事業内容に合わせてログイン画面のカラーを変更したり、サービス固有の決済手
    段や入力項目を提供するなどです。
    そのような独立したフロントエンドを、パラメーターひとつでUIを変化させられるような設
    計や、適切な技術選定が必要とされていましたが、これまで説明したような背景から対応が
    できていませんでした。
    17

    View full-size slide

  18. デザインシステム「Turtle」の現状
    18

    View full-size slide

  19. デザインシステム「Turtle」の現状
    19

    View full-size slide

  20. デザインシステム「Turtle」の現状
    基本的なデザイントークンがそろっている
    色/余白/タイポグラフィ/グリッドシステム
    デザインデータの提供(Figma)
    Storybookで実際のコンポーネントの挙動を確認できる
    提供されているコンポーネントのドキュメント
    利用例 / 推奨パターン / 非推奨パターン
    Figmaのレイヤー構造についての図説
    20

    View full-size slide

  21. DMM Tech Visionからみるデザインシステム
    当たり前を作り続ける
    DMMは「なんでもあり」の事業展開をしていく総合企業です。
    事業を支えて伸ばしていくための当たり前を技術で支え、新しい当たり前を自らが作っ
    て加速していくことを常に志向・徹底しながら新しい技術に挑戦し続けなければならな
    いと考えています。
    出典 : 2021 DMM Tech Vision https://www.slideshare.net/dmmcom1/2021-dmm-tech-vision 21

    View full-size slide

  22. Tech Value(v2021)の文脈
    Agility:敏捷(びんしょう)的
    おそれず俊敏に動く組織をつくる
    Attractive:魅力的
    妥協せず魅力的なサービスをつくる
    Scientific:論理的
    論理的な志向で事業をつくる
    Motivative:意欲的
    意欲的に成長する自分をつくる
    出典 : 2021 DMM Tech Vision https://www.slideshare.net/dmmcom1/2021-dmm-tech-vision 22

    View full-size slide

  23. デザインシステム「Turtle」の文脈
    Agility:敏捷(びんしょう)的
    容易に利用できるコンポーネントを提供し、滞りなくエンドユーザーに届く
    Attractive:魅力的
    コンポーネントを1から作らず施策や体験設計など他に注力できる
    Scientific:論理的
    デザイントークン、それから作られるコンポーネントにはドキュメントが充実して
    いて、推奨された設計を利用できる
    Motivative:意欲的
    ドキュメントを通して、推奨パターンや非推奨パターンなど新人デザイナーからノ
    ンデザイナーまで、非常に多くの学びや発見の提供を目指す
    23

    View full-size slide

  24. 実際のFEGの動き
    24

    View full-size slide

  25. FEGの支援は部署によって異なる
    ポイントを管理している部署、アカウントや認証基盤を管理する部署、
    決済を管理している部署、マーケティングする部署、
    ユーザーの問い合わせを管理する部署など。
    次のケースはよくある
    デザイナー不在
    フロントエンド(専業)不在
    どちらも不在
    25

    View full-size slide

  26. フロントエンド専業が不在のケース
    私たちのモノレポでは、新規のプロダクトを
    すぐに開発し始められるような工夫をしています。
    ひとつは、技術スタックの統一です。例を挙げると次のようなものです。
    TypeScript
    Next.js
    SWR & Recoil
    Emotion
    出典:DMM プラットフォームのフロントエンド開発を支えるエコシステム - DMM inside
    https://inside.dmm.com/entry/2022/08/29/dmm-frontend-ecosystem 26

    View full-size slide

  27. 結果
    フロントエンド専業のエンジニアがいなくても
    FEGのコードレビューや技術 / 知見共有でうまく回っていて
    各プロダクトの保守運用していく人がモノレポをうまく使えるようになっている
    27

    View full-size slide

  28. デザイナーが不在のケース
    2パターンあり、それぞれアプローチのやり方が異なる
    1. FEGグループからリソース支援
    2. 他のリソース支援している事業部から派遣される
    28

    View full-size slide

  29. FEGグループからリソース支援
    29

    View full-size slide

  30. 他のリソース支援している事業部から派遣
    30

    View full-size slide

  31. コンポーネント設計におけるロジックツリー
    31

    View full-size slide

  32. デザインシステム Turtleの今後の宿題
    あと少し人が増えたら解消されそう...?
    32

    View full-size slide

  33. オンボーディング資料の充実
    オンボーディングを有人で行なっているので無人化する
    レスポンシブデザインの基礎、DesignTokenとは、エンジニアライクなデザインデ
    ータの作り方など
    デザインシステム策定委員会を立ち上げる
    FEGのデザイナー能動的に設計に携わっているが、個人の依存度が高い
    デザインシステムのタスクフォースチームを編成していきたい
    場を設けてデザインシステムの策定における議論する機会を作る
    思考プロセスのシステム化
    思考することも個人に依存するのでロジックツリーの種類を増やす
    Webアクセシビリティ強化
    各プロダクトに、ページ単位のアクセシビリティ・チェック
    改善事例集のドキュメントの充実
    33

    View full-size slide

  34. プラットフォーム事業本部・第3開発部 フロントエンドグループ
    デザイナー:https://dmm-corp.com/recruit/designer/970/
    フロントエンドエンジニア:https://dmm-corp.com/recruit/engineer/946/
    34

    View full-size slide