デザインシステム - nagata

デザインシステム

車輪の再発明を防ぐ。

プロダクトを構成するたくさんの定義がデザインシステムに内包され、その変更がプロダクトに反映されるというイメージ。

https://gyazo.com/1c405a37b4a4bac991ef20adb366dd3a

Design systems, style guides, pattern libraries. What the hell is the difference?

導入企業

アメリカの政府サイト

https://designsystem.digital.gov/maturity-model/

Increments

https://blog.qiita.com/increments-design-system/

アクセシビリティを重視したオープンソースの新デザインシステムをOktaがローンチ

https://jp.techcrunch.com/2021/02/05/2021-02-04-okta-launches-its-new-open-source-design-system-with-a-focus-on-accessibility/

https://gyazo.com/49bfa3cf931249d0e9bdac16ce5a44c2

https://odyssey.okta.design/

カオスなデザインシステムを生き返らせるためにやったこと

Lightning Design System

https://design.pepabo.com/inhouse/

ペパボのデザインシステムのドキュメントを公開します

2階建てのデザイントークン

タイポグラフィファースト

https://gyazo.com/9e8e6d867b37e4f35afcd53fc491b4a3

音楽、数学、タイポグラフィ

https://smarthr.design/

https://smarthr.design/products/components/

みんなで使うから、ブランドが強くなる。SmartHR Design System リニューアルのおしらせ

Illustration Guidelineも存在

クックパッド

https://www.figma.com/community/file/847372282968994272

デザインシステムは、作ってからが本番。

https://note.com/i_chi_/n/ncca0c857f21a

なので、いきなりすごいデザインシステムをつくるぞ！と意気込まなくても、業務効率化の範囲からはじめるのがよいかなと思います。例えば、週に１時間だけコンポーネントを整理するなどがおすすめです。

６、デザインシステムを作ったら何か変わるの？

属人化を防げる・新陳代謝ができる組織体質になる

また、しばらく放置していたらいつの間にか古いデザインになっていた！ということにも気が付きやすくなります。クックパッドのレシピサービスでもApronを作ったことで長らく更新が止まっていたPCの主要導線のUIアップデートにも着手することができました。このように、デザインシステムがあることで、具体的な改善施策のきっかけにもなりました。

まさにPCトップ下部のUI改善は、これと同じきっかけ。

デザインシステムは作ったら、使い倒す！

「デザインシステム」だけでは価値を生み出さない。そのルールがきちんとサービスに、全体に反映され運用されてはじめて人に届くものになる。

https://app-style-guide.paypay.ne.jp/app-styleguide

リクルート

スタディサプリ

スタディサプリのプロダクトを横断したデザインシステムを作る（デザイントークン編）

https://blog.recruit-productdesign.jp/n/nad86f59e2e1f

インハウスデザインチームが挑んだ「SMBCデザインシステム」の裏側

https://note.com/smbc_design/n/ncbc40571e468

みんなの銀行

みんなの銀行デザインシステム、始めました。｜みんなの銀行

https://note.minna-no-ginko.com/n/na5b010ad5687

https://designsystem.line.me/

ツクロアのデザインシステムをFigmaで公開しました | 株式会社ツクロア

https://www.figma.com/community/file/969269086132405457/tuqulore-Design-System

https://www.figma.com/community/file/1042706969451783914/%5Bdev%5D-Jumpu-UI-|-Tailwind-CSS-Components-%26-Design-System

https://spindle.ameba.design/

EXPO 2025 Design Syste

Expo2025 大阪・関西万博

https://www.expo2025.or.jp/overview/design_system/

「誰もがつかえる」を目指したnoteのデザインシステムの導入とこれから

https://engineerteam.note.jp/n/neee44076be72

楽天カード

「楽天カードらしさ」を追求した楽天カードのデザインシステムの導入と今後について

https://note.com/cwd_note/n/n06e0a7edbdf4

https://gyazo.com/9ece08418f42533d8de4a95c11ff29a1

デジタル庁

https://digital-gov.note.jp/n/ne45bcdd43299

ゴールドマン・サックス

https://design.gs.com/home

https://polaris.shopify.com/design

https://techblog.zozo.com/entry/wear-design-system-first

社会インフラを支える東芝のデザインシステム

https://note.com/toshiba_ui/n/n2190a8c4ed6c

JCBがゼロから始めたデザインシステム構築　その裏側をデザインチーム発足から振り返る

https://creatorzine.jp/article/detail/5618

https://serendie.design/

https://www.figma.com/community/file/1433690846108785966/serendie-ui-kit

グッドパッチエンジニアが選ぶ、推しデザインシステム10選｜Blog｜Goodpatch グッドパッチ

Motion Guideline

Illustration Guideline

Photography Guideline

Modals / Dialog

/uknmr/デザインシステムとデザインガイドライン、スタイルガイド、パターンライブラリの違い

https://designsystems.surf/design-systems

行政におけるデザインシステムのあり方に関する調査研究

https://www.iais.or.jp/reports/labreport/20220601/design2021/

https://www.iais.or.jp/wp-content/uploads/2022/06/design2021_ja_main_20220531.pdf

組織への浸透

デザインシステムを組織に浸透させる3つの心得 - Yahoo! JAPAN Tech Blog

Figma によるデザインシステム入門

https://zenn.dev/ignorant_kenji/books/introduction-to-design-systems

翻訳記事：デザインシステムのジレンマ：見た目は似ているが、機能が違う

https://note.com/nobsato/n/n9512e1bfb068