超簡単！デザインシステム導入の手引き

最近サービス開発におけるデザインの課題に対する有効な解決手段として注目されるデザインシステム。自社にも導入したいが社内で理解が得られない。または、導入する手順が分からない。導入はしたとしても運用が大変そう！そのような課題に直面している全ての方のためのデザインシステム導入と運用を簡単にするための手法と手順を説明します。日本で最も多いデザインシステム実績を持つと自負しているFixel株式会社の方法論を事例を交えて惜しみなく説明します。

- このような方におすすめです。
- デザインシステムを活用したいがどこから手をつけるべきかわからない
- デザインシステムの有用性を社内に理解させたいが、うまく伝えられない
- デザインシステム導入と活用に関する他社の事例が知りたい
- 一度デザインした部品やコードを再利用しやすいよう資産として管理したい
- プロダクトやサービスを作っているが、デザインに不安がある
- フロントエンドエンジニアのみでも最低限のUIデザインができる体制が欲しい

Transcript

1. SIer/情シス向け「ITとデザインは仲良し︕」シリーズ 第16回
   2022/12/2
   超簡単︕
   デザインシステム導⼊の⼿引き
   

   View Slide

2. 2
   l デザイン専⾨学校卒業後、DTPデザイン会社で誌⾯デザインに従事
   l デザイナーからセールスへ転⾝
   l ICT系サービスのセールス兼マーケティングを５年務め、その後Fixelへ⼊社
   今⽇のスピーカの紹介
   Ѵ ୓
   5BLV "TBIJ
   4BMFT%JSFDUPSPG'JYFM *OD
   #sales #design #marketing
   

   View Slide

3. 今⽇話す内容
   ① 現在のシステム開発におけるデザインの課題
   ② さまざまな企業で導⼊が進んでいるデザインシステム
   I. デザインシステムとは︖
   ③ デザインシステムの運⽤が社内に浸透しない︕理解されない︕
   ④ デザインシステムを社内で導⼊するための第⼀歩
   ⑤ デモ
   ⑥ まとめ
   ⑦ 質疑応答
   

   View Slide

4. ①現在のシステム開発におけるデザインの課題
   

   View Slide

5. 5
   機能は優れているシステムやソフトウェアなのに
   残念なプロダクトが存在するのはなぜか︖
   「⾒た⽬が垢抜けていない」
   「わかりにくい」
   「統⼀感がなく迷いを与えてしまう」
   これらの多くは「エンジニアが感覚で画⾯を作っている」ことに
   根本原因がある。
   ①現在のシステム開発におけるデザインの課題
   

   View Slide

6. 6
   ①現在のシステム開発におけるデザインの課題
   ボタンや⼊⼒フォームなどの部品を空いているスペースに配置しただけの画⾯は使いづ
   らくて当然。
   そこに「使いやすさ」や「作業効率」の考慮はないことが多い。
   余白があるから
   ここに
   置いてしまおう
   

   View Slide

7. 7
   開発には予算に限りがありデザインにコストを割り当てられないことの⽅が多い。
   限られたリソースでベストを尽くそうとした結果、デザインの優先度は低いものになっ
   てしまう。
   これまでの開発の傾向
   動作に問題が
   なく正確に動く
   使いやすい、
   デザインが今⾵
   ＞
   予算潤沢
   予算を
   割きにくい
   ①現在のシステム開発におけるデザインの課題
   

   View Slide

8. 8
   スペックで差がつきにくいようになり、「使いやすさ」や「快適な操作性」などの
   付加価値に注⽬するようになったため
   使いづらい、垢抜けないデザインのプロダクトは関⼼を集めることができなくなった。
   これからの開発が向かう⽅向
   機能が多すぎて迷いを与える 本当に必要な機能を端的に表現
   ①現在のシステム開発におけるデザインの課題
   

   View Slide

9. 9
   l UX/UIの視点を持って開発に取り組めるデザイナー⼈材がいない
   l ⼀貫性のあるデザインを実現する必要性が社内で理解されづらい
   l デザインに対する投資・予算が確保できない
   これらの課題を抱えていても及第点以上のデザインを実装できる仕組みが
   ⽇本でもやっと認知されはじめた
   それがデザインシステムという概念
   デザイナーをアサインできるプロジェクトばかりではない
   ①現在のシステム開発におけるデザインの課題
   

   View Slide

10. デザインシステムとは
    

    View Slide

11. デジタル庁サイトより デザインシステムとは︖
    

    View Slide

12. 12
    • デザインと開発を効率化
    • 素早く改善サイクルを回す
    • ⼀貫性を担保し、使いやすくする
    • 開発チームの円滑なコミュニケーション
    https://www.digital.go.jp/policies/servicedesign/designsystem/
    https://www.figma.com/community/file/1172530831489802410
    参照元
    ⽬的
    デジタル庁のデザインシステム
    

    View Slide

13. 13
    デザインシステムの構成要素
    デザインシステム
    デザイントークン
    UIコンポーネント
    （デザイン＆コード）
    各種リソース
    Design System Gallery
    デザインガイドライン
    デザインプリンシプル
    

    View Slide

14. 14
    デザインシステムの構成要素
    デザインシステム
    デザイントークン
    UIコンポーネント
    （デザイン＆コード）
    各種リソース
    デザインガイドライン
    デザインプリンシプル
    

    View Slide

15. 15
    デザインシステムの構成要素
    デザインシステム
    デザイントークン
    UIコンポーネント
    （デザイン＆コード）
    各種リソース
    デザインガイドライン
    デザインプリンシプル
    

    View Slide

16. 16
    デザインシステムの構成要素
    デザインシステム
    デザイントークン
    UIコンポーネント
    （デザイン＆コード）
    各種リソース
    デザインガイドライン
    デザインプリンシプル
    

    View Slide

17. ②さまざまな企業で導⼊が進んでいるデザインシステム
    

    View Slide

18. 18
    l 業務の効率化
    l 別チームとの共通⾔語
    l デザインの最新化
    ②さまざまな企業で導⼊が進んでいるデザインシステム
    https://blog.cybozu.io/entry/2022/03/16/141935
    https://note.com/cybozu_design/n/n4ef1959c7249
    参照元
    ⽬的
    

    View Slide

19. 19
    https://cocoda.design/emimita/p/p2cd3df64ff9b
    https://design.visional.inc/archives/5702
    ②さまざまな企業で導⼊が進んでいるデザインシステム
    課題解決のためにUI Kitの整備から始め、デザイン原則やコンポーネントの
    定義をまとめて、2020年の3⽉にデザインシステム「Polyphony」が完成。
    デザインシステム
    「Polyphony」
    Planning
    タスクの分解と⾒える化を⾏う時間を設けた
    Retrospective
    PolyphonyTime
    振り返りの時間を設け開発プロセスを改善
    課題 HRMOSのデザイナーは、プロダクトごとにアサインされているため、プロダクトごとにデ
    ザインや管理⽅法が属⼈化し、アウトプットの品質にバラつきが⽣まれていた。
    チームで意⾒を出し合う時間を定例化した
    1
    2
    3
    参照元
    

    View Slide

20. 20
    ②さまざまな企業で導⼊が進んでいるデザインシステム
    すべての⼈によりよい体験を届けるための
    デザインシステム
    クラウド⼈事労務ソフト
    参照元
    https://smarthr.design/
    https://shanaiho.smarthr.co.jp/n/n769801b7e388
    

    View Slide

21. デザインに磨きがかかることだけではなく、
    エンジニアにとっても⼤きな恩恵がある。この考え⽅は多数派になりつつある。
    

    View Slide

22. デザインシステムの導⼊はこのような課題に効果を発揮します
    σβΠϯ΍ίʔυͷར༻ํ๏ʹର͢Δ ໌֬ͳํ਑ͱϓϩηεΛཱ֬
    ͍ͨ͠ɻ
    明確な⽅針がない
    ຖճϓϩδΣΫτ୯ҐͰ৽͘͠σβΠϯΛ࡞͍ͬͯͯɺ σβΠϯ඼
    ࣭΍ݟͨ໨͕όϥόϥɻ
    品質を担保したい
    αʔϏεͷ࢓༷มߋ࣌ʹ σβΠϯͱ࣮૷ͷमਖ਼ʹɺ࣌ؒͱख͕͔ؒ
    ͔Γࠔ͍ͬͯΔɻ
    効率が悪い
    վળɾ֦ுʹΑͬͯ Ұ؏ͨ͠UX͕ଛͳΘΕ͍ͯΔɻ
    ⼀貫性のないUX
    ෳ਺γεςϜͰ࢖ΘΕ͍ͯΔ σβΠϯΛޮՌతʹ؅ཧ͢Δํ๏ɾ
    ϧʔϧ͕ͳ͍ɻ
    効果的な管理⽅法
    γεςϜɺΞϓϦͷσβΠϯΛ౷Ұͯ͠ɺαʔϏεͷϒϥϯυײΛ
    ڧΊ͍͖͍ͯͨɻ
    伝わらないブランド感
    

    View Slide

23. そんなに便利なら使わない⼿はない︕
    けど尻込みする理由も・・・
    

    View Slide

24. ③デザインシステムの導⼊が社内に浸透しない︕理解されない︕
    デザインシステムへの理解が進まない理由
    

    View Slide

25. 25
    ③デザインシステムの運⽤が社内に浸透しない︕理解されない︕
    初期構築が⼤変
    ⼤量なコンポーネントがある中から必要/不要の仕分け作業に終わりが⾒えない
    

    View Slide

26. 26
    ③デザインシステムの運⽤が社内に浸透しない︕理解されない︕
    苦労して作っても、現場に馴染むかわからない
    

    View Slide

27. 27
    ③デザインシステムの運⽤が社内に浸透しない︕理解されない︕
    更新する⼿間を理解して、資産として管理していけるかわからない
    

    View Slide

28. ④デザインシステムを社内で導⼊するための第⼀歩
    

    View Slide

29. 29
    l 新規プロダクトを進めながら
    デザインシステムを作る
    l 作業量が増える
    l プロダクト開発の速度に影響
    l 既存のシステムの
    デザインシステムを作る
    l かけた費⽤に対する価値を得
    るには時間がかかる
    ④デザインシステムを社内で導⼊するための第⼀歩
    内製ではじめたい スピード重視で始めたい
    l 専⾨家に依頼する
    l デザイン改善の依頼→Fixelなら
    デザインシステムで納品︕
    l デザインシステムの構築依頼で
    も対応可能︕
    

    View Slide

30. 30
    現実的なスモールスタートの⼿法として
    デザイントークンから始める取り組みを過去の開催回で紹介しています。
    https://speakerdeck.com/fixel_admin/qing-sisuxiang-ke-it-todezainhazhong-liang-si-sirizu-di-7-hui
    内製ではじめることを⽬指す場合にこちらも有効です。
    ④デザインシステムを社内で導⼊するための第⼀歩
    

    View Slide

31. 31
    しかしデザインシステムを作った経験がある企業は少数
    ⼿探りで始めるため、トライ＆エラーを繰り返し仕上げていくことが⼀般的
    SIer ベンダー 製造業
    医療 ⾦融 保険
    ④デザインシステムを社内で導⼊するための第⼀歩
    さまざまな業種でデザインシステムを活⽤しUIや⼀貫性を改善する取り組みが⾏われています
    バックオフィス 建築・不動産 ⾃動⾞
    

    View Slide

32. 32
    デザイン改善の納品形態としてデザインシステムを活⽤してきた実績多数
    複数の⼤⼿SIer様からも、効率化、標準化の観点からオーダーをいただいています。
    これは、今後の開発プロセスにおいて活⽤しないことが致命的になっていくことを⽰しています。
    リスクモンスター様
    オンライン学習システム
    カインズホーム様
    コンテンツ配信管理システム
    コクヨ様
    ファイル転送サービス
    Before
    After
    After
    Before
    Before
    After
    

    View Slide

33. 33
    Fixelのデザインシステムの作成・運⽤⽀援サービス
    • デザインシステムカスタマイズ
    • デザインシステム公開
    • デザインテーマ変更機能
    • コメントなどフィードバック
    • 公開・編集などの権限管理
    • バージョン管理・履歴管理
    UXHub
    デザインシステムプラットフォーム
    • 必要なガイドライン、UI部品が揃
    っている
    • 複製&カスタマイズすることで新
    しいデザインシステムを瞬時作
    成可能
    FDS（ Fixel Design System ）
    業務システム向け汎用的
    デザインシステムのテンプレート
    • 多数の実績からのノウハウ
    • UXHubとFDSを有効活用し、費用
    低減・工期短縮
    プロフェッショナルサービス
    デザインシステム作成・運用支援
    ＋ ＋
    https://fixel.co.jp/lp/design-system/
    https://uxhub.tokyo
    

    View Slide

34. 34
    デモの概要
    Figmaを使いFDSのコンポー
    ネントを流⽤して好みの⾊に
    変更
    UXHubのFigma連携でデザ
    イントークンを反映し、更
    新されたコードを取得
    更新されたコードをローカル
    のプロジェクトに反映する
    1 2 3
    

    View Slide

35. 35
    l Figma上
    1. FDSを開き、コンポーネントやサンプルを確認する。
    2. Design TokensのPluginを開き、⾊の変化を⾏う。
    3. 更新されたDesign TokensをPluginからダウンロードする。
    l UXHub上
    1. FDSのコンポーネント及び現状のDesign Tokensを確認する。
    2. PluginからダウンロードしたDesign TokensをFigma連携でUXHubに反映して、変化
    を確認する。
    3. 更新されたコードをUXHubからダウンロードする。
    l ローカルのプロジェクト
    1. ローカルのプロジェクトでサンプル画⾯を開き、更新されたコードを差し替える。
    2. Figma上で変更した⾊をローカルで作業しているプロジェクトに反映したことを確認す
    る。
    デモで⾏った作業
    

    View Slide

36. 本⽇のまとめ
    

    View Slide

37. 37
    l ⾝の丈にあった取り組みの中で標準化・効率化の恩恵を享受したい
    l UIコンポーネントやデザイントークンの整理から始めてみよう
    l デザインシステムの構築・運⽤を内製で進めたい
    l 新規サービスデザインと並⾏してデザインシステムを作る 現実的なプロジェクト
    l 既存のデザインを棚卸しをしてデザインシステム化する ⼤掛かりなプロジェクト
    l デザインシステムの構築・運⽤でプロの⼿を借りたい
    l プロジェクトのデザイン⽀援、成果物をデザインシステムで納品 ⼀粒で⼆度美味しい
    ʲ·ͱΊʳデザインシステム導⼊の⼿引き
    

    View Slide

38. 最後に
    l デザインシステムに興味があるデザイナーを募集しております。
    l 業務システムのUX/UIデザインに興味があるデザイナーを募集しています。
    l 周りに興味のありそうな⽅に、
    是⾮ご紹介ください。
    l 申し込みは弊社のウェブサイトから
    お願いします︕
    https://fixel.co.jp/blog/recruit-20210929/
    

    View Slide

39. MAKE DESIGN EASY
    SIer/情シスのデザインパートナー
    ありがとうございました︕
    アンケート記⼊のお願い
    

    View Slide