【デザインシステム】エンジニアが知っておきたいデザインシステム

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390720/adcad02b-5296-f10d-c47a-44f9e2cdb6ea.png)

## デザインシステムとは？
簡単にいうと、デザインシステムは、デザインに関することを体系化・構造化したものです。
　
具体的には、デザインの目的・原則やデザインの基準を定めるVIガイドライン、UIパターンやコンポーネント、ライブラリなどの再利用できるものが含まれます。

そのため、デザインシステムを導入することで、 
1つのプロダクトで、200色の白が存在すること や 見た目、機能が同じものを何個も存在することがなくなるため、
大規模なプロダクトやサービスを**チーム**で開発・運用していくのが効率的になります。

また、デザインとコードの両方で一貫性のある見た目にもできるため、
デザインの苦手なエンジニアでも、簡単に、デザインの意図に沿ったUIやクオリティの担保されたUIを作成することができます。



## 知っておきたいデザインシステム
### ○ 国内のデザインシステム
国内の企業・組織が公開しているデザインシステムを10個まとめました。
デザインシステムとしてのクオリティが高いものを優先的に選んでいます。

#### 1. デジタル庁デザインシステム
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390720/f2fb89b9-fd48-d461-591b-1d84a1827adb.png)
*デジタル庁*

デジタル庁デザインシステムは、デジタル庁デザインユニットによって開発されたデザインシステムです。

**【構成】**
- **スタイル**
    - スタイルでは、デザイントークンが定義されている
    - <font color="Gray">*ex.カラー、タイポグラフィ、レイアウトカラム、余白、アイコン、画像、角丸、リンクテキスト*</font>
- **コンポーネント**
    - コンポーネントでは、Formなどでよく使われるUIコンポーネントが定義されています。
    - <font color="Gray">*ex.ボタン、ボトムナビゲーション、テキスト入力、テキストエリア、セレクター、ラジオボタン、チェックボックス、モーダルダイアログ、テーブル、ページネーション、パンクズリスト*</font>
- **テンプレート** 
    - テンプレートでは、よく発生するユーザータスクに画面のデザインをテンプレートとして定義されています。
    - <font color="Gray">*ex.読み取り、認証、入力、入力フォーム基本情報、入力フォーム期間・種類、入力フォーム添付、*</font>

**【リンク】** Figma

https://www.figma.com/community/file/1172530831489802410


---

#### 2.Spindle
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390720/16201267-2522-5ab0-dc1c-31ae397b5824.png)
*CyberAgent, Inc.*

Spindleは、CyberAgentが "Amebaらしさ" を一貫してユーザーに届けるためのデザインシステムです。

**【構成】**
- **ブランド**
    - Amebaのブランドのビジョン・ミッション・「Amebaらしさ」などが定義されています。
    - <font color="Gray">*ex.ビジョンとミッション、ブランドガイドライン、スライドテンプレート、関連資料*</font>
- **原則**
    - Amebaのサービスを通じて、ユーザーや広告主、取引先といったパートナーとの接点において一貫した振る舞いをするためにどうあるべきかを「原則」として定義されています。
    - <font color="Gray">*ex.デザイン原則、アクセシビリティ、パフォーマンス、ブランドボイス、UIラベリング*</font>
- **スタイル**
    - スタイルは、Amebaらしさを視覚的に伝えるために必要なカラーやタイポグラフィのリソースをどのように使うかが定義されています。
    - <font color="Gray">*ex.カラー、タイポグラフィ、アイコン、イラストレーション、アニメーション*</font>
- **コンポーネント**
    - コンポーネントは、再利用可能なUIの構成要素で、一貫性のあるスタイルとインタラクション、パターンによってユーザーが直感的に操作ができるよう定義されています。
    - <font color="Gray">*ex.Button、Checkbox、List、Modal、TextField*</font>

**【リンク】** サイト、storybook

https://spindle.ameba.design/

https://ameba-spindle.web.app/

---

#### 3.LINE Design System
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390720/d856abd9-9c2e-b0b5-c069-1b0d6cf45484.png)
*LINE株式会社*

LINE Design Systemは、LINE株式会社がLINEのデザインとUXに貢献するコンポーネントやインタラクション方法などを定義したデザインシステムです。

**【構成】**
- **Massenger**
    - 一貫したUIコンポーネントを基盤に、統一されたデザインを実現するデザインシステムです。
    - <font color="Gray">*ex.Foundation、Components、Guidelines、Case Studies*</font>
- **Global Family Service**
    - LINEファミリーサービスで一貫したユーザー体験を提供するためのガイドライン。
    - <font color="Gray">*ex.Foundation、Components、Case Studies*</font>

**【リンク】** サイト

 https://designsystem.line.me/

---

#### 4.SmartHR Design System
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390720/019b2cea-2b49-43c0-f45e-dbc979b44cd4.png)
*SmartHR, Inc.*

SmartHR Design Systemは、SmartHRが すべての人によりよい体験を届けるためのデザインシステムです。


**【構成】**
- **基本原則**
    - 基本原則は、SmartHRサービスビジョンをSmartHRらしく実現するために、コミュニケーションの軸となるものが定義されています。
    - <font color="Gray">*ex.パーソナリティ、*</font>
- **基本要素**
    - SmartHRのデザインを構成している基本要素が定義されています。
    - <font color="Gray">*ex.ロゴ、色、タイポグラフィ、アイコン、イラストレーション、メタ情報、伝わる文章*</font>
- **アクセシビリティ**
    - SmartHRは働くすべての人を後押しするために、より多くの人が使えるようにするためのアクセシビリティを定義しています。
    - <font color="Gray">*ex.アクセシビリティ方針、アクセシビリティ簡易チェックリスト、画像の代替テキスト、アクセシビリティの改善となるUIテキスト変更の判断基準*</font>
- **プロダクト**
    - SmartHRのプロダクト群全体で再利用できる、デザイントークンやコンポーネントライブラリ、デザインパターン、ライティングガイドラインが定義されています。
    - <font color="Gray">*ex.デザイン原則、デザイントークン、コンポーネント、コンテンツ、デザインパータン、デザインの進め方*</font>
- **コミュニケーション**
    - サービスSmartHRにおけるすべてのタッチポイントで利用できるアイテムと、そのガイドラインを定義しています。
    - <font color="Gray">*ex.写真、動画、スライド、資料、名刺、画面キャプチャ、端末モック、サンプル集*</font>

**【リンク】** サイト、github、storybook、Figma

https://smarthr.design/

https://github.com/kufu/smarthr-ui

https://story.smarthr-ui.dev

https://www.figma.com/community/file/978607227374353992/SmartHR-UI


---

#### 5.Apron
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390720/b9aef74f-417f-e2f9-aee5-68a2bd6ecdf8.png)
*クックパッド株式会社*

Apronは、クックパッド株式会社が運営している「クックパット」に関するデザイン方針です。

**【構成】**
- **Bland**
    - クックパットらしさを定義しています。
    - <font color="Gray">*ex.Brand Philosophy、Brand Concept & Personality、Design Keyword*</font>
- **Foundations**
    - クックパットのデザインを構成している基本要素が定義されています。
    - <font color="Gray">*ex.Animations、App Icon、Color、Illustrations*</font>
- **Content**
    - クックパットとのアッチポイントで利用するガイドラインが定義されています。
    - <font color="Gray">*ex.Tone & Manner、Photo Guideline、Image Overlay、Voice*</font>
- **Components**
    - クックパッドでデバイスを跨いで使われるコンポーネントが定義されています。
    - <font color="Gray">*ex.Avatar、Blank Image、Buttons、Search Box*</font>
- **iOS**
    - クックパッドのiOSで使われるコンポーネントが定義されています。
    - <font color="Gray">*ex.Dialog、Feedback、Font、Icon、Modal、Navigation*</font>
- **Web**
    - クックパッドのWebで使われるコンポーネントが定義されています。
    - <font color="Gray">*ex.Badge、Balloon、Breadcrumbs、Checkbox、Dialog、Dropdown*</font>

**【リンク】** Figma

https://www.figma.com/community/file/847372282968994272


---

#### 6.Wantedly UI デザインシステム
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390720/403da74c-79e8-f18a-924b-33d3313e1873.png)
*Wantedly, Inc.*

Wantedly UI デザインシステムは、「プロダクト・デバイスをまたいでも・誰がデザインしても体験やブランドとしての一貫性を保つ」「デザインの生産性を向上させ、デザイナ - エンジニア 間コミュニケーションを改善することで、ユーザに価値を届ける速度を向上させる」といった目的のために作られたものです。

**【構成】**
- **Fondation**
    - Wantedlyのデザインを構成している基本要素が定義されています。
    - <font color="Gray">*ex.Layout、Text、Responsive、Shape、Elevation*</font>
- **Basic Components**
    - ButtonやTextFiledsなどの基本的なコンポーネントが定義されています。
    - <font color="Gray">*ex.Button、TextFiled、ImageView、SelectionControls、Tooltips*</font>
- **Combined Components**
    - ListやModalといったレイアウトパターンなどの複数の要素で作られているコンポーネントが定義されています。
    - <font color="Gray">*ex.Tabs、Toasts、CoachMarks、DatePicker、Lists、Modal*</font>

**【リンク】** サイト、Figma

https://docs.wantedly.dev/fields/apps/design-system-for-non-designers

https://www.figma.com/community/file/994992887565225147


---

#### 7.SPEEDA DesignSystem "FALCON"
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390720/ce33b24a-f1ef-0e1c-43c4-2554c456afaa.png)
*Uzabase Inc.*

SPEEDA DesignSystem "FALCON"は、SPEEDAのデザインを構成する原則やコンポーネント、デザインアセットが定義されているデザインシステムです。

**【構成】**
- **DESIGN PRINCIPLES**
    - 　SPEEDAデザインの本質を見い出すための心得や、共通言語を定義されています。
    - <font color="Gray">*ex.5つのデザイン原則*</font>
- **FOUNDATION**
    - 　SPEEDAデザインのデザインを構成している基本要素が定義されています。
    - <font color="Gray">*ex.Color、Elevation、Iconography、Illustration、Logos、Voice&Tone、Layout*</font>
- **COMPONENTS**
    - ButtonやCheckboxなどの基本的なコンポーネントが定義されています。
    - <font color="Gray">*ex.Button、Checkbox、Card、Dropdown、List、Pager*</font>

**【リンク】** サイト、Figma

https://designsystem.uzabase.com/98768eba1/p/9727f8-speeda-design-system-falcon

https://www.figma.com/community/file/1047401907024695662

---

#### 8.Pepabo Design
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390720/e53b8392-34a6-49d4-8869-d4fc9585b527.png)
*GMOペパボ株式会社*

Pepabo Designは、GMOペパボ株式会社のデザインにまつわるドキュメントをまとめているWebサイトです。


**【構成】**
- **Foundation**
    - ペパボにおけるデザインの基盤となる、デザインの対象や行動指針、価値観、スキルなどが定義されています。
    - <font color="Gray">*ex.Design Scheme、Design Principle、Skill Area*</font>
- **Inhouse** (Design System)
    - Inhouseは、ペパボの共通基盤デザインシステムで、デザイントークンやコンポーネントなどが定義されています。
    - <font color="Gray">*ex.About、Flavors、Components、Resources*</font>
- **Brand**
    - ペパボのブランドリソースやガイドラインが定義されています。
    - <font color="Gray">*ex.Logo Assets*</font>

**【リンク】** サイト

https://design.pepabo.com/


---

#### 9. D-EXPERIENCE DESIGN SYSTEM
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390720/52928a83-62b5-c41c-6395-9ab026a38054.png)
*DENSO*

D-EXPERIENCE DESIGN SYSTEMは、DENSOがエンドユーザー中心の体験価値を顧客と共に創出するための考え方をまとめたデザインシステムです。

**【構成】**
- **PRINCIPLE**
    - PRINCIPLEはデンソーが提供する製品とサービスの開発にあたって、UXの指針と規範を明文化したものです。
    - <font color="Gray">*ex.Perceptibility、Intuitive Information、Contextual Experience、Personalization、Peace of Mind、Green*</font>
- **UX INITIATIVES**
    - デンソーは、製品の開発初期(企画)から終盤(量産・品質保証)まで、一貫してエンドユーザー中心の体験設計を行うための「UXベース開発プロセス」を明文化したものです。
    - <font color="Gray">*ex.UXベース開発プロセス*</font>
- **KANDO UX RESEARCH**
    - 感動をUX創出の重要な瞬間として定義し、グローバルの顧客とともに、感動体験を定量・定性の両面から調査し、すべてのUX企画におけるリファレンスです。
    - <font color="Gray">*ex.KANDO UX RESEARCH Features、Value Assumptions*</font>
- **GUIDELINE**
    - 形に表しにくいエクスペリエンスを定量化するために、人間工学や認知心理学の知見とデンソーのこれまでのモビリティ開発の知見を掛け合わせて、基準となるUXの数値をGUIDELINEとして規定しています。
    - <font color="Gray">*ex.Size、Style、Layout、Text、Motion、Notice、Time*</font>

**【リンク】** サイト

https://ux.system.denso.info/


---

#### 10.Soracom Design System
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390720/29e78bf0-3cdc-2e47-eba6-a3f44caba7ca.png)
*Soracom, Inc.*

Soracom Design Systemは、Soracomが開発した、CSS のベスト プラクティスと規約に準拠しながら、一貫性のある独特のインターフェイスを構築できるデザインシステムです

**【構成】**
- **Styles**
    - すべてのコンポーネントに適用できる共通の視覚スタイルが定義されています。
    - <font color="Gray">*ex.Color、Dark mode、Visual states*</font>
- **Typograohy**
    - Soracom Design Systemで全体で使用されているフォントが定義されています。
    - <font color="Gray">*ex.Aeonik、Soure Han Sans*</font>
- **Guidelines**
    - Voice&Toneや用語などのガイドラインが定義されています。
    - <font color="Gray">*ex.Grammar、Scripts、Terminology*</font>
- **Images**
    - アイコンやロゴなどが定義されています。
    - <font color="Gray">*ex.Icon、Logos*</font>
- **Containers**
    - 要素やコンポーネントを整理したり、グループ化するために使われるコンポーネントが定義されています。
    - <font color="Gray">*ex.App、Cols、Controls、Dialog、Field、Group、Modal、Rows*</font>
- **Elements**
    - フロントエンドを構成しているUIコンポーネントが定義されています。
    - <font color="Gray">*ex.Autocomplete、Banner、Breadcrumb、Buttons、Card、Chart*</font>
- **UX Patterns**
    - 一般的なデザインやユーザビリティの問題に対する解決策の参考例が定義されています。
    - <font color="Gray">*ex.Adding and deleting rows、Copy、Datetime Panel、Deleting or removing content*</font>


**【リンク】** サイト

https://design.soracom.io/design-system/


---


### ○ 海外のデザインシステム

海外の企業・組織が公開しているデザインシステムを9個まとめました。
デザインシステムとしてのクオリティが高いものを優先的に選んでいます。

#### 1.Material 3 (Material Design)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390720/87d70ace-3418-e09e-1b41-663e3fcfab6a.png)
*Google*

Material 3は、Googleが開発したオープンソースのデザインシステムです。

**[構造]**

- **Foundations**
    - アクセシビリティからレイアウト、インタラクションの必須パターンに至るまで、UIの基礎を定義しています。
    - <font color="Gray">*ex.Accessibility、Adaptive design、Customizing Material、Design tokens、Interaction states*</font>
- **Styles**
    - スタイルでは、テーマを変更することでカスタマイズできるようにUIの外観と雰囲気を定義しています。
    - <font color="Gray">*ex.Color、Elevation、Icons、Motion、Shape、Typography*</font>
- **Components**
    - コンポーネントでは、UIを作成するためのインタラクティブな構成要素が定義されています。
    - <font color="Gray">*ex.Actions、Communication、Containment、Navigation、Selection、Text inputs*</font>

**[リンク]** サイト、Figma、Github

https://m3.material.io/

https://www.figma.com/community/file/1035203688168086460/Material-3-Design-Kit

https://github.com/material-components

---

#### 2.Human Interface Guidelines
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390720/8d755bf6-e3c9-6fa0-3ecf-60e39786ce64.png)
*Apple Inc.*

Human Interface Guidelinesは、Appleのプラットフォームで優れた体験を設計するのに役立つ方法がまとめられているデザインシステムです。

**[構造]**
- **Platforms**
    - プラットフォームごとのデザインについて定義されています。
    - <font color="Gray">*ex.iOS、iPadOS、macOS、tvOS、watchOS*</font>
- **Foundations**
    - 豊かな体験の創造に役立つ基本的なデザイン要素が定義されています。
    - <font color="Gray">*ex.Accessibility、App icon、Branding、Color、Dark Mode、Icon、Images*</font>
- **Patterns**
    - 一般的なユーザーのアクション、タスク、UXをサポートするためのデザインガイドラインが定義されています。
    - <font color="Gray">*ex.charting data、Collaboration and sharing、Drag and drop、Entering data、Feedback*</font>
- **Components**
    - 人々に親しみやすく、一貫した体験を提供するためにコンポーネントが定義されています。
    - <font color="Gray">*ex.Content、Layout and organization、Menus and actions、Navigation and search*</font>
- **Inputs**
    - 人々がアプリやゲームを操作し、データを入力するために使用するさまざまな方法が定義されています。
    - <font color="Gray">*ex.Action button、Apple Pencil and Scribble、Digital Crown、Focus and selection*</font>
- **Technologies**
    - アプリやゲームに組み込むことができるAppleのテクノロジー、機能、サービスが定義されています。
    - <font color="Gray">*ex.AirPlay、Always On、App Clips、Apple Pay、Augmented reality、CareKit、CarPlay*</font>

**[リンク]** サイト、Figma

https://developer.apple.com/design/human-interface-guidelines

https://www.figma.com/@apple

---


#### 3.Primer
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390720/b7df28df-b71d-66f2-fe7e-6842305fe4a9.png)
*GitHub, Inc.*

Primerは、GitHubコミュニティが独自のプロジェクトの設計及び構築て切るように、GitHubによって作成されたオープンソースのデザインシステムです。


**[構造]**
- **Guides**
    - Guidesでは、GitHub を設計するためのオープンソースの原則、標準、推奨事項が定義されています。
    - <font color="Gray">*ex.About、Figma、Development、Component lifecycle、Component state、Accessibility*</font>
- **Foundations**
    - GitHubのデザインを構成している基本要素が定義されています。
    - <font color="Gray">*ex.Color、Responsive、CSS utilities、Layout、Typography、Icons and Visuals*</font>
- **UI patterns**
    - GitHubで使われているUIパターンが定義されています。
    - <font color="Gray">*ex.Empty states、Feature onboarding、Forms、Messaging、Progress disclosure*</font>
- **Components**
    - GitHubのUIを構成している基本的なコンポーネントが定義されています。
    - <font color="Gray">*ex.Action bar、Avatar、Box、Button、Checkbox*</font>
- **Native**
    - CLIやデスクトップ、モバイル特有のデザインシステムが定義されています。
    - <font color="Gray">*ex.CLI、デスクトップ、モバイル*</font>

**[リンク]** サイト、Figma、github

https://primer.style/

https://www.figma.com/@primer

https://github.com/primer/

---


#### 4.Design and code Windows apps
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390720/c47020b9-c81f-9515-b5d2-f211f427d584.png)
*Microsoft Corporation*

Design and code Windows appsは、Windowsアプリの体験を設計するためのデザインガイドラインとUI、コードの例などを記載しているデザインシステムです。

**[構造]**
- **Design downloads**
    - フロントエンドツールキットやサンプルを入手することができます。
    - <font color="Gray">*ex.Figma Toolkit、Windows UI Library、Windows Community Toolkit、Template Studio*</font>
- **Design basics**
    - アプリデザインとFluent Design Systemの紹介です。
    - <font color="Gray">*ex.Overview、Windows app silhouettes、Title bar、Content basics、Commanding basics*</font>
- **Layout**
    - どの画面サイズでも美しく見えるUIを実現するレスポンシブのヒントとAPI。
    - <font color="Gray">*ex.Screen sizes and breakpoints、Responsive design techniques、Layouts with XAMLs*</font>
- **Controls and patterns**
    - ラジオボタンからナビゲーションコントロールまで、必要なすべてのUIビルディングブロックを提供します。
    - <font color="Gray">*ex.Intro to controls and patterns*</font>
- **Style**
    - 色、タイポグラフィ、アクリルでアプリを目立たせる。
    - <font color="Gray">*ex.Color、Typography、Icons、Acrylic、Reveal focus、Sound、Writing style*</font>
- **Motion**
    - アニメーションやトランジションで、アプリに命を吹き込みましょう。
    - <font color="Gray">*ex.Timing and easing、Directionality and gravity、Motion in practice*</font>
- **Shell**
    - Windowsのシェル機能を使って、アプリを起動したり、通知を表示したりします。
    - <font color="Gray">*ex.Toast notifications、Badge notifications、Push notifications、Taskbar、Title bar*</font>
- **Input and interactions**
    - タッチ、ペン、Surfaceダイヤル、その他の入力タイプにアプリを最適化します。
    - <font color="Gray">*ex.Input、Interactions、Speech and AI*</font>
- **Devices**
    - デバイスのスペクトラムと、それに対する最適化方法について学びます。
    - <font color="Gray">*ex.PCs and laptops、Tablets and 2-in-1s、Xbox and TV、Phones and phablets*</font>
- **Usability**
    - アプリをインクルーシブにして、世界中の人々がアクセスできるようにする。
    - <font color="Gray">*ex.Accessibility、App settings、Globalization and localization*</font>

**[リンク]** サイト

https://learn.microsoft.com/en-us/windows/apps/design/


---


#### 5.Polaris
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390720/71b8a392-0e6f-7cea-aecd-f5d612003774.png)
*Shopify Inc.*

Polarisは、Shopifyによって、Shopifyのコア製品である管理者・製作者が販売者の体験を形成するために開発されたデザインシステムです。

**[構造]**
- **Foundations**
    - 質の高い管理者体験を実現するための基本的な設計指針
    - <font color="Gray">*ex.Accessibility、Formatting localized currency、Information architecture、Internationalization*</font>
- **Design**
    - これらは、Shopifyの管理画面におけるすべての体験をどのようにデザインするかを形成する原則
    - <font color="Gray">*ex.Color、Font、Border、Space、Shadow、Motion、Breakpoints、Z-Index*</font>
- **Content**
    - 考え抜かれた一貫性のあるインターフェイスのコンテンツは、優れたデザインのユーザーエクスペリエンスの中核をなす要素
    - <font color="Gray">*ex.Actionable language、Alternative text、Error messages、Grammar and mechanics*</font>
- **Patterns**
    - 管理者における共通のマーチャント目標に対する好ましい解決策
    - <font color="Gray">*ex.App settings layout、Date picking、New features、Resource details layout*</font>
- **Components**
    - コードでパッケージ化された再利用可能な要素とスタイルで、管理者インターフェースを構築する
    - <font color="Gray">*ex.Account connection、Button、Button group、Page actions*</font>
- **Tokens**
    - 色、間隔、タイポグラフィなどのデザイン上の決定を表すコード化された名前
    - <font color="Gray">*ex.Color、Font、Border、Space、Shadow、Motion、Breakpoints、Z-Index*</font>
- **Icons**
    - 商業と起業に焦点を当てた400以上の入念なデザインアイコン

**[リンク]**　サイト、Github

https://polaris.shopify.com/

https://github.com/Shopify/polaris

---

#### 6.Lightning Design System
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390720/06be7b4c-228e-7a00-f5db-b0bfab84f0ae.png)
*Salesforce, Inc.*
Lightning Design Systemは、柔軟性があり、拡張性が高く、効率的に開発が行えるように、Salesforceが開発したデザインシステムです。


**[構造]**
- **Platform**
    - プラットフォームごとのデザインシステムの導入の仕方等が記載されています。
    - <font color="Gray">*ex.Lightning Apps、Visualforce、Heroku、Android、iOS*</font>
- **Design Guidelines**
    - Salesforce製品のデザインを構成しているパターンやコンポーネントが定義されています。
    - <font color="Gray">*ex.Builder、Charts、Conversion UI、Data Entry*</font>
- **Kinetics**
    - モダンで洗練され、機能的で楽しい、強力で一貫したVIを作成するためのモーションシステムの設計ガイド。
    - <font color="Gray">*ex.Principles、Personality、Choreography、Micro Patterns*</font>
- **Accessibility**
    - アプリケーション開発の基盤として機能するアクセス可能なマークアップが定義されています。
    - <font color="Gray">*ex.ARIA role、Accordion、Alert Dialog、Combobox、Feed*</font>
- **Component Blueprints**
    - フレームワークに依存せず、実装ガイドラインに従ってコンポーネントを作成するために使用されるアクセス可能なHTML、CSSが定義されています。
    - <font color="Gray">*ex.Accordion、Avatar、Badges、Breadcrumbs、Buttons、Cards*</font>
- **Utilies**
    - borderやboxなどのよく使用されるCSSが定義されています。
    - <font color="Gray">*ex.Borders、Box、Grid、Margin、Padding、Text*</font>
- **Design Tokens**
    - フロントエンドシステムの名前付きのエンティティーが定義されています。
    - <font color="Gray">*ex.brand-accessible、brand-primary、color-gray-1、font-size-1*</font>
- **Icons**
    - Salesforce製品で使われるアイコンが定義されています。

**[リンク]** サイト、Figma、Github

https://www.lightningdesignsystem.com/

https://www.figma.com/@salesforce

https://github.com/salesforce-ux/design-system-starter-kit

---

#### 7.Spectrum
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390720/00d410cd-dbe2-586f-9b6c-ecf6aa269fb9.png)
*Adobe Inc.*

Spectrum は、Adobe製品チームがより効率的に作業でき、Adobeのアプリケーションの結合力を高めるためのコンポーネントとツールがまとまっているデザインシステムです。

**[構造]**
- **Foundation**
    - Adobe製品のデザインを構成している基本要素が定義されています
    - <font color="Gray">*ex.Design tokens、Platform scale、Theming、Color、Typography*</font>
- **Content**
    - Adobe製品とのアッチポイントで利用するガイドラインが定義されています
    - <font color="Gray">*ex.Voice and Tone、Grammar and mechanics、Language and inclusivity*</font>
- **Components**
    - Adobe製品でデバイスを跨いで使われるコンポーネントが定義されています
    - <font color="Gray">*ex.Actions、Containers、Data visualization、Feedback、Inputs*</font>
- **Patterns**
    - Adobe製品でよく使われているUIが定義されています
    - <font color="Gray">*ex.Card、Form errors、Headers、Table*</font>
- **Tools and resources**
    - Adobe製品をデザインする上で使われているリソースが定義されています
    - <font color="Gray">*ex.Adobe XD plugin、UI kits、Fonts、Icons*</font>

**[リンク]**

https://spectrum.adobe.com/

https://github.com/adobe


---

#### 8.Gestalt
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390720/29b0f7e0-ea8e-2916-b209-717b666a2010.png)
*Pinterest, Inc.*

Gestaltは、人々の人生を創造するためのインスピレーションを与える体験を構築するために、Pinterestが開発したデザインシステムです。

**[構造]**
- Components
    - 大規模なUXとパターンの構築に使用するためのReact Componentsが定義されています。
    - <font color="Gray">*ex.ActivationCard、Avatar、Badge、Box、Button*</font>
- Foundations
    - UI Component、surface、Color、Typography、Layout、Accessibilityなどのデザインするための基本的な要素が定義されています。
    - <font color="Gray">*ex.UI Component、surface、Color、Typography、Layout、Accessibilit*</font>


**[リンク]**

https://gestalt.pinterest.systems/home

https://github.com/pinterest/gestalt

---

#### 9.Base Web
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390720/f75fe66c-c34c-aba1-36c8-3a17cde44c4f.png)
*Uber Technologies, Inc.*

Base Webは、Uberが開発した、Web製品を開始、進化、統合するためのデザインシステム・UIフレームワークです。

**[構造]**
- **GUIDES**
    - Base Webを使用するに当たり、注意すべきガイドラインが定義されています。
    - <font color="Gray">*ex.Internationalization、Bidirectionality、Theming、Styling、Overrides*</font>
- **COMPONENTS**
    - フロントエンドするための基本的な要素やComponentsが定義されています。
    - <font color="Gray">*ex.INPUTS、PICKERS、DATE & TIME、NAVIGATION、CONTENT、PROGRESS & VALIDATION*</font>


**[リンク]**

https://baseweb.design/

https://github.com/uber/baseweb

---

## デザインシステムを作る時に知っておきたいこと
### ○ 本
デザインシステムを構築・勉強する上で、役に立つ本をまとめました。
まとめた本以外におすすめの書籍がありましたら、コメントお願いします。

#### 1.Design Systems - デジタルプロダクトのためのデザインシステム実践ガイド
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390720/6e8a9775-47e1-26b7-94da-8fe81f463652.png)
<font color="gray">*Alla Kholmatova (著), 佐藤伸哉 (翻訳)*</font>

「Design Systems - デジタルプロダクトのためのデザインシステム実践ガイド」では、デザインシステムについて、著者の経験や、Airbnb、Atlassian、Eurostar、Sipgate、TEDという規模の異なる5社への調査から得られた、効果的な構築&運用の方法をまとめたものです。

デザインシステムを構築・勉強する上では、必ず読んでおきたい本です。

https://www.amazon.co.jp/Design-Systems-%E2%80%95%E3%83%87%E3%82%B8%E3%82%BF%E3%83%AB%E3%83%97%E3%83%AD%E3%83%80%E3%82%AF%E3%83%88%E3%81%AE%E3%81%9F%E3%82%81%E3%81%AE%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3%E3%82%B7%E3%82%B9%E3%83%86%E3%83%A0%E5%AE%9F%E8%B7%B5%E3%82%AC%E3%82%A4%E3%83%89-Alla-Kholmatova-ebook/dp/B07PTXXK1S/ref=sr_1_6?__mk_ja_JP=%E3%82%AB%E3%82%BF%E3%82%AB%E3%83%8A&crid=33GMKAMEQL6TR&keywords=%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3%E3%82%B7%E3%82%B9%E3%83%86%E3%83%A0+%E6%9C%AC&qid=1686384900&sprefix=%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3%E3%82%B7%E3%82%B9%E3%83%86%E3%83%A0+%E6%9C%AC%2Caps%2C206&sr=8-6

---

#### 2.小さく始めるデザインシステム
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390720/7c967529-cf4c-babe-cf5d-ea4e7510126b.png)
<font color="gray">*大塚 亜周 (著, 編集), 稲葉 志奈 (著, 編集), 金森 悠 (著), samemaru (著), 圓山 伊吹 (著), 植田 将基 (著), 関口 裕 (著), 8chari (著), 後藤 拓也 (著), 小木曽 槙一 (著), 桝田 草一 (著)*</font>

「小さく始めるデザインシステム」は、SmartHRのデザインシステムの立ち上げ前から、現在までの取り組みをユースケースとして扱いながら、デザインシステムの構想・構築・運用について、一般論を含めて解説したものです。

デザインシステムを構築・運用していくために、必ず読んでおきたい本です。

https://www.amazon.co.jp/%E3%81%A1%E3%81%84%E3%81%95%E3%81%8F%E3%81%AF%E3%81%98%E3%82%81%E3%82%8B%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3%E3%82%B7%E3%82%B9%E3%83%86%E3%83%A0-%E5%A4%A7%E5%A1%9A-%E4%BA%9C%E5%91%A8-ebook/dp/B0BXD2NRHF/ref=sr_1_1?__mk_ja_JP=%E3%82%AB%E3%82%BF%E3%82%AB%E3%83%8A&crid=33GMKAMEQL6TR&keywords=%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3%E3%82%B7%E3%82%B9%E3%83%86%E3%83%A0+%E6%9C%AC&qid=1686384900&sprefix=%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3%E3%82%B7%E3%82%B9%E3%83%86%E3%83%A0+%E6%9C%AC%2Caps%2C206&sr=8-1

---

#### 3.Webアプリケーションアクセシビリティ
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390720/7c6c09ed-c17b-1c3e-98f0-b725410c2375.png)
<font color="gray">*伊原 力也 (著), 小林 大輔 (著), 桝田 草一 (著), 山本 伶 (著)*</font>

「Webアプリケーションアクセシビリティ」では、Webアクセシビリティの基礎である「HTMLとWAI-ARIA」を解説し、Webアプリケーションの要である「フォーム」、色やテキストなど「UIデザインの基本」、モーダルダイアログや通知など「少し複雑なUIパターン」の3分野に分けて、よくある事例を取り上げながら、現実的で段階的な改善方法を紹介しているものです。

デザインシステムには、アクセシビリティの知識も必要になるため、読んでおきたい本です。

https://www.amazon.co.jp/Web%E3%82%A2%E3%83%97%E3%83%AA%E3%82%B1%E3%83%BC%E3%82%B7%E3%83%A7%E3%83%B3%E3%82%A2%E3%82%AF%E3%82%BB%E3%82%B7%E3%83%93%E3%83%AA%E3%83%86%E3%82%A3%E2%94%80%E2%94%80%E4%BB%8A%E6%97%A5%E3%81%8B%E3%82%89%E5%A7%8B%E3%82%81%E3%82%8B%E7%8F%BE%E5%A0%B4%E3%81%8B%E3%82%89%E3%81%AE%E6%94%B9%E5%96%84-WEB-DB-PRESS-plus-ebook/dp/B0BTLCDDK5/ref=sr_1_1?__mk_ja_JP=%E3%82%AB%E3%82%BF%E3%82%AB%E3%83%8A&crid=3FXNMACDDXS2F&keywords=%E3%82%A2%E3%82%AF%E3%82%BB%E3%82%B7%E3%83%93%E3%83%AA%E3%83%86%E3%82%A3+%E6%9C%AC&qid=1686384973&sprefix=%E3%82%A2%E3%82%AF%E3%82%BB%E3%82%B7%E3%83%93%E3%83%AA%E3%83%86%E3%82%A3+%E6%9C%AC%2Caps%2C202&sr=8-1

---

#### 4.基礎から学ぶマテリアルデザイン3
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390720/0b3a0831-1e03-2507-79fb-b011ad7796c2.png)
<font color="gray">*UNI DESIGN(著)*</font>

「基礎から学ぶマテリアルデザイン3」は、Googleが提唱するデザインシステムの解説をしており、基礎的なところから学ぶことができるものです。

公開されている多くのデザインシステムには、マテリアルデザインを参考にしていると思うので、1度は読んでおきたい本です。


https://www.amazon.co.jp/%E5%9F%BA%E7%A4%8E%E3%81%8B%E3%82%89%E5%AD%A6%E3%81%B6%E3%83%9E%E3%83%86%E3%83%AA%E3%82%A2%E3%83%AB%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B33-Google%E3%81%8C%E6%8F%90%E5%94%B1%E3%81%99%E3%82%8BUI%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3%E3%81%AE-%E6%9C%80%E6%96%B0%E3%83%90%E3%83%BC%E3%82%B8%E3%83%A7%E3%83%B3-%E3%80%8C%E3%83%9E%E3%83%86%E3%83%AA%E3%82%A2%E3%83%AB3%E3%80%8D%E3%81%AE%E5%9F%BA%E7%A4%8E%E3%82%92%E6%97%A5%E6%9C%AC%E8%AA%9E%E8%A7%A3%E8%AA%AC-0%E3%81%8B%E3%82%89%E5%AD%A6%E3%81%B6%E3%83%9E%E3%83%86%E3%83%AA%E3%82%A2%E3%83%AB%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B32-ebook/dp/B0BY8SZGB6/ref=d_reads_cwrtbar_sccl_1_5/355-8494632-3336257?pd_rd_w=Xae7g&content-id=amzn1.sym.337d2f80-9540-40ce-bfd5-1d1e89aa413b&pf_rd_p=337d2f80-9540-40ce-bfd5-1d1e89aa413b&pf_rd_r=V88C9006RJXEHTW04TD4&pd_rd_wg=wqv8k&pd_rd_r=27ca2f3a-d177-495b-b0c4-b2778f53ca1b&pd_rd_i=B0BY8SZGB6&psc=1

---

### ○ Blog・記事・その他
他に、デザインシステムを構築・運用・勉強する上で、参考にした　いBlogや記事などを紹介します。

#### 1.mercari
mercariは、デザインシステム自体の公開はしていないですが、デザインシステムに関する記事を公開しています。
デザインシステムを構築する上での取り組み、主にフロントエンド関連についての記事がまとまっています。

https://engineering.mercari.com/blog/tag/design-system/


#### 2.SMBC
SMBCは、デザインシステム自体の公開はしていないですが、デザインに関する記事をnoteに公開しています。
SMBCという大きな組織で、デザイン・デザインシステムを浸透させていく取り組みがまとまっています。

https://note.com/smbc_design

#### 3.atama plus
atama plusは、デザインシステム自体の公開はしていないですが、デザインシステムに関する記事をnoteに公開しています。
atama plusでデザインシステムを構築する時の試行錯誤がまとまっています。

https://note.com/atamaplus/m/m9a0e6e51b453/hashtag/328156

#### 4.デザインシステムを小さく始める記事
この記事は、デザインシステムFigmaをリファクタリングしながら、デザインシステムの一歩目を踏み出した記事です。
新しく、デザインシステムを始める時に役に立つ記事だと思います。

https://note.com/jirosh1998/n/nf7b2f0943e45

#### 5.Open design systems from the Figma Community [Figma Community]
Figma Communityで公開されているデザインシステムがまとめられているサイトです。

https://www.designsystems.com/open-design-systems/

#### 6.Design Systems For Figma
Figma Communityで公開されているデザインシステムがまとめられているサイトです。

https://www.designsystemsforfigma.com/ 


## まとめ
この記事では、エンジニアが知っておきたいデザインシステム、デザインシステムを構築・運営・勉強にあたって知っておきたいことがわかるものをまとめました。

ぜひこの記事を読んで、デザインシステムの第一歩を踏み出していただけると嬉しいです。

---

最後に、普段はHTMLやCSS、アクセシビリティ、デザインといったところを中心に
Qiitaに記事を投稿しているので、ぜひQiitaのフォローとX(Twitter)のフォローをお願いします。

https://twitter.com/degudegu2510


また、「フロントエンドxデザイン」をテーマにDevトークを募集しているので、
興味がある方は、ぜひお話しましょう。
Qiitaの記事の内容でもアウトプットに関する内容でも構いません。

https://jobs.qiita.com/employers/qiita-inc/dev_talks/404?utm_source=link_share&utm_medium=social&utm_campaign=dev_talk_share&utm_content=dev_talk_show