デザインシステム
をテンプレートにして作成
[
トップ
] [
新規
|
一覧
|
単語検索
|
最終更新
|
ヘルプ
|
ログイン
]
開始行:
-[[デザインシステムとは？:https://fixel.co.jp/blog/what-i...
-[[スモールチームで始める、デザインシステムの第一歩:https...
-[[デザインシステムとは？内容や作り方、運用方法を解説しま...
-[[デザインシステムを導入する為にやって良かったこと５選:h...
-[[デザインシステムを作るのはなぜ難しいのか:https://engin...
-[[MUIをベースにしたデザインシステムの構築:https://tech.b...
-[[UIT Meetup vol.19『デザインシステムのリアル』を開催し...
-[[サイトのビジュアルアイデンティティ確立のお話:https://a...
*概要 [#b5d0184e]
**定義 [#xaf7862b]
デザインシステムとは、企業のビジョンやブランドアイデンテ...
**目的 [#qb78ff81]
デザインシステムを作る目的としては、複数のデジタルプロダ...
**構成要素 [#ga319726]
***デザイン原則 [#x4465a25]
プロダクトに関わるステークホルダーがプロダクトを作ってい...
***原則に基づいたルール（スタイルガイド） [#q74f3e4b]
デザイン原則に基づいて作られた、UIパターンやタイポグラフ...
***原則に基づいたツール（コンポーネントライブラリ） [#nb4...
リストやボタンなど、再利用可能ですぐ使用できるコンポーネ...
*CSSフレームワーク [#r5a53ed7]
-[[Tailwind CSS:https://tailwindcss.com/]]
--[[職種を超える共通言語について〜デザインとコードの狭間...
-[[Bulma:https://bulma.io/]]
-[[Ant Design:https://ant.design/]]
-[[Chakra UI:https://chakra-ui.com/]]
*デザインカンプ [#i7ebc91a]
-[[デザインカンプとは？作り方やおすすめのツール、作成時の...
*デザイントークン [#h02e28fb]
-[[デザイントークンとは？デザインシステムに関わる人が知っ...
*事例 [#occ05457]
-[[フロントエンドエンジニアが参考にするデザインシステムを...
-[[2022年版 おすすめのデザインシステム5選:https://www.boe...
-[[グッドパッチエンジニアが選ぶ、推しデザインシステム10選...
-[[SmartHR Design System:https://smarthr.design/]]
--[[ちいさくはじめるデザインシステム:http://www.bnn.co.jp...
--[[「デザインシステムのよくある悩み」に遭遇しなかった Sm...
---2020.09 ... ホスティングするツールをFrontifyから[[zero...
---2021.03 ... より自分たちの体制や運用にあった環境にすべ...
---2021.05 ... [[SmartHR UIのFigmaライブラリ:https://www....
-[[Spindle - Abema:https://spindle.ameba.design/]]
--[[Amebaのデザインシステム「Spindle」の全貌公開:https://...
---GUIと、Figma等のツールとの連携機能も備わっていため、更...
---一方で、日本語の読みづらさや表示の重さなどがやや気がか...
-[[新しいメルカリDesign System Web:https://engineering.me...
*関連ツール [#d7126735]
-[[Design Document Tool 3選 & 検討の流れ:https://tech.apt...
**[[Figma:https://www.figma.com/ja/]] [#cf7167d3]
-[[誰もが貢献できるシステム - Figma:https://www.figma.com...
-[[UI/UXデザインツール『Figma』入門:https://chot.design/f...
-[[Figma（フィグマ）とは？初心者でも分かるWebデザインツー...
-[[明日からできる、爆速Figma活用術:https://www.m3tech.blo...
***関連サービス [#r25dabb9]
-[[Locofy:https://www.locofy.ai/]]
**[[zeroheight:https://zeroheight.com/]] [#ad9ab326]
-[[【デザイン】Zeroheightとは:https://uga-box.hatenablog....
-[[zeroheightでFigmaの共有・コード出力をやってみたまとめ:...
-[[Pairsのデザインシステムを運用してみて。デザイナー視点...
-[[業務を効率化させるデザインシステムとは？:https://note....
-[[過去のデザインを否定せず、リスペクトしながら改善する ...
-[[新規サービス開発におけるデザインシステムの実用:https:/...
-[[デザインシステム導入までのプロセス:https://ncdc.co.jp/...
-[[コンポーネント認識を揃えるデザインガイドライン:https:/...
--zeroheightへ移行を決めたポイント
---ドキュメントが書きやすいこと
---UI-kitを簡単に追加・変更に追従できること
---Storybook読み込みができること
**[[Frontify:https://www.frontify.com/en/]] [#r0c20a0f]
-[[ブラウザー上でスタイルガイドが作れるFrontifyを試してみ...
**[[Storybook:https://storybook.js.org/]] [#o599c9a0]
-[[Storybookを使ったデザインシステムの構築:https://ncdc.c...
終了行:
-[[デザインシステムとは？:https://fixel.co.jp/blog/what-i...
-[[スモールチームで始める、デザインシステムの第一歩:https...
-[[デザインシステムとは？内容や作り方、運用方法を解説しま...
-[[デザインシステムを導入する為にやって良かったこと５選:h...
-[[デザインシステムを作るのはなぜ難しいのか:https://engin...
-[[MUIをベースにしたデザインシステムの構築:https://tech.b...
-[[UIT Meetup vol.19『デザインシステムのリアル』を開催し...
-[[サイトのビジュアルアイデンティティ確立のお話:https://a...
*概要 [#b5d0184e]
**定義 [#xaf7862b]
デザインシステムとは、企業のビジョンやブランドアイデンテ...
**目的 [#qb78ff81]
デザインシステムを作る目的としては、複数のデジタルプロダ...
**構成要素 [#ga319726]
***デザイン原則 [#x4465a25]
プロダクトに関わるステークホルダーがプロダクトを作ってい...
***原則に基づいたルール（スタイルガイド） [#q74f3e4b]
デザイン原則に基づいて作られた、UIパターンやタイポグラフ...
***原則に基づいたツール（コンポーネントライブラリ） [#nb4...
リストやボタンなど、再利用可能ですぐ使用できるコンポーネ...
*CSSフレームワーク [#r5a53ed7]
-[[Tailwind CSS:https://tailwindcss.com/]]
--[[職種を超える共通言語について〜デザインとコードの狭間...
-[[Bulma:https://bulma.io/]]
-[[Ant Design:https://ant.design/]]
-[[Chakra UI:https://chakra-ui.com/]]
*デザインカンプ [#i7ebc91a]
-[[デザインカンプとは？作り方やおすすめのツール、作成時の...
*デザイントークン [#h02e28fb]
-[[デザイントークンとは？デザインシステムに関わる人が知っ...
*事例 [#occ05457]
-[[フロントエンドエンジニアが参考にするデザインシステムを...
-[[2022年版 おすすめのデザインシステム5選:https://www.boe...
-[[グッドパッチエンジニアが選ぶ、推しデザインシステム10選...
-[[SmartHR Design System:https://smarthr.design/]]
--[[ちいさくはじめるデザインシステム:http://www.bnn.co.jp...
--[[「デザインシステムのよくある悩み」に遭遇しなかった Sm...
---2020.09 ... ホスティングするツールをFrontifyから[[zero...
---2021.03 ... より自分たちの体制や運用にあった環境にすべ...
---2021.05 ... [[SmartHR UIのFigmaライブラリ:https://www....
-[[Spindle - Abema:https://spindle.ameba.design/]]
--[[Amebaのデザインシステム「Spindle」の全貌公開:https://...
---GUIと、Figma等のツールとの連携機能も備わっていため、更...
---一方で、日本語の読みづらさや表示の重さなどがやや気がか...
-[[新しいメルカリDesign System Web:https://engineering.me...
*関連ツール [#d7126735]
-[[Design Document Tool 3選 & 検討の流れ:https://tech.apt...
**[[Figma:https://www.figma.com/ja/]] [#cf7167d3]
-[[誰もが貢献できるシステム - Figma:https://www.figma.com...
-[[UI/UXデザインツール『Figma』入門:https://chot.design/f...
-[[Figma（フィグマ）とは？初心者でも分かるWebデザインツー...
-[[明日からできる、爆速Figma活用術:https://www.m3tech.blo...
***関連サービス [#r25dabb9]
-[[Locofy:https://www.locofy.ai/]]
**[[zeroheight:https://zeroheight.com/]] [#ad9ab326]
-[[【デザイン】Zeroheightとは:https://uga-box.hatenablog....
-[[zeroheightでFigmaの共有・コード出力をやってみたまとめ:...
-[[Pairsのデザインシステムを運用してみて。デザイナー視点...
-[[業務を効率化させるデザインシステムとは？:https://note....
-[[過去のデザインを否定せず、リスペクトしながら改善する ...
-[[新規サービス開発におけるデザインシステムの実用:https:/...
-[[デザインシステム導入までのプロセス:https://ncdc.co.jp/...
-[[コンポーネント認識を揃えるデザインガイドライン:https:/...
--zeroheightへ移行を決めたポイント
---ドキュメントが書きやすいこと
---UI-kitを簡単に追加・変更に追従できること
---Storybook読み込みができること
**[[Frontify:https://www.frontify.com/en/]] [#r0c20a0f]
-[[ブラウザー上でスタイルガイドが作れるFrontifyを試してみ...
**[[Storybook:https://storybook.js.org/]] [#o599c9a0]
-[[Storybookを使ったデザインシステムの構築:https://ncdc.c...
ページ名:
![[PukiWiki]](image/pukiwiki.png "[PukiWiki]")
