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

Think! FrontEnd での登壇

Transcript

1. Think! FrontEnd #7 DMMでデザインシステムやってみてわかった、
 美味しい所・美味しくない所 合同会社DMM.com プラットフォーム開発本部 Developer Productivity Group フロントエンドチーム ふるじゅん
2. ÉÇ イントロダクション Turtle Design Systems
3. Turtle デザインシステム 決済やログインなど、DMMプラットフォーム全体の 共通機能に対して導入を進めているデザインシステム Turtle Design Systems
4. Turtle Design Systems ProductA ProductB ProductC ProductD Turtle text タイトル コンテンツ内容 読み込み中… 車輪の再発明を減らし、体験向上に時間を割ける体制へ。
5. 機能ごとに独立するチーム Turtle Design Systems チームに閉じている分、おそらく開発スピードは早いほう ProductA ProductB ProductC ProductD Sprint Sprint Sprint Sprint
6. 機能やチームを超えた課題 Turtle Design Systems あっちのサービスはできる のに、なんでこっちだとで きないの！？ 重要な文章を、こんなとこ ろに書かれたら見つけられ ないじゃないか！ サービスを超えた一貫性の課題 車輪の再発明が多発している課題 Button Button Button Button Button Button Button Button Button Button
7. DMMで一貫性を担保する難しさ Turtle Design Systems
8. PF のフロントエンド横断チームが発足 Turtle Design Systems フロントエンドグループ発足 最高のフロントエンドアプリケーション を最速で提供する。 現在: Turtle チーム 一貫した体験を高速で提供し、コンテン ツを誰もが快適に楽しめるようにする。 FE FE DE FE FE DE DE
9. デザインシステムの知名度 Turtle Design Systems
10. デザインシステムの “認知度” ?? Turtle Design Systems デザインシステムって大きい組織で使うもんじゃん？ デザインシステム使いたいけど、あんなに大きいものを作る余裕ないよ... デザインシステム使うとクリエイティビティが低下しちゃうよなー
11.  デザインシステムの
 美味しいところ・美味しくないところ Turtle Design Systems
12. 美味しくないケース 0 複雑なクリエイティブが多くパターン化しにくいケース ムードジャーナルアプリ タロット占いアプリ Turtle Design Systems 引用：https://note.com/ajike_saito/n/ne08dfa575671
13. 美味しくないケース 0 複雑なクリエイティブが多くパターン化しにくいケース Turtle Design Systems プロジェクトの目的や費用対効果に見合っているかを確認！
14. 美味しくないケース '! 再利用するプロダクトが少ないケース Turtle Design Systems CouponCard DatePicker Coupon : 100% ProductA : 40% ProductB ..ProductC .. ProductD ..
15. 美味しくないケース Turtle Design Systems CouponCard DatePicker ProductA : 100% ProductA : 40% ProductB ..ProductC .. ProductD .. 3つのプロダクトで利用されるか？を確認！ y 再利用するプロダクトが少ないケース
16. 美味しくないケース 0! 承認者が見た目の細部にこだわりがあるケース Turtle Design Systems ここはもっと大きいほうがいいね... あ、それとここはもっと濃い色の方がいいな ここのボタンって少しだけ小さくできない？ PM De
17. 美味しくないケース Turtle Design Systems 成果物のレビューは何を基準に行われるか、プロジェクトの目的を明確にしておこう！ r 承認者が見た目の細部にこだわりがあるケース プロジェクトの目的がそのような細 かい審美性を求められる成果物のリ リースだった場合 デザインシステムはソリューション として不適切 成果物レビューがどのような観点で 評価されるのかを承認者としっかり 認識を合わせて置く必要がある ▶︎ ▶︎ そもそもプロジェクトメンバーで要 件の認識が一致していない場合 原因１ 原因２
18. 美味しくないケース Turtle Design Systems 自分たちのプロダクトやプロジェクトでどのよ うな課題を解決したいのか明確になって ケースが多い。 いない
19. 美味しいケース Turtle Design Systems 自分たちのプロダクトやプロジェクトでどのよ うな課題を解決したいのか明確になっていない ケースが多い。 いる
20. Turtle Design Systems デザインシステムは “ソリューションの組み合わせパック” Button UI library ListItem Design Tokens Design Guideline Title × description
21. Turtle Design Systems デザインシステムは “ソリューションの組み合わせパック” Button UI library ListItem Design Tokens Design Guideline Title × description ユーザの行動を喚起するために 色やパターンを効果的に使う
22. Turtle Design Systems デザインシステムは “ソリューションの組み合わせパック” Button UI library ListItem Design Tokens Design Guideline Title × description シンプルでわかりやすいコミュニケーションができたり、 後の修正コストを大きく削減することができてメンテナブル
23. Turtle Design Systems デザインシステムは “ソリューションの組み合わせパック” Button UI library ListItem Design Tokens Design Guideline Title × description コンポーネントの開発やテストを短縮。 多くのプロトタイプを検証できたり、
 リリースを早めることができ⁨⁩る。
24. 美味しいケース '# 新規開発であまりコストをかけずに市場の反応を見たい Turtle Design Systems 再利用可能な Turtle のコンポーネント 開発期間もコストも カット!! プロダクト固有のローカルコンポーネント
25. Turtle Design Systems 美味しいケース 2F FEやデザイナー不足のチームでもすばやく自立的に改善を回したい BE BE FE Sprint Sprint Sprint ... infomative warning error success Alert 自走できるチームへ！
26. Turtle Design Systems 美味しいケース 59 プロダクト間のスタイルを統一したい ユーザーの学習しやすいプロダクト群へ！ DMMプレミアム DMMクーポン DMMヘルプセンター
27. Turtle Design Systems 美味しいケース etc etc ... y 1ヶ月しか表示しない LP を最速で作りたh y アクセシビリティ対応が急ぎで求められていY y 既存のブランドカラーは変えずに、プロダクトのスタイルのばらつきを整えたh y 短いスプリントの中でも新規機能追加をしたh y 異なる技術スタックでも視覚的な一貫性を持たせたい
28. !# デザインシステムによってどんな未来を実現したい？ Turtle Design Systems
29. デザインツールから直接フロント実装を出力して 高速プロトタイピング Turtle Design Systems Figma でデザイン Code Connect で コードを取得 フロント実装の 時間を短縮 Turtle Workflow
30. デザインツールから直接フロント実装を出力して 高速プロトタイピング Turtle Design Systems Figma でデザイン Code Connect で コードを取得 Turtle Workflow フロント実装の 時間を短縮 近い将来...? 生成AIで自動出力 ?
31. 本質的な業務の時間を捻出する 効率化の先に。私たちは何に時間を使うべきかU Q ユーザリサーH Q ドメイン理E Q 競合と戦える魅力的な機能の追2 Q 未来への技術的な投c Q チームビルディンt Q 新しい技術のキャッチアップ Turtle Design Systems ユーザビリティテストの実施 新機能の開発
32. 事業・開発者・エンドユーザーにとって、 課題を解決してくれる「嬉しいシステム」へ Turtle が目指す姿 Turtle Design Systems
33. デザインシステムを作ろう・使おう Turtle Design Systems
34. 複数のプロダクトのスタイルに一貫性を持たせて ユーザーの操作の学習を簡単でわかりやすくしたい 解決したい課題の言語化 Turtle Design Systems
35. 複数のプロダクトのスタイルに一貫性を持たせて ユーザーの操作の学習を簡単でわかりやすくしたい 複数のプロダクトで共有できるデザイントークンが欲しい！ 解決したい課題の言語化 ▼ Turtle Design Systems
36. Thank you ! ご清聴ありがとうございました！ ))) Turtle Design Systems X: @design_oldriver