![見出し画像](https://assets.st-note.com/production/uploads/images/129880368/rectangle_large_type_2_10ac648ef6c70b317116ada8b50fce44.png?width=800)
日本・海外のデザインシステム総まとめ【56事例+α】
こんにちは!株式会社Rabeeの新人デザイナーのakaneです🏋
今日は、WEB上に公開されているデザインシステムをとにかくたくさん集めました。業種や規模、国内外の企業問わず、デザインシステム(スタイルガイドも含む)と名の付くものを、見つけられた範囲ですべて収集しています。
多数のデザインシステムの比較・検討をしたい際など、データベース的にお役立ていただけたら幸いです。
【アップデート履歴】
・2024/02/08 一休,Wantedly,W3C,パリ五輪2024を追加しました
※以下の目次、異次元の長さになっています。開く際はご注意ください…🐲
はじめに
🗒掲載方法について
「企業名+URL+スクリーンショット」を掲載しています。スクリーンショットについては、1枚目は全体の雰囲気が掴めるもの、2枚目はテキスト入力系コンポーネントの説明ページを選んでいます。
💡Tips|複数のURLを一気にひらく方法
これはGoogle Chromeを使っている方に限りますが、複数のURLをまとめてコピー&開く方法も紹介します。気になるデザインシステムを一気に開いて、ガンガン見比べてみてください!
①開きたいURLを含むテキストをまるっとコピー(どれだけ長くてもOK)
②Chrome拡張の「Pasty」を使って一気に開く
「Pasty」は、コピーしたテキストの中にある全URLを認識して、新しいタブで一気に開いてくれるChrome拡張。すばらしく捗るので、ぜひお使いください👨🔬
【最初に見ておきたいデザインシステム|5事例】
まずは、デザインシステム調査時に最初にチェックしておきたい事例を独断でピックアップしました。その後は、本社の所在地ごとに見出しを分けて紹介しています。
Apple - Human Interface Guidelines
URL:https://developer.apple.com/jp/design/human-interface-guidelines/
![](https://assets.st-note.com/img/1707003613764-dwYdPAIys4.png?width=800)
Google - Material Design
![](https://assets.st-note.com/img/1707003419538-29IfSr9OHA.png?width=800)
デジタル庁 - Design System
URL:https://www.figma.com/@digitalagencyjp
![](https://assets.st-note.com/img/1707377765163-fR3KP4jqPO.png?width=800)
ATLASSIAN - ATLASSIAN Design System
![](https://assets.st-note.com/img/1707004062962-mA9mWhObDV.png?width=800)
SmartHR - SmartHR Design System
![](https://assets.st-note.com/img/1707003872396-PPRoH4U9FA.png?width=800)
【日本のデザインシステム|14事例】
CyberAgent - Spindle
URL:https://spindle.ameba.design/
![](https://assets.st-note.com/img/1706805627668-iEFo5ofBB4.png?width=800)
LINEヤフー - LINE Design System
URL:https://designsystem.line.me/
![](https://assets.st-note.com/img/1706805321052-9nvlVLuxkl.png?width=800)
ユーザベース - SPEEDA Design System「FALCON」
URL:https://designsystem.uzabase.com/98768eba1/p/9727f8-speeda-design-systemfalcon
![](https://assets.st-note.com/img/1706805832493-lIC45dZxEg.png?width=800)
PayPay - App Style Guide
URL:https://app-style-guide.paypay.ne.jp/app-styleguide
![](https://assets.st-note.com/img/1706803816344-riprjFyhzk.png?width=800)
Ubie - Ubie Vitals
![](https://assets.st-note.com/img/1706805426248-Fnnv2cHhtf.png?width=800)
freee - vibes
URL:https://vibes.freee.co.jp/
![](https://assets.st-note.com/img/1706804193035-6IEEtWjpTT.png?width=800)
GMOペパボ - Inhouse
URL:https://design.pepabo.com/
![](https://assets.st-note.com/img/1706804725364-D9YNCbBy76.png?width=800)
ラクスル - kamii
URL:https://zeroheight.com/731d8c745/p/018df4-kamii--raksul-design-system
![](https://assets.st-note.com/img/1706805518007-iVpi9QIK1o.png?width=800)
一休 - IKYU Design Guideline
URL:https://www.ikyu.co.jp/design_guideline
![](https://assets.st-note.com/img/1707367045057-jUFrnyWYnP.png?width=800)
Wantedly - Wantedly UI Components
URL:https://www.figma.com/file/9SB5TMb2OnmYge9Kc2V2ed/Wantedly-UI-Components-Community
![](https://assets.st-note.com/img/1707378508781-00t9Xb1zFF.png?width=800)
Cookpad - Apron
URL:https://www.figma.com/community/file/847372282968994272
![](https://assets.st-note.com/img/1706804394928-KtuwGeJCzq.png?width=800)
mikan - mikan Design System
URL:https://www.figma.com/file/MJiAJCvX3hExiBwRHKWhQT/mikan-Design-System---Public
![](https://assets.st-note.com/img/1706806276126-FbvvK49PKs.png?width=800)
Qiita - Qiita VI Components
URL:https://www.figma.com/file/W690Q8JPidUJdlvDfEabct/Qiita-VI---Compornents
![](https://assets.st-note.com/img/1706804601113-znSDD12B5r.png?width=800)
DENSO - D-EXPERIENCEDESIGN SYSTEM
URL:https://ux.system.denso.info/
![](https://assets.st-note.com/img/1706805978792-oX2ktorkgs.png?width=800)
【アメリカのデザインシステム|21事例】
アメリカ政府 - U.S. Web Design System(USWDS)
URL:https://designsystem.digital.gov/
![](https://assets.st-note.com/img/1706964677603-Ps2QhoXyxI.png?width=800)
AWS - Cloudscape
URL:https://cloudscape.design/
![](https://assets.st-note.com/img/1706965278622-nVL0XOWP1W.png?width=800)
Microsoft - Fluent2
URL:https://fluent2.microsoft.design/
![](https://assets.st-note.com/img/1707005442992-sKgMYPs5fP.png?width=800)
Figma - UI2
URL:https://www.figma.com/community/file/1271813911103366792
![](https://assets.st-note.com/img/1707002759595-2r5hBsKOtE.png?width=800)
Adobe - Spectrum
URL:https://spectrum.adobe.com/
![](https://assets.st-note.com/img/1707004271452-rqJUYCkX6o.png?width=800)
Duolingo - Duolingo Brand Guidelines
URL:https://design.duolingo.com/
![](https://assets.st-note.com/img/1707003009709-fE6AHtfLyS.png?width=800)
IBM - Carbon Design System
URL:https://carbondesignsystem.com/
![](https://assets.st-note.com/img/1707004925471-SnlWjH5Tbo.png?width=800)
ゴールドマン・サックス - Design at Goldman Sachs
URL:https://design.gs.com/home
![](https://assets.st-note.com/img/1707001468894-HzvE2iZNzF.png?width=800)
Salesforce - Lightning Design System
URL:https://www.lightningdesignsystem.com/
![](https://assets.st-note.com/img/1707004763624-ExdtlA0bAs.png?width=800)
DELL - The Dell Design System
URL:https://www.delldesignsystem.com/
![](https://assets.st-note.com/img/1706962538995-XrLMYZPkwf.png?width=800)
GitHub - Primer
![](https://assets.st-note.com/img/1707005641109-Tz6KNtEayO.png?width=800)
GitLab - Pajamas
URL:https://design.gitlab.com/
![](https://assets.st-note.com/img/1707005555865-41Gay9pTy3.png?width=800)
Uber - Base Web
![](https://assets.st-note.com/img/1707002871341-BhWveHa6bM.png?width=800)
Okta - Odyssey
URL:https://odyssey.okta.design/latest/about-odyssey/welcome-to-odyssey-EVBhesLh
![](https://assets.st-note.com/img/1706964120526-dbewPXRbbh.png?width=800)
Mozilla - Mozilla Protocol
URL:https://protocol.mozilla.org/
![](https://assets.st-note.com/img/1707001228400-qCQEZGeHXU.png?width=800)
Firefox - Acorn
URL:https://acorn.firefox.com/latest/acorn-aRSAh0Sp
![](https://assets.st-note.com/img/1707001665559-ZHZnYSBhKv.png?width=800)
Zendesk - Garden
URL:https://garden.zendesk.com/
![](https://assets.st-note.com/img/1707003147165-xlNE0u8hyL.png?width=800)
Workday - Canvas
URL:https://canvas.workday.com/
![](https://assets.st-note.com/img/1706965171324-NjzuqwKCB3.png?width=800)
Mailchimp - Mailchimp Pattern Library
URL:https://ux.mailchimp.com/patterns/color
![](https://assets.st-note.com/img/1707001357623-HOkbH9HTNs.png?width=800)
Skiff - Skiff UI Design System
![](https://assets.st-note.com/img/1706962364052-LSUB9TtgkF.png?width=800)
W3C - W3C design system
URL:https://design-system.w3.org/
![](https://assets.st-note.com/img/1707378256443-d9QyxI7yfv.png?width=800)
【カナダのデザインシステム|1事例】
Shopify - Polaris
URL:https://polaris.shopify.com/
![](https://assets.st-note.com/img/1707001968490-3Df0wYwtTG.png?width=800)
【イギリスのデザインシステム|6事例】
イギリス政府 - GOV.UK Design System
URL:https://design-system.service.gov.uk/
![](https://assets.st-note.com/img/1706964860152-1JZkz6b5dM.png?width=800)
BBC - GEL(Global Experience Language)
![](https://assets.st-note.com/img/1706963535524-W5NfaVVw2R.png?width=800)
THE FINANCIAL TIMES - Origami
![](https://assets.st-note.com/img/1706963175799-gT5UIr0JMS.png?width=800)
University College London - UCL's design system
URL:https://design-system.ucl.ac.uk/
![](https://assets.st-note.com/img/1706963330892-ypo4lCpVb5.png?width=800)
Skyscanner - Backpack
URL:https://www.skyscanner.design/latest/welcome-to-backpack-Mtf5OEo4
![](https://assets.st-note.com/img/1707001837584-8ZtxtrSZ89.png?width=800)
The Co-operative Group - Co-op Experience Library
URL:https://www.coop.co.uk/experience-library/
![](https://assets.st-note.com/img/1706962784038-Vpg3kpHtRi.png?width=800)
【フランスのデザインシステム|2事例】
ENGIE - Fluid
URL:https://www.engie.design/fluid-design-system/
![](https://assets.st-note.com/img/1706964376729-Cm8nZXp0iU.png?width=800)
パリ 2024五輪 - Paris 2024 Official website
URL:https://www.paris2024.org/en/design/
![](https://assets.st-note.com/img/1707378805804-ORdk54Hl4w.png?width=800)
【ドイツのデザインシステム|1事例】
Audi AG - Audi CI Portal
URL:https://www.audi.com/ci/en/renewed-brand.html
![](https://assets.st-note.com/img/1706965064306-6FpleFSq9F.png?width=800)
【オランダのデザインシステム|1事例】
PAQT - Graphite
URL:https://graphitedesignsystem.com/getting-started/overview/
![](https://assets.st-note.com/img/1706961142941-hsJ9wfAFhG.png?width=800)
【北欧のデザインシステム|4事例】
Nordhealth - Nord.
URL:https://nordhealth.design/
![](https://assets.st-note.com/img/1706961819727-s1fXZ85x6g.png?width=800)
ヘルシンキ市 - Helsinki Design System
![](https://assets.st-note.com/img/1706964527454-CFtWgYedMY.png?width=800)
LocalTapiola - Duet Design System
![](https://assets.st-note.com/img/1706962154980-hEs8qURiAE.png?width=800)
エストニア政府 - Brand Estonia
![](https://assets.st-note.com/img/1707006019316-YHAQ2J1rLB.png?width=800)
【中国のデザインシステム|1事例】
Ant Group - Ant Design
![](https://assets.st-note.com/img/1707005778049-UKCbD0coyI.png?width=800)
【構築・運用方法がわかる記事|9事例】
デザインシステム自体は掲載されていませんが、構築過程やデザインシステムの概要が分かる記事を集めました。
SMBC - SMBC DESIGN SYSTEM
メルカリ - Design System Web
Yahoo! JAPAN - SAYA
Wantedly - Wantedly Design System
atama plus - atama plus design system
VISIONAL - Polyphony
Codeal - Codeal Design Guideline
fluct - DATA STRAP
楽天 - Design System
・ ・ ・
さいごに
私が現時点で把握できたデザインシステム事例は以上です。
ほかにもチェックしておくべき事例、もしくは記事内に誤り等がありましたら、コメントで教えていただけると大変嬉しいです!随時アップデートしていきます💪
参考記事一覧
以下の記事を参考にさせていただきました。ありがとうございます🥳
note記事
WEB記事
※分量の都合上、一部記事はテキスト形式で掲載しております。
・デザインシステムの活用事例を一挙にご紹介!|Blog|株式会社デパート https://depart-inc.com/blog/blog-20540/
・デザインシステム ベスト8の事例! https://www.uxpin.com/studio/jp/blog-jp/best-design-system-examples-ja/
・デザインシステム徹底解説!効果的な活用術と実際の導入事例 | GrowGroup https://grow-group.jp/archives/13456/
・デザインシステムとは?トップ10のデザインシステムの活用事例を挙げてご説明-Pixso https://pixso.net/jp/news/design-system/
・デザインシステムの実例一覧(18サイト+記事) - くらげになりたい。 https://www.memory-lovers.blog/entry/2023/06/25/080000
・デザインシステムとは?内容や作り方、運用方法を解説します | in-Pocket インポケット https://www.i3design.jp/in-pocket/10230
・SINAP | 参考にしたいデザインシステムまとめ 10選 https://sinap.jp/blog/qgpkvx8l9
・見よう。知ろう。学ぼう。国内企業のデザインシステム事例10選 | DUB DESiGN https://dubdesign.net/web/ui-design/japan-designsystem-10/
・最近話題のデザインシステムとは?参考になる事例を5選紹介! - ブログ|Web・ホームページ制作の株式会社アウラ(大阪) https://www.aura-office.co.jp/blog/designsystem/
・デザイナーが参考にしている秀逸デザインシステム5選! | 東京のWeb制作会社 株式会社クーシー https://coosy.co.jp/blog/design-system/
・有名企業を参考に学ぶ!デザインガイドライン公開事例10選 | Spirally - デザインシステム構築ツール https://spirally.io/articles/designguideline/29/
・ ・ ・
今回は以上となります。少しでも参考になりましたら嬉しいです🕺
この記事が気に入ったらサポートをしてみませんか?