デザインシステムの作り方と、ガイドラインとの違い

ページを5枚も作ると、必ずこうなります。「このボタン、前は角丸6pxだったっけ？」「見出しの青、微妙に違う…」

毎回ゼロから決めているからです。決め直すたびに時間が溶けて、しかも全体はそろいません。
そこで出てくるのがデザインシステムです。このレッスンでは、デザインガイドラインとの違い、中身の4要素、アトミックデザインの考え方を整理します。会社の大きな仕組みの話で終わらせず、ひとりでも作れる小さい版まで持っていきますね。

デザインシステムは「毎回決めない」ための仕組み

デザインシステムは、そのサービスで使う色・文字・部品と、その使い方をひとまとめにした仕組みです。文書だけではありません。実際に貼って使える部品と、判断に迷ったときの考え方まで含みます。

目的は2つです。作る速さを上げることと、誰が作っても同じ見た目になること。
ボタンが決まっていれば、ボタンを考える時間はゼロになります。空いた時間は、そのページで本当に考えるべきことへ回せます。

デザインシステムは、選択肢を増やす道具ではありません。決めなくていいことを増やす道具です。

言葉だけだと形が見えないので、実物を見るのが早いです。デザインシステムは公開されているものが多く、どれも無料で中身を読めます。

3つとも、部品と「その部品をどの場面で使うか」がセットになっています。読む文書ではなく、使う道具の形をしているのが特徴です。

日本語で読めるものは、ほかにもあります。どれも会社が自分で公開していて、登録なしで中身を見られます。

デザインガイドラインとの違い

デザインガイドラインは、守ってほしいルールを書いた文書です。ロゴの余白、使ってよい色、禁止する表現。読んで、人が手で守ります。

デザインシステムは、そのルールに使える部品と更新の仕組みを足したものです。守るかどうかを人の記憶に任せず、用意された部品を使えば自然にそろう形にします。

	デザインガイドライン	デザインシステム
中身	ルールを書いた文書	ルール＋使える部品＋使い方の説明
形	PDFやスライド	部品ファイル、コード、公開サイト
守り方	読んで、人が気をつける	用意された部品を使えばそろう
更新	版を作り直す	部品を直すと、使っている全画面へ届く
向いている規模	ロゴやブランド表記の統一	画面数の多いサービス、複数人の制作

対立するものではありません。ガイドラインはデザインシステムの一部だと考えてください。小さい制作ならガイドラインだけで足りますし、画面が増えてきたら部品を足していけばいいです。

名前で見分けようとすると、かえって迷います。分かりやすい例が一休です。

小さい部品から共通化するのは、ひとりの制作でも同じです。作品ごとにボタンを作り直すのをやめる。ここから始めると、複数の作品が同じ顔になります。

デザインシステムの構成要素は4つ

公開されているものを何個か読むと、だいたいこの4つで組み立ててあります。

抜けやすいのは4番です。部品だけ配ると、それぞれが好きな場面で使い始めて、結局そろいません。「使わない場面」まで書いてあるかどうかが、続く仕組みの分かれ目です💡

この4つで組み立ててあるのは、日本のものだけではありません。海外の大きなサービスも同じ形です。

どれも原則・スタイル・コンポーネント・使い方の順で並んでいます。1つの読み方を覚えると、残りも同じ順で読めます。英語のものは、ボタンや入力欄の絵を見るだけでも参考になります。

アトミックデザイン：部品を5階層で整理する

アトミックデザインは、部品を大きさの順に5つの階層へ分ける考え方です。ブラッド・フロストが提唱しました。小さい部品を組み合わせて大きい部品を作る、という並べ方をします。

便利なのは、直す場所が1か所に決まるところです。ボタンの色を変えたければ原子を直す。すると、その原子を使っている分子も区画もページも全部変わります。

ただ、5階層をそのまま当てはめようとすると必ず詰まります。「これは分子？ 有機体？」で会議が止まるからです。
階層の名前は目的ではありません。小さい部品から積む、直す場所を1つにする。この2つだけ持ち帰れば十分です。

ひとりでも作れる小さいデザインシステム

大きな仕組みは会社の話に聞こえますが、個人の制作こそ効きます。決める人が自分ひとりなので、ブレやすいからです。

作るのは1ページで足ります。Figmaでも、紙でも構いません。最初に決めるのはこの4つだけです。

この1ページがあると、次の制作の最初の30分が消えます。しかも作品どうしの見た目がそろうので、ポートフォリオ全体の印象も上がりますよ。

ミニ実践：公開されているデザインシステムを1つ読む

30分ほど。読むだけの練習です。世の中のデザインシステムは公開されているものが多いので、そのまま教材になります。

1. 公開されているものを1つ選ぶ。日本語で読むならデジタル庁のデザインシステム、Ameba Spindle、SmartHR Design System、一休のIKYU Design Guidelineあたりが読みやすいです
2. まず原則のページを読む。何を大事にすると宣言しているか、1行でメモする
3. 次にボタンのページを開く。種類、大きさ、状態が何個あるか数える
4. 「使わない場面」の記述を探す。見つけたら、その理由をメモする
5. 自分が最近作ったものを開いて、ボタンが何種類あるか数える。3種類を超えていたら、どれを消せるか考える

ボタン1つに絞って読むのがコツです。全体を読もうとすると量に負けます。同じやり方で、次は入力欄、その次は色。1回1テーマで足ります◎

よくある質問

デザインシステムとは何ですか？

そのサービスで使う色・文字・部品と、その使い方をひとまとめにした仕組みです。判断の基準（原則）、数値で決めた土台（スタイル）、貼って使える部品（コンポーネント）、いつ使うかの説明の4つでできています。目的は、作る速さを上げることと、誰が作っても同じ見た目にすることです。

デザインガイドラインとデザインシステムの違いは何ですか？

ガイドラインはルールを書いた文書で、人が読んで守ります。デザインシステムは、そこへ実際に使える部品と更新の仕組みを足したものです。部品を使えば自然にそろうので、記憶に頼らずに統一できます。ガイドラインはデザインシステムの一部だと考えてください。

デザインシステムで有名なものはありますか？

海外だとGoogleのMaterial Design、AppleのHuman Interface Guidelines、ShopifyのPolarisあたりが有名です。日本語で読めるものなら、デジタル庁のデザインシステム、AmebaのSpindle、SmartHR Design Systemが参考になります。どれも公開されているので、そのまま教材として読めます。

個人の制作でも作ったほうがいいですか？

1ページ分だけ作ってください。色3色、文字3サイズ、余白4段階、ボタン3種類。これだけで、次の制作の立ち上がりが速くなります。ひとりの制作はブレやすいので、決めた紙が1枚あるだけで作品どうしの見た目がそろいます。大きな仕組みは、必要になってから足せば間に合います。

次に学ぶこと

デザインシステムは、毎回決めないための仕組み。中身は原則・スタイル・コンポーネント・使い方の説明の4つ。アトミックデザインは、部品を小さい順に積んで直す場所を1つにする考え方です。まずは色3色・文字3サイズ・余白4段階・ボタン3種類の1ページから始めてください。

次はデザイントレンドの型（フラット・マテリアル・ミニマル）へ。今回出てきたMaterial Designが、どんな考え方の上に立っているか分かります。

色や文字の決め方そのものはトンマナ（トーン＆マナー）で扱っています。全体の並びはデザイン基礎コースの目次から確認してくださいね。