AIっぽさを消す無料で使えるサイトデザインシステム30選
note生活59日目。
朝8時。多分ベランダに居たのでしょうねヤツは…。
聞いた事のないくらいの爆音で朝っぱらから、「ビビビビビビビビビビーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー！！！！！！！！！！！！」と、セミが5分間くらい鳴りやがりまして、飛び起きたぶんくらですw
朝まで寝れなかったので、快適な睡眠を阻害され、二度寝しようと思って寝ようとしたけど寝られず、絶賛寝不足中。
マジで、夏、キライw
さて。今日は、AI生成サイトにありがちな、
・全部カード
・大きな角丸
・紫〜青のグラデーション
・中央揃えのHero
・似たようなSaaSレイアウト
・余白や文字サイズが全部均一
といった「AIっぽさ」を避けたい場合、ゼロからClaudeCodeやCodexにデザインさせるより、実在するデザインシステムを土台にした方がかなり効果的なんです。
なので、無料で使えるデザインシステムを30個集めてみました。
GitHubやFigma、公式サイトなどから入手できるデザインシステムです。
デザインシステムとは？
デザインシステムとはなんなのかをものすごく簡単に言うと、「Webサイトやアプリの見た目を作るための共通ルール集＋部品セット」です。
たとえば、家を建てるとします。毎回「ドアの高さは？」「壁の色は？」「窓の形は？」「廊下の幅は？」とゼロから決めると大変ですよね。そこで、「この家ではドアはこの形、壁はこの色、窓はこのサイズ」とあらかじめルールを決めておく。Webサイト版のそれがデザインシステムです。
具体的には、こんなものがまとめられています。
･色：メインカラー、背景色、警告色など
･文字：見出しの大きさ、本文の大きさ、フォント
･ボタン：「登録する」「戻る」などのボタンの形
･入力欄：名前、メールアドレスなどを入れるフォーム
･カード：商品、記事、ユーザー情報などを囲む箱
･余白：文字や画像の間をどれくらい空けるか
･アイコン：検索、設定、メニューなどのマーク
･画面構成：ヘッダー、サイドバー、メニューなど
･使い方のルール：「この場合はこのボタンを使う」など
なので、単なる「デザイン素材集」ともちょっと違います。
たとえばボタンが1個あったとして、「青いボタンがあります」だけなら、素材集に近いです。
デザインシステムの場合は、「重要な操作には青いボタンを使う。削除には赤を使う。通常ボタンの高さは48px。角は8px丸める。文字サイズは16px。」というように、部品＋使い方のルールまで決まっています。
なんでデザインシステムを使うの？
最大のメリットは、サイト全体がバラバラにならないことです。
たとえばAIに毎回、
「ログイン画面作って」
「料金ページ作って」
「診断結果ページ作って」
と頼むと、何もルールを決めていなければ、
ログイン画面 → 丸いボタン
料金ページ → 四角いボタン
診断画面 → グラデーションボタン
みたいに、ページごとに微妙に違うデザインになることがあります。
でも最初に、
ボタンはこの形
色はこの5色
見出しはこのサイズ
カードはこのデザイン
余白はこのルール
と決めておけば、Claude CodeやCodexもそのルールに沿って作れます。
だから、AIでサイト制作する人ほどデザインシステムは重要とも言えます。
「テンプレート」とは何が違うの？
ここは結構重要で、
･テンプレート→ 完成した部屋をそのまま使うイメージ。
･デザインシステム→ 家を作るための建築ルールと部品をもらうイメージ。
たとえば、「ブログトップページの完成デザイン」ならテンプレート。一方、「ボタン、カード、色、文字、余白、ナビゲーションなどのルール」ならデザインシステムです。
つまりデザインシステムを使えば、
ブログ
Webサービス
診断ツール
管理画面
LP
など、違う種類のページを作っても同じ世界観を維持できます。
有名なものだと、Googleには Material Design、IBMには Carbon Design System、Shopifyには Polarisなどがあります。
これらを見ると、
「ボタンはこう作る」
「メニューはこうする」
「文字サイズはこうする」
「フォームはこう設計する」
といったルールが大量に公開されています。
つまり企業が実際に使っているWebデザインの設計書を公開してくれているようなものです。
デザインシステム30選
1. Figma Simple Design System
雰囲気：シンプル、ニュートラル。
向いているサイト：幅広いWebサイト、自分専用デザインシステムの土台。
入手先：GitHub、Figma
特徴：Variables、Styles、Components、Reactまで一式あり。
GitHub：https://github.com/figma/sds
2. IBM Carbon Design System
雰囲気：シャープ、企業的、情報整理が得意。
向いているサイト：IT、データ、B2B、企業サイト、Webサービス。
入手先：GitHub、公式サイト
特徴：React、Web Components、Sass、Design Tokens、Iconsまで公開。
GitHub：https://github.com/carbon-design-system/carbon
3. GitHub Primer Product UI
雰囲気：開発者向け、実用的、無駄が少ない。
向いているサイト：ツール、Webサービス、開発者向けサービス。
入手先：GitHub
特徴：GitHub自身が使っているデザインシステム。CSS、React、Tokens、Iconsなどが公開。
GitHub：https://github.com/primer
4. GitHub Primer Brand
雰囲気：GitHubらしいモダンなブランドデザイン。
向いているサイト：LP、メディア、マーケティングサイト。
入手先：GitHub、Figma
特徴：Primer Product UIよりも、ブランドサイトやコンテンツサイト向け。
GitHub：https://github.com/primer/brand
5. Adobe Spectrum
雰囲気：クリエイティブ、プロフェッショナル。
向いているサイト：クリエイティブツール、SaaS、Webアプリ。
入手先：GitHub、公式サイト
特徴：Adobe公式のデザインシステム。React、CSS、Web Componentsなどを公開。
GitHub：https://github.com/adobe/react-spectrum
6. Microsoft Fluent UI
雰囲気：Microsoft系、ビジネス、業務ツール。
向いているサイト：ビジネスアプリ、管理画面、Webサービス。
入手先：GitHub
特徴：ReactとWeb Componentsを公開。
GitHub：https://github.com/microsoft/fluentui
7. Salesforce Lightning Design System
雰囲気：企業向け、実務的。
向いているサイト：CRM、業務システム、管理画面。
入手先：GitHub、公式サイト
特徴：CSS、Design Tokens、UI Kitなどが利用できる。
GitHub：https://github.com/salesforce-ux/design-system
8. PatternFly
雰囲気：管理画面、クラウド、エンタープライズ。
向いているサイト：管理画面、クラウドサービス、インフラ系サービス。
入手先：GitHub、Figma
特徴：Figma Design Kit、Design Tokens、React Componentsなどを公開。
GitHub：https://github.com/patternfly
9. US Web Design System
略称：USWDS
雰囲気：公共サービス、情報重視。
向いているサイト：情報量の多いサイト、公共サービス、メディア。
入手先：GitHub
特徴：米国政府公式のデザインシステムです。
UI Components、Design Tokens、Sass、Templatesなど。
GitHub：https://github.com/uswds/uswds
10. GOV.UK Design System
雰囲気：極めて実用的、シンプル。
向いているサイト：文章中心、フォーム中心、情報サイト。
入手先：公式サイト、GitHub
特徴：装飾よりも、情報の分かりやすさを徹底的に優先。
公式：https://design-system.service.gov.uk/
11. NHS.UK Design System
雰囲気：信頼感、アクセシビリティ重視。
向いているサイト：医療、公共情報、情報サービス。
入手先：GitHub
特徴：英国NHSのデザインシステム。
GitHub：https://github.com/nhsuk/nhsuk-frontend
12. B.C. Design System
雰囲気：公共サービス、クリーン。
向いているサイト：行政系、情報サイト、アクセシビリティ重視のサイト。
入手先：GitHub、Figma
特徴：Design Tokens、Figma、Reactが揃っています。
GitHub：https://github.com/bcgov/design-system
13. Government of Canada Design System
雰囲気：行政、情報整理型。
向いているサイト：情報サービス、行政サイト、文章主体のサイト。
入手先：公式サイト、Figma
特徴：Design TokensやFigma Libraryを公開。
公式：https://design-system.canada.ca/
14. UNDP Design System
雰囲気：国際機関、コンテンツ重視。
向いているサイト：NGO、国際系サイト、コンテンツサイト。
入手先：GitHub
特徴：Design TokensをJSONで管理する本格的な構成。
GitHub：https://github.com/undp/design-system
15. Google Material Design 3
雰囲気：モダン、アプリ的。
向いているサイト：Webアプリ、一般向けサービス、スマホ向けサービス。
入手先：公式サイト、GitHub
特徴：Googleが公開しているデザインシステム。Design Tokensを中心に設計。
16. Ant Design
雰囲気：B2B、管理画面、中国系Webサービス。
向いているサイト：ダッシュボード、管理画面、業務ツール。
入手先：GitHub
特徴：React Components、Theme System、Design Resourcesなど。
GitHub：https://github.com/ant-design/ant-design
17. Arco Design
雰囲気：モダン、スタイリッシュ。
向いているサイト：B2B、SaaS、管理ツール。
入手先：GitHub
特徴：React版だけでも大量のコンポーネントがある。
GitHub：https://github.com/arco-design/arco-design
18. Semi Design
雰囲気：モダン、Webアプリ向け。
向いているサイト：SaaS、Webアプリ、複雑な管理ツール。
入手先：GitHub
特徴：大量のDesign Tokensがあり、カスタマイズ性が高い。
GitHub：https://github.com/DouyinFE/semi-design
19. Radix Themes
雰囲気：ミニマル、現代的。
向いているサイト：スタートアップ、SaaS、Webアプリ。
入手先：GitHub
特徴：Reactベースで、アクセシビリティにも配慮されている。
GitHub：https://github.com/radix-ui/themes
20. Chakra UI
雰囲気：柔らかい、モダン。
向いているサイト：SaaS、Webアプリ、小規模Webサービス。
入手先：GitHub
特徴：Themeを細かく変更でき、自分用のデザインシステムに改造しやすい。
GitHub：https://github.com/chakra-ui/chakra-ui
21. Mantine
雰囲気：モダン、シンプル。
向いているサイト：Webサービス、個人開発、ツール。
入手先：GitHub
特徴：Color、Fonts、Spacing、RadiusなどをThemeとして管理できる。
GitHub：https://github.com/mantinedev/mantine
22. Material UI
略称：MUI
雰囲気：Google Material系。
向いているサイト：Webアプリ全般。
入手先：GitHub
特徴：Material DesignベースのReact UI Library。
GitHub：https://github.com/mui/material-ui
23. Untitled UI Free
雰囲気：スタートアップ、SaaS、洗練されたLP。
向いているサイト：LP、SaaS、企業サイト。
入手先：Figma
特徴：無料版のFigma UI Kit、Design Systemがある。
公式：https://www.untitledui.com/
24. GitLab Pajamas
雰囲気：GitLabらしい実務的なUI。
向いているサイト：開発者サービス、B2B、管理画面。
入手先：GitLab、Figma
特徴：Foundations、Components、Patterns、Contentまで体系化されている。
25. Elastic UI
略称：EUI
雰囲気：データ、検索、分析。
向いているサイト：ダッシュボード、検索サービス、分析ツール。
入手先：GitHub
特徴：Elasticが実際に利用しているReact Design Libraryです。
GitHub：https://github.com/elastic/eui
26. Uber Base Web
雰囲気：サービス系、実用的。
向いているサイト：SaaS、予約サービス、業務アプリ。
入手先：GitHub
特徴：UberのBase Design LanguageをReactで実装したもの。
GitHub：https://github.com/uber/baseweb
27. SAP Fundamental Styles
雰囲気：エンタープライズ、業務システム。
向いているサイト：B2B、管理画面、企業向けツール。
入手先：GitHub
特徴：HTML、CSS中心で大量の実務用コンポーネントがある。
GitHub：https://github.com/SAP/fundamental-styles
28. Shopify Polaris
雰囲気：EC、管理画面、ショップ運営。
向いているサイト：EC、商品管理、管理画面。
入手先：GitHub、公式サイト
特徴：Shopifyのデザインシステム。React版など過去資産もデザイン参考資料として利用できる。
GitHub：https://github.com/Shopify/polaris
29. Canonical Vanilla Framework
雰囲気：技術系、Ubuntu系、企業サイト。
向いているサイト：技術サイト、企業サイト、プロダクトサイト。
入手先：GitHub
特徴：Canonicalが使用しているCSSベースのDesign Frameworkです。
GitHub：https://github.com/canonical/vanilla-framework
30. Figma Open Design Systems
雰囲気：デザインシステムのまとめサイト。
向いている用途：さらに大量のデザインシステムを探したい場合。
入手先：Figma公式
特徴：Figmaが公開しているOpen Design Systemsのコレクション。AWS Amplifyなど、さまざまなデザインシステムを探せる。
公式：https://www.designsystems.com/open-design-systems/
AIっぽくないサイト作りで特に参考にしたい選抜8つ
1. GitHub Primer Brand
LPやメディア向け。GitHub特有のタイポグラフィやレイアウト思想があり、テンプレート感を減らしやすい。
2. IBM Carbon
Grid、Typography、Spacing、Colorなどの設計が非常に細かい。デザインの骨格作りに使いやすい。
3. Figma Simple Design System
既存デザインをコピーするというより、自分専用Design Systemを作るベースとして使いやすい。
4. Semi Design
Design Tokensが非常に細かく、Claude CodeやCodexとの相性も良い。
5. GitLab Pajamas
Componentsだけではなく、PatternsやContentまで設計されている。
6. GOV.UK Design System
いわゆる「AIが作りがちなオシャレSaaS」と真逆。文章中心のサイトやブログには特に参考になる。
7. GitHub Primer Product
Webサービスやツール向け。Design Tokensが機械的に扱いやすい。
8. SAP Fundamental Styles
企業向けの実務デザインなので、AIスタートアップ風デザインから距離を取れる。
重要なのは、1つのデザインシステムを丸ごとコピーしないことです。
例えば、
Typography：Primer Brand
Spacing：Carbon
Grid：Carbon
Form：GOV.UK
Button：オリジナル
Radius：オリジナル
Color：オリジナル
Icons：Lucide
Motion：オリジナル
というように、複数のデザインシステムからルールだけを組み合わせます。
すると、「実在する人間のデザインルールを骨格にしているけれど、どの既存サービスとも同じではないサイト」を作りやすくなります。
Claude CodeやCodexで使う場合は、例えばプロジェクト内に、以下のようなデザインルールを置いておく方法もあります。
/design-system
├── DESIGN.md
├── tokens.css
├── typography.md
├── spacing.md
├── grid.md
├── components.md
├── patterns.md
└── anti-patterns.md
そして、「自由にUIをデザインせず、DESIGN.mdに記載されたルールのみを使用して実装する」とAIに指示します。
これだけでも、AIが毎回似たようなカードUIやグラデーションを勝手に作る現象をかなり抑えられます。
【おまけ】タイプ別で使えるmdファイル
中には「ブログ向け」「Webサービス向け」「診断ツール向け」「LP向け」「メディア向け」「管理画面向け」の6分類を入れ、それぞれについて参照するDesign System、使う要素、レイアウトルール、禁止事項まで分けています。
さらに、共通の「AI臭チェック」として、何でもカード化しない・紫青グラデーション禁止・巨大角丸の乱用禁止・中央揃え乱用禁止・意味のないバッジや影を勝手に追加しないなども明文化しました。
最後に、Claude Code / Codexへそのまま貼れる実装プロンプトも入れてあります。これをプロジェクトルートに DESIGN.md として、置いて使えます。
以上、無料で使えるデザインシステム30選でした。サイト制作やアプリ開発で役立つことと思いますので、個人開発者の方は活用してみてください。
おわり。
