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