デザインシステムとは?構成とメリット・デメリット、公開例を初心者向けに解説

デザインシステムとは

まずは、デザインシステムの意味と、どんな要素でできているのかを押さえましょう。

デザインシステムの意味

デザインシステムとは、色・文字・余白などのルールと、ボタンや入力欄などの部品、そしてそれらの使い方を1つにまとめ、チームで共有して使い回すための仕組みのことです。

UXリサーチの調査機関であるNielsen Norman Groupは、デザインシステムを「再利用できる部品とパターンを使って、大きな規模でデザインを管理するための標準のまとまり」と説明しています(Design Systems 101 – Nielsen Norman Group(英語))。

デジタル庁も、自身のデザインシステムを「ウェブサイトやウェブアプリケーションを作る際に参照するルールのまとまり」と紹介しています(はじめて本ウェブサイトを見る方へ – デジタル庁デザインシステム)。

ポイントは、ルールや部品を「作って終わり」の資料ではなく、チームが使い、直し、育てていく「仕組み」として扱うところにあります。

デザインシステムの構成

デザインシステムの中身はシステムごとに違いますが、多くは次の5つの要素で考えると分かりやすくなります。

要素	中身	例
原則	デザインで大切にする考え方	「誰にとっても分かりやすく」「迷わせない」
スタイルガイド	色・文字・余白・アイコンなど、見た目の基本ルール	メインの色、本文の文字サイズ、余白の段階
コンポーネント	何度も使い回すUIの部品	ボタン、入力欄、カード、タブ
パターン	部品の組み合わせ方の型	ログインフォーム、検索結果の一覧
ドキュメント	それぞれの使い方や理由、更新のルールをまとめた説明書	「プライマリーボタンは1画面に1つ」

これらは独立しているのではなく、原則をもとにスタイルが決まり、スタイルを使って部品ができ、部品を組み合わせてパターンができる、という積み重ねの関係にあります。

小さなデザインシステムの中身を、1枚にまとめると次のようなイメージです。

原則

迷わせない。誰でも読める。

スタイル

メイン 文字 エラー 背景

見出し本文の文字

コンポーネント

送信する 入力欄

パターン(ログインフォーム)

メールアドレス

パスワード

ログイン

見本Aでは、メインの色と文字のルールを使ってボタンと入力欄を作り、それらを組み合わせてログインフォームのパターンを作っています。

メインの色を変えれば、ボタンにもログインフォームにも同じ変更が行き渡る、というのがデザインシステムの考え方です。

このほか、色や余白の値に名前を付けて共有する「デザイントークン」や、部品の名前の付け方のルールも、デザインシステムを支える大事な要素です。

スタイルガイドとの違い

スタイルガイドはデザインシステムの一部で、主に「見た目のルール」をまとめたものです。

スタイルガイドが「メインの色はこの青」「見出しはこの大きさ」のように見た目の決まりを示すのに対し、デザインシステムはそれに加えて、実際に使える部品、部品の組み合わせ方、使い方の説明、更新のルールまでを含みます。

たとえるなら、スタイルガイドは「使う材料と色の決まり」、デザインシステムは「決まりに沿って作った部品と、その組み立て説明書まで含めた一式」です。

ただし、言葉の使い方は会社や人によって幅があり、デザインシステムとほぼ同じ意味で「スタイルガイド」や「デザインガイドライン」と呼んでいる例もあります。

名前よりも、「見た目のルールだけか、部品や使い方まで含むか」で中身を見分けるとよいでしょう。

デザインシステムがあると何が変わるか

デザインシステムがあると、作る人やページが違っても、同じ役割の部品は同じ見た目と同じ動きになります。

同じサイトの3つのページで使われている「送信ボタン」を比べてみましょう。

NGの見本では、ページごとにボタンの見た目が違うため、ユーザーはページが変わるたびに「どれが押すボタンか」を探し直すことになります。

OKの見本では、どのページも同じ部品を使っているので、一度覚えた見た目がほかのページでもそのまま通用します。

同じ役割のものを同じ見た目にそろえると、見る人が関係に気づきやすくなります(似たものをまとまりとして見る人の性質はゲシュタルトの法則で解説しています)。

デザインシステムのメリット・デメリット

デザインシステムには大きなメリットがある一方で、作って保つための手間もかかります。

メリット

デザインシステムの最大のメリットは、あるべきデザインを、誰が作っても一貫して実現できることです。

一貫したUIは、ユーザーが使い方を一から覚え直さずに済み、迷わず安心して操作できることにつながります。

そのほかにも、作る側にとって次のようなメリットがあります。

• 作業が速くなる
  用意された部品を組み合わせて画面を作れるので、毎回ボタンの色や余白から考え直す必要がありません。
  空いた時間を、より難しい課題の検討に使えます。
• デザイナーと開発者のやりとりが減る
  部品の見た目や状態があらかじめ決まっているので、「この場合はどう表示するのか」という確認の往復が減ります。
• チームで共通の言葉ができる
  「プライマリーボタン」「エラーの色」のように、部品やルールの名前で話せるようになり、伝え間違いが減ります。
• 新しいメンバーが学びやすい
  ルールと理由がまとまっているので、新しく参加した人もドキュメントを読めば同じ品質で作り始められます。

デメリット

デザインシステムのデメリットは、作るのにも、作ったあと保つのにも手間がかかることです。

部品やルールは、サイトの成長やデザインの変更に合わせて直し続けないと、すぐに実際の画面と食い違ってしまいます。

Nielsen Norman Groupも、デザインシステムには継続的な手入れと、それを担当するチームが必要だと指摘しています。

そのため、ページ数が少なく、一度作ったら更新しない小さなサイトでは、本格的なデザインシステムを作る手間に見合わないことがあります。

その場合でも、色・文字・余白のルールと、よく使うボタンだけをまとめた小さなスタイルガイドから始めれば、手間をかけすぎずに一貫性の効果を得られます。

公開されているデザインシステムの例

企業や行政機関の中には、自分たちのデザインシステムを誰でも読める形で公開しているところがあります。

実物を見ると、デザインシステムに何が含まれているのかを具体的にイメージできます。

デジタル庁デザインシステム

デジタル庁デザインシステムは、デジタル庁が公開している、主に行政機関や公共機関のWebサイト向けのデザインシステムです。

公式サイトでは、行政機関かどうかを問わず誰でも無料で利用できると案内されていて、日本語で読めるので初心者のお手本にぴったりです。

サイトは「基本デザイン」(色や文字などのルール)、「コンポーネント」(部品)、「ガイダンス」(設計の考え方)などに分かれていて、アクセシビリティ(誰でも使えるようにすること)を重視しているのが特徴です。

Figma用のデザインデータや、HTML・Reactで書かれたコードも公開されていますが、使う場合は出典の書き方などの利用上の注意事項を確認しましょう。

Material DesignとApple Human Interface Guidelines

海外の代表的な例としては、GoogleのMaterial Design(英語)と、Appleのヒューマンインターフェイスガイドラインがあります。

Material Designは、Androidアプリなどで使われるGoogleのデザインシステムで、現在の版は「Material 3」と呼ばれています。

Appleのヒューマンインターフェイスガイドラインは、iPhoneやMacなどApple製品のアプリを作るための指針で、日本語版も公開されています。

このほかにも、さまざまな企業のデザインシステムをまとめて紹介しているサイトがあります(Design Systems Repo(英語))。

どれもアプリ向けや行政サービス向けなど想定している場面が違うので、そのまま真似するより、「どんな要素がどう整理されているか」を見る教材として使うのがおすすめです。

Figmaでデザインシステムを作るには

自分でデザインシステムを作るときは、デザインツールのFigmaがよく使われます。

Figmaでは、部品を「コンポーネント」として登録し、色や余白の値を「スタイル」や「バリアブル(変数)」として保存できます。

さらに、それらを「ライブラリ」として公開すると、ほかのファイルからも同じ部品や値を使えるようになり、チーム全体で1つのデザインシステムを共有できます(ライブラリの公開 – Figma Learn)。

ただし公式ヘルプによると、ライブラリの公開は有料プランの機能で、無料のスタータープランではコンポーネントやスタイルを作れても、ライブラリとして公開してほかのファイルで使うことはできません。

無料プランで練習する場合は、1つのファイルの中に部品とルールをまとめるところから始めてみましょう。

デジタル庁デザインシステムのように、Figmaのデータを公開しているデザインシステムを開いて、部品やルールがどう整理されているかを観察するのもよい練習になります。

実践のポイント

デザインシステムについて、初心者が誤解しやすい点と、よくある疑問をまとめます。

注意点・よくある間違い

• 部品を集めたファイルを作っただけで、デザインシステムができたと考えてしまうことがあります。
  使い方のルールや更新の決まりがないと、部品は少しずつ勝手に変えられていくので、ドキュメントと運用まで含めて考えましょう。
• 最初から大企業のデザインシステムのような完璧なものを目指してしまうことがあります。
  よく使う色・文字・ボタンから小さく始め、必要になったものを足していきましょう。
• 公開されているデザインシステムを、そのまま自分のサイトに当てはめてしまうことがあります。
  想定している利用者や場面が違うので、考え方を学んだうえで、自分のサイトに合うかを判断しましょう。
• デザインだけを整え、開発側のコードと対応させないことがあります。
  デザインとコードで部品の名前や値がずれると効果が薄れるので、開発者と一緒に作りましょう。

よくある質問

• Q. 個人で作るサイトにもデザインシステムは必要?
  A. 本格的なものは必要ありませんが、考え方は役に立ちます。
  色・文字・余白のルールと、よく使う部品を決めておくだけでも、ページを増やしたときに見た目がそろい、作業も速くなります。
• Q. デザインシステムとUIキットは同じもの?
  A. 同じではありません。
  UIキットは、ボタンや入力欄などの部品をデザインツール用にまとめた素材集を指すことが多く、デザインシステムの「コンポーネント」の部分に近いものです。
  デザインシステムは、それに加えて原則や使い方、更新のルールまで含みます。
• Q. 初心者は何から学べばいい?
  A. まずは公開されているデザインシステムを1つ選び、ボタンなど身近な部品のページを読んでみるのがおすすめです。
  日本語で読めるデジタル庁デザインシステムなら、ルールとその理由が具体的に書かれているので、デザインシステムの全体像をつかみやすいでしょう。
  あわせて、色・文字・余白の基本を学んでおくと、スタイルガイドの中身が理解しやすくなります(デザインロードマップで学ぶ順番を紹介しています)。

まとめ

デザインシステムとは、デザインのルールと部品、その使い方をまとめてチームで共有し、誰が作っても一貫した画面にするための仕組みで、原則・スタイルガイド・コンポーネント・パターン・ドキュメントなどで構成されます。

ユーザーが迷わず使えることや作業の効率化といったメリットがある一方、作って保つ手間がかかるので、小さく始めて育てていくことが大切です。

まずはデジタル庁デザインシステムのサイトを開き、「基本デザイン」と「コンポーネント」のページをひととおり眺めて、どんなルールと部品が並んでいるかを確かめてみてください。