後悔しないデザインシステムの始め方

Transcript

1. 後悔しない
   
   デザインシステムの始め方
   Takanori Oki
   2022/12/03 - PWA Night CONFERENCE 2022
   後悔しない
   
   デザインシステムの始め方
   Takanori Oki
   2022/12/03 - PWA Night CONFERENCE 2022
   

   View Slide

2. 自己紹介 takanorip / 大木 尊紀（Takanori Oki）
   デザインエンジニア@Ubie
   デザインしたりコード書いたりしてます。
   
   趣味は個人サイト制作、料理、筋トレ、得意料理はパスタ。
   デザインシステムとかデザインエンジニアとかの同人誌書いています。
   
   https://inutetraplus.booth.pm/
   

   View Slide

3. Ubie株式会社
   Ubie株式会社
   

   View Slide

4. View Slide

5. View Slide

6. View Slide

7. デザインシステムの定義
   
   デザインシステムを始めたくなるサイン
   
   デザインシステムを始めるときに考えたい5つのこと
   
   デザインシステムを始めないという選択肢
   
   まとめ
   目次
   

   View Slide

8. 今日は技術的な話はしません
   デザインシステムの技術に興味がある人は
   
   WEB+DB PRESS Vol.129の特集記事が
   
   おすすめです
   

   View Slide

9. View Slide

10. デザインシステムの定義
    デザインシステムの定義
    

    View Slide

11. デザインシステムの定義
    プロダクトの目的を達成するための
    
    を
    
    効率よく するシステム
    「良いデザイン」
    実装
    

    View Slide

12. デザインシステムを
    
    始めたくなるサイン
    デザインシステムを
    
    始めたくなるサイン
    

    View Slide

13. デザインシステムを始めたくなるサイン
    r UIの一貫性がなくなってきてプロダクトの認知負荷が上がってH
    r デザイナー間のコミュニケーションが大変になってきた0
    r デザイナー以外の人とのコミュニケーションが大変0
    r デザイナーごとにUIデザインが微妙に違うから開発がしにくい…
    

    View Slide

14. つまり…
    

    View Slide

15. 無秩序な状態でUI開発を進めることが
    
    プロダクト開発全体に
    
    悪影響を及ぼし始めたとき
    

    View Slide

16. デザインシステムを
    
    始めるときに考えたい
    
    5つのこと
    デザインシステムを
    
    始めるときに考えたい
    
    5つのこと
    

    View Slide

17. 1. 解決したい課題は何？
    2. デザインシステムを始めるとプロダクトが良くなる？
    3. 誰のためのデザインシステム？
    4. 運用・浸透施策は？
    5. Return On Investment はどれくらい？
    デザインシステムを始めるときに考えたい5つのこと
    

    View Slide

18. 1. 解決したい課題は何？
    2. デザインシステムを始めるとプロダクトが良くなる？
    3. 誰のためのデザインシステム？
    4. 運用・浸透施策は？
    5. Return On Investment はどれくらい？
    デザインシステムを始めるときに考えたい5つのこと
    

    View Slide

19. 解決したい課題は何？
    目の前の課題の解決に集中する
    他社のデザインシステムを目指さない
    必要なシステムはプロダクトごとに違う
    
    大きすぎる目標しかないと開発が持続しない
    

    View Slide

20. 解決したい課題は何？
    小さい課題解決を積み重ねる
    最初からデザインシステムという体をとらなくても良い
    
    場合もあるかもしれない
    

    View Slide

21. Ubieの例
    デザイントークン
    コンポーネント
    UIガイドライン
    ボイスアンドトーン
    デザイン原則、思想
    最初はデザインシステムはなく、
    
    いろいろな要素が独立して作られていった
    

    View Slide

22. Ubieの例
    デザイントークン
    コンポーネント
    UIガイドライン
    ボイスアンドトーン
    デザイン原則、思想
    

    View Slide

23. 1. 解決したい課題は何？
    2. デザインシステムを始めるとプロダクトが良くなる？
    3. 誰のためのデザインシステム？
    4. 運用・浸透施策は？
    5. Return On Investment はどれくらい？
    デザインシステムを始めるときに考えたい5つのこと
    

    View Slide

24. デザインシステムを始めるとプロダクトが良くなる？
    デザインシステムがどうユーザーに

    還元されるのか考える
    例：開発効率が向上するとリリースまでの時間がN時間早くなるので要望の多
    い機能をたくさんリリースできて嬉しい
    

    View Slide

25. デザインシステムを始めるとプロダクトが良くなる？
    デザインシステムはプロダクト
    
    品質向上のための手段
    他の解決策も常に並行して考える
    

    View Slide

26. 1. 解決したい課題は何？
    2. デザインシステムを始めるとプロダクトが良くなる？
    3. 誰のためのデザインシステム？
    4. 運用・浸透施策は？
    5. Return On Investment はどれくらい？
    デザインシステムを始めるときに考えたい5つのこと
    

    View Slide

27. 誰のためのデザインシステム？
    デザインシステムはプロダクト
    プロダクトのターゲット、ユースケース、メリットを
    
    きちんと考える
    きちんと を作る
    使われるデザインシステム
    

    View Slide

28. 誰のためのデザインシステム？
    使われないデザインシステムは
    
    すぐ腐る
    建物と同じ、
    
    継続利用とメンテナンスが何より大事
    

    View Slide

29. 1. 解決したい課題は何？
    2. デザインシステムを始めるとプロダクトが良くなる？
    3. 誰のためのデザインシステム？
    4. 運用・浸透施策は？
    5. Return On Investment はどれくらい？
    デザインシステムを始めるときに考えたい5つのこと
    

    View Slide

30. 運用・浸透施策まで考える
    デザインシステムは浸透・運用されて
    初めて効果を発揮する
    デザインシステムを始めるときに浸透・運用について考慮
    されないと作ることがゴールになってしまう
    

    View Slide

31. 運用・浸透施策まで考える
    最初から浸透・運用まで見据えて
    
    計画を立てることが大事！
    

    View Slide

32. 1. 解決したい課題は何？
    2. デザインシステムを始めるとプロダクトが良くなる？
    3. 誰のためのデザインシステム？
    4. 運用・浸透施策は？
    5. Return On Investment はどれくらい？
    デザインシステムを始めるときに考えたい5つのこと
    

    View Slide

33. ROI（Return On Investment）？
    ROI = 投資した費用に対してどれだけの効果や利益を出す
    ことができたかをあらわす指標
    プロダクト開発でROIを意識するのは当たり前
    

    View Slide

34. ROI（Return On Investment）？
    でも、デザインシステムは直接お金を生むプロダクト

    ではないのでROIを考えることを忘れがち
    ROIを考慮しないと… →
    

    View Slide

35. ROI（Return On Investment）？
    p デザインシステムにどれくらいリソースを投下すべきか議論できな`
    B リソース投下は経営判断に関わるので自分たちだけでは決められない
    p デザインシステムプロジェクトの中の優先度を考えられな`
    B ROIが高い施策の優先度を上げないと、いつまでも効果が見えないまま
    になりメンバーのモチベーション低下にもつながる
    

    View Slide

36. デザインシステムを
    
    始めないという選択肢
    デザインシステムを
    
    始めないという選択肢
    

    View Slide

37. デザインシステムを始めなくてもいいケース
    ) 特に困っていない、この先困る予定もな1
    ) プロダクトが小さい、変化が激しい
    

    View Slide

38. 現状デザインシステムがなくても特に困っていない
    ~ 明確な課題やデザインシステムを始めることで得られるReturnが明確に
    なっていない場合、作っても使われないことが多い&浸透が大r
    ~ デザインシステムがなくてもデザインのクオリティをコントロールできて
    いる場合（レビュー体制が整っている、デザイナーが実装までやってい
    る、など）はデザインシステムをつくるよりプロダクト開発にリソースま
    わしたほうが良I
    ~ 課題を解決するHowはデザインシステムだけではない
    

    View Slide

39. 現状デザインシステムがなくても特に困っていない
    課題を解決するHowは
    
    デザインシステムだけではないことを
    
    忘れない
    

    View Slide

40. プロダクトが小さい、変化が激しい
    5 デザインシステムとは「〇〇らしいデザインを構築するためのシステム」
    5 ということは「〇〇らしいデザイン」が確立していない状態では

    デザインシステムは作れなd
    v デザインシステムをつくるにはプロダクトの見た目だけでなくプロダク
    トの提供価値やターゲット、雰囲気などが確立されていることも重要
    v UIや提供価値の変化が多い場合は運用コストが高くなりすぎる
    

    View Slide

41. まとめ
    まとめ
    

    View Slide

42. まとめ
    G 小さく始め@
    G 利用者を定め@
    G プロダクトの品質向上しているか確認す@
    G 浸透・運用のことをわすれな
    G ROIを意識して運用する
    

    View Slide

43. We're hiring!
    We're hiring!
    

    View Slide

44. View Slide

45. Ubie株式会社ではエンジニアを大募集中です！
    現在募集中の職種
    u プロダクト開発エンジニW
    u ソフトウェアエンジニア(デリバリー&サクセス4
    u QA エンジニW
    u SRE（Site Reliability EngineerE
    u セキュリティエンジニア
    https://recruit.ubie.life/engineer
    

    View Slide

46. Ubie株式会社ではエンジニアを大募集中です！
    各職種の詳しい募集要項は採用サイトをご覧ください！
    カジュアル面談だけでも大歓迎なので、
    
    気軽にご連絡ください！
    https://recruit.ubie.life/engineer
    

    View Slide

47. ご清聴ありがとうございました！
    

    View Slide