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

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

Fixel Inc.
December 02, 2022

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

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

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

Fixel Inc.

December 02, 2022
Tweet

More Decks by Fixel Inc.

Other Decks in Design

Transcript

  1. 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 参照元
  2. デザインシステムの導⼊はこのような課題に効果を発揮します σβΠϯ΍ίʔυͷར༻ํ๏ʹର͢Δ ໌֬ͳํ਑ͱϓϩηεΛཱ֬ ͍ͨ͠ɻ 明確な⽅針がない ຖճϓϩδΣΫτ୯ҐͰ৽͘͠σβΠϯΛ࡞͍ͬͯͯɺ σβΠϯ඼ ࣭΍ݟͨ໨͕όϥόϥɻ 品質を担保したい αʔϏεͷ࢓༷มߋ࣌ʹ

    σβΠϯͱ࣮૷ͷमਖ਼ʹɺ࣌ؒͱख͕͔ؒ ͔Γࠔ͍ͬͯΔɻ 効率が悪い վળɾ֦ுʹΑͬͯ Ұ؏ͨ͠UX͕ଛͳΘΕ͍ͯΔɻ ⼀貫性のないUX ෳ਺γεςϜͰ࢖ΘΕ͍ͯΔ σβΠϯΛޮՌతʹ؅ཧ͢Δํ๏ɾ ϧʔϧ͕ͳ͍ɻ 効果的な管理⽅法 γεςϜɺΞϓϦͷσβΠϯΛ౷Ұͯ͠ɺαʔϏεͷϒϥϯυײΛ ڧΊ͍͖͍ͯͨɻ 伝わらないブランド感
  3. 29 l 新規プロダクトを進めながら デザインシステムを作る l 作業量が増える l プロダクト開発の速度に影響 l 既存のシステムの

    デザインシステムを作る l かけた費⽤に対する価値を得 るには時間がかかる ④デザインシステムを社内で導⼊するための第⼀歩 内製ではじめたい スピード重視で始めたい l 専⾨家に依頼する l デザイン改善の依頼→Fixelなら デザインシステムで納品︕ l デザインシステムの構築依頼で も対応可能︕
  4. 33 Fixelのデザインシステムの作成・運⽤⽀援サービス • デザインシステムカスタマイズ • デザインシステム公開 • デザインテーマ変更機能 • コメントなどフィードバック

    • 公開・編集などの権限管理 • バージョン管理・履歴管理 UXHub デザインシステムプラットフォーム • 必要なガイドライン、UI部品が揃 っている • 複製&カスタマイズすることで新 しいデザインシステムを瞬時作 成可能 FDS( Fixel Design System ) 業務システム向け汎用的 デザインシステムのテンプレート • 多数の実績からのノウハウ • UXHubとFDSを有効活用し、費用 低減・工期短縮 プロフェッショナルサービス デザインシステム作成・運用支援 + + https://fixel.co.jp/lp/design-system/ https://uxhub.tokyo
  5. 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上で変更した⾊をローカルで作業しているプロジェクトに反映したことを確認す る。 デモで⾏った作業
  6. 37 l ⾝の丈にあった取り組みの中で標準化・効率化の恩恵を享受したい l UIコンポーネントやデザイントークンの整理から始めてみよう l デザインシステムの構築・運⽤を内製で進めたい l 新規サービスデザインと並⾏してデザインシステムを作る 現実的なプロジェクト

    l 既存のデザインを棚卸しをしてデザインシステム化する ⼤掛かりなプロジェクト l デザインシステムの構築・運⽤でプロの⼿を借りたい l プロジェクトのデザイン⽀援、成果物をデザインシステムで納品 ⼀粒で⼆度美味しい ʲ·ͱΊʳデザインシステム導⼊の⼿引き