![[PukiWiki]](image/pukiwiki.png "[PukiWiki]")
#author("2023-03-28T08:42:12+00:00","default:admin","admin") #author("2023-03-30T00:58:52+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] -[[フロントエンドエンジニアが参考にするデザインシステムをまとめてみた:https://qiita.com/bikky_no_yakata/items/368b02c3df178d4e0472]] -[[2022年版 おすすめのデザインシステム5選:https://www.boel.co.jp/tips/vol135]] -[[グッドパッチエンジニアが選ぶ、推しデザインシステム10選:https://goodpatch.com/blog/i-love-design-systems]] -[[SmartHR Design System:https://smarthr.design/]] --[[ちいさくはじめるデザインシステム:http://www.bnn.co.jp/books/12054/]] --[[「デザインシステムのよくある悩み」に遭遇しなかった SmartHR Design System の2年間の実践:https://note.com/versionfive/n/nb2e825c746b3]] ---2020.09 ... ホスティングするツールをFrontifyから[[zeroheight:https://zeroheight.com/]]にお引越し ---2021.03 ... より自分たちの体制や運用にあった環境にすべく、[[zeroheight:https://zeroheight.com/]]から自前の管理ツールに移行 ---2021.05 ... [[SmartHR UIのFigmaライブラリ:https://www.figma.com/community/file/978607227374353992/SmartHR-UI]]を公開開始 -[[Spindle - Abema:https://spindle.ameba.design/]] --[[Amebaのデザインシステム「Spindle」の全貌公開:https://developers.cyberagent.co.jp/blog/archives/31641/]] ---GUIと、Figma等のツールとの連携機能も備わっていため、更新性の保ちやすい点などから[[zeroheight:https://zeroheight.com/]]を採用 ---一方で、日本語の読みづらさや表示の重さなどがやや気がかりとなり、現在はシステムを[[Gatsby:https://www.gatsbyjs.com/]]に乗り換えた -[[新しいメルカリDesign System Web:https://engineering.mercari.com/blog/entry/20210823-8128e0d987/]] *関連ツール [#d7126735] -[[Design Document Tool 3選 & 検討の流れ:https://tech.aptpod.co.jp/entry/2022/04/15/100000]] **[[Figma:https://www.figma.com/ja/]] [#cf7167d3] -[[誰もが貢献できるシステム - Figma:https://www.figma.com/ja/design-systems/]] -[[UI/UXデザインツール『Figma』入門:https://chot.design/figma-beginner/]] -[[Figma（フィグマ）とは？初心者でも分かるWebデザインツールの使い方:https://ferret-plus.com/13195]] -[[明日からできる、爆速Figma活用術:https://www.m3tech.blog/entry/2023/02/15/130000]] ***関連サービス [#r25dabb9] -[[Locofy:https://www.locofy.ai/]] **[[zeroheight:https://zeroheight.com/]] [#ad9ab326] -[[【デザイン】Zeroheightとは:https://uga-box.hatenablog.com/entry/2021/06/11/000000]] -[[zeroheightでFigmaの共有・コード出力をやってみたまとめ:https://zenn.dev/yurukei20/articles/8228aa2a95755f]] -[[Pairsのデザインシステムを運用してみて。デザイナー視点のツール編:https://eureka.design/articles/design-system-operation/]] -[[業務を効率化させるデザインシステムとは？:https://note.com/tadaki/n/n1f3354db38f7]] -[[過去のデザインを否定せず、リスペクトしながら改善する 「SPEEDA」におけるデザインシステム構築の第一歩:https://logmi.jp/tech/articles/326037]] -[[新規サービス開発におけるデザインシステムの実用:https://www.concentinc.jp/design_research/2022/04/designsystem_practices/]] -[[デザインシステム導入までのプロセス:https://ncdc.co.jp/columns/8283/]] -[[コンポーネント認識を揃えるデザインガイドライン:https://cocoda.design/yoshioka/p/pd929ed0e7a48]] ... BASE --zeroheightへ移行を決めたポイント ---ドキュメントが書きやすいこと ---UI-kitを簡単に追加・変更に追従できること ---Storybook読み込みができること **[[Frontify:https://www.frontify.com/en/]] [#r0c20a0f] -[[ブラウザー上でスタイルガイドが作れるFrontifyを試してみた:https://www.webcreatorbox.com/webinfo/style-guide-frontify]] **[[Storybook:https://storybook.js.org/]] [#o599c9a0] -[[Storybookを使ったデザインシステムの構築:https://ncdc.co.jp/columns/7098/]]
