Reactデザインシステム の始め方
React デザインシステムをゼロから構築するには、慎重な計画と検討が必要であり、組織とそのエンドユーザーに役立つコンポーネントライブラリを作成するには、複数の部門とステークホルダーからの意見が不可欠です。
そこで本記事では、Reactのデザインシステムと、コンポーネント開発、ドキュメンテーション、ガバナンス、デザインツールなどへのアプローチ方法について見ていきます。また、重要なトピックが１２個もカバーされている、デザインシステムを構築するためのステップバイステップのガイドもあります。
主なポイント：
- Reactデザインシステムは、ReactJSを使って構築された再利用可能なコード化されたコンポーネント、開発ガイドライン、アセットのコレクションである。
- React デザインシステムのコンポーネントには、事前構築されたボタン、フォーム、ナビゲーションメニュー、カード、その他の UI（ユーザーインターフェース）のビルディングブロックが含まれる。
- Reactデザインシステムを始めるには、「MUIやFluent UI のようなオープンソースのReactコンポーネントを使う」か、「ゼロからの構築」かである。
- プロトタイプで React デザインシステムを使うための最良のツールの１つとして、デザイナーが開発で再利用できる実際のコンポーネントを使えるようになることから、UXPin Merge が挙げられる。
UI コンポーネントを UXPin に取り込み、Reactデザインシステムに基づいてデザイン性の高いプロトタイプを作成しませんか。アプリの構築が１０倍速くなって、開発のスピードが上がります。こちらから UXPin Merge をぜひご覧ください。
Reactデザインシステム とは
Reactデザインシステムは、UI（ユーザーインターフェイス）構築のために広く使われている JavaScript ライブラリである React で使うために特別に構築された、再利用可能な UI コンポーネントとガイドラインのコレクションであり、ボタン、フォーム、ナビゲーションバー、カードなど、事前デザイン済みでカスタマイズ可能なコンポーネントのセットと、React アプリケーション内での使用と実装のためのガイドラインが含まれています。
Reactデザインシステムは、プロジェクト間で簡単に再利用できる統一されたコンポーネントとデザインパターンのセットを提供することで、UI開発の一貫性、効率性、拡張性を促進することを主な目的とします。デベロッパーは Reactデザインシステムを活用することで開発プロセスの効率化、コードの重複の低減、アプリケーション全体でまとまりのある洗練されたルック＆フィールの確保ができます。
React デザインシステムの主な構成要素には、大体以下のようなものが含まれます：
- 再利用可能なコンポーネント： 入力フィールド、ドロップダウンメニュー、モーダル、タブなど、一般的な UI パターンや機能をカプセル化した React コンポーネントのライブラリ。
- デザインガイドライン： プロップ、スタイリングオプション、アクセシビリティへの配慮、React アプリケーション内での統合のベストプラクティスなどの情報を含む、各コンポーネントの使用方法に関する明確なドキュメントとガイドライン。
- テーマ設定とカスタマイズ： テーマ設定とカスタマイズに対応していることから、デベロッパーはブランドアイデンティティやデザイン要件に合わせてデザインシステムを簡単に適応させることができる。
- レスポンシブ・デザイン： さまざまな画面サイズやデバイスに対応し、デスクトップ、タブレット、モバイルの各プラットフォームで一貫したユーザー体験が得られるようにデザインされたコンポーネント。
- アクセシビリティ： アクセシビリティを考慮し、アクセシビリティの基準とガイドラインを満たすようにデザインされたコンポーネントだと、デザインシステムで構築されたアプリケーションは、ハンディキャップのあるユーザーを含むすべてのユーザーが使用できるようになる。
つまり、React デザインシステムは、Reactアプリケーションを構築するための強固な基盤を提供し、デベロッパーは最小限の労力で一貫性のある高品質の UIを作成できるようになります。コラボレーション、効率性、保守性を促進し、Reactベースのプロジェクトに取り組むチームにとって貴重なツールとなるわけです。
React デザインシステムのメリット
React デザインシステムの使用や構築には、多くの利点があります。例えば React のコンポーネント駆動型の開発アプローチは、デザインシステムに最適なモジュール形式のUIライブラリになり、フロントエンドデベロッパーは、React コンポーネントを原子まで分解し、それを組み合わせて新しい UI要素、パターン、テンプレートを作成できます。
また、React は最も広く使われている UI ライブラリの１つで、デザインシステムを構築する上で以下のように多くのメリットがあります：
- 質問や問題解決ができる、デベロッパー向けの大きなコミュニティ
- 豊富なJavascriptツールと統合
- インスピレーションの源となるきちんと確立された多くのデザインシステム
React デザインシステムを利用している企業
以下は、デザインシステムに React を使っている企業です：
- Instacart/Snacks
- Shopify Polaris
- Atlassian デザインシステム
- Salesforce Lightning
- IBM のカーボンデザインシステム
- Microsoft の Fluent UI
- Google のマテリアルデザイン で構築された MUI (Material UI)
コンポーネントのシンタックス、ドキュメント、ガイドライン、その他のデザインシステム要素について学ぶには、これらのデザインシステムをチェックするのがおすすめです。
また、デザインシステムのインスピレーションを得るには、Adele をチェックしてみてください。これは、ダウンロードして分析できる GitHub レポジトリへのリンクを備えた、公開されているデザイン システムとパターン ライブラリのレポジトリです。
React デザインシステムの基礎
アトミックデザインの原理
アトミックデザインとは、ブラッド・フロスト氏によって考案された「UI要素を以下の５つのカテゴリーに分類するシステム」です：
- 原子：これ以上分解できない基本的な UI 要素であり、HTML タグ、フォント、ボタン、アニメーション、カラーパレットなどがある。
- 分子：原子の集まりで、特定の機能や目的を果たす構成要素を作り出し、検索入力、ナビゲーション リンク、ドロップダウン メニューなどがある。
- 有機体：組み合わせて UI を作成する複雑な UI パターンであり、ヘッダー ナビゲーション バー、フッター、画像カルーセルなどがある。
- テンプレート：複数の有機体が連携して動作する完全な UI を表し、ダッシュボード、ニュース フィード、チャット UI などがある。
- ページ：テンプレートのさまざまなインスタンスと、画面内でコンテンツがどのように変化するかを表し、例えば、ニュースフィードのコンテンツの更新や、チャットでのメッセージ受信などがある。
アトミックデザインが React のデザインシステムにとって重要な理由
アトミックデザインの方法論で、React のモジュール性と再利用性の利点を活用できるようになります。デザインシステムを多くの原子の集合体としてアプローチすることで、製品に適応し進化できる柔軟でスケーラブルな UIライブラリを開発しやすくします。
そしてデザインシステムチームは、原子や分子を組み合わせることで、新しいコンポーネントやパターンをより速やかに構築することができ、また、このモジュラーアプローチは、ゼロから開発するよりも、今あるものを組み合わせればいいので、ワンオフの構築がより簡単で、コスト効率も高くなります。
React デザインシステムにおけるコンポーネントの役割
React コンポーネントは、UI やアプリ全体の一貫性、再利用性、保守性を確保するのに役立つビルディングブロックであり、その UI 要素は、以下のような多くの重要な目的を果たします：
- モジュール性： React コンポーネントはデザイン上モジュール化されているため、UI ライブラリの組み合わせ、再利用、管理がしやすくなる。
- 一貫性： React の簡単な再利用性により、デベロッパーはデザイン原則、スタイル、インタラクションを各コンポーネントに組み込み、アプリケーションのどこからでも呼び出すことができる。
- 再利用性： デベロッパーは、再利用可能なコンポーネントの UI ライブラリを活用することで、新製品を開発する際の時間とリソースを節約でき、この再利用性により、ゼロからコードを書く必要がなくなるため、エラーや技術的負債も減らすことができる。
- カスタマイズ性：デベロッパーは、デザインガイドラインに従ったり、UI ライブラリに影響を与えながら、特定のコンポーネントを簡単にカスタマイズすることができる。
- 保守性： コンポーネントが一元化されたレポジトリに保存されているため、デベロッパーは更新やバグ修正を１つの場所からプッシュすることができ、それによってデザインシステムとその製品の保守と改善がしやすくなる。
- スケーラビリティ： エンジニアは、React コンポーネントを拡張して適応させ、製品や新技術に合わせて進化させることができる。
- アクセシビリティ： デベロッパーは、コンポーネントレベルで基本的なアクセシビリティ標準を組み込むことができるため、製品全体への実装がしやすくなる。
デザイントークンを使うことの重要性
デザイントークンには、React デザインシステムのコアバリューが組み込まれており、そのトークンには、色、タイポグラフィ、スペーシング、サイジング、ステート、インタラクティブ性などのプロパティが含まれ、複数のプラットフォーム、デバイス、OS（オペレーティングシステム）にわたって一貫したデザイン言語を維持します。
デザイントークンは、複数のプラットフォーム用に多くの値を含むことができます。例えば、UXPin のホームページでは CTA（Call to Action）に黄色を使っており、この黄色の16進コードは「#FCC821」で、以下のような方法で表現できます：
- HEX: #FCC821
- RGB (CSS): rgb(252, 200, 33)
- RGBA: rgba(252, 200, 33, 1)
- Octal (Android/Flutter): 77144041
そして、この４つの値をすべて１つのデザイントークンの下に以下のようにカプセル化することができます：
- cta-background-primary
なので、この色をプラットフォームに実装する場合は、コードの代わりにトークンを使います。 また、例えば同じ色でも、あるチームは 16 進数、別のチームは RGB、また別のチームが 8 進数を参照すると混乱が生じてエラーにつながるような可能性がありますが、デザイン トークンを使うと、全員が同じ言語を使用するため、部門を超えたコラボレーションがしやすくなります。
また、デザイントークンで、デザインシステムチームはトークンファイルのプロパティの変更だけで製品全体の変更を実装するこができるようになります。例えば、４つのコードを１か所で調整することで、インスタンスやスタイルシートを個別に更新するのではなく、製品エコシステム全体で cta-background-primaryのデザイントークンを黄色から青色に変更できます。
Reactデザインシステム を始める
表面的には、デザインシステムはシンプルに見えますが、実際には、その UI ライブラリは、多くの可動部分を持つ複雑な有機体です。ここでは、Reactのデザインシステムを計画する際に考慮すべき点を見ていきましょう。
これらの要素は、デザインシステムのガバナンスプロトコルと手順の基礎を築くことになることから、この初期の意思決定プロセスの各段階をドキュメント化することが非常に重要です。
モノレポ と ポリレポ のレポジトリ
デザインシステムの React コンポーネントライブラリに「モノレポ（単一のレポジトリ」を使うか、「ポリレポ」を使うかを決定します。
モノレポは依存関係の管理をシンプルにし、複数のパッケージを同時に扱いやすくします。対するポリレポは、パッケージ間のモジュール性と分離性を高め、個々のコンポーネントを独立して保守・使用しやすくします。
アクセンチュアでモノレポとポリレポの長所と短所について語られています（英語）
コンポーネントの構成
製品およびチームにとって最も理にかなった方法でコンポーネントライブラリを整理しましょう。例えば、コンポーネントを機能性、ドメイン、または Atomic Design-MUI はでグループ分けできます ‐ ちなみに MUIはUIライブラリを以下のように機能別に整理しています：
- 入力： ボタン、スイッチ、テキストフィールドなど
- ナビゲーション：ドロワー、メニュー、ページネーションなど
- レイアウト：ボックス、コンテナ、グリッドなど
- データ表示：アバター、アイコン、リストなど
ただ、このようなコンポーネントがどのように分類されるとしても、それぞれに独自のソースコード、スタイル、テスト、ドキュメントがないといけません。
デザイントークンの管理
デザイントークンの管理を、デザインシステムチームが管理する専用のフォルダまたはパッケージに一元化します。この集中管理により、変更と更新はシンプルになりながら、より良いメンテナンスとガバナンスは促進されます。
テーマ設定とカスタマイズ
デザインシステムのテーマ設定とカスタマイズは、最新の製品開発には不可欠であり、大体は「ライトモード」と「ダークモード」の少なくとも２つのテーマが必要です。また、マルチブランドのデザインシステムには、より大きなカスタマイズ性と柔軟性が要求されるため、開発前にこのような要素を考慮する必要があります。
React ライブラリのテーマの設定方法については、CSS Tricks の「Theming and Theme Switching with React and styled-components」をご覧ください。
ドキュメンテーション
デザインシステムのドキュメント化は、導入の成功や、一貫した実装に不可欠であり、そのドキュメントには、デザイン言語、 (コンテンツ、デザイン、コード、アクセシビリティなどの）ガイドライン、スタイル ガイド、ユースケース、コード例、ツール、その他の重要な情報が含まれていないといけません。
Storybook のようなツールで、デザインシステムのドキュメント管理と更新を一元化することができ、 Merge を使って Storybook を UXPin に同期し、デザインと開発全体にわたって「信頼できる唯一の情報源（Siingle source of truth）」を作成できます。
テスト
コンポーネント テストを管理および組織するための構造を計画します。‐ これが、Storybook を検討するもう 1 つの理由です。 Storybookは、ビジュアル、インタラクション、アクセシビリティ、スナップショットなどの複数のバグ防止テストを備えた自動のコンポーネントテストが内蔵されていますからね。
バージョン管理とリリース管理
React ライブラリのバージョン管理戦略とリリース管理プロセスを確立して、デザインシステムが常に更新され、製品と互換性があることを確認します。
デザインツール
デザイナーは、プロトタイプとテストのために React デザインシステムにアクセスする必要があります。 一般的な戦略はベクターベースのツールの使用ですが、これは React デザインシステムの以下の２つの形式を更新して維持するということです：
- レポジトリ内のコンポーネント ライブラリ
- デザインチーム向けの UI キット
UXPin Merge を使うと、React ライブラリを UXPin のデザイン エディターにインポートできるため、デザイナーとエンジニアはまったく同じUIコンポーネントを使うことができます。 そしてコードコンポーネントの同期には、いくつかのオプションがあります。 UXPin Merge についての詳細は、こちらからぜひご覧下さい。
