- 追加された行はこの色です。
- 削除された行はこの色です。
#author("2023-01-23T23:44:07+00:00","default:admin","admin")
#author("2023-01-24T07:47:22+00:00","default:admin","admin")
-[[スモールチームで始める、デザインシステムの第一歩:https://techblog.gaudiy.com/entry/2021/08/24/232927]]
-[[デザインシステムとは？内容や作り方、運用方法を解説します:https://www.i3design.jp/in-pocket/10230]]
*概要 [#b5d0184e]
**定義 [#xaf7862b]
デザインシステムとは、企業のビジョンやブランドアイデンティティなどから「良いデザイン」を定義するデザイン原則などのドキュメント、それらを具体的にデザイン・実装するためのUIパターンやコンポーネントなどを備えた一連のリソースのことを指します。
**目的 [#qb78ff81]
デザインシステムを作る目的としては、複数のデジタルプロダクト・サービスを展開する際にブランドの一貫性やデザイン品質を担保したり、運用を効率化させるという点が挙げられます。
**構成要素 [#ga319726]
***デザイン原則 [#x4465a25]
プロダクトに関わるステークホルダーがプロダクトを作っていく上で大事にすることを言語化したものです。これがあることで、何を優先してデザインを作っていくのかという道標になります。
***原則に基づいたルール（スタイルガイド） [#q74f3e4b]
デザイン原則に基づいて作られた、UIパターンやタイポグラフィ、カラースケールなどのガイドラインです。
***原則に基づいたツール（コンポーネントライブラリ） [#nb4dee73]
リストやボタンなど、再利用可能ですぐ使用できるコンポーネントをコードとセットで置いたライブラリです。エンジニアがコードを書く際にすぐに呼び出すことができます。
*CSSフレームワーク [#r5a53ed7]
-[[Tailwind CSS:https://tailwindcss.com/]]
--[[職種を超える共通言語について〜デザインとコードの狭間で〜:https://cocoda.design/yokinist/p/p2f130d2b8156]]
-[[Bulma:https://bulma.io/]]
-[[Ant Design:https://ant.design/]]
-[[Chakra UI:https://chakra-ui.com/]]
*事例 [#occ05457]
-[[Spindle - Abema:https://spindle.ameba.design/]]
![[PukiWiki]](image/pukiwiki.png "[PukiWiki]")
