技術 約4分で読めます

デザインシステム構築の必携リソース6選

Design Systems UI UX Design リソース

Abraham John (@Abmankendrick) が X で「UI/UX デザイナー向けのデザインシステムリソース」として紹介していた6サイトが良さそうだったので、それぞれ見て回ってまとめた。

1. The Design System Guide（ガイド＆学習プラットフォーム）

URL: https://thedesignsystem.guide

The Design System Guide

デザインシステムの初心者から経験者まで、あらゆるレベル向けの包括的なリソースハブ。個人運営だが業界での信頼度が高い。

主な機能

  • ニュースレター: 週刊で AI、プロダクト、デザインシステムの知見を配信（15,000人以上の購読者）
  • コース: Design Tokens Mastery、Agentic Design Systems、Airtable活用ガイドなど
  • ナレッジベース: デザインシステムの指標やリサーチインタビュー質問集
  • ポッドキャスト: 業界人へのインタビュー形式の DSG Podcast

AI を活用したコンポーネント監査やドキュメント自動化など、最新トレンドをキャッチアップできる。

2. Componly Collection（複数デザインシステムの実装例比較）

URL: https://collection.componly.co

Componly Collection

「デザインシステムのお菓子屋さん」というコンセプトで、複数のデザインシステムから UIコンポーネント実装例を検索・閲覧できるプラットフォーム。

特徴

  • 400ページ以上: コンポーネント実装例が大量に網羅されている
  • 複数デザインシステム対応: ShadCN/UI、Material UI、Salesforce Lightning Design System など、異なるシステムでの実装を並べて比較可能
  • 無料ツール: デザインシステム導入状況を診断する「Check your DS Adoption」機能

同じコンポーネントを複数のシステムでどう実装しているか学べるのが、実装時の参考になる。

3. Design System Checklist（チェックリスト）

URL: https://designsystemchecklist.com

Design System Checklist

デザインシステムの構築・成長段階をサポートするオープンソースのチェックリスト。

4つのカテゴリ

  1. Design language (10 項目)
  2. Foundations (26 項目)
  3. Core components (166 項目)
  4. Maintenance (28 項目)

チェックを入れていくことで、自分たちのシステムの成熟度を可視化できる。複数言語（英語、韓国語、ポルトガル語など）対応。

4. Design Systems Surf（デザインシステムデータベース）

URL: https://designsystems.surf

Design Systems Surf

世界のトップテック企業のデザインシステムを網羅した、最大規模のギャラリー。

スケール

  • 74 個のデザインシステム: Adobe Spectrum、Apple HIG、Google Material Design、Microsoft Fluent など大手企業が勢ぞろい
  • 24 個のディレクトリ
  • 55 個のコンポーネント

各システムの実装例、使用している技術スタック（React、Vue、Web Components など）、ドキュメントへのリンクが整理されている。ベストプラクティスを学ぶなら必見。

5. Design Systems Repo（リソース統合サイト）

URL: https://designsystemsrepo.com

Design Systems Repo

デザインシステムに関する リソースを4つのカテゴリで一元管理。

コンテンツ

  • Design Systems: 実際のシステム事例紹介
  • Articles: 「The Complete Guide About Design Systems」など実践的な記事
  • Tools: デザインシステム構築・管理ツール
  • Books: デザインシステムの学習に役立つ書籍
  • Talks: 業界人によるプレゼンテーション

「frequently updated」を謳っており、常に最新情報が追加されている。

6. The Component Gallery（コンポーネントギャラリー）

URL: https://component.gallery

The Component Gallery

60個のコンポーネントと95個のデザインシステム、計2,680個の実装例を掲載。UIコンポーネント設計の参考資料として最高峰。

構成

  • 60 種類のコンポーネント: Carousel、Tree view、Popover、Rating、Accordion、Quote、Pagination、Tabs など
  • 95 個のデザインシステム: Elastic UI、Sainsbury’s、Ariakit、SubZero、Web Awesome、Red Hat など
  • 検索機能: Pagefind で全サイト横断検索が可能

Astro + Airtable + Netlify で構築されており、オープンソースのアプローチも参考になる。

どう使い分けるか

リソース用途
The Design System Guide学習・コース: 基礎から応用まで網羅的に学びたいとき
Componly Collection実装例比較: 複数システムでの実装パターンを並べて見たいとき
Design System Checklist進捗管理: 自社システムの成熟度を可視化したいとき
Design Systems Surfベストプラクティス: 大手企業の事例から学びたいとき
Design Systems Repoリソース探索: 記事、ツール、書籍をまとめて検索したいとき
The Component Gallery実装リファレンス: 特定のコンポーネント実装例を参照したいとき

デザインシステム構築の段階や目的に応じて、組み合わせて活用するのが効果的。

今回紹介したのはいわゆるガワのコンポーネントの話。UX的な話はUI/UX開発の手戻り問題、現場から見た本音、AIに食わすならClaude CodeのUI出力を劇的に改善する3つのリソースって記事も書いたので、まとめて見てもらえるとより良いものになるかも。