デザインシステム とは？

スタイルガイドは「色はこの青、フォントはこのサイズ」といった見た目のルール集。デザインシステムはそれに加えて、実際に動くコンポーネントライブラリ、使い方のドキュメント、設計原則、アクセシビリティ基準まで含む包括的な仕組みだよ。コードとデザインの両方をカバーするのがポイントだね

Google Material Design（Android・Web）、Apple Human Interface Guidelines（iOS・macOS）、IBM Carbon、Salesforce Lightning、Shopify Polarisなどが有名。日本ではSmartHRのSmartHR UIが公開デザインシステムとして知られているよ。オープンソースだから参考にしやすいんだ

大規模な「デザインシステム」を構築する必要はないけど、最低限のコンポーネントライブラリとカラートークン、タイポグラフィの定義はあった方がいいよ。2〜3人のチームでも「ボタンの色がページごとに違う」「余白がバラバラ」は防ぎたいでしょ？Tailwind CSSのテーマ設定だけでもミニマムなデザインシステムになるんだ

最大の課題は「作ったけど使われない」問題だよ。対策は①開発者体験を重視する（npm installで使えるレベルに）、②ドキュメントを充実させる、③デザイナーとエンジニアが共同でメンテナンスする、④利用状況をトラッキングして改善する。デザインシステムは製品であり、継続的な投資が必要な「生き物」だと認識しようね