Skip to content

Adopt Material Design 3 as Design System

コンテキスト

複数のプロダクトを開発・運用する環境において、一貫したユーザー体験を提供しながら、各プロダクトの独自性も保つ必要がある。デザインシステムの選定は、開発効率、メンテナンス性、ブランド戦略に大きな影響を与える。

現在、以下の課題が存在する。

各プロダクトで異なるUIパターンを使用しており、ユーザー体験の一貫性が欠如している
デザインの実装において、開発者とデザイナー間でのコミュニケーションコストが高い
アクセシビリティやレスポンシブデザインの実装が各プロダクトでバラバラである
新規プロダクト立ち上げ時にUIデザインから始める必要があり、開発速度が低下する

決定事項

デザインシステムとしてMaterial Design 3を採用する。テーマシステムを活用し、プロダクトごとにカスタマイズしながら、体験の一貫性を保つ。

選択肢

選択肢1: Material Design 3（採用案）

利点:
- Googleによる詳細なドキュメントとガイドラインが整備されている
- Dynamic Colorによる高度なテーマシステムで、ブランドカラーから自動的にカラーパレットを生成
- Material Youの概念により、ユーザーごとのパーソナライゼーションも可能
- アクセシビリティ基準が組み込まれており、WCAG準拠が容易
- 複数プラットフォーム（Web、Android、iOS）で統一的な実装が可能
- コンポーネントライブラリが豊富で、開発速度が向上
欠点:
- Googleプロダクトと似た印象になりやすい
- 独自性の高いUIを実現するには制約がある
- すべてのコンポーネントを使用するとアプリケーションが重くなる可能性

選択肢2: Ant Design

利点:
- 企業向けアプリケーションに特化した豊富なコンポーネント
- データ表示系のコンポーネントが充実
- React向けの実装が成熟している
欠点:
- モバイルファーストではない
- カスタマイズ性がMaterial Design 3より劣る
- 主に中国市場向けで、グローバル展開には課題がある

選択肢3: カスタムデザインシステム

利点:
- 完全な独自性とブランドアイデンティティの確立
- 制約なく自由なデザインが可能
- 必要な機能のみを実装できる
欠点:
- 開発・メンテナンスコストが膨大
- ドキュメント整備に多大なリソースが必要
- アクセシビリティ対応を独自に実装する必要がある
- 新規メンバーの学習コストが高い

選択肢4: Tailwind UI

利点:
- ユーティリティファーストで柔軟なスタイリング
- 軽量で高速
- カスタマイズが容易
欠点:
- コンポーネントレベルのデザインシステムではない
- デザインの一貫性を保つには追加の規約が必要
- アクセシビリティは開発者の責任となる

結果

この決定による影響を記述する。

ポジティブな影響:
- 複数プロダクト間でのUX一貫性が向上する
- 既製コンポーネントの活用により開発速度が向上し、新規機能開発に注力できる
- テーマシステムにより、プロダクトごとのブランディングが可能
- アクセシビリティ基準を満たしやすくなる
- デザイナーと開発者間のコミュニケーションが効率化される
- モバイルファーストアプローチによりレスポンシブ対応が容易
ネガティブな影響:
- 初期学習コストが発生する
- 既存プロダクトのUI移行作業が必要
- Material Designの制約内でのデザインとなる
リスク:
- Googleのデザイン方針変更による影響を受ける可能性
- 過度にMaterial Designに依存すると独自性が失われるリスク
- パフォーマンスへの影響を継続的に監視する必要がある

実装ガイドライン

テーマ戦略

ベーステーマ: Material Design 3のデフォルトテーマをベースとする
ブランドテーマ: 各プロダクトのブランドカラーからDynamic Colorでテーマ生成
カスタムトークン: フォントサイズ、スペーシング、アニメーション速度など、プロダクト固有の要件に応じて独自のデザイントークンを追加

導入手順

Material Design 3のコンポーネントライブラリ選定（Material Web、MUIなど）
基本テーマの設定とカスタマイズ
共通コンポーネントの実装
各プロダクトへの段階的適用

参考資料