DMMでデザインシステムやってみてわかった、美味しい所・美味しくない所

Slide 1

Slide 1 text

Think! FrontEnd #7 DMMでデザインシステムやってみてわかった、  美味しい所・美味しくない所合同会社DMM.com プラットフォーム開発本部 Developer Productivity Group フロントエンドチームふるじゅん

Slide 2

Slide 2 text

ÉÇ イントロダクション Turtle Design Systems

Slide 3

Slide 3 text

Turtle デザインシステム決済やログインなど、DMMプラットフォーム全体の共通機能に対して導入を進めているデザインシステム Turtle Design Systems

Slide 4

Slide 4 text

Turtle Design Systems ProductA ProductB ProductC ProductD Turtle text タイトルコンテンツ内容読み込み中… 車輪の再発明を減らし、体験向上に時間を割ける体制へ。

Slide 5

Slide 5 text

機能ごとに独立するチーム Turtle Design Systems チームに閉じている分、おそらく開発スピードは早いほう ProductA ProductB ProductC ProductD Sprint Sprint Sprint Sprint

Slide 6

Slide 6 text

機能やチームを超えた課題 Turtle Design Systems あっちのサービスはできるのに、なんでこっちだとできないの！？重要な文章を、こんなところに書かれたら見つけられないじゃないか！サービスを超えた一貫性の課題車輪の再発明が多発している課題 Button Button Button Button Button Button Button Button Button Button

Slide 7

Slide 7 text

DMMで一貫性を担保する難しさ Turtle Design Systems

Slide 8

Slide 8 text

PF のフロントエンド横断チームが発足 Turtle Design Systems フロントエンドグループ発足最高のフロントエンドアプリケーションを最速で提供する。現在: Turtle チーム一貫した体験を高速で提供し、コンテンツを誰もが快適に楽しめるようにする。 FE FE DE FE FE DE DE

Slide 9

Slide 9 text

デザインシステムの知名度 Turtle Design Systems

Slide 10

Slide 10 text

デザインシステムの “認知度” ?? Turtle Design Systems デザインシステムって大きい組織で使うもんじゃん？デザインシステム使いたいけど、あんなに大きいものを作る余裕ないよ... デザインシステム使うとクリエイティビティが低下しちゃうよなー

Slide 11

Slide 11 text

デザインシステムの  美味しいところ・美味しくないところ Turtle Design Systems

Slide 12

Slide 12 text

美味しくないケース 0 複雑なクリエイティブが多くパターン化しにくいケースムードジャーナルアプリタロット占いアプリ Turtle Design Systems 引用：https://note.com/ajike_saito/n/ne08dfa575671

Slide 13

Slide 13 text

美味しくないケース 0 複雑なクリエイティブが多くパターン化しにくいケース Turtle Design Systems プロジェクトの目的や費用対効果に見合っているかを確認！

Slide 14

Slide 14 text

美味しくないケース '! 再利用するプロダクトが少ないケース Turtle Design Systems CouponCard DatePicker Coupon : 100% ProductA : 40% ProductB ..ProductC .. ProductD ..

Slide 15

Slide 15 text

美味しくないケース Turtle Design Systems CouponCard DatePicker ProductA : 100% ProductA : 40% ProductB ..ProductC .. ProductD .. 3つのプロダクトで利用されるか？を確認！ y 再利用するプロダクトが少ないケース

Slide 16

Slide 16 text

美味しくないケース 0! 承認者が見た目の細部にこだわりがあるケース Turtle Design Systems ここはもっと大きいほうがいいね... あ、それとここはもっと濃い色の方がいいなここのボタンって少しだけ小さくできない？ PM De

Slide 17

Slide 17 text

美味しくないケース Turtle Design Systems 成果物のレビューは何を基準に行われるか、プロジェクトの目的を明確にしておこう！ r 承認者が見た目の細部にこだわりがあるケースプロジェクトの目的がそのような細かい審美性を求められる成果物のリリースだった場合デザインシステムはソリューションとして不適切成果物レビューがどのような観点で評価されるのかを承認者としっかり認識を合わせて置く必要がある ▶︎ ▶︎ そもそもプロジェクトメンバーで要件の認識が一致していない場合原因１原因２

Slide 18

Slide 18 text

美味しくないケース Turtle Design Systems 自分たちのプロダクトやプロジェクトでどのような課題を解決したいのか明確になってケースが多い。いない

Slide 19

Slide 19 text

美味しいケース Turtle Design Systems 自分たちのプロダクトやプロジェクトでどのような課題を解決したいのか明確になっていないケースが多い。いる

Slide 20

Slide 20 text

Turtle Design Systems デザインシステムは “ソリューションの組み合わせパック” Button UI library ListItem Design Tokens Design Guideline Title × description

Slide 21

Slide 21 text

Turtle Design Systems デザインシステムは “ソリューションの組み合わせパック” Button UI library ListItem Design Tokens Design Guideline Title × description ユーザの行動を喚起するために色やパターンを効果的に使う

Slide 22

Slide 22 text

Turtle Design Systems デザインシステムは “ソリューションの組み合わせパック” Button UI library ListItem Design Tokens Design Guideline Title × description シンプルでわかりやすいコミュニケーションができたり、後の修正コストを大きく削減することができてメンテナブル

Slide 23

Slide 23 text

Turtle Design Systems デザインシステムは “ソリューションの組み合わせパック” Button UI library ListItem Design Tokens Design Guideline Title × description コンポーネントの開発やテストを短縮。多くのプロトタイプを検証できたり、  リリースを早めることができ⁨⁩る。

Slide 24

Slide 24 text

美味しいケース '# 新規開発であまりコストをかけずに市場の反応を見たい Turtle Design Systems 再利用可能な Turtle のコンポーネント開発期間もコストもカット!! プロダクト固有のローカルコンポーネント

Slide 25

Slide 25 text

Turtle Design Systems 美味しいケース 2F FEやデザイナー不足のチームでもすばやく自立的に改善を回したい BE BE FE Sprint Sprint Sprint ... infomative warning error success Alert 自走できるチームへ！

Slide 26

Slide 26 text

Turtle Design Systems 美味しいケース 59 プロダクト間のスタイルを統一したいユーザーの学習しやすいプロダクト群へ！ DMMプレミアム DMMクーポン DMMヘルプセンター

Slide 27

Slide 27 text

Turtle Design Systems 美味しいケース etc etc ... y 1ヶ月しか表示しない LP を最速で作りたh y アクセシビリティ対応が急ぎで求められていY y 既存のブランドカラーは変えずに、プロダクトのスタイルのばらつきを整えたh y 短いスプリントの中でも新規機能追加をしたh y 異なる技術スタックでも視覚的な一貫性を持たせたい

Slide 28

Slide 28 text

!# デザインシステムによってどんな未来を実現したい？ Turtle Design Systems

Slide 29

Slide 29 text

デザインツールから直接フロント実装を出力して高速プロトタイピング Turtle Design Systems Figma でデザイン Code Connect でコードを取得フロント実装の時間を短縮 Turtle Workflow

Slide 30

Slide 30 text

デザインツールから直接フロント実装を出力して高速プロトタイピング Turtle Design Systems Figma でデザイン Code Connect でコードを取得 Turtle Workflow フロント実装の時間を短縮近い将来...? 生成AIで自動出力 ?

Slide 31

Slide 31 text

本質的な業務の時間を捻出する効率化の先に。私たちは何に時間を使うべきかU Q ユーザリサーH Q ドメイン理E Q 競合と戦える魅力的な機能の追2 Q 未来への技術的な投c Q チームビルディンt Q 新しい技術のキャッチアップ Turtle Design Systems ユーザビリティテストの実施新機能の開発

Slide 32

Slide 32 text

事業・開発者・エンドユーザーにとって、課題を解決してくれる「嬉しいシステム」へ Turtle が目指す姿 Turtle Design Systems

Slide 33

Slide 33 text

デザインシステムを作ろう・使おう Turtle Design Systems

Slide 34

Slide 34 text

複数のプロダクトのスタイルに一貫性を持たせてユーザーの操作の学習を簡単でわかりやすくしたい解決したい課題の言語化 Turtle Design Systems

Slide 35

Slide 35 text

複数のプロダクトのスタイルに一貫性を持たせてユーザーの操作の学習を簡単でわかりやすくしたい複数のプロダクトで共有できるデザイントークンが欲しい！解決したい課題の言語化 ▼ Turtle Design Systems

Slide 36

Slide 36 text

Thank you ! ご清聴ありがとうございました！ ))) Turtle Design Systems X: @design_oldriver