今日、多くの企業や組織が「デザインシステム」という概念を取り入れ、プロダクトやサービスのデザインプロセスを一元管理し、開発とデザインをスムーズにつなげようと試みています。デザインシステムとは、一般的にはUIコンポーネントやスタイルガイド、アクセシビリティガイドラインといった実用的な資料やツールの集合体と理解されがちです。しかし、デザインシステムが果たしている役割はそれにとどまりません。デザインシステムがどのように運用されるか、その背景にある「デザイン」という概念をどのように捉えるかで、組織や社会に与える影響は大きく変わってきます。「デザインシステムのデザイン」とは何かを考えながら、デザインシステムの意味論について整理していきます。各社で定義されているデザインシステムの位置付け一般的に公開されているデザインシステムとしては、Googleが主導するMaterial Design、AppleのHuman Interface Guidelines、IBMのCarbon Design System、Salesforceの*Lightning Design System(SLDS2)*などが有名です。これらのデザインシステムは、サイトやドキュメントの序文で「ユーザーに一貫した体験を提供するため」「開発者とデザイナーの協調を円滑にするため」といった目的を掲げ、ビジュアルスタイルやガイドライン、コードなどをオープンに提示しています。実際にそれらの序文・概要文を読むと、次のようなキーワードが頻出します。一貫性:統一されたルールやガイドラインによって、一貫したユーザー体験を実現することが基本的な目標となる。効率性:デザイナーと開発者が共通言語を持ち、既存のコンポーネントを再利用することで、重複作業を減らし、より速く高品質なアウトプットを出すことを目指す。スケーラビリティ:大規模な組織やプロダクト群でも、一貫性を保ちながら規模を拡張していけるようにする。ドキュメントを公開し、コンポーネントをモジュール化することで、誰でもアクセスでき、必要に応じて拡張・変更を行う。しかし、このようなデザインシステムの序文・概要文が強調するのは、いわゆるUIガイドラインや再利用可能なコンポーネントの側面が多く、「組織全体がどのようにデザインを捉え、それを運用しているのか」といった点はあまり深く語られることはありません。ダン・モールはデザインシステムそのものの位置付けを成熟度として段階づけ(図1)していますが、それぞれがもつデザインシステムが担う役割を明らかにすることが、本記事の「デザインシステムのデザインはなにか」という問いの答えに近づくことになると考えます。デザインシステムとは、単なるビジュアルスタイルやコンポーネントの集合だけでなく、組織や社会の「デザインプロセスそのものの運用方法」を可視化・共有し、継続的に改善していくための仕組みまで段階的に含むことできる概念であるという仮説です。これは多層的な概念であるという状態自体が、デザインシステムの捉えづらさを、デザインシステムの活動に関わらない他者にとって、捉えづらいままにしている現状があると考えます。さらにデザインシステムがもつ「デザイン」「システム」それぞれの言葉の曖昧性によって、この役割を定義する難しさを抱えていますが、本記事では「デザイン」に焦点を当てた整理をしていきます。デザインシステムを複数の解釈で捉えることのできる背景デジタルプロダクトの領域においてはデザインシステムが複数の企業に普及される前に、BootstrapなどのUIライブラリやフレームワークがありました。Web2.0の変化による標準的な共通パーツを再利用し、プロダクトを素早く、品質を保ちながら開発することが主目的だったため、パターン化された解決策の集積でした。(Lamine & Cheng, 2022)一方でオープンなリソースとして提供されていたものを、実際のサービスやプロダクトに適用する際に、組織のブランドやビジネス要求などの組織特有性(organization-specific)(Lamine & Cheng, 2022)取り込む必要があります。これは吉山(2006)が述べる集団と世代を超えてがもつ伝達・継承できる物質的な生活、社会的な行動、知的な精神活動を行う共通のルールに近い文化的側面を付与することであると考えます。また厄介な問題(Rittel & Webber,1972)に取り組むためのデザイン思考が、近代の事業・プロダクト開発の曖昧性や変化に対応できる特性を活用されたように、ライブラリやフレームの目的をそのまま転回するだけでなく、システムとして広義に拡張していく必然性があったと考えられます。Material Designを例にとるとGoogleが提供するプロダクト間での適応だけでなく、プラットフォームにのっとった、Google以外の企業や開発者が利用するにあたってのニーズをもとに拡張していくオープンソースなコミュニティを含んだものに発展していることが挙げられます。(Lamine & Cheng, 2022)デザインシステムのデザインとはなにか本記事のタイトルにもある通りデザインシステムの中に含まれる「デザイン」の解釈を紐解いていく必要がありますが、様々な解釈による「デザイン」の捉え方は以下の記事を参照いただければと思います。https://designservicecanvas.yumemi.co.jp/palatte/designerly-ways-of-knowingデザインシステムへの接続点としては、上の記事でも挙げられているマンズィーニが、複数のコンテクストが複雑に絡まった現代社会に対するイノベーションを起こすために、人々の協働によって進めるべき社会的な活動として定義します。その中でデザインとは望ましい機能や意味を実現するために物事がどのようにあるべきかを扱う文化であり、慣習であると説いています。(Manzini,2015)サイモン、ブキャナン、そしてマンズィーニの主張には、それぞれの焦点や文脈の違いがありながらも、デザインを単なる見た目の美しさや機能配置として捉えるのではなく、複雑な問題に対して望ましい変化を創出し、社会や組織をより良い状態へ導くための包括的なプロセスや協働活動として位置づけている点が共通していると考えられます。デザインシステムの「デザイン」を考える際に、繰り返し起こる問題を解決してきた共通の解決策の集合体であるデザインパターン(Alexander et al., 1977)を集積するだけでなく、それを運用する人々が、組織におけるコミュニケーション構造や意思決定の仕方を再認識し、状況に応じて最適化していける可塑性のある枠組みを提供しているかどうかが一つの指標になるといえます。アラ・コルマトヴァはパターンの集合体そのものを超えて「パターンを作り出し、捉え、共有し、進化させるための技術と実践」を提供するものとしてデザインシステムを提唱しています。(Kholmatova, 2017)これはデザインの「複雑な問題に対して、より望ましい状態を生み出すための協働行為」と広く定義する見方とも重なります。UIの一貫性や開発効率の向上といった効果は、その行為の一部にすぎず、むしろ組織や社会が抱える曖昧な課題を共有し、試行錯誤のプロセスを通して新しい関係性や可能性を築く活動こそが、その背後にあるデザインの本質だと考えられます。すなわち、デザインシステムの「デザイン」とは、「UIの見栄えや機能性を整える行為や生成物」を越えて、「組織が何をどう変えていくか」「どのように社会に関与し、新たな価値を生み出していくか」という問いを映し出す鏡であり、それらの問いへの回答を紡ぎ出す場所としての意味を帯びているともいえるのです。単なるツールの提供にとどまらず、多様な視点と境界を横断しながら、共通言語を生み出し、学習の機会を創造し、意思決定や実装の手続きそのものをアップデートしていく。そのように考えると、デザインシステムは、組織や社会が内包する課題を可視化し、新たなビジョンやコミュニケーションを通して「望ましい変化」をデザインしていくための総合的なプラットフォームとして機能し得るのです。参考文献Alexander C, Ishikawa S, Silverstein M (1977) A Pattern Language: Towns, Buildings, Construction. Oxford University Press, New YorkBuchanan, R. (1992). Wicked Problems in Design Thinking. Design Issues, 8(2), 5–21. https://doi.org/10.2307/1511637Kholmatova A (2017) Design Systems: A practical guide to creating design languages for digital products. Smashing MagazineMall D. (2024). デザインシステムの育て方―継続的な進化と改善のためのアプローチ (長谷川恭久, Trans.). ビー・エヌ・エヌ新社. (Original work published 2023)Manzini, E., & Coad, R. (2015). Design, When Everybody Designs: An Introduction to Design for Social Innovation. Boston, MA: MIT Press.Rittel, H.W.J.,(1973). Webber, M.M. Dilemmas in a general theory of planning. Policy Sci 4, 155–169 https://doi.org/10.1007/BF01405730吉山, 青翔. (2005). 文明と文化の概念上の非一致性, 四日市大学環境情報論集, 9 巻, 2 号, p. 73-83.公開されているデザインシステムと組織内での位置付けデザインシステム名会社名URL位置付け・序文のテキストMaterial DesignGooglehttps://material.io/“Material Design is an adaptable system of guidelines, components, and tools that support the best practices of user interface design.”Human Interface Guidelines (HIG)Applehttps://developer.apple.com/design/human-interface-guidelines/“The HIG contains guidance and best practices that can help you design a great experience for any Apple platform.”Carbon Design SystemIBMhttps://carbondesignsystem.com/“Carbon is IBM’s open source design system for products and digital experiences. With the IBM Design Language as its foundation, the system consists of working code, design tools and resources, human interface guidelines, and a vibrant community of contributors.”Salesforce Lightning Design System (SLDS2)Salesforcehttps://www.lightningdesignsystem.com/“Salesforce Lightning Design System 2 (SLDS 2 beta), is a complete design framework that helps you create consistent, accessible, and scalable user interfaces across its applications and platforms. SLDS 2 provides you with tools, components, and guidelines to make apps that match Salesforce's design principles and visual language.”Atlassian Design SystemAtlassianhttps://atlassian.design/“Use Atlassian’s end-to-end design language to create simple, intuitive, and beautiful experiences.”SpectrumAdobehttps://spectrum.adobe.com/“Spectrum provides components and tools to help product teams work more efficiently, and to make Adobe’s applications more cohesive.”PolarisShopifyhttps://polaris.shopify.com/“Polaris is the design system for the Shopify admin, providing foundational design guidance for creating good merchant experiences.”GestaltPinteresthttps://gestalt.pinterest.systems/“Gestalt is Pinterest’s design system. We’re here to help you build experiences that inspire people to create the life they love.”PrimerGitHubhttps://primer.style/“Primer is a set of guidelines, principles, and patterns for designing and building UI at GitHub.”GOV.UK Design Systemイギリス政府https://design-system.service.gov.uk/“Use this design system to make government services consistent with GOV.UK. Learn from the research and experience of other service teams and avoid repeating work that’s already been done.”U.S. Web Design System (USWDS)アメリカ合衆国 (GSA)https://designsystem.digital.gov/“A design system for the federal government. We make it easier to build accessible, mobile-friendly government websites.”LINE Design SystemLINEhttps://designsystem.line.me/“LINE Design System is an integrated set of guidelines for components, interaction methods, and other aspects that contribute to LINE’s design and user experience.”Cloudscape Design SystemAmazon Web Serviceshttps://cloudscape.design/“Cloudscape is an open source design system to create web applications. It was built for and is used by Amazon Web Services (AWS) products and services.”Goldman Sachs Design SystemGoldman Sachs(※現在一般公開されていません)“The Goldman Sachs Design System is customized for institutional finance and allows teams to create digital products that put clients first.”PasteTwiliohttps://paste.twilio.design/“Paste is a design system used to build accessible, cohesive, and high-quality customer experiences at Twilio.”Dell Design SystemDellhttps://www.delldesignsystem.com/“A unified design language to support Dell’s digital universe. Ensuring design at Dell is accessible, inclusive, and useful.”Nord Design SystemNordhealthhttps://nordhealth.design/“Design, build, and ship coherent experiences with Nordhealth’s design system.”SmartHR Design SystemSmartHRhttps://smarthr.design/「SmartHR Design Systemは、すべての人によりよい体験を届けるためのデザインシステムです。SmartHRに関わる人はどなたでも利用・参加できます。」Spindleサイバーエージェント(Ameba)https://spindle.ameba.design/「デザインシステムSpindle(スピンドル)は“Amebaらしさ”を一貫してユーザーに届けるための仕組みです。“Amebaらしさ”がユーザーに届き、共感が生まれることで、サービスの信頼へとつながります。」