デザインシステムにおけるHTML

デザインシステムは、組織のプロダクト全体で共有して使うコンポーネント、トークン、パターン、ガイドラインのライブラリです。そのHTML側ではマークアップの規約をカプセル化し、すべてのプロダクトでボタン、モーダル、フォーム、カードの構造が一貫してレンダリングされるようにします。

トークンは、デザインを構成する原子的な値です（color: blue-500、spacing: 16px）。コンポーネントは、再利用可能なHTML+CSS+JSの単位です（Button、Modal、TextField）。パターンは、より高レベルな組み合わせです（ログインフォーム、アバター付きのコンテンツカードなど）。HTML構造はコンポーネントのレベルで固定し、パターンではコンポーネントを組み合わせます。

コンポーネントにはベストプラクティスが組み込まれています。すべてのButtonはdivではなく<button>要素を使い、適切なtype属性を指定します。すべてのModalはフォーカスをトラップし、Escapeキーに対応し、適切なARIAロールを持ちます。コンポーネントを採用すれば、プロダクトの機能ごとにアクセシビリティを再実装する必要がありません。

Storybookは、さまざまなpropsやvariantを使って各コンポーネントを分離した状態でレンダリングします。デザイナーやPMはコードを読まなくても利用可能なコンポーネントを確認でき、開発者はソースを探し回らなくても使用例を確認できます。デザインシステムのドキュメントでは、事実上の標準です。

デザインシステムは、semverに従って公開するパッケージとして扱います。利用側が依存するCSSクラスの名前変更やコンポーネントスロットの削除など、HTML/CSSの破壊的変更ではメジャーバージョンを上げます。利用側は予期せぬ形ではなく、自分たちの予定に合わせて意図的に更新できます。

コンポーネントのprops、slot、公開されたpartはパブリックAPIです。利用側に提供した後は、変更コストの高いものとして扱います。非推奨化は段階的に行います。新しいAPIを古いAPIと併存させ、古い使い方には警告を記録し、一定期間の利用状況を確認してから削除します。

トークンによってテーマ設定が可能になります。色トークンのマップを差し替えるだけで、すべてのコンポーネントに新しいパレットが適用されます。トークンですべてを制御し、コンポーネントがハードコードされた値ではなくトークンを参照するようにすれば、異なるブランドが異なる見た目で同じコンポーネントを共有するホワイトラベリングも簡単に実現できます。

React、Vue、Angularなど複数のフレームワークを使う組織では、Web Componentsによってどこでも動作する1つの実装を提供できます。Lit、FAST、またはバニラJavaScriptで構築し、どのフレームワークからも同じように利用できます。契約となるのはフレームワークではなく、HTML構造です。

デザインシステムでは、キーボード操作、ARIAロール、フォーカス管理、色のコントラストなどのアクセシビリティを、各コンポーネントに一度組み込めます。システムを採用するプロダクトチームは、各機能をゼロから作るのではなく、組み込み済みのアクセシビリティを利用できます。これにより、会社全体のアクセシビリティバグを測定可能な形で減らせます。

どのプロダクトがデザインシステムのどのバージョンを使っているかを追跡します。Backstageのコンポーネントカタログ、package.jsonを監視するカスタムSlackボット、シンプルな社内ダッシュボードなどのツールを使えば、最新バージョンがまだ導入されていない場所を把握できます。導入状況の指標は、継続的な投資の必要性を示す根拠になります。

誰がコンポーネントを追加できるのかを決めます。中央のデザインシステムチームだけに任せますか。それともプロダクトチームからの分散型のコントリビューションを認めますか。どちらのモデルにもトレードオフがあります。中央チームはリリースが遅くなりますが品質を維持しやすく、分散型のチームは迅速に動けますが断片化のリスクがあります。組織の規模に基づいて、意識的に選択します。

デザインシステムは常に進化するプロダクトです。プロダクトに新しいパターンが現れたらコンポーネントを追加し、適合しなくなったコンポーネントは非推奨にし、根本的な判断を変更する必要があればリファクタリングします。完成した成果物ではなく、ロードマップを持つソフトウェアとして扱います。

コンポーネント内にハードコードされた値を記述するよりも、デザイントークン（color: blue-500、spacing: 16px）が好まれるのはなぜですか？

デザインシステムは、トークン（原子的な値）、コンポーネント（再利用可能なHTMLの単位）、パターン（より高レベルな組み合わせ）を、プロダクト間で共有するバージョン管理されたライブラリにまとめたものです。ドキュメントにはStorybookを使い、クロスフレームワークでの利用にはWeb Componentsを使い、安定性にはsemverを使います。すべてのコンポーネントにアクセシビリティを組み込み、導入状況を追跡し、常に進化するプロダクトとしてシステムを改善します。