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

品質と効率の向上に貢献するデザインシステムとは? 基礎知識から導入プロセスまで解説

NCDC
March 24, 2023

品質と効率の向上に貢献するデザインシステムとは? 基礎知識から導入プロセスまで解説

近年、WEBサイトやモバイルアプリ、そして業務用のシステムなど、さまざまなデジタルプロダクトで「デザインシステム」が活用されています。

デザインシステムとは、簡単にいえば、あるべきデザインを正しく迅速に実装するための「仕組み」のことであり、スタイルガイドやコード化されたUIコンポーネントの管理ツールなど複数の要素で構成されます。デザイン品質と開発・運用効率の向上に役立ち、デザイナーだけではなく、フロントエンドエンジニアやプロダクトの責任者など多くの方に関係します。

では、デザインシステムは具体的にはどのようなプロダクトで導入され、どういう効果をもたらしているのでしょうか? また、導入の際にはどのような手順でデザインシステムを設計・構築していけば良いのでしょうか?

このセミナーでは、デザインシステムに興味がある方・今後導入を考えている方に向けて、豊富な経験を持つコンサルタントが利用のメリットや導入前の検討ポイントをわかりやすく解説します。

NCDC

March 24, 2023
Tweet

More Decks by NCDC

Other Decks in Design

Transcript

  1. NCDCの事業領域 3 Business 新規事業⽴ち上げからの伴⾛ 業務改⾰やIT改⾰の⽀援 Design ユーザ視点での設計 Technology 技術による課題解決 •

    コンサルティング • 新規サービス企画 • PoC⽀援 • デザイン思考 • UX/UIデザイン • モバイル・Web先端技術 • IoT / AI / AR • クラウドインテグレーション
  2. 目次 l デザインシステムの基本 l そもそもデザインシステムとは l 導入によるメリット l デザインシステムの基本構成 l

    活用事例の紹介 l 導入時のプロセス l 大まかなプロセスと心構え l 導入プロセス l 運用時のプロセス l 導入した後の運用が難しい l 運用プロセス l まとめ 4
  3. そもそもデザインシステムとは l あるべきデザインを提供するための「ルール」や「実践方法」をま とめた『仕組み』です 6 デザインシステムとは、デジタルプロダクトの目的を 達成するために首尾一貫したルールで編成された、お 互いに関連づけられたパターンとその実践方法です。 パターンは繰り返される要素で、これらを組み合わせ てインターフェースを作成します。(中略)実践方法

    とは、どのようにパターンを作成し、記録、そして共 有するか。特に、チームで作業する時にどのように使 用するかの方法です。 『Design Systems ―デジタルプロダクトのためのデザインシステム実践ガイド』 (著:アラ・コルマトヴァ)より引用 デザインシステムとは「あるべきデザインを一貫性を 持ってユーザーに提供するための仕組み」。 デジタル庁 DesignSystem https://www.figma.com/community/file/1172530831489802410 より引用 Design System スタイルガイド UIパターンライブラリ ルール・禁止事項 デザイン原則
  4. 導入によるメリット l 一貫したUX/UIを提供できる l 見た目やルールが統一されたUIによって、操作や動線に迷うことなく質 の高いUXをユーザーへ提供することができます l デザインと開発の効率化 l デザイナーはデザインファイル、エンジニアはコード化されたUIコン

    ポーネントをそれぞれ再利用することで工数を削減し、課題解決に注 力できます l コミュニケーションコストの削減 l デザイナーとエンジニア間のQA、メンバー交代による引き継ぎ、外部 ベンダーへの説明などでかかるコストを削減できます 7
  5. デザインシステムの基本構成 8 Design Code エンジニア デザイナー 参照 Document デザイン原則、スタイルガイド、 ソースコードなどUIに関わる

    あらゆる情報。 コンポーネント、サンプル画面、 デザイントークンなどビジュア ルデザイン作成に必要な情報 コンポーネントライブラリ、 HTML、CSSなどUI実装するとき に必要な情報 ex. ex. ex.
  6. 活用事例その2:Airbnb Design Language System l 民泊プラットフォーム「Airbnb」 l 豊富な実装パターンが提供されています l どんな要求に対してもパターンが用意されて

    いるため強いデザインガバナンスが働きます l カスタマイズして実装するケースはおそらく 想定されておらず、ほぼ選ぶだけの状態です 14 「1ヶ月分のみ表示」 「本日ボタンを表示」 「リセットボタンを表示」など
  7. 大まかなプロセスと心構え 18 l 導入プロセスとしては大まかに以下の通りです l 手戻りは発生するものと割り切るのも大切です l プロジェクト中に追加で検討が必要なシーンが多いです l できるだけ準備は整えつつ心構えはしておき、まずは最小構成でリリース

    していくことが大事です デザイン原則を 決める ガイドラインを 作る コンポーネントを 作る ガイドラインで定義されてない この実装パターン、どうする? デザインは問題ないけど 挙動が想定と違うな …などなど デザインを 作る 実装する ドキュメント化 する コンポーネント を選ぶ
  8. 導入プロセス3:コンポーネントを作る(3/4) l 実装する l Storybookなどでコンポーネントのソースコードを実装します l UI実装の際に再利用できる形で作成します l ガイドラインに沿って、デザインと同じ見た目になるように実装します l

    コンポーネントの細かい挙動は参考にしたライブラリに合わせるのがおすすめです 23 デザインを 作る 実装する ドキュメン ト化する コンポーネ ントを選ぶ
  9. 導入時のポイント l 小さく早くを意識する l ある程度出来上がってから組織に展開すると使用者の学習コストが高くなり、定着しにくくなります l 小さく早く展開して使用者からフィードバックを受けることで、使用者も巻き込んでデザインシステムを構築 していくことができます l 開発言語をひとつに絞る

    l 複数の言語が使用されている場合でも、まずはどれか一つに限定することをオススメします l 管理する粒度を粗くする l 実装パターンやガイドラインを細分化すると、デザインの統一性が保たれやすくなります l 一方で開発チームの自由度が下がり読まれにくくなります l 初期段階では粗めの粒度で、プロダクトで必要になった段階で徐々に細かくしていくと構築コストと学習コス トを抑えることができます l デザインと実装の順番を決める l Atomic Design のように、小さいものから順にデザイン・実装を進めていくことをオススメします l 小さいものから始めると手戻りが少なく済みます 25
  10. 運用プロセス1:分散型 l このような場合にオススメ l デザインシステム専任チームを構築できるリソースがない l プロダクトや開発チームの規模があまり大きくない l 開発チームの提案をすぐに反映させたい、スピード重視 l

    ある開発チームがデザインシステムの修正を提案し、他の開発チームがレビューする体制です l 少ないリソースでも運用できるためスモールスタートしやすく、提案が反映されるまでのスピードが早いです l 一方、デザインの統一性を保っていくのが難しく、通常の開発に加えてデザインシステムの管理業務をするこ とになるため開発チームの負担が大きくなります 28 デザインシステム 修正提案 レビュー&マージ Design System 開発チーム [A] 提案内容チェック 開発チーム [B] 開発チーム [C] 開発チーム [D]
  11. 運用プロセス2:集約型 l このような場合にオススメ l デザインシステム管理チームを構築できるリソースがある l プロダクト規模が大きい、開発チームが多い l デザインの統一性を重視して管理していきたい、クオリティ重視 l

    管理チームのみがデザインシステムの管理を行い、各開発チームは開発に集中する体制です l デザインの統一性を保ちやすく、デザインシステムを介して多くの開発チームのサポートができます l 全プロダクトの要求を満たすように提案の積み上げ〜反映まで全て行うことになり専任チームの負担が大きく なります 29 デザインシステム 修正提案 レビュー&マージ Design System デザインシステム 管理チーム 開発チーム [A] 開発チーム [B] 開発チーム [C] 開発チーム [D]
  12. 運用プロセス3:バランス型 l このような場合にオススメ l 開発チーム数や人数に対してデザインシステム管理チームの人数が少ない l プロダクト規模が大きい、開発チームが多い l デザインシステム管理チームと開発チームで要望を集約し、管理チームがデザインシステムの管理をして いく体制です

    l 分散型よりデザインの統一性が保ちやすく、集約型よりもデザインシステム管理チームの負担は軽減されます。 l 分散型より要望が反映されるまでのスピードは遅く、集約型よりもデザインガバナンスは弱くなります 30 開発チーム [A] 開発チーム [B] 開発チーム [C] 開発チーム [D] Design System Product Backlog 修正提案・要望を 一つにまとめている デザインシステム 管理チーム 優先順や要否を 判定 修正対応 レビュー&マージ
  13. まとめ l デザインシステムは「仕組み」 l ドキュメント、デザイン、ソースコードの3要素で構成されます l デザイン原則→ガイドライン→コンポーネントの順に構築 l ドキュメントは全てのデータにアクセスできるようにします l

    導入時、まずは小さく始める l 最小構成で構築を進め、まずは使えるものを用意します l システムの拡張と共にデザインシステムを組織全体で育てていく意識が大切です l 運用時、最適な体制を考える l 組織のリソース状況を考慮した体制を整えます l 分散型、集約型、バランス型の3種類です 32