Chapter 02無料公開

第1章 デザインシステムの要素

1.1 デザインシステムとは何か

デザインシステムとは、プロダクトの目的を達成するためのデザイン原則およびパターンライブラリとその実践方法(実装とその使い方)についてまとめられたものです(諸説あり)。パターンには色やタイポグラフィ、ボタンなどのコンポーネント、インタラクションなどがあります。どのプロダクトでもこれらのパターンが組み合わさって機能することで目的を達成しています。

デザインシステムというと、スタイルガイドやパターンライブラリの部分に注目されがちですが、重要なのはデザイン原則から実装(UIコンポーネント)までが統合されているという点です。ルールと実践方法がセットになることで初めてシステムとして機能します。具体的なサンプルを見たい方は次の場所でデザインシステムを検索してみてください。

1.2 デザイン原則

デザイン原則とは 「プロダクトの目的を達成するために必要なデザインの基礎となる価値を定めたもの」 です。もう少し平易な言い方をすれば、「プロダクトにふさわしいデザイン」の指標を文章にしたもの、とも言えます。デザインシステムを構築する上で欠かせない要素の1つです。

デザイン原則を定めることで、デザインシステムが開発のためのガイドラインではなくプロダクトにおけるデザインやクリエイティブの一貫性を保つためのシステムとして機能できるようになります。

1.3 デザイントークン

デザイントークンとは デザインシステムの構築や運用に必要なすべての値 (マージン、色、タイポグラフィ、アニメーションなど) を定数として表現したもの です。値を定数化し共有することで、一貫性のあるデザインを実現できます。 このデザイントークンがスタイルガイドやパターンライブラリの基礎となります。

:root {
  --spectrum-global-color-static-red-400: rgb(236, 91, 98);
  --spectrum-global-color-opacity-90: 0.9;
  --spectrum-global-dimension-static-size-200: 16px;
  --spectrum-global-animation-ease-in-out: (.45, 0, .40, 1);
}

1.4 パターンライブラリ

パターンライブラリとは、プロダクト内で使われているデザインパターンを集めたものです。ボタンやフォーム、グリッドなど、よく使われるパーツを自分たちのデザイン原則に合わせて調整したものや、パーツの組み合わせ方(モジュール)、レイアウトの組み方などが含まれます。BootstrapやMatarial Designを思い浮かべてもらうとわかりやすいでしょう。

1.5 スタイルガイド

スタイルガイドとは、デザインシステムの中身を記述した静的なドキュメントです。デザイン原則、デザイントークン、パターンライブラリとその使い方、アクセシビリティに関する規則、文章作成の規則などが含まれます。スタイルガイドのことをデザインシステムだと勘違いしている人がいますが、スタイルガイドはあくまでもデザインシステムを構成する要素の1つであり、デザインシステムそのものではありません。

スタイルガイド作成を支援する技術

1.6 実装(UIコンポーネント)

デザインシステムを開発に取り込み、効率的かつ堅牢な開発を実現するためには、開発で利用できるUIコンポーネントが必要です。CSSフレームワークとして実装する方法やReactやAngularなどのフレームワークを用いてUIコンポーネントを実装する方法など、自分たちのプロダクト開発に適した方法を採用しましょう。 Adobe SpectrumAtlassian Design Systemを参考にすると良いと思います。

UIコンポーネントは作ったら終わりではありません。スタイルガイドと常に同期されている必要があります。 UIコンポーネントとスタイルガイドを同期させる方法はいくつかありますが、まだ完全に自動化できる仕組みはありません。エンジニアと相談し適切な方法を探っていきましょう。

UIコンポーネントとスタイルガイドの同期を支援する技術