Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

Fixel Inc.
July 22, 2022

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

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

Fixel Inc.

July 22, 2022
Tweet

More Decks by Fixel Inc.

Other Decks in Design

Transcript

  1. 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年
  2. 3 今⽇のスピーカの紹介 3 ۚ ੒఩ 3PZ,JN 69&OHJOFFS$&0PG'JYFM *OD 営業 テクノロジー

    UX/UIデザイン 経営 5年 10年 10年 ある程度は、俯瞰できます︕
  3. 20 デザインシステム vs ITシステム デザインシステム デザイントークン UIコンポーネント (デザイン&コード) 各種リソース デザインガイドライン

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

    デザインプリンシプル ITシステム コード 各種リソース 仕様書・設計書 システムアーキテクチャ 設計思想 ライブラリー
  5. 25 l 今までのデザインシステムは⾔わば、専⽤機 l ⼀つのプロダクト、あるいは企業のために作成する l 作成に時間と⼯数がかかって、デザインシステム導⼊の壁になっている l しかし、贅沢を⾔えない環境が多い l

    業務システムに対して、そこまで投資する必要があるか︖(上司の声) l 複数のシステムを迅速に、並⾏して開発する必要がある︕(SIer) l デザインに対するコストを低減したい︕(顧客・PM/PO) l なら、量産機で良くないか︖ デザインシステムに対する発想の転換
  6. 28 l ⼤事なコンセプトは、 l デザイントークンによる、コードから⾒た⽬を分離 l UIコンポーネントを再利⽤してUI作成 l それができれば、他のプラットホームや開発環境にも適⽤可能 l

    デザイントークンは実装技術に⾮依存する形で管理 l 実装基盤へのコンバーターを作成して運⽤することで⾒栄えの調整が可能 UXHubだけの話でもない designToken.json Converter Converter
  7. 30 l デザインの⼀貫性を維持 l デザイナーとエンジニアのコラボレーションをより円滑に l フロントエンド開発の期間と⼯数を削減 l デザインの成果物をコードとして管理して再利⽤できる l

    顧客により⾼品質のプロダクトを、より低価で届けることができる デザインシステムの活⽤で解決するフロントエンド開発の課題
  8. 32 Fixelのデザインシステムの作成・運⽤⽀援サービス • デザインシステム公開 • デザインテーマ変更機能 • コメントなどフィードバック • 公開・編集などの権限管理

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

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