近年、デジタル製品の開発・運用の現場では、デザインシステムという考え方が非常に注目を集めています。
おそらく、この記事を閲覧している皆さんも国や企業が公開している事例を目にしたことがあるのではないでしょうか。
デザインシステムとは
「デザインシステム」とは、デザインや開発のときに使う「ルール」や「ガイドライン」、「コンポーネント（部品）」をまとめたドキュメントを指します。
「色の使い方のルール」や「ボタンの形のガイドライン」、「アイコンやヘッダーのコンポーネント」など、開発チーム全体で同じデザインシステムを使うことで、作業のやりとりがスムーズになり、一貫したプロダクトの開発が可能となり品質の向上が期待されます。
目的
デザインシステムが主に活用される目的は、以下の通りです。
1. ブランドの統一
デザインシステムの中では、サービスやプロダクトの理念の定義や、それに対する価値観、考え方なども含みます。
例: Shopify 「Shopify experience values」https://polaris.shopify.com/foundations/experience-values
ブランドを統一するための基本的な考え方からドキュメント化することで、その後のデザイン・開発においてもブランドイメージが統一されるように運用することが可能となります。
2. チームの生産性向上
デザインシステムがない場合、チームメンバーやステークホルダー間での意思疎通が煩雑となり、開発速度に影響が発生します。
開発チームは、同じシステムを使用することで、時間の節約やエラーの回避、生産性の向上が期待できます。また、同じコンポーネント（部品）を使い回すことで、作業効率が高まり、品質の向上にもつながります。
3. コンポーネント（部品）の再利用を促すこと
生産性向上にも関わりますが、既存のコンポーネントの再利用が可能となるため、プロダクトの安定した開発や既存のコンポーネントへの改善が計画しやすくなります。
また、運用により肥大化や破綻しやすいデザインを長期的に運用することが可能となります。
デザインシステムを構成する具体的な要素
デザインシステムには、主に以下の要素で構成されます。
ガイドライン
デザインや開発の基本方針をまとめたドキュメントです。ブランドの色、文字、スペース、アイコンなどを記載します。
コンポーネント
UI要素（ボタン、フォーム、ナビゲーションなど）を再利用するための部品です。同じデザインとコードを保証するので、デザインや開発の作業がスムーズに進みます。
パターンライブラリ
複数のコンポーネントを組み合わせて、一貫性のある解決策を提供するものです。ナビゲーションやボタンを内包するヘッダーや、画像、見出し、テキストなどを内包するカードなどが該当します。
ツール
デザインシステムを効率的に運用するためのツールやプラグインです。これによって、デザインやコードの共有や管理が容易になります。
デザインシステムの導入事例
デザインシステムは、多くの企業やプロジェクトで活用されています。
Google: Material Design（マテリアルデザイン）
Googleが開発したデザインシステムで、Androidアプリを中心に幅広いプロダクトで使用されています。コンポーネントやアイコン、ガイドラインなどが提供されており、一貫性のあるデザインを実現しています。
URL : Material Design
IBM: Carbon Design System
IBMが開発したデザインシステムで、IBMのプロダクトやサービスに適用されています。再利用可能なコンポーネントやデザインガイドライン、開発者向けのリソースが提供されています。
デジタル庁 : デザインシステム
日本のデジタル庁が公開しているデザインシステムです。府省庁のウェブサイトやウェブサービスへの適用を前提としたものですが、Figmaでのデザインデータも公開されておりその作り方などは参考になります。
URL：デジタル庁 : デザインシステム
SmartHR デザインシステム : Smart HR
クラウド人事労務ソフトを開発している SmartHR社が公開しているデザインシステムです。基本原則を始め、基本的な要素やコンポーネントまで公開されています。
GMOペパボ株式会社 : Pepabo Design
GMOペパボ株式会社のデザインシステムのドキュメントをまとめているWebサイトです。
おそらく内部的に合意を図るために作成したものであろう資料も垣間見え参考になります。
URL: Pepabo Design
クックパッド : Apron
クックパッドが公開しているデザインシステムです。構築にあたっての背景はこちらから参照できます。
URL : Apron
デザインシステムの運用と更新
デザインシステムは運用を前提として作成します。注意すべきポイントを説明します。
変更履歴の管理
デザインシステムの変更履歴を整理し、メンバーが追跡しやすいようにすることが大切です。そうすることで、過去の変更内容を簡単に確認でき、デザインシステムがどのように進化してきたかを把握することができます。
バージョン管理
デザインシステムのバージョンを整理することで、各プロジェクトで使用されているデザインシステムのバージョンを簡単に把握できます。また、新しいバージョンへのアップデートもスムーズに行えます。
コミュニケーション
デザインシステムを更新する際には、関連するメンバー（デザイナーや開発者）とのコミュニケーションが重要です。変更内容や新しいコンポーネント、更新スケジュールなどを共有し、理解を深めることが必要です。
ドキュメントの整備
デザインシステムのドキュメントは、随時更新して整備することが重要です。これにより、新しいメンバーやプロジェクトでデザインシステムを利用する際に、適切なガイドラインや情報が提供できます。
フィードバックの収集
デザインシステムを利用しているメンバーからフィードバックを収集し、デザインシステムの改善に役立てることが重要です。フィードバックは、デザインシステムが実際のプロジェクトでどのように機能しているかを理解するために役立ちます。このような情報は、デザインシステムの運用と更新において、大変有益です。
まとめ
デザインシステムは、デザインと開発の効率を向上し、一貫性のある体験を提供するための非常に重要なツールです。
導入事例では大規模な組織やサービスにおけるデザインシステムをご紹介しましたが、小規模な組織やサービスでも導入を進める例が増えてきています。
策定と運用には非常に労力がかかりますが、適切に運用されることで、デザインシステムはプロダクトの品質とチームの生産性を大幅に向上させることができます。
弊社は受託制作会社として、汎用性の高いデザインシステムを目指して日々取り組んでいます。デザインシステムに関するご相談がございましたら、お気軽にこちらまでお問い合わせください。
