デザインシステムの１０大 コンポーネント とは？

デザインシステムは、再利用可能な コンポーネント ライブラリなしには存在し得ません。そのデザインシステムの コンポーネント は、デザインと開発におけるワークフローと UI （ユーザーインターフェース）の一貫性を作り出し、ドリフトを最小限に抑え、ハンドオフを効率化するものなのです。

ただ、その UI コンポーネントは単に表示されるわけではなく、デザインシステムチームは、まずデザイン言語（デザイン原則）や、一貫してまとまったコンポーネントライブラリを構築するためのチームをまとめるガイドラインなど、そのような UI 要素が存在するための基盤作りをしないといけません。

Merge のテクノロジーで、レポジトリにホストされているデザインシステムのコンポーネントを UXPin に同期させ、製品開発チーム全体で『信頼できる唯一の情報源（Single source of truth）』を確認することができます。詳細およびアクセス要求方法については、Merge のページをご覧ください。

デザインシステムの コンポーネント とは？

UIコンポーネントは、あらゆるデザインシステムの基礎となるものであり、フロントエンドのデベロッパーは、このコードコンポーネントを使って、UI やデジタル製品を構築します。

UI コンポーネントには以下のように２つの側面があります：

• 視覚的なデザイン要素
• コンポーネントにスタイルとインタラクティビティを与えるコードスニペット

大抵のデザインシステムには、以下の UI ライブラリの２バージョンがあります：

• デザイナー向けの画像ベースの UI キットやスタイルガイド
• デベロッパー向けのコードコンポーネント（UI コンポーネント）ライブラリ

UI コンポーネントのプロパティについての理解

コンポーネントにはそれぞれ、色、間隔、タイポグラフィ、ステートなど、インタラクティブで美的な特性を与えるプロパティがあり、デザインシステムのデザイン言語と UI ガイドラインが、そのプロパティを確定します。

多くのデザインシステムで React が使われているので、そのフレームワークを例にコンポーネントのプロパティの仕組みをご説明します。

Reactでは、プロパティを 「プロップ 」と呼んでおり、プロップには、スタイリング、インタラクティビティ、コンテンツが含まれます。以下の例では、MUI ボタンの React プロップスを示しています。

• 「children prop（子プロップ）」はボタンの内容を確定し、通常は 「今すぐ購入」 や 「送信」 などのラベルを指定します。
• 「color prop （カラープロップ）」は、ボタンの色を確定します。「inherit（継承）」、「primary（主）」、「secondary（副）」 などの各タイプは、デザインシステムのテーマの色を表し、エンジニアは、ライブラリのCSSファイル内のデザイントークンまたは変数を使ってこれらを確定します。
• 「disabled prop（無効プロップ）」 はブール（ブーリアン）で、「True（正）」か「False（誤）」のどちらかです。このプロパティを使うことで、エンジニアはユーザーがタスクやアクションを完了するまでボタンを無効にすることができます。

この３例からわかるように、コンポーネントのプロパティは多くの特性、機能、コンテンツを確定できます。

コンポーネントライブラリ と パターンライブラリ

UIコンポーネントは、効果的な UI を作成するためのビルディングブロックを提供します。例えば、「ユーザー」はボタンのアクションの起動やページ間の移動など、「メニュー」はオプションの表示や追加機能へのアクセスの提供など、デザイナーは UI コンポーネントを使って、アプリケーションのニーズに応じてさまざまなレイアウトやデザインを作成します。

一方 UI パターンは、このようなコンポーネントがどのように相互作用すべきかの構造と構成を提供し、デザインパターンで、ユーザーは必要なものを簡単に見つけられ、製品の使い方を理解できるようになります。一般的な UI パターンには、ナビゲーションバー、検索ボックス、ドロップダウンメニューなどがあり、デザイナーは、確立されたパターンに従って、すべてのプラットフォームで一貫した LnF（ルック＆フィール）を持つアプリケーションを作成することができます。

さらに読む： デザインシステム、パターンライブラリ、スタイルガイドの違い.

UIコンポーネントの構造とアトミックデザイン

UI コンポーネントとデザインパターンは、複数の小さな UI 要素で構成されています。ブラッド・フロスト氏のアトミックデザインは、その構造と、この小さな部分がどのように組み合わされて、私たちが見たり操作したりする部品を形成するかを説明するのに一番いい方法です。

Atom（原子）

Atom（原子） はデザインシステムの基礎となる要素で、これ以上分解することはできません。デザインシステムチームは、この Atom を組み合わせて、UIコンポーネントやデザインパターンを作成します。

Atom の例としては、以下のようなものがあります：

• ラベル
• 入力欄
• ボタン
• カラーパレット
• フォント
• アイコン
• アニメーション
• デザイントークン

Molecule（分子）

Molecule（分子）とは、複数の原子から構成される UI のコンポーネントやパターンのことであり、検索バー、ロゴ、ナビゲーションリンクなど、UI に必要な機能を提供します。

Organism（有機体）

Organism（有機体）とは、デザイナーがテンプレートや UI の構成要素として用いる UI パターンのことであり、例えば、ナビゲーションバー、画像カルーセル、フッター、サイドバーなどがあります。

アトミックデザインの構造は、テンプレートやページにも受け継がれています。詳しくはこちらの記事でお話しています。

デザインシステム１０大コンポーネント

このデザインシステムのコンポーネントのリストは、決して網羅的なものではありませんが、我々が選んだ１０個のコンポーネントのユース ケースと、それらがデザインシステムのエコシステムにどのように適合するかを以下で見ていきましょう。

１．ボタン

ボタンは、デザインシステムにおいて最も重要なコンポーネントの一つであり、フォームの送信、新しいページへの移動、ショッピングカートへの商品の追加など、ユーザーが UI と対話してアクションを完了するための手段を提供します。

デザインシステムを構築する前に製品チームが製品を監査する際、多くのボタンのバリエーションが見つかり、それが最終的にフラストレーションと混乱の原因となることがよくあります。なのでボタンの一貫性が保たれれば、ユーザーはアクションを起こしたり情報を探したりするための正しい UI 要素をすばやく特定することができます。

２．文字入力

テキストフィールドもまた、一般的なデザインシステムのコンポーネントです。このような入力要素により、ユーザーはテキストまたは個人情報などの数値コンテンツを共有し、検索にアクセスすることができます。テキストフィールドは通常、以下の主要なプロパティ３つを備えています；

• ラベル
• ヘルパーテキスト（アクセシビリティ用）
• プレースホルダー

また、デザイナーは、入力をより分かりやすくするために接頭辞や接尾辞を使います。例えば、米ドルを表す接頭辞として記号の「＄」、重量を表す接尾辞として「lbs（ポンド）」や「kg」があります。この２例では、（単位があることから）ユーザーは文字ではなく数字を入れることが分かります。

３．チェックボックスとラジオボタン

チェックボックスは複数選択型の UI パターンで、ラジオボタンは複数の選択肢の中から一つを選択する UI パターンで使われます。

４．トグル（スイッチ）

トグルコンポーネントは、ユーザーが異なる状態やオプションをサッと簡単に切り替えるためのシンプルで直感的な方法を提供し、それによって UI をナビゲートしてタスクを完了する時間が短縮されます。

５．ドロップダウンメニュー

ドロップダウンメニューは、UI の混乱を減らし、ユーザーが自分に関連するオプションだけを選択できるようにします。ユーザーが必要とするまで長いオプションのリストを隠しておくことで、より整理されたユーザーに優しいエクスペリエンスを実現します。

６．カード

デザイナーは、視覚的に魅力的でユーザーに優しい方法で情報を整理して提示するためにカードを使います。カードがあれば、ユーザーはコンテンツをすばやく読み取ることができ、必要なものを簡単に見つけることができます。また、カードはプラットフォーム間で一貫した LnF を提供し、統一されたクロスプラットフォームの UX を実現します。

７．ダイアログボックス

ダイアログは、何かの削除のような重要な、あるいは不可逆的なアクションを確認するための摩擦の瞬間を作り出すモーダルです。このダイアログは、プラットフォームによってビジュアルが異なるため、デザイナーは iOS、Android、Web、Windowsなど、複数のバージョンの作成が必要になります。

８．進捗バー

進捗バーは、複数のステップからなるタスクの進行状況をユーザーに知らせるために、デザイナーが使う重要なフィードバックコンポーネントです。このフィードバックで、ユーザーの期待値はコントロールされ、「あとどれくらいかかるんだ！」というフラストレーションが抑えられます。

９．ツールチップ

ツールチップは、ページ上の機能または要素に関する追加情報をユーザーに提供するもので、デザイナーは、ボタンやリンクなどの UI 要素の目的の説明や、使い方のヒントの提供のために、ツールチップを使います。

ツールチップは、製品やユーザーインターフェースがより複雑なエンタープライズ向けデザインシステムで特に有用であり、ユーザーが UI を離れて製品のドキュメントを確認することなく、ツールチップで機能を説明することができます。

１０．アラート＆スナックバー

アラートとスナックバーは、重要な情報を簡潔かつユーザーに優しく実用的なメッセージでユーザーに提供します。アラートは「エラー」や「警告」、「完了」などを知らせるために、スナックバーはアクションに関するコンテクストの情報を提供するために使われます。

デザインシステムのコンポーネントの例

ここでは、代表的なデザインシステムとそのコンポーネントライブラリの良例をご紹介します：

• Shopify Polaris
• Salesforce Lightning
• Atlassian Design System
• Google’s Material Design
• IBM Carbon Design System
• Microsoft Fluent Design System

このような例はデザインシステムベスト8の事例の記事に載っています。

UXPin Mergeによるコンポーネント駆動型プロトタイプ

デザイナーは、UIキットに含まれるデザインシステムのコンポーネントを使って、視覚的に魅力的な UI を作成することができますが、このような画像ベースのツールの問題は、機能を持たないUIコンポーネントのベクター表現をレンダリングする点にあります。

UXPin Mergeでは、デザイナーはコンポーネント駆動型開発と同様のコンポーネント駆動型プロトタイプ手法を使用して、最終製品のような外観と機能を持つ完全なプロトタイプを作成します。

Merge の仕組み

Mergeは、レポジトリ（GitHub）にホストされているデザインシステムの UI ライブラリとUXPinのデザインエディタを同期させます。デザイナーは、エンジニアが開発で使うのと同じコンポーネントをデザインプロセスで使うため、コンセプトから最終的なリリースまで、『信頼できる唯一の情報源（Single source of truth）』を作成することができます。

Merge をデザイン システムのレポジトリに同期させると、コンポーネントへの変更が UXPin のエディターに自動的に同期され、デザイナーに更新が通知されます。Merge のバージョン コントロールにより、デザイン チームは更新のタイミングを選択でき、古いプロジェクトで作業しているときなど、デザイン システムの以前のバージョンに切り替えることもできます。

ジョンソンエンドジョンソンのコンポーネント駆動型プロトタイピングへの移行

UXPin Mergeに切り替える前、ジョンソンエンドジョンソン（J&J）のデザインチームは画像ベースの UI キットを使用し、PDFと印刷物のスタイルガイドを別々に作成していました。何が問題でしょうか？

「…スタイルガイドをその企業の現在の標準に合うように全部更新したかどうかは、わかり得ないのです。可能な限りたくさんの会議を開いても、時代遅れのスタイルガイドは誰かの机の引き出しに入ったまま佇み、それであなたは１、２年後にもっと大変な思いをすることになるのです。」ジョンソン・エンド・ジョンソン社 エクスペリエンスデザインエキスパート サービスリーダー 、ベン・シェクトマン氏

J&J では、デザインシステムの開発管理に Storybook が、デザイナーには UXPin Merge が使われています。Merge の Storybook 統合により、J&J では２つの技術を同期させ、デザイナーとエンジニアが同じレポジトリから同じUIライブラリを使用できるようになりました。

「このようなコンポーネントは、インタラクティブ性を全て維持しながら、リリース可能な状態であるため、多くのハンドオフトラブルを回避することができ、デジタル製品の構築、デザインと開発の両プロセスをスピードアップしてくれます。」ジョンソン・エンド・ジョンソン社 エクスペリエンスデザインエキスパートサービスリーダー 、ベン・シェクトマン氏

完全な機能を持つプロトタイプを数分で作成

２０２１年のUXPinによるウェビナーで、J&J 社のベン・シェクトマン氏とジル・ジェラード氏は、Mergeによってデザインチームが古い UI の完全機能のプロトタイプを１０分もかからず構築できたことを述べました。

PayPal は Merge に切り替えた後、同様の結果を経験しました。製品デザイナーは 1 ページで完全に機能する新しい UI を １０ 分もかからず構築しますが、これは、経験豊富な UI デザイナーが限られたインタラクティブ機能を持つ画像ベースのツールで １時間以上かかっていたプロセスです。

もし Merge がこのような多国籍企業の巨大な製品開発プロセスをシンプルにできるなら、あなたのビジネスだったら何ができるか想像してみてください。

詳細およびアクセスのリクエスト法については、Merge のページをぜひご覧ください。