Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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年

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

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