147
170

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

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

Last updated at Posted at 2023-03-19

デザインシステムとは

A design system is a complete set of standards intended to manage design at scale using reusable components and patterns

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

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

公開されているデザインシステム

デジタル庁

デジタル庁が公開しているデザインシステムになります。

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

Spindle

people.png

サイバーエージェントが公開しているデザインシステムになります。

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

SmartHR Design System

70201779-f994de80-175a-11ea-90e1-8a69f5b13ff0.png

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

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

polaris

スクリーンショット 2023-03-19 10.57.01.png

shopifyが公開しているデザインシステムになります。

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

charcoal

layers.png

pixivが公開しているデザインシステムになります。

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

INGRED UI

105577508-78b10000-5dbd-11eb-8314-03910081af23.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.

Vibes

free_design_system_ui.jpeg

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

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

総括

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

147
170
1

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
147
170

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?