デザインシステムとは何か

Design

2023.01.01

デザインシステムとは？

デザインシステムの定義

“デザインシステムとは、デザインにおけるスタイル、UIコンポーネントのライブラリ、そしてその他のルールにまつわるドキュメントである。それは個人、チーム、または組織によってコードやデザインツールとして提供され、より効率的かつ統合的な形で利用される。“
Nathan Curtis – Defining Design Systems – EightShapes

各人それぞれに定義が異なりますが、デザインシステムに関する詳細にまとめられているNathan Curtis氏の記事より引用しました。
概念的には、”システム”とは”それぞれに連携し合う部分が全体を構成するもの”であり、それに習ったデザインシステムの定義として、次のようなものです。

再利用が可能かつ、相互連携した部分から成るキット
それぞれにまとまり、相互連携しあったプロダクト
相互に連携し、協業できる集団

デザインシステムと従来のスタイルガイドの違い

開発者にはなじみのあるスタイルガイドやUIライブラリなどと異なる点として、デザインシステムはプロダクトの最適化を継続的にサポートしていく”プロダクト”であると捉えられます。
デザインシステムそのものが、デザイン上のリソースを整理するための”プロジェクト”というよりはむしろ、プロダクトとして捉えられる点にあります。

Why Design Systems Failを書いたUna Kravetsさんはデザインシステムを以下のようなものを個々に組み合わせたもの、もしくは以下、全てを含むものと定義しています。

デザインシステムのはじまり

デザインシステムが必要となった背景

“テクノロジーが成熟するとき、デザインは最も重要な位置を占める。なぜならば技術そのものは既にコモディティ化をしてしまうからだ。”
John Maeda – Desing in Tech Report

昨今のプロダクト開発において、主にモバイルデバイスの普及による顧客のタッチポイントの多様化や各ITサービスの技術面におけるコモディティ化により、ユーザーにとって、サービス全体としての優れたユーザー体験のニーズが今まで以上に重要となってきました。
このような背景で、デザイナーの担う役割はいわゆるプロダクトのスタイリングのみに留まらず、ユーザーが体験するあらゆる経験そのものを包括的にとらえデザインすべきであると語られるようになってきました。また、高度化なユーザーのニーズを満たすことだけでなく、今まで以上に素早くプロダクトを市場にアウトプットしていくスピード感も同時に求められるようになってきました。

デジタルプロダクトにおけるシステムデザインとデザイン

それぞれの名称が似ていて混同してしまいそうですが、システムエンジニアリングの文脈で“システムデザイン”という考え方がありました。また、デザインの文脈においても、デザインの標準化と組織的運用の試みは以前から存在していました。
代表的な例としては、1975年にデザイナーのRichard DanneとBruce Blackburnにより手がけられたNASA Graphics Standards Manualなどが挙げられます。
そのため、デザインの歴史においても、工学的思想をデザインに取り入れたこと自体は珍しい例ではありません。
デザインシステムの特徴は、上記のようなシステムデザインや伝統的なデザインのノウハウを、ウェブサイトやアプリといったデジタルプロダクトの開発における最適なデザインプロセスと思想にまで拡張したものであるといえます。

デザインシステムの利用価値とは？

プロダクトの拡張性を高める

プロダクトを汎用的に設計することで、デザインや開発における規模の大きな改善や成長にも柔軟な対応を可能にします。

プロダクト品質の向上と安定化

UIデザインやコードにおけるパターン化、規則化、コードテストを含めた開発環境を統一化することで、高品質かつ安定的なユーザー体験を可能にします。
顧客の信用を勝ち得たブランドはリピーターの獲得につながることで、売り上げの安定と広告費の削減を実現します。

時間と費用の削減

プロダクト開発におけるUIデザイン、コードや開発環境を再利用ができるように設計することで、効率的なプロトタイピングや改善を可能にします。
また、デザイナーと開発者の開発作業を効率化することで、費用のコスト削減を可能にします。

チーム内外における連携を高める

プロダクト開発におけるガイドラインを明文化しドキュメントの管理を自動最適化することで、ひとつのプロジェクト内での引き継ぎや外部との協業を円滑にし、各部署間での協業領域を広げます。

各企業におけるデザインシステムの事例

各企業のデザインシステムの取り組みについては、Awsome Design SystemやAdele by UX Pinが網羅的で、わかりやすくまとめています。
以下はデザインシステムの代表的な例です。

まとめ

デザインシステムについての概要、利用価値、そして官民を含む各取り組みをご紹介しました。
各人によってさまざまに解釈がされるデザインシステムという言葉ではありますが、それぞれの重要とする要素は、デザイナーと開発における共通要素をつくる、プロダクトの拡張的かつ組織的な運用を可能にするシステムを構築するという点で共通しているといえます。
VIEWSでは今後もデザインシステムに関する記事を、CIRCLの実例も交えながらお届けしていきます。

参考文献

What Is a Design System? : Forum One
Defining Design Systems – EightShapes – Medium
Design systems, style guides, pattern libraries. What the hell is the difference?
Systems design – Wikipedia
Design Systems Are a Language. Product Is a Conversation

資料ダウンロード

CIRCLの取り組みや実績をご覧頂ける資料をご用意しております。

お問い合わせ

CIRCLではデザインに関する様々なご相談を承っております。
お気軽にお問い合わせください。