第13回_フロントエンド開発の課題をデザインシステムで解決しよう!

【第13回】フロントエンド開発の課題をデザインシステムで解決しよう!
シリーズの13回目となる今回のテーマはデザインシステムです。
最近注目されているデザインシステムですが、フロントエンド開発においても大きいメリットをもたらします。しかし、いきなり導入するにはハードルが高いと感じる方が多いと思います。国内で最多のデザインシステム実装の実績を持っていると自負しているFixelの経験から、デザインシステムの導入と運営を手軽にする方法と、デザインシステムをフロントエンド開発で活用することで工数低減をしつつもデザインの品質を上げる方法をお話しいたします。

Transcript

1. フロントエンド開発の課題を
   デザインシステムで解決しよう︕
   SIer/情シス向け「ITとデザインは仲良し︕」シリーズ 第13回
   2022/07/21
   

   View Slide

2. 2
   今⽇のスピーカの紹介
   2
   ۚ ੒఩
   3PZ,JN
   69&OHJOFFS$&0PG'JYFM *OD
   商社マン プログラマー ITコンサルタント/アーキテクト
   プロダクト
   オーナー
   アプリ開発者/システムアーキテクト
   UXデザイナー、サービスデザイナー
   グランスフィア株式会社
   （現 GMOシステムコンサル
   ティング株式会社）
   ⼤林コーポレーション（株） BEA Japan
   Oracle Japan
   EMC Japan
   Agentec株式会社 NCデザイン＆コンサルティング
   株式会社 （現NCDC株式会社）
   Fixel株式会社
   ΩϟϦΞ
   5年 10年 11年
   

   View Slide

3. 3
   今⽇のスピーカの紹介
   3
   ۚ ੒఩
   3PZ,JN
   69&OHJOFFS$&0PG'JYFM *OD
   営業 テクノロジー
   UX/UIデザイン
   経営
   5年 10年 10年
   ある程度は、俯瞰できます︕
   

   View Slide

4. 今⽇話す内容
   ① 現在のシステム開発におけるデザインの課題
   ② エンジニアの視点で⾒たデザインシステム
   ③ 量産型デザインシステムというコンセプト
   ④ デザインシステムの活⽤で変わるこれからのフロントエンド開発
   

   View Slide

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

   View Slide

6. 6
   l toCで始まったデザインへの関⼼はやがてtoBやtoEの分野にも波及
   l 使いやすく、わかりやすいはもはや「当たり前」の要件に
   l ただ機能するだけのシステムではバリューが出せない時代に
   l デザインを理由に競合に負けるケースが増えた
   l けど、予算はあまり増えない︕
   今起きていること
   

   View Slide

7. 7
   現状︓油と⽔
   IT(水）
   デザイン(油）
   同じコップに⼊れ
   ても混ざらない︕
   

   View Slide

8. 8
   l ⼈間がやることは⼤抵似ていて、歴史は繰り返される
   l デザインはITに近寄って来ている
   時間が⼤抵の問題を解決する
   https://speakerdeck.com/fixel_admin/yuan-itkonsarutantofalsemu-karajian-ta-itniokerujin-
   madefalsedezaintokorekarafalsedezain
   過去資料
   

   View Slide

9. 9
   l デザインに対する「とてもシステム的」なアプローチ
   l デザインを画⾯単位ではなく、その中の要素から再利⽤できる部品として意
   識し始める
   アトミックデザインという思想の登場︕
   https://speakerdeck.com/fixel_admin/yuan-itkonsarutantofalsemu-karajian-ta-itniokerujin-madefalsedezaintokorekarafalsedezain
   過去資料
   過去資料
   

   View Slide

10. 10
    l 「パターンランゲージ」として過去から存在していたもの
    l 2016年にデザインシステムという名称で広がり始める
    そして、デザインシステムの登場︕
    https://designsystemsrepo.com/design-systems/ https://www.clarityconf.com/
    

    View Slide

11. ②エンジニアの視点で⾒たデザインシステム
    

    View Slide

12. デジタル庁の呟きが話題に︕
    https://digital-gov.note.jp/n/n78f6a2f82e48
    

    View Slide

13. デジタル庁の⾔う、デザインシステムとは︖
    

    View Slide

14. デジタル庁が⾔う、デザインシステムのメリット
    

    View Slide

15. デジタル庁が⾔う、デザインシステムのメリット
    デザインだけではなく、
    エンジニアの観点からも
    結構魅⼒的では︖
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

20. 20
    デザインシステム vs ITシステム
    デザインシステム
    デザイントークン
    UIコンポーネント
    （デザイン＆コード）
    各種リソース
    デザインガイドライン
    デザインプリンシプル
    ITシステム
    コード
    各種リソース
    仕様書・設計書
    システムアーキテクチャ
    設計思想
    ライブラリー
    

    View Slide

21. 21
    デザインシステム vs ITシステム
    デザインシステム
    デザイントークン
    UIコンポーネント
    （デザイン＆コード）
    各種リソース
    デザインガイドライン
    デザインプリンシプル
    ITシステム
    コード
    各種リソース
    仕様書・設計書
    システムアーキテクチャ
    設計思想
    ライブラリー
    

    View Slide

22. 22
    l ウェブの仕組みは、すでに構造と⾒栄えの分離ができている
    l デザイントークンは⾒栄えの部分の定義
    l デザイントークンを変えることで、UIの⾒た⽬が変わる
    デザイントークンとは︖
    ウェブサイト
    CSS(⾒栄え)
    JS(振る舞い)
    HTML(構造)
    ウェブサイト
    CSS(⾒栄え)
    JS(振る舞い)
    HTML(構造)
    ウェブサイト
    CSS(⾒栄え)
    JS(振る舞い)
    HTML(構造)
    

    View Slide

23. 23
    l デザイントークンで⾒た⽬を分離することで、UIコンポーネントの再利⽤
    性が向上する
    l 複数のプロダクトに対して異なる⾒た⽬にカスタマイズがしやすくなる
    l 結果的に、デザインシステムの量産ができる︕
    デザイントークンを活⽤した場合のメリット
    ウェブサイト
    CSS(⾒栄え)
    JS(振る舞い)
    HTML(構造)
    ウェブサイト
    CSS(⾒栄え)
    JS(振る舞い)
    HTML(構造)
    ウェブサイト
    CSS(⾒栄え)
    JS(振る舞い)
    HTML(構造)
    UIコンポーネント(部品)
    

    View Slide

24. ③「量産型」デザインシステムというコンセプト
    VS
    ⾮公開
    

    View Slide

25. 25
    l 今までのデザインシステムは⾔わば、専⽤機
    l ⼀つのプロダクト、あるいは企業のために作成する
    l 作成に時間と⼯数がかかって、デザインシステム導⼊の壁になっている
    l しかし、贅沢を⾔えない環境が多い
    l 業務システムに対して、そこまで投資する必要があるか︖(上司の声)
    l 複数のシステムを迅速に、並⾏して開発する必要がある︕(SIer)
    l デザインに対するコストを低減したい︕（顧客・PM/PO）
    l なら、量産機で良くないか︖
    デザインシステムに対する発想の転換
    

    View Slide

26. 26
    l 業務システム向けの汎⽤的デザインシステム
    l Fixelの多年間の業務システムのデザインの経験の集約
    l FigmaのデザインファイルとUIコンポーネントのコードの両⽅を提供
    l 専⽤プラグインでデザインの知識がなくても簡単にカスタマイズ可能
    Fixel Design Systemのご紹介
    デモ
    侮るなよ
    

    View Slide

27. 27
    l デザインシステムを簡単に作成・運⽤するためのサービス
    l デザインシステムの複製とカスタマイズ機能を持っている⇒デザインシステム
    の量産が可能
    l FDS（Fixel Design System）を格納している
    UXHubのご紹介
    デモ
    https://uxhub.tokyo/
    

    View Slide

28. 28
    l ⼤事なコンセプトは、
    l デザイントークンによる、コードから⾒た⽬を分離
    l UIコンポーネントを再利⽤してUI作成
    l それができれば、他のプラットホームや開発環境にも適⽤可能
    l デザイントークンは実装技術に⾮依存する形で管理
    l 実装基盤へのコンバーターを作成して運⽤することで⾒栄えの調整が可能
    UXHubだけの話でもない
    designToken.json
    Converter
    Converter
    

    View Slide

29. ④デザインシステムの活⽤で変わる、
    これからのフロントエンド開発
    

    View Slide

30. 30
    l デザインの⼀貫性を維持
    l デザイナーとエンジニアのコラボレーションをより円滑に
    l フロントエンド開発の期間と⼯数を削減
    l デザインの成果物をコードとして管理して再利⽤できる
    l 顧客により⾼品質のプロダクトを、より低価で届けることができる
    デザインシステムの活⽤で解決するフロントエンド開発の課題
    

    View Slide

31. 31
    l 属⼈的なデザインをする時代の終焉
    l 少なくとも、システムのUIデザインの世界では終わり
    l デザインとエンジニアリングは分けて考えられない時代に
    l デザインに対するシステマチックなアプローチによって、デザインがやっと
    IT世界での市⺠権を得ることになる
    l そのきっかけがデザインシステム、その具体例の⼀つがFDSとUXHub
    これからのフロントエンド開発
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

35. MAKE DESIGN EASY
    SIer/情シスのデザインパートナー
    Q&A
    

    View Slide

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

    View Slide