Tweet
Tweet

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

会社紹介 4

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

職種別比率 - エンジニア 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

Slide 10

Slide 10 text

平均年齢 : 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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

実際のFEGの動き 24

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

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