コンポーネントはデザインシステムを構成する要素の1つです。よりよいデザインを効率的に作成するなら、コンポーネントの知識が欠かせません。本記事ではデザインシステムにおけるコンポーネントの概要や種類、特徴などを解説します。デザインシステムのメリットや、導入前に検討すべき内容も述べるため、ぜひ参考にしてください。
デザインシステムのコンポーネントとは？
デザインシステムのコンポーネントとは、具体的にどのようなものなのでしょうか。デザインシステムとコンポーネントの定義をそれぞれ解説します。
デザインシステムの定義
デザインシステムとは、UIツールキットに関するデザインの基準と、よいデザインとは何かを定義づけするようなドキュメント一式を指します。UIツールキットには、UIパターンやUXデザインの原則、コンポーネントなどが含まれています。デザイナーと開発者がプロダクトを開発するために、必要なものが組み込まれているシステムです。
コンポーネントの定義
コンポーネントとは、部品・成分などを意味する言葉です。機器やソフトウェア、目に見える部品以外のプログラム部品を指すときにも用いられます。
デザインシステムの基礎としてコンポーネントは使用され、プロダクトを構築するのが一般的です。色や間隔、テキストなど、視覚的なデザイン要素を含んでいます。
コンポーネントはデザインシステムの要素
デザインシステムは、デザイン原則・スタイルガイド・コンポーネントで構成されています。各要素の概要は以下のとおりです。
・デザイン原則：プロダクト制作にあたって企業理念やブランド方針など、重視するものを言語化したデザインの指針
・スタイルガイド：デザイン原則に基づいたスタイルに関するガイドライン（タイポグラフィ・カラー・レイアウト・サイズなど）
・コンポーネント：すぐ利用できるコードセット（ボタン・リスト・ナビゲーションなど）
それぞれの要素が相互に作用して、デザインシステムが形成されています。
コンポーネントの構造
コンポーネントの構造は、原子・分子・有機体の3つの要素から構成されているのが特徴です。それぞれの要素について解説します。
原子（Atom）
原子（Atom）は、これ以上の分解ができないほど小さな要素で、デザインシステムの基礎となるコンポーネントです。ラベル・入力欄・ボタン・フォント・カラーパレットなどが、代表的な原子として挙げられます。UIコンポーネントやデザインパターンは、さまざまな原子を組み合わせることにより作成可能です。
分子（Molecule）
複数の原子で構成されたUIコンポーネントやデザインパターンを、分子（Molecule）と呼びます。複数のHTMLタグがグループとして、1つの動作をするコンポーネントのことです。
代表的な分子として、検索バー・ロゴ・ナビゲーションリンク・カードなどが挙げられます。UIで必要となる機能を持ち、提供するのが主な役割です。
有機体（Organism）
有機体（Organism）とは、複数の分子を組み合わせて形成し、UIの構成要素やテンプレートとして用いられるパターンを指します。分子になっていない原子を含めて形成することも可能です。ナビゲーションバー・フッター・サイドバーなどが、代表例として挙げられます。有機体は、単体でWebサイトを構成するための要素となっているのが一般的です。
デザインシステムの主なコンポーネント
デザインシステムの主なコンポーネントを解説します。それぞれにどのような特徴・用途があるのかを解説します。
ボタン
デザインシステムで最重要となるコンポーネントの1つとして、ボタンがあります。ユーザーのアクション手段を提供するための要素として用いられています。具体的にはページの移動やフォームの送信、欲しい商品をカートへ追加するなどのアクションを起こせます。重要なコンポーネントであるため、混乱を避ける目的で一貫性のあるレイアウトであることが求められています。
テキスト
テキストは、デザインシステムにおける一般的なコンポーネントの1つに含まれています。文字の太さやサイズ、高さなど、テキストに関する情報を所有しています。ラベル・ヘルパーテキスト・プレースホルダーという、3つのプロパティも備えていることが特徴です。ユーザーと数値的なコンテンツを共有することで、検索へとアクセスできる要素となっています。
チェックボックス・ラジオボタン
チェックボックスとラジオボタンと呼ばれる入力フォームもあります。それぞれの特徴は以下のとおりです。
・チェックボックス：選択肢のなかから複数選択できるUIパターン
・ラジオボタン：選択肢のなかから1つを選択するUIパターン
一般的にチェックボックスは四角デザインが多く、ラジオボタンは丸いことが多い傾向です。
トグル（スイッチ）
トグル（スイッチ）とは、ユーザーの切り替えアクションを提供するUIパーツの1つです。オン・オフが視覚的にわかりやすく、直感的な操作が可能になります。スマートフォンのアラームや機内モード、Wi-Fiなどの設定で使用されています。状態のわかりやすさと操作性の高さから、タスク完了の時間を短縮できることも特徴です。
ドロップダウンメニュー
ドロップダウンメニューとは、必要なタイミング以外では基本的に隠れているサブメニューのことです。横に展開しているメインメニューのなかから、ユーザーが必要なオプションだけを選択できるため、UIの混乱を軽減できます。
一般的にクリックしなくてもカーソルをメインメニューの上にのせるだけで、ドロップダウンメニューが開閉し、高い操作性も持ち合わせていることが特徴です。
カード
カードとは、短い情報を複数入れられるコンテナを指します。トランプのカードのようなサイズの形をしているのが特徴です。視覚的に複数の情報を整理できることで、ユーザーにとってわかりやすく情報を提示できます。また、コンテンツを読み取りやすく、簡単に必要な情報を見つけられます。
ダイアログボックス
ダイアログボックスとは、ポップアップ表示される小さなウィンドウのことです。コンテンツの削除やインストールなど、メッセージをユーザー向けに表示することで、アクションを確認する役割があります。WindowsやAndroid、iOSなどのプラットフォームによって見た目が異なるため、それぞれに合わせたデザインでの作成が必要です。
進捗バー
進捗バーとは、タスクの進捗状況をユーザーに伝えることが目的のコンポーネントです。プログレスバーとも呼ばれています。システムのインストールや大量のデータ伝送など、完了までに時間がかかる場合に用いられます。進捗状況が可視化されることで、ユーザーの「どの程度時間がかかるのか分からない」という、フラストレーションを抑えられるのが利用のメリットです。
ツールチップ
ツールチップとは、追加情報をユーザーに提供することが目的のコンポーネントです。基本的に用語やフォームの入力内容、ボタンやリンクなどの使い方の説明をする際に利用します。カーソルを合わせることで補足説明が表示されるため、シンプルなUIを実現できます。特に法人向けプロダクトのデザインシステムで効果的です。
アラート・スナックバー
アラートやスナックバーは、ユーザーに対してメッセージを伝えるために用いられるコンポーネントです。一般的に表示されるメッセージには以下のようなものがあります。
・アラート：エラー・警告・完了を知らせる
・スナックバー：アクションに関して情報提供する
どちらも重要な情報を簡潔に提供できます。
デザインシステムのメリット
デザインシステムを導入することによって、以下の3つのメリットがあります。
1つ目は、UIデザインに一貫性を持たせられることです。一貫性を持ったデザインにすることにより、ユーザーが混乱しにくくなります。
2つ目は、チームでのコミュニケーションがスムーズになることです。ルールが明確になることで、前提となる知識や認識をそろえた状態でプロジェクトを進行できます。
3つ目は、開発に関わる人材の作業が効率化されることです。結果としてコスト削減につながることもメリットといえるでしょう。
デザインシステムで考えるべきポイント
デザインシステムを導入する際に考えるべきポイントがあります。主な2つのポイントをそれぞれ具体的に解説します。
デザインシステム導入の必要性
デザインシステムが自社にとって必要かどうか検討しましょう。たとえば、新規で開発するプロダクトの場合、開発途中での変更が多いと考えられます。変更が加わることで、初期の想定とは異なるプロダクトが求められる場合もあります。具体的には、用意していたデザインシステムが使われなくなったり、変更されたりすることです。そのため、プロダクトの開発が安定してきた段階で導入しましょう。
デザインシステムの導入目的
デザインシステムは、プロダクトをよりよくするための手段として用いられます。デザインシステムの作成自体が目的にならないようにしましょう。何を実現するためにデザインシステムを導入したいのか、目的を明確に設定しておくことが大切です。
デザインシステムを作る手順
デザインシステムを作成する際、まずは企業イメージやブランドなどからデザイン原則を決めましょう。企業やブランドらしさのあるプロダクトを作成できます。次にデザイン原則に基づいて、スタイルガイド（デザインのルール）を決定しましょう。カラーやレイアウト、アイコンなどの要素を決めます。最後にコンポーネントの実装コードを作成し、ビジュアルとセットにします。デザイン原則や、スタイルガイドに基づいて作成できているかを確認しましょう。
まとめ
デザインシステムにおいて、コンポーネントは欠かせない要素の1つとされています。デザインシステムの導入目的を明確化したうえで作成しましょう。効率的に作成するためには、コンポーネントに関する知識が必要です。
株式会社Sun Asteriskは、DXコンサルやプロダクトの設計から本格的な開発まで、一気通貫でサポートできるケイパビリティの広さが特徴です。圧倒的に柔軟な開発リソースを備えており、お客さまのデザインシステム作成を支援します。デザインシステムの構築にお悩みの方は、お気軽にご相談ください。
貴社の状況にあわせて最適なチームをご提案します。デザインシステムのご相談やお見積りのご依頼は、お気軽にお問い合わせください。
モダナイゼーションに関するソリューションやこれまでの開発実績をまとめた資料のダウンロードはこちらから。