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

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年

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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