デザインシステム構築の進め方 基本から実践まで、具体的な手順を徹底解説

デザイン品質と開発・運用効率の向上に役立つものとして「デザインシステム」が活用されています。当社にも、デザインシステムを構築したいというご相談をお寄せいただく機会が増えてきました。

デザインシステムとは、以下のようなさまざまな要素で構成される「仕組み」のことです。
・プロダクトに込めた想いや考え方、目指すべき姿を明文化したデザイン原則
・色やタイポグラフィなど、全体のスタイルに関わる要素を定義したガイドライン
・UIコンポーネントライブラリ
・デザインシステムを管理・運用ルール　など

この「仕組み」は、デザイナーだけでなく、フロントエンジニアやプロダクトの責任者など多くの方に関係します。
デザインシステムを用いることで、デザインの規則やルールなどを一部のデザイナーに属人化させることなく、明確化して共有できるため、適切に導入すれば工数削減や品質向上に繋がります。

一方で、デザインシステムはさまざまな要素を含み、ステークホルダーも多いため、全体像を把握して具体的な導入プロセスや構築手順、導入による効果を想像するのが難しいという側面があります。

本セミナーでは、豊富な経験を持つエンジニアがデザインシステム構築の具体的な進め方についてデモを交えながら順を追ってご説明します。UIデザインの品質・実装効率の向上策を考えている方やデザインシステムに興味がある方はぜひご参加ください。

こんな方におすすめ
・企業やデジタルプロダクトのデザイン管理を担う部門の方
・WEBサイト、モバイルアプリ、業務用システム等の開発・運用の責任者
・デザインやフロントエンド実装の品質・効率の向上施策を求めている方

Transcript

1. デザインシステム構築の進め方 基本から実践まで、具体的な手順を徹底解説 2024 / 10 / 03 NCDC株式会社
2. 自己紹介 2 NCDCにはエンジニアとして入社。フロントエンドから インフラまで、一通りの開発業務に精通しており、幅 広い技術領域で活動。デザイナーと協力してプロジェ クトを進めることが得意で、円滑なコミュニケーション を通じてデザインと技術の融合を実現する分野に強 みを持つ。 エンジニア 大塚 達也
3. Business 新規事業立ち上げからの伴走 業務改革やIT改革の支援 Design ユーザ視点での設計 Technology 技術による課題解決 Innovation Consultant デザイナーやエンジニアと協力して、 新規サービス立案の支援や新規性の高 いシステムの要件定義を行う。プロ ジェクト全体のマネジメント役も担う。 UX/UI designer UIデザインはもちろん、デザ イン思考やUXデザインのフ レームワークを用いて上流工 程（サービス全体のUX設計） を担う。 Engineer モバイルやWeb、クラウド、 IoTやAIなど、新しい領域の技 術に特化。つくるだけでなく 技術コンサルティングができ る知見を持つ者も多数在籍。 ⚫ AWS サービスパートナー ⚫ AWS Lambdaパートナー ⚫ 内製化支援推進AWSパートナー NCDCの事業領域（Tech×Design×Biz 一体でお客さまを支援） ⚫ 3領域でサービスを展開 ⚫ 各領域のスペシャリスト を社内に揃える体制 3
4. 目次 ⚫ デザインシステムとは ⚫ デザインシステム構築の事前準備 ⚫ デザインシステム構築の進め方 ⚫ デモ ⚫ 事例紹介 ⚫ 質疑応答 4
5. デザインシステムとは
6. そもそもデザインシステムとは ⚫ あるべきデザインを提供するための「ルール」や「実践方法」をまとめた 『仕組み』である 6 デザインシステムとは、デジタルプロダクトの目的を達成 するために首尾一貫したルールで編成された、お互いに 関連づけられたパターンとその実践方法です。パターンは 繰り返される要素で、これらを組み合わせてインターフェー スを作成します。（中略）実践方法とは、どのようにパター ンを作成し、記録、そして共有するか。特に、チームで作業 する時にどのように使用するかの方法です。 『Design Systems ―デジタルプロダクトのためのデザインシステム実践ガイド』 （著：アラ・コルマトヴァ）より引用 デザインシステムとは「あるべきデザインを一貫性を持っ てユーザーに提供するための仕組み」。 デジタル庁 DesignSystem https://www.figma.com/community/file/1172530831489802410 より引用 Design System スタイルガイド UIパターンライブラリ ルール・禁止事項 デザイン原則
7. 導入によるメリット ⚫ 一貫したUX/UIを提供できる ⚫ 見た目やルールが統一されたUIによって、操作や動線に迷うことなく質の高 いUXをユーザーへ提供することができます ⚫ デザインと開発の効率化 ⚫ デザイナーはデザインファイル、エンジニアはコード化されたUIコンポーネン トをそれぞれ再利用することで工数の削減につながる ⚫ コミュニケーションコストの削減 ⚫ デザイナーとエンジニア間のQA、メンバー交代による引き継ぎ、外部ベン ダーへの説明などでかかるコストを削減できます 7
8. デザインシステムの基本構成 8 Design Code エンジニア デザイナー 参照 Document デザイン原則、スタイルガイド、 ソースコードなどUIに関わる あらゆる情報。 コンポーネント、サンプル画面、デ ザイントークンなどビジュアルデザ イン作成に必要な情報 コンポーネントライブラリ、HTML、 CSSなどUI実装するときに必要な 情報 ex. ex. ex.
9. 活用事例：SmartHR Design System ⚫ クラウド人事労務ソフト「SmartHR」 ⚫ コンポーネントからアクセシビリティまで幅広く提供されています ⚫ サービスビジョンが明確なので企業ブランディングの観点でもお手本のような事例です 9
10. デザインシステム導入の判断軸 ⚫ 全てのプロダクトに対して有効とは限らない 10 導入を推奨 現時点では必須ではない プロダクト 規模が大きいプロダクト 複数プロダクトで一貫したデザインの 提供が必要 PoCなど技術的実現性検証を目的として いるプロダクト チーム体制 メンバーが多い、アサインの変更が 頻発する メンバーは基本的に固定である 品質 UIの一貫性が重要である UIの一貫性が重要でない 開発スピード 機能追加・変更時のリリース速度に 改善が必要である 機能追加・変更は発生しない 発生するが、リリース速度は重要でない
11. デザインシステム構築の全体流れ 11 事前準備 デザイン 原則 スタイル ガイド UIコンポー ネント 継続した 改善
12. デザインシステム構築の事前準備
13. デザインシステム構築の事前準備 ⚫ 目的の明確化と現状把握 ⚫ ロードマップの策定 ⚫ ステークホルダーとの連携 ⚫ ツールの導入 13 事前準備
14. 目的の明確化と現状把握 ⚫ 重要性 ⚫ ギャップを認識し、アクションの検討に繋げる ⚫ チーム全体の方向性の統一 ⚫ 目的の策定方法 ⚫ デザインシステムを構築する理由となった課題から考える 14 事前準備
15. 目的の明確化と現状把握からアクションを抽出する場合の例 ⚫ 課題: 自社プロダクトのUI作成に工数がとても掛かっている ⚫ 目的: 工数削減 ⚫ 現状: プロダクトごとに、UIを0から作成している ⚫ アクション: スタイルガイドの整備・UIコンポーネントのパッケージ化 15 事前準備
16. ロードマップの策定 ⚫ ロードマップは、フェーズごとに明確な目標を設定し、順序立てて進行す る計画 事前準備
17. ステークホルダーとの連携 ⚫ プロダクトオーナー(PO) / プロジェクトマネージャー(PM) ⚫ デザインシステムの方向性や、優先順位を管理する ⚫ デザイナー ⚫ デザイン原則の検討や、スタイルガイドの策定 ⚫ エンジニア ⚫ デザインファイルを基に、再利用可能なコンポーネントを開発 17 事前準備
18. ツールの導入 18 Figma Storybook Chromatic Zeroheight GitHub Miro デザインツール ドキュメント管理 コード管理 UIコンポーネント管理 ホワイトボードツール デザイン 共用 開発 事前準備
19. デザインシステム構築の進め方
20. デザインシステム構築の全体流れ 20 事前準備 デザイン 原則 スタイル ガイド UIコンポー ネント 継続した 改善
21. デザイン原則について ⚫ プロダクトの核となる「らしさ」や「重要なことはなにか？」を定義・明文化したも の 21 引用：Smart HR デザイン原則
22. リサーチ ワークショップ フィードバックと修正 ドキュメント化 デザイン原則構築の進め方(例) 全体 デザイナー主体で 進める ブレインストーミング を行い、アイデアを 出す 企業のブランド イメージを確認する プロダクトの目標や ユーザー体験につなが るかなどを確認する デザイン原則
23. デザイン原則構築のポイント ⚫ 具体的すぎていないか ⚫ 「ボタンは右上に配置する」のような具体的なデザイン指示は適切でない ⚫ 数は適切か ⚫ 3から5個程度が推奨される ⚫ 現実的に実現可能か ⚫ リソースや、スケジュールを鑑みる 23 デザイン原則
24. デザインシステム構築の全体流れ 24 事前準備 デザイン 原則 スタイル ガイド UIコンポー ネント 継続した 改善
25. スタイルガイドについて ⚫ 色や、タイポグラフィなど全体のスタイルに関わるドキュメント、ルール ⚫ 一貫性のあるデザインを実現する 25 引用: Ameba スタイルガイド
26. スタイルガイドについて 26 引用: Ameba スタイルガイド
27. スタイルガイドについて 27 引用: Ameba スタイルガイド
28. スタイルガイドの主な構成要素 ⚫ 基本要素 ⚫ 色、タイポグラフィ、隙間、影など ⚫ UIコンポーネントライブラリ ⚫ ルール ⚫ アクセシビリティ 28 スタイルガイド
29. リサーチ 基本要素定義 アクセシビリティ対応 随時ドキュメント化 スタイルガイド構築の進め方(例) デザイナー デザイン原則や、 既存資産を確認する UIコンポーネント作成(後述) 開発要素は 含まれない 公共サービスでは 特に重要 それぞれのルール も定義する スタイルガイド
30. デザインシステム構築の全体流れ 30 事前準備 デザイン 原則 スタイル ガイド UIコンポー ネント 継続した 改善
31. UIコンポーネントライブラリ ⚫ ボタンや、入力欄などの機能を持つ再利用可能な要素の集合 31 引用: Shopify UIコンポーネントライブラリ
32. 必要なUIコンポーネントの特定 UIコンポーネントの整理 公開 UIコンポーネントライブラリ構築の進め方(例) デザイナー 開発・テスト Reactなどライブラリを用いて、 効率的にコンポーネント開発 を進める エンジニア 基本要素の適用や、 バリエーションの作成を行う 関係者が閲覧できるようにする UIコンポーネントライブラリ デザイン 開発
33. UIコンポーネントライブラリ構築のポイント ⚫ コンポーネントにバリエーションを持たせ、再利用性を高める ⚫ デザインと開発に一貫性を持たせ、保守性を高める ⚫ 複数プロダクトに導入する場合は、パッケージ化を検討する 33 UIコンポーネントライブラリ
34. デザインシステム構築の全体流れ 34 事前準備 デザイン 原則 スタイル ガイド UIコンポー ネント 継続した 改善
35. 継続的な改善 ⚫ 構築したら終わりではない ⚫ プロダクトのスケール、環境の変化に対応するため、継続的な改善が 必要 ⚫ 運用ルールの策定が重要 ⚫ 例えば、「コンポーネント追加に周知・承認を必要とする」など 35 継続的な改善
36. デザインシステム構築の全体流れ 36 事前準備 デザイン 原則 スタイルガイ ド UIコンポー ネント 継続した改 善
37. 構築全体のポイント 37 小さく始めよう 進め方は多様 密な コミュニケーション
38. デモ - UIコンポーネント作成からドキュメント化まで
39. 事例紹介
40. NCDCの事例 ⚫ 弊社独自のデザインシステムの一部(作成途中) 40
41. NCDCではデザインシステム構築を一貫してご支援しています ⚫ 事前準備から構築まで支援 ⚫ 管理からデザインや開発まで、全体の支援を弊社内で完結できます ⚫ To-be像の検討・策定 ⚫ プロダクトや組織体制などの特徴をヒアリングしてTo-be像を検討、アクションプラン の抽出のご支援が可能です ⚫ 内製化支援 ⚫ 構築する人と運用する人が全く別だと、形骸化につながる可能性があります 弊社デザイナー・エンジニアがフォローしながら進めるようなご支援が可能です 41
42. 質疑応答
43. 質疑応答 ⚫ Q: デザインシステムはレスポンシブ対応にも効果的でしょうか？ ⚫ はい、効果的です。ガイドラインの策定、UIコンポーネントの制御を通して対 応します。 43 引用：Smart HR