コンテンツにスキップ

デザインシステム

出典: フリー百科事典『ウィキペディア（Wikipedia）』

デザインシステムとは、組織内でデジタルプロダクトを開発する際の指針となる、標準やドキュメント、再利用可能なコンポーネントを包括的にまとめた仕組みのことである。フォントやカラー、間隔などのスタイルガイド、各種パターン、コード化されたコンポーネント、ブランドに関わる言語仕様などを一元的に管理し、デザイナーや開発者間の一貫性と効率を高める「単一の参照元（Single source of truth）」として機能する[1][2]。

デザインシステムは、デザイン・エンジニアリング・プロダクトの各チーム間で共通認識を持つためのリファレンスとしても活用される。この共通認識によって、プロダクト開発におけるコミュニケーションとコラボレーションが円滑化し、最終的にユーザー体験の一貫性が高まる[2]。

著名なデザインシステムにはLightning Design System (Salesforce)[3]、 Material Design (Google)[4]、Carbon Design System (IBM)[5]、Fluent Design System (Microsoft)[6]などがあり、外部に公開されている。日本ではSmartHR Design Systemが知られている。

利点

[編集]

デザインシステムを導入する利点としては以下が挙げられる[7]。

  • ワークフローの効率化 デザインから実装へのプロセスがスムーズになり、開発スピードが向上する。
  • 共通言語の確立 チーム内外の関係者が同じ言葉とルールを使うため、誤解や手戻りが減少する。
  • 再利用可能なコンポーネント 一度定義したコンポーネントやスタイルを使い回すことで、開発コストを削減し、生産性を高める。
  • ユーザー体験の向上 一貫性のある見た目や操作感を提供できるため、ユーザーは製品を使いやすく感じる。
  • 保守性と拡張性の改善 デザインや技術的負債を最小限に抑え、長期的なスケールに耐えられるプロダクトを構築しやすくなる。

起源

[編集]

デザインシステムは、現在の様式に至るまでさまざまな呼称のもとで実践されてきた。

1960年代にシステムまたはパターンと呼ばれていたものを使用することは、クリストファー・アレクサンダーがNATO Software Engineering Conference で初めて言及し（ソフトウェアがどのように開発されるべきかについての議論）、業界の注目を集めた。その後、1970年代にはクリストファー・アレグザンダー、マレー・シルバーステイン、サラ・イシカワらが建築におけるパターンの相互関係をわかりやすく体系化した著書『A Pattern Language』を出版し、現在の「デザインシステム」の源流にあたる概念が形成された。

1980年代後半には、ソフトウェア開発においてもこの概念が再び注目され[8]、ソフトウェアデザインパターンという考え方が生まれた。パターンが最もよく管理されるのは共同編集環境であることから、世界初のWikiが考案され、後にWikipediaの誕生へとつながったとされる。また当時から、ユーザーインターフェースの構築にもパターンが用いられていた[9]。1990年代にはジェニファー・ティドウェル（Jennifer Tidwell）の研究[10]などもあり、この流れは続いた。学術的な関心も2000年代以降も継続して見られた[11]。

パターン言語が設計においてメインストリームの関心を再び集めた大きなきっかけとしては、米Yahoo!のDesign Pattern LibraryとYahoo! User Interface Library (YUI)が2006年に同時公開されたことが挙げられる[12]。同時公開には、単なるコンポーネントの提供にとどまらず、より体系的なデザインを可能にするという狙いがあった。

2014年には、Googleが以前の「Holo Theme」に代わる形でMaterial Designをリリースし、これを初めて自社で「デザイン言語（design language）」と位置づけた。それに続く形で、他社も同様のアプローチを取るようになった。

また2010年代には、大規模Webプロジェクトの技術的課題への対応として、BEM[13]やAtomic Designなどの体系的な手法が登場した。特にブラッド・フロストの著書『Atomic Design』[14]は2016年以降「デザインシステム」という用語が普及するきっかけとなり、デジタルプロダクトのレイアウトをコンポーネントベースで設計する将来性の高いアプローチを広めた。

デザイントークン

[編集]

デザイントークン'とは、色・タイポグラフィ設定・余白の値などのデザイン上の属性を表す名前付きの変数である。デザインシステム全体やブランド全体でこれらの値を一元管理し、抽象化、柔軟性、拡張性、一貫性といった多くのメリットをもたらす。またデザイナーと開発者のコラボレーションを促進する役割も果たす。デザイントークンは、事実上「コードで表現されたデザイン上の決定」であり、GoogleのMaterial Design[15]、AdobeのSpectrum[16]、Atlassian Design System[17]など、多くのデザインシステムで採用されている。

なお、W3C Design Tokens Community Groupではデザイントークンの仕様の規格化に向けた取り組みが進められている[18]。

脚注

[編集]
  1. ^ “Design System - App Design and UX guidelines to build top mobile apps” (英語). GoodBarber. 2023年10月9日閲覧。
  2. ^ a b Hacq, Audrey (2020年2月11日). “Everything you need to know about Design Systems” (英語). Medium. 2025年2月9日閲覧。
  3. ^ “Lightning Design System”. www.lightningdesignsystem.com. 2025年2月9日閲覧。
  4. ^ “Material Design” (英語). Material Design. 2021年4月9日閲覧。
  5. ^ “Carbon Design System”. www.carbondesignsystem.com. 2025年2月9日閲覧。
  6. ^ “Fluent 2 Design System” (英語). Fluent 2 Design System. 2025年2月9日閲覧。
  7. ^ Perez-Cruz, Yesenia (2019). Expressive Design Systems. Jeffrey Zeldman. p. 4. ISBN 978-1-937557-85-0 
  8. ^ “Using Pattern Languages for Object-Oriented Programs”. c2.com. 2021年10月7日閲覧。
  9. ^ “History Of Patterns”. wiki.c2.com. 2021年10月7日閲覧。
  10. ^ [10]
  11. ^ “Elisabeth G Todd - Publications” (英語). dl.acm.org. 2021年10月7日閲覧。
  12. ^ “Yahoo! Design Pattern Library” (英語). Creative Commons (2006年2月14日). 2021年10月7日閲覧。
  13. '^ “'Why BEM?' in a nutshell / DECAF Blog” (英語). Why BEM?' in a nutshell / DECAF Blog (24 June 2015). 2021年10月7日閲覧。
  14. ^ “Atomic Design by Brad Frost”. atomicdesign.bradfrost.com. 2025年2月9日閲覧。
  15. ^ “Design tokens – Material Design 3” (英語). Material Design. 2024年7月24日閲覧。
  16. ^ “Design tokens - Spectrum” (英語). spectrum.adobe.com. 2024年7月24日閲覧。
  17. ^ “Design tokens - Tokens” (英語). Atlassian Design System. 2024年7月24日閲覧。
  18. ^ “Design Tokens Community Group” (英語). www.w3.org (2022年6月14日). 2024年7月24日閲覧。

外部リンク

[編集]
「https://ja.wikipedia.org/w/index.php?title=デザインシステム&oldid=103685899」から取得