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

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

Transcript

1. Spectrum Tokyo Design Fest 2022 プロダクトと並行して育てるデザインシステム 合同会社DMM.com CTO室 兼 VPoE室 大村 真琴 1
2. 大村 真琴 Twitter: @05mkt CTO室とVPoE室に所属 19年11月中途入社の4年目 Webアクセシビリティやっていき コードも書くデザイナー DMMでは、DMMポイントの管理アプリのDMMポイントクラブの立ち上 げからUX設計。iOS/AndroidをストアにリリースさせるまでのUI設計を 担当し、ネイティブアプリのアクセシビリティにも注力。現在はフロン トエンドグループにてデザインシステム構築の技術支援を行う。とくに デザイントークンの設計に力を入れている。 2
3. 話すこと DMMの会社紹介 フロントエンドグループ 紹介 なぜデザインシステムに取り組むのか デザインシステム「Turtle」の現状 DMM Tech Visionからみるデザインシステム プロダクトと並行して育てるデザインシステム 今後 3
4. 会社紹介 4
5. 60以上の事業数 出典 : 数字で見るDMM https://dmm-corp.com/figures/ 5
6. 3,914万人の会員数 出典 : 数字で見るDMM https://dmm-corp.com/figures/ 6
7. 売上の3,055億円 出典 : 数字で見るDMM https://dmm-corp.com/figures/ 7
8. 従業員数4,407名 出典 : 数字で見るDMM https://dmm-corp.com/figures/ 8
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
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
11. フロントエンドグループ プラットフォーム事業本部 第3開発部 フロントエンドグループ フロントエンド領域 : 6名 デザイン領域 : 2名（私含む） 以降の表記 プラットフォーム事業本部 = PF フロントエンドグループ = FEG 11
12. FEGのミッション（デザイナー視点） 最高のプロダクトをエンドユーザーに最速で提供する やってること 最高の開発環境（エコシステム）の整備 すべてのプロダクトのエコシステムへの組み込み 12
13. 主に提供していること モノレポ基盤 静的アセット配信基盤「Panda」 コードレビューによる技術水準の向上 デザインシステム「Turtle」 13
14. なぜデザインシステムに取り組むのか これまで問題提起されていたこと 変更用意性の低さ 開発効率の悪さ 拡張性の低さ 出典：DMM プラットフォームのフロントエンド開発を支えるエコシステム - DMM inside https://inside.dmm.com/entry/2022/08/29/dmm-frontend-ecosystem 14
15. 変更容易性の低さ DMMは各チーム・プロダクトのフロントエンドがそれぞれ独立して開発 PFではコーディングを別部署に依頼 バックエンドのエンジニアが保守をするというのが主な体制 フロントエンド専業不在で、技術選定やアーキテクチャなどをPFの中だけで独自に実装 されていた システムの歴史も長く、簡単にはリファクタリングできない 結果 フロントエンドの保守性は悪く 既存のシステムに継ぎ足し改修ばかり 抜本的な改善が困難 15
16. 開発効率の悪さ 簡単にリファクタリングできない フロントエンドをリードできる人間が少ない状況 PHPから段階的にモダンなフロントエンドへの転換も腰が重くなる 共通コンポーネント、ロギング、認証のような仕組みをプロダクトごとに最初から作る 必要があった 結果 プロダクトごとに独自思想でUI設計を行う 各チームが独自思想で開発したので最低限のエコシステムもなく サイロ化が進行 16
17. 拡張性の低さ PFでは、サービスによって機能を拡張したいケースがあります。 たとえば、事業内容に合わせてログイン画面のカラーを変更したり、サービス固有の決済手 段や入力項目を提供するなどです。 そのような独立したフロントエンドを、パラメーターひとつでUIを変化させられるような設 計や、適切な技術選定が必要とされていましたが、これまで説明したような背景から対応が できていませんでした。 17
18. デザインシステム「Turtle」の現状 18
19. デザインシステム「Turtle」の現状 19
20. デザインシステム「Turtle」の現状 基本的なデザイントークンがそろっている 色/余白/タイポグラフィ/グリッドシステム デザインデータの提供(Figma) Storybookで実際のコンポーネントの挙動を確認できる 提供されているコンポーネントのドキュメント 利用例 / 推奨パターン / 非推奨パターン Figmaのレイヤー構造についての図説 20
21. DMM Tech Visionからみるデザインシステム 当たり前を作り続ける DMMは「なんでもあり」の事業展開をしていく総合企業です。 事業を支えて伸ばしていくための当たり前を技術で支え、新しい当たり前を自らが作っ て加速していくことを常に志向・徹底しながら新しい技術に挑戦し続けなければならな いと考えています。 出典 : 2021 DMM Tech Vision https://www.slideshare.net/dmmcom1/2021-dmm-tech-vision 21
22. Tech Value(v2021)の文脈 Agility：敏捷(びんしょう)的 おそれず俊敏に動く組織をつくる Attractive：魅力的 妥協せず魅力的なサービスをつくる Scientific：論理的 論理的な志向で事業をつくる Motivative：意欲的 意欲的に成長する自分をつくる 出典 : 2021 DMM Tech Vision https://www.slideshare.net/dmmcom1/2021-dmm-tech-vision 22
23. デザインシステム「Turtle」の文脈 Agility：敏捷(びんしょう)的 容易に利用できるコンポーネントを提供し、滞りなくエンドユーザーに届く Attractive：魅力的 コンポーネントを1から作らず施策や体験設計など他に注力できる Scientific：論理的 デザイントークン、それから作られるコンポーネントにはドキュメントが充実して いて、推奨された設計を利用できる Motivative：意欲的 ドキュメントを通して、推奨パターンや非推奨パターンなど新人デザイナーからノ ンデザイナーまで、非常に多くの学びや発見の提供を目指す 23
24. 実際のFEGの動き 24
25. FEGの支援は部署によって異なる ポイントを管理している部署、アカウントや認証基盤を管理する部署、 決済を管理している部署、マーケティングする部署、 ユーザーの問い合わせを管理する部署など。 次のケースはよくある デザイナー不在 フロントエンド（専業）不在 どちらも不在 25
26. フロントエンド専業が不在のケース 私たちのモノレポでは、新規のプロダクトを すぐに開発し始められるような工夫をしています。 ひとつは、技術スタックの統一です。例を挙げると次のようなものです。 TypeScript Next.js SWR & Recoil Emotion 出典：DMM プラットフォームのフロントエンド開発を支えるエコシステム - DMM inside https://inside.dmm.com/entry/2022/08/29/dmm-frontend-ecosystem 26
27. 結果 フロントエンド専業のエンジニアがいなくても FEGのコードレビューや技術 / 知見共有でうまく回っていて 各プロダクトの保守運用していく人がモノレポをうまく使えるようになっている 27
28. デザイナーが不在のケース 2パターンあり、それぞれアプローチのやり方が異なる 1. FEGグループからリソース支援 2. 他のリソース支援している事業部から派遣される 28
29. FEGグループからリソース支援 29
30. 他のリソース支援している事業部から派遣 30
31. コンポーネント設計におけるロジックツリー 31
32. デザインシステム Turtleの今後の宿題 あと少し人が増えたら解消されそう...？ 32
33. オンボーディング資料の充実 オンボーディングを有人で行なっているので無人化する レスポンシブデザインの基礎、DesignTokenとは、エンジニアライクなデザインデ ータの作り方など デザインシステム策定委員会を立ち上げる FEGのデザイナー能動的に設計に携わっているが、個人の依存度が高い デザインシステムのタスクフォースチームを編成していきたい 場を設けてデザインシステムの策定における議論する機会を作る 思考プロセスのシステム化 思考することも個人に依存するのでロジックツリーの種類を増やす Webアクセシビリティ強化 各プロダクトに、ページ単位のアクセシビリティ・チェック 改善事例集のドキュメントの充実 33
34. プラットフォーム事業本部・第3開発部 フロントエンドグループ デザイナー：https://dmm-corp.com/recruit/designer/970/ フロントエンドエンジニア：https://dmm-corp.com/recruit/engineer/946/ 34