“なんでもやってる”文化を支える システムづくりへの挑戦

あつまるデザナレ2022 9/9にて登壇したセッション内容
・DMMデザインシステムの破壊と創造の歴史
・デザイナー学習のボトムアップの変遷
・リードデザイナーが陥ったジレンマ
・プロダクト/プラットフォームでちがう目的と課題感
・コーポレート/採用で異なるユースケース
・デザインコラボレーションで陥りがちな罠

Transcript

1. “なんでもやってる”文化を支える
   
   システムづくりへの挑戦
   - デザインしくじり先生 -
   

   View Slide

2. DMM.com VPoE Office
   
   Design Program Manager
   河西 紀明
   事業設計
   
   PM支援
   デジタル人材
   
   育成・創出
   Noriaki Kawanishi
   @norinity1103
   

   View Slide

3. View Slide

4. (著)：石垣 雅人 (共著)：河西 紀明 他 ※10月末 発行予定
   データ駆動 & デザイン共創化でアジャイルな組織づくり
   

   View Slide

5. ■ 職域を跨いだ協業の推進 ■ アウトプット中心の対話 ■ 課題解決型人材の創出
   デザインプロセスを協業化を推進
   出典書籍：『UIデザイン みんなで考え、カイゼンする。』 (共著)河西紀明, 栄前田勝太郎, 西田陽子
   

   View Slide

6. @DMM.com LLC
   

   View Slide

7. デザインのチーム協業化にむけて取り組んでいること
   ツール導入とプロセスの効率化
   デザインプロセスの組織導入
   信頼できる情報源の確立
   PF基盤を中心としたデザインシステムの作成
   デザイントークン/コンポーネント設計の再定義
   Photoshop（従来型）→ sketch （発展型）→ figma /XD（対話型）
   UXフレームワーク導入、戦術/ 体感プロトタイピングの推進
   StoryBookでの仕組み化やAbstractでのリソース管理
   PF事業部のフロントエンドチームを主導とした全社横断の土台づくり
   メンバーの学習ボトムアップ
   Dev x Desチームの共通言語づくり
   UIインベントリの実施やAtomic Design的なワークショップの実施
   チーム/個のシステム自律運用
   デザイン制作コストの解消
   失敗
   
   だらけ
   いまここ
   

   View Slide

8. 組織/プロダクトの成長と
   
   学習のバランスが大事
   

   View Slide

9. 小さな組織化によって機能横断型の人材育成へシフト
   

   View Slide

10. モブデザインなどの運用でコラボレーション
    Mob Design works
    

    View Slide

11. デザインのチーム協業化にむけて取り組んだこと
    画像引用：Atomic Design Methodology
    画像引用：Design System awesome
    
    https://github.com/alexpate/awesome-design-systems
    ■ 学習プロセスとしての Atomic Design ■ 先行事例としての Design System awesomeの活用
    

    View Slide

12. 事業部ごとにシステムの雛形をつくるムーブメント
    あくまで事業部単位での運用
    

    View Slide

13. “自分が作っている成果物が最終成果物ではない”
    

    View Slide

14. 陥りがちの罠
    経営的な観点が抜けがち
    無自覚な警察になりがち
    組織やサービスにとって適切な粒度の課題解決になっていない
    デザインシステムはどのようなビジネス価値を生み出すのか？
    
    コストをどの組織が持ち、誰が主体で運用していくのか？
    ビジネスの意思決定を阻害せずにどこまでの拡張性を許容スべきなのか？
    
    本当にすべてのメンバーが関わりやすいコミュニケーション構造になっているか？
    コーポレートや採用、プロダクトなど一度に複数の課題を解決しようとしていないか？
    
    、または段階的なロードマップは存在するか？
    

    View Slide

15. なぜ？
    なぜ？
    登録ボタンがどこにあるか分からなかった
    なぜ？
    色も場所も目立たず、分かりづらかった
    ユーザーに対し適切なデザインではなかった
    なぜ？
    登録方法が分かりずらい
    問題点
    登録に対するメリットが分かりづらい
    ■ 要求の背景や問題点の掘り下げ ■ 顧客が本当に欲しかったもの
    過ぎた効率化は課題解決型の思考を奪う
    メンバーが同一の課題に向き合い
    
    専門性を発揮する必要がある
    

    View Slide

16. 多様なメンバーの習熟度にあわせて教材を展開
    4000ページ超 ノンデザイナー向け 社内研修としても活用
    

    View Slide

17. 動画によるワークショップの非同期学習
    

    View Slide

18. View Slide

19. 参 照 ： 『 T h e W o r l d Tu r t l e 』 h t t p s : / / e n . w i k i p e d i a . o r g / w i k i / W o r l d _ Tu r t l e
    参 照 ： 『 T h e W o r l d Tu r t l e 』 h t t p s : / / e n . w i k i p e d i a . o r g / w i k i / W o r l d _ Tu r t l e
    Platform Division
    
    ・Design system
    
    ・Member base
    
    ・Payment system
    Entertainment business
    
    (e-books, videos, etc.)
    More than 58 diverse business models
    The World Turtle
    

    View Slide

20. 参 照 ： 『 T h e W o r l d Tu r t l e 』 h t t p s : / / e n . w i k i p e d i a . o r g / w i k i / W o r l d _ Tu r t l e
    参 照 ： 『 T h e W o r l d Tu r t l e 』 h t t p s : / / e n . w i k i p e d i a . o r g / w i k i / W o r l d _ Tu r t l e
    

    View Slide

21. デザインに対する期待値を明らかにする
    参照：Mark Hurst 「UXへの信頼を失っている理由」https://creativegood.com/blog/21/losing-faith-in-ux.html
    

    View Slide

22. View Slide

23. DMM inside （テックブログ） DMM Meety でのカジュアル面談
    

    View Slide

24. View Slide