デザインシステム

デザインシステムは、組織内でのデジタル製品の開発を導く包括的な標準、ドキュメント、再利用可能なコンポーネントのセットです。これは、デザイナーと開発者にとって唯一の真実の情報源として機能し、プロジェクト間の一貫性と効率性を保証します。デザインシステムは、パターンとコンポーネントのライブラリ、フォント、色、間隔、コンポーネントの寸法、配置に関するスタイルガイド、デザイン言語、コード化されたコンポーネント、ブランド言語、ドキュメントで構成されます。デザインシステムは、モバイルアプリケーション^[1]やWebサイトなどのデジタル製品の設計と開発に役立ちます。

デザインシステムは、デザイン、エンジニアリング、製品チーム間の共通理解を確立するためのリファレンスとして機能します。この理解により、製品の設計と構築に関与するさまざまなチーム間のスムーズなコミュニケーションとコラボレーションが保証され、最終的には一貫したユーザーエクスペリエンスが実現します。^[2]

注目すべきデザインシステムとしては、Lightning Design System（Salesforce社）^[3]、 Material Design（Google社）^[4]、 Carbon Design System（IBM社）^[5]、Fluent Design System（Microsoft社）^{[6]などがあります。}

デザイン システムの利点は次のとおりです。

• 設計から生産ワークフローまでを合理化します。
• 部門横断的なチーム間およびチーム内で統一された言語を作成します。
• 再利用可能なコンポーネントと共有された理論により、ビルドが高速化されます。
• より統合されたユーザー エクスペリエンスと一貫したデザイン言語を通じて、より優れた製品を実現します。
• 設計および技術的負債の削減により、メンテナンス性とスケーラビリティが向上します。
• 共通の問題に取り組むことで製品チームの集中力が高まり、チームはユーザーのニーズを解決することに集中できるようになります。^[7]

デザインシステムは、さまざまな名称で長い間実践されてきました。デザインシステムは、作成されて以来、デザイン分野で重要な役割を果たしてきましたが、その誕生以来、多くの変更と改善が行われてきました。1960年代にシステムまたはパターンと呼ばれていたものの使用は、NATOソフトウェアエンジニアリング会議（ソフトウェアの開発方法に関する議論）でChristopher Alexanderによって初めて言及され、業界の注目を集めました。1970年代に、彼はMurray Silverstein、Sara Ishikawaとともに「A Pattern Language」という本を出版し、建築における相互接続されたパターンを簡単かつ民主的な方法で議論し、今日「デザインシステム」として知られるものを誕生させました。

1980年代後半には、このツールをソフトウェア開発に利用するためにデジタル分野への関心が再び高まり^[8]、ソフトウェアデザインパターンの概念が生まれました。パターンは共同編集環境で維持するのが最適であるため、これが最初のウィキの発明につながり、後にウィキペディア自体の発明につながりました。定期的な会議が開催され、当時でもパターンはユーザーインターフェイスの構築に使用されていました。^[9]この高まりは90年代まで続き、ジェニファー・ティドウェルの研究で10年が終わりました。^[10] 科学的な関心は2000年代まで続きました。^[11]

UIデザインのためのパターン言語に対する主流の関心は、 2006年にYahoo!デザインパターンライブラリがオープンし、同時にYahoo!ユーザーインターフェースライブラリ（略してYUIライブラリ）が導入されたことで再び高まりました^[12]。同時導入は、UIライブラリが提供してきた単なるコンポーネントよりも体系的な設計を可能にすることを目的としていました。

2014 年の Google のマテリアル デザインは、同社が「デザイン言語」と呼んだ最初のものでした (以前のバージョンは「Holo テーマ」と呼ばれていました)。すぐに、他社もそれに追随しました。

大規模Webプロジェクトの技術的な課題は、2010年代に体系的なアプローチの発明につながりました。最も有名なのはBEM ^[13]とAtomic Designです。Atomic Design ^[14]に関する本は、2016年以来「デザインシステム」という用語の普及に貢献しました。この本は、将来を見据えて簡単に更新できるコンポーネントベースの方法でデジタル製品のレイアウトを設計するアプローチについて説明しています。

パターン言語では、パターンをさまざまな形や形式で存在させることができます。たとえば、ユーザー名とパスワードの入力フィールドと、ログイン、登録、パスワード紛失時の回復のボタンがあるログイン フォームは、ボタンが緑でも紫でもパターンです。パターンがパターンと呼ばれるのは、その正確な性質は異なる可能性があるからですが、類似性により、パターン間の関係 (構成と呼ばれる) は同じままになります。ただし、デザイン言語には、特定の色と書体を含む視覚的なガイドラインのセットが常にあります。ほとんどのデザイン システムでは、デザイン言語の要素を (パターンを介して) 必要に応じて構成できます。

UI キットは単なる UI コンポーネントのセットであり、その使用方法については明確なルールは規定されていません。

デザイントークンは、色、タイポグラフィ設定、間隔値、その他のデザイン決定などの特定のデザイン属性を格納する名前付き変数です。デザイントークンは、ブランド全体またはシステム全体にわたるこれらの属性の唯一の真実のソースとして機能し、大規模なデザインシステムに抽象化、柔軟性、スケーラビリティ、一貫性などの幅広い利点を提供します。デザイントークンは、基本的にコードで表現されたデザイン決定であり、デザイナーと開発者のコ​​ラボレーションも改善します。デザイントークンの概念は、GoogleのMaterial Design、^[15]、 AmazonのStyle Dictionary、^[16]、 AdobeのSpectrum ^[17]、Atlassian Design System ^{[18]など、さまざまな有名なデザインシステムに存在します。}

W3Cデザイントークンコミュニティグループは、デザイントークンのオープンスタンダードを提供するために取り組んでいます。^[19]

デザインシステムは、デザイン作業を合理化し最適化するのに役立つさまざまなコンポーネント、パターン、スタイル、ガイドラインで構成されています。デザインシステムを作成する際に考慮すべき重要な要素には、プロジェクトを再現する範囲と能力、リソースと時間の可用性などがあります。デザインシステムが適切に実装および維持されていない場合、混乱が生じ、デザインプロセスの効率が低下します。ただし、適切に実装されていれば、作業が簡素化され、最終製品の一貫性が高まり、デザイナーが複雑なUXの課題に対処できるようになります。^[20]

• デザインシステムとは何か？ ロバート・ゴーリー著
• Marco Suarez、Jina Anne、Katie Sylor-Miller、Diana Mounter、Roy Stanfield 著『デザイン システム ハンドブック』 (InVision による Design Better)
• 投稿（フランス語）：なぜデザインシステムを構築するのですか？
• デザインパターン
• 設計システムの例