#author("2023-03-24T09:26:05+00:00","default:admin","admin")
#author("2023-03-27T02:09:23+00:00","default:admin","admin")
-[[デザインシステムとは？:https://fixel.co.jp/blog/what-is-designsystem/]]
-[[スモールチームで始める、デザインシステムの第一歩:https://techblog.gaudiy.com/entry/2021/08/24/232927]]
-[[デザインシステムとは？内容や作り方、運用方法を解説します:https://www.i3design.jp/in-pocket/10230]]
-[[デザインシステムを導入する為にやって良かったこと５選:https://note.com/yucca_wi/n/nff4eb3626b96?magazine_key=m41a83b81e6bc]]
-[[デザインシステムを作るのはなぜ難しいのか:https://engineer.crowdworks.jp/entry/2023/03/03/190000]]
-[[MUIをベースにしたデザインシステムの構築:https://tech.buysell-technologies.com/entry/2023/01/31/000000]]
-[[UIT Meetup vol.19『デザインシステムのリアル』を開催しました:https://engineering.linecorp.com/ja/blog/uit-meetup19-report]]
-[[サイトのビジュアルアイデンティティ確立のお話:https://aimstogeek.hatenablog.com/entry/2023/03/27/090000]]

*概要 [#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/]]

*デザインカンプ [#i7ebc91a]
-[[デザインカンプとは？作り方やおすすめのツール、作成時のポイントを紹介:https://tayori.com/blog/design-comp/]]

*デザイントークン [#h02e28fb]
-[[デザイントークンとは？デザインシステムに関わる人が知っておきたいメリットや使い方まで:https://bagelee.com/design/basics-of-design-tokens/]]

*事例 [#occ05457]
-[[2022年版 おすすめのデザインシステム5選:https://www.boel.co.jp/tips/vol135]]
-[[グッドパッチエンジニアが選ぶ、推しデザインシステム10選:https://goodpatch.com/blog/i-love-design-systems]]

-[[Spindle - Abema:https://spindle.ameba.design/]]
トップ   新規 一覧 単語検索 最終更新   ヘルプ   最終更新のRSS