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