デザインシステム

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

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

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

利点

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

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

起源

デザインシステムは、様々な名称で長年実践されてきました。デザインシステムは誕生以来、デザイン分野において重要な役割を果たしてきましたが、その誕生以来、多くの変化と改良が重ねられてきました。1960年代、NATOソフトウェアエンジニアリング会議（ソフトウェア開発のあり方に関する議論）において、クリストファー・アレクサンダーがシステム、あるいはパターンと呼ばれる概念を初めて提唱し、業界の注目を集めました。1970年代には、アレクサンダーはマレー・シルバースタイン、サラ・イシカワと共に『パターン・ランゲージ』という書籍を出版し、建築における相互に関連するパターンを分かりやすく民主的な方法で解説しました。これが、今日私たちが「デザインシステム」と呼ぶものの誕生につながりました。

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

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

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

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

パターン言語とデザインシステムとUIキットの違い

パターン言語では、パターンを様々な形や形式で表現できます。例えば、ユーザー名とパスワードの入力フィールドと、ログイン、登録、パスワード紛失時の回復のためのボタンを備えたログインフォームは、ボタンが緑でも紫でもパターンです。パターンは、その性質が異なっていても、類似性によってパターン間の関係（構成）が維持されるため、パターンと呼ばれます。一方、デザイン言語には、特定の色やタイポグラフィを含む一連の視覚ガイドラインが常に存在します。ほとんどのデザインシステムでは、デザイン言語の要素を（パターンを介して）必要に応じて構成できます。

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

デザイントークン

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

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

まとめ

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

参考文献

  1. ^ 「アプリ開発」 . tentackles.com . 2025年7月4日時点のオリジナルよりアーカイブ。 2025年7月31日閲覧。
  2. ^ 「デザインシステムについて知っておくべきことすべて」 2019年10月3日。
  3. ^ 「Lightning デザイン システム」。
  4. ^ 「マテリアルデザイン」 .マテリアルデザイン. 2021年4月9日閲覧。
  5. ^ 「ホームページ – Carbon Design System」。
  6. ^ 「ホームページ– Fluent Design System」。Microsoft 。
  7. ^ Perez-Cruz, Yesenia (2019).表現力豊かなデザインシステム. Jeffrey Zeldman. p. 4. ISBN 978-1-937557-85-0。
  8. ^ 「オブジェクト指向プログラムのためのパターン言語の使用」 c2.com . 2021年10月7日閲覧。
  9. ^ 「パターンの歴史」 . wiki.c2.com . 2021年10月7日閲覧。
  10. ^ 「Common Ground」 . www.mit.edu . 2021年10月7日閲覧。
  11. ^ 「Elisabeth G Todd - Publications」 . dl.acm.org . 2021年10月7日閲覧。
  12. ^ 「Yahoo! デザインパターンライブラリ」 .クリエイティブ・コモンズ. 2006年2月14日. 2021年10月7日閲覧。
  13. ^ "「なぜ BEM なのか？」を簡単に説明します / DECAF ブログ」。「なぜBEMなのか？」一言で言えば / DECAFブログ. 2015年6月24日. 2021年10月7日閲覧.
  14. ^フロスト、ブラッド (2016).アトミックデザイン. マサチューセッツ州. ISBN 978-0-9982966-0-9. OCLC  971562254 .{{cite book}}: CS1 メンテナンス: 場所の発行元が見つかりません (リンク)
  15. ^ 「デザイントークン - マテリアルデザイン3」 .マテリアルデザイン. 2024年7月24日閲覧。
  16. ^ 「スタイルディクショナリ - 一度スタイルを設定すれば、どこでも使える。クロスプラットフォームスタイルを作成するためのビルドシステム」 amzn.github.io 2024年7月24日閲覧。
  17. ^ 「デザイントークン - Spectrum」 . spectrum.adobe.com . 2024年7月24日閲覧。
  18. ^ 「デザイントークン - トークン」 . Atlassian Design System . 2024年7月24日閲覧。
  19. ^ 「Design Tokens Community Group」 . www.w3.org . 2022年6月14日. 2024年7月24日閲覧。
  20. ^ Fessenden, Therese (2021年4月11日). 「デザインシステム101」 . Nielsen Norman Group . 2023年3月30日閲覧。
「 https://en.wikipedia.org/w/index.php?title=Design_system&oldid=1310319145」より取得