“デザインシステムとは、デザインにおけるスタイル、UIコンポーネントのライブラリ、そしてその他のルールにまつわるドキュメントである。それは個人、チーム、または組織によってコードやデザインツールとして提供され、より効率的かつ統合的な形で利用される。Curtis氏の記事より引用しました。概念的には、”システム”とは”それぞれに連携し合う部分が全体を構成するもの”であり、それに習ったデザインシステムの定義として、次のようなものです。再利用が可能かつ、相互連携した部分から成るキットそれぞれにまとまり、相互連携しあったプロダクト相互に連携し、協業できる集団デザインシステムと従来のスタイルガイドの違い開発者にはなじみのあるスタイルガイドやUIライブラリなどと異なる点として、デザインシステムはプロダクトの最適化を継続的にサポートしていく”プロダクト”であると捉えられます。デザインシステムそのものが、デザイン上のリソースを整理するための”プロジェクト”というよりはむしろ、プロダクトとして捉えられる点にあります。Kravetsさんはデザインシステムを以下のようなものを個々に組み合わせたもの、もしくは以下、全てを含むものと定義しています。“テクノロジーが成熟するとき、デザインは最も重要な位置を占める。技術そのものは既にコモディティ化をしてしまうからだ。Report昨今のプロダクト開発において、主にモバイルデバイスの普及による顧客のタッチポイントの多様化や各ITサービスの技術面におけるコモディティ化により、ユーザーにとって、サービス全体としての優れたユーザー体験のニーズが今まで以上に重要となってきました。このような背景で、デザイナーの担う役割はいわゆるプロダクトのスタイリングのみに留まらず、ユーザーが体験するあらゆる経験そのものを包括的にとらえデザインすべきであると語られるようになってきました。高度化なユーザーのニーズを満たすことだけでなく、今まで以上に素早くプロダクトを市場にアウトプットしていくスピード感も同時に求められるようになってきました。デジタルプロダクトにおけるシステムデザインとデザインそれぞれの名称が似ていて混同してしまいそうですが、システムエンジニアリングの文脈で“システムデザイン”という考え方がありました。デザインの文脈においても、デザインの標準化と組織的運用の試みは以前から存在していました。Manualなどが挙げられます。そのため、デザインの歴史においても、工学的思想をデザインに取り入れたこと自体は珍しい例ではありません。デザインシステムの特徴は、上記のようなシステムデザインや伝統的なデザインのノウハウを、ウェブサイトやアプリといったデジタルプロダクトの開発における最適なデザインプロセスと思想にまで拡張したものであるといえます。デザインシステムの利用価値とは?プロダクトの拡張性を高めるプロダクトを汎用的に設計することで、デザインや開発における規模の大きな改善や成長にも柔軟な対応を可能にします。プロダクト品質の向上と安定化UIデザインやコードにおけるパターン化、規則化、コードテストを含めた開発環境を統一化することで、高品質かつ安定的なユーザー体験を可能にします。顧客の信用を勝ち得たブランドはリピーターの獲得につながることで、売り上げの安定と広告費の削減を実現します。時間と費用の削減プロダクト開発におけるUIデザイン、コードや開発環境を再利用ができるように設計することで、効率的なプロトタイピングや改善を可能にします。デザイナーと開発者の開発作業を効率化することで、費用のコスト削減を可能にします。チーム内外における連携を高めるプロダクト開発におけるガイドラインを明文化しドキュメントの管理を自動最適化することで、ひとつのプロジェクト内での引き継ぎや外部との協業を円滑にし、各部署間での協業領域を広げます。Pinが網羅的で、わかりやすくまとめています。以下はデザインシステムの代表的な例です。governmentまとめデザインシステムについての概要、利用価値、そして官民を含む各取り組みをご紹介しました。各人によってさまざまに解釈がされるデザインシステムという言葉ではありますが、それぞれの重要とする要素は、デザイナーと開発における共通要素をつくる、プロダクトの拡張的かつ組織的な運用を可能にするシステムを構築するという点で共通しているといえます。Viewsでは今後もデザインシステムに関する記事を、CIRCLの実例も交えながらお届けしていきます。