フロントエンドエンジニアが参考にするデザインシステムをまとめてみた

# デザインシステムとは
> A design system is a complete set of standards intended to manage design at scale using reusable components and patterns

デザインシステムと調べると次のような文章が一番頭に出てきました。 **意訳すると再利用できるコンポーネントやパターンを利用して、デザインを大規模に管理するもの**という認識でいいかなと思います。自分の中では一貫性があり、使い勝手が良いデザインがアセットとして提供されていたり、それらのデザイン背景などがドキュメントとしてまとめられているものと考えています。


最近、デジタル庁がデザインシステムを公開しましたね。ただ、残念ながら実装コードなどは確認できませんでした。しかし、他の企業が公開しているデザインシステムには、storybookや実装コードを見ることができるものもあります。今回は、世の中に出回っているデザインシステムを見ていきたいと思います！


# 公開されているデザインシステム
## デジタル庁
![](https://i.imgur.com/718brGH.png)

デジタル庁が公開している[デザインシステム](https://www.digital.go.jp/policies/servicedesign/designsystem/)になります。

Figmaを使用することで、デザインシステム内の実際のデザインを確認することができます。一般的なUIコンポーネントに関するデザインルールがしっかりと記述されており、リッチなUIを必要としない、シンプルなアプリケーションなどはこれらのガイドラインに従うことで、開発プロセスをスムーズに進めることができると思います。

## Spindle
![people.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/427792/8bcff7c4-a59d-a867-f9ed-191b8a1428f1.png)

サイバーエージェントが公開している[デザインシステム](https://spindle.ameba.design/)になります。

> SpindleはAmebaを作るすべての人が「Amebaらしさ」をつくるための約束ごとや、それを手助けするツールやガイドラインが揃ったデザインシステムです。

- [Storybook](https://ameba-spindle.web.app/?path=/story/bottombutton--fixed-position)
- [Github](https://github.com/openameba/spindle)

## SmartHR Design System


![70201779-f994de80-175a-11ea-90e1-8a69f5b13ff0.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/427792/558a1dff-6959-5b4a-a3bc-17e6fcb2e8e6.png)

こちらはSmartHRが公開している[デザインシステム](https://smarthr.design/)になります。

> SmartHR Design System は、クラウド人事労務ソフト「SmartHR」において、サービスに関わるすべての人がSmartHRらしい表現をするための基準や素材をまとめたものです。

- [Storybook](https://smarthr-ui.netlify.app/)
- [Github](https://github.com/kufu/smarthr-ui)

## polaris
![スクリーンショット 2023-03-19 10.57.01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/427792/0d0b6838-728c-20b5-24d0-e4b00dfa2aa3.png)


shopifyが公開している[デザインシステム](https://polaris.shopify.com/)になります。

> Shape the merchant experience for Shopify’s core product, the admin.

- [Storybook](https://storybook.polaris.shopify.com/?path=/story/playground--details-page)
- [Github](https://github.com/Shopify/polaris)

## charcoal

![layers.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/427792/7c0bb39f-d4ca-fabd-6bc0-70c1ee50c160.png)

pixivが公開している[デザインシステム](https://pixiv.github.io/charcoal/docs/#/?id=main)になります。

> charcoal はいわゆるコンポーネント実装も含みますが、それ以外にも UI の実装に必要なパッケージを多数収録しています。charcoal の設計思想は「定数」「ユーティリティ」「コンポーネント」の三層構造として説明されます。

- [Storybook](https://pixiv.github.io/charcoal/)
- [Github](https://github.com/pixiv/charcoal)

## INGRED UI

![105577508-78b10000-5dbd-11eb-8314-03910081af23.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/427792/42a042c0-ecd0-7913-9a9a-301f06c4dbaa.png)

こちらはvoyagegroupが公開しているデザインシステムになります。

> INGRED UI is a design system developed to make it easy and quick for anyone to build a user interface. It is based on React and has a well thought out structure that works well with Type script.

- [Github](https://github.com/voyagegroup/ingred-ui)
- [Storybook](https://ingred-ui.netlify.app/?path=/story/components-feedback-loadingbar--example)

## Vibes


![free_design_system_ui.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/427792/65283c43-5677-e376-0ead-32633cd2764b.jpeg)


freeeが公開している「Vibes」になります。Vibesはデザインシステムの中核を成すUIコンポーネント群であり、組織でアクセシビリティを推進することを強く意識し生まれたものです。

> freeeのデザインシステムの中核を成すUIコンポーネント群 「Vibes」がOSSとして公開されました。組織でアクセシビリティを推進することを強く意識し生まれたものです。参考にして頂ければうれしく思います。

- [Github](https://github.com/freee/vibes)
- [Storybook](https://vibes.freee.co.jp/?path=/docs/doc-readme--docs)




# 総括
皆様、如何でしたでしょうか？ 今回のまとめ調査で初めて知るデザインシステムもあったので、まだまだ国内・海外にもたくさんのデザインシステムが公開されていると思います。自分のプロジェクトや開発にマッチしたものを参考にすることで、より良いプロジェクトになると思います。また、暇な時間を利用して海外企業が公開しているデザインシステムもチェックしてみようと思います。