Webサイトを作っていると、ページが増えるにつれて、デザインに少しずつ違いが生まれることがあります。
次の様な場合です。
- ページによって、同じ役割のボタンなのに色が違う
- 見出しの文字サイズがページごとに異なる
- カードの角丸や余白が統一されていない
- 似たようなコンポーネントが何種類も作られている
1ページだけを作っているときは、それほど気にならないかもしれませんが、
ページが10枚、20枚と増えると、
デザインの統一性を維持することが難しくなります。
こうした問題を防ぐために使われる考え方が、
Design System（デザインシステム） です。
デザインシステムとは?
色・文字・余白などのデザインルールと、それらを実際に利用するコンポーネントや運用方法を体系的に整理したものです。
単にデザインを統一するだけではなく、
複数の人が制作に参加しても、
同じルールに沿って画面を作れるようにすることも目的です。
Design Systemを構成する要素
デザインシステムは、いくつかの要素を組み合わせて作ります。
デザイントークン
デザイントークンは、デザインで繰り返し使う値に名前を付けて管理する仕組みです。
例えば、次のようなものがあります。
- ブランドカラー
- 本文や見出しの文字色
- 文字サイズ
- 余白
- 角丸
- 境界線の色
今回は、色を例に考えてみましょう。
通常の制作では、ボタンの背景色を青色に設定し、別のページでも同じ青色を指定することがあります。
しかし、ページが増えると、少し違う青色が使われたり、色の変更時に修正漏れが起きたりする可能性があります。
そこで、色に
color/primary のような名前を付けて管理します。
ボタンなどのコンポーネントが、その名前に対応する色を参照するようにすれば、共通の色を変更しやすくなります。
Figmaでは、Variables（変数）が、このような値の管理に役立ちます。
ちなみに、CSSでは、
変数プロパティという機能を使う事で、サイト全体で統一することができます。
コンポーネント
前回までに学んだComponent、Variants、Component Propertiesも、デザインシステムを構成する重要な要素です。
例えば、次のようなコンポーネントを用意します。
- ボタン
- 入力フォーム
- ナビゲーション
- カード
- ダイアログ
コンポーネントを共通化することで、ページごとに似たパーツを作り直す必要がなくなります。
また、Variantsを使えば、通常状態や無効状態などの違いも整理できます。
使用ルールとガイドライン
デザインシステムには、値やコンポーネントだけでなく、
それらをどう使うかというルールも必要です。
例えば、次のようなルールです。
- 主要な操作にはプライマリボタンを使用する
- 本文の文字サイズは基本的に統一する
- カードの内側の余白は共通の値を使う
- エラー状態には決められた色と表示方法を使う
ルールを明確にすることで、制作する人によって判断が大きく変わることを防げます。
小さなデザインシステムを作る
Figma上で簡単なデザインシステムを作ってみましょう。
手順1：デザインシステム用のPageを作る
Figmaで、新しいファイルを作成します。
HOMEアイコンでファイル一覧に入って、Designボタンを押す事で、新規ファイル（プロジェクト）が作れます。
最初に、Page1というページ名になっているので、
Design System に変更します。
このPageに、共通で利用する色やコンポーネントをまとめていきます。
Pageは作業場所を分けるためのものです。
Design SystemというPageを作っただけで、自動的にデザインシステムが完成するわけではありません。
手順2：色のルールを整理する
キャンバスに四角形を3つ配置し、それぞれに異なる色を設定します。
Primary：主要な操作に使う色
Text：本文に使う色
Surface：カードなどの背景に使う色
ここでは、まだ色をVariablesに登録する必要はありません。
まずは、どの色を何のために使うかを決めることが目的です。
色のルールを決めずにVariablesだけ作っても、何を共通化すればよいか分からなくなるためです。
手順3：共通のボタンコンポーネントを配置する
それぞれのボタンにコンポーネントをセットします。
ボタンのバリエーションとして、次のものを用意します。
プライマリ：主要な操作に使うボタン
セカンダリ：補助的な操作に使うボタン
無効：現在操作できないことを示すボタン
それぞれの用途をテキストで記載しておきましょう。
この段階では、色や状態のルールを整理できていれば十分です。Variablesを使った値の一元管理は、Day16で扱います。
手順4：コンポーネントの使い方を記録する
キャンバスにテキストを追加して、ボタンの使用ルールを書きます。
例えば、次のような内容です。
プライマリは、画面内で最も重要な操作に使う
セカンダリは、主要操作に付随する操作に使う
無効状態は、操作できないことを明示するときに使う
こうしておくと、後から自分で見返したときにも、なぜそのデザインにしたのかを確認できます。
デザインシステムは、パーツを並べただけでは不十分です。
どの場面で、どのパーツを使うのかという判断基準も重要です。
デザインシステムとコンポーネント集は違う
よく混同される2つのものを整理しておきましょう。
コンポーネント集 は、再利用するパーツをまとめたものです。
一方、
デザインシステム は、コンポーネントだけでなく、色・文字・余白などのルールや、使い方、運用方法まで含めた仕組みです。
例えば、ボタンを20種類集めたPageがあっても、色の選び方や使い分けのルールがなければ、十分なデザインシステムとはいえません。
反対に、色や文字のルールだけを決めても、それを利用するコンポーネントがなければ、制作時に毎回同じ設定を繰り返すことになります。
ルールと実際に使う部品の両方を整えることが重要です。
デザインシステムは最初から完璧に作らなくてよい
大規模なサービスでは、
数百種類のコンポーネントや複雑なルールを持つデザインシステムが使われることもあります。
しかし、最初から大規模な仕組みを作る必要はありません。
まずは、次のような基本的なものから始めるとよいでしょう。
ブランドカラーと基本の文字色
見出しと本文の文字サイズ
基本的な余白のルール
ボタンや入力フォームなどの共通コンポーネント
コンポーネントを使う際の簡単なルール
実際にページを作っていく中で、同じパーツが何度も登場したり、似たような設定が増えたりしたら、共通化を検討します。
デザインシステムは、最初にすべてを決めて完成させるものというより、制作と運用を通じて
育てていくものです。
Web制作の視点で考えるDesign System
Web開発でも、デザインシステムと似た考え方を取り入れられます。
例えば、CSSのカスタムプロパティで色や余白を管理し、共通のUIコンポーネントでボタンやフォームを実装する方法です。
色を変更したい場合、個々のCSSを修正するのではなく、共通の変数を変更すれば、利用している複数のパーツに反映できます。
Figmaの
Variablesや
Componentsも、デザインデータの中で共通ルールを管理するために役立ちます。
ただし、Figmaのデザインシステムと、実際のWebアプリケーションのデザインシステムは同一ではありません。
Figmaで定義したルールが、そのまま自動的にCSSや実装コードになるとは限りません。
重要なのは、デザイン段階から共通化の方針を決め、
実装側でも可能な範囲で対応することです。
あとがき
デザインの統一性は、作る人の注意力だけに頼っていては維持しにくくなります。
共通のルールを決め、共通の部品を用意し、
誰が作業しても同じ基準で判断できるようにする。それがデザインシステムの基本的な考え方です。
小さなWebサイトであっても、ボタンの色や文字サイズなどを整理するだけで、修正のしやすさや制作の一貫性は大きく変わります。
まずは小さなルールから始め、必要に応じて仕組みを育てていきましょう。
0 件のコメント:
コメントを投稿