デザインシステムとは【意味/読み/英語表記】（でざいんしすてむ/Design System）

デザインシステムの概要

デザインシステムとは、デザインの原則やルールに加え、スタイルガイドやコンポーネントなどをまとめたシステムです。

混同される概念として「デザインガイドライン」があります。デザインシステムは、ガイドラインに記載されている原則やルールだけではなく、スタイルガイドやコンポーネントライブラリなど「実際に手を動かすときに使用できる素材」まで備わっているのが特徴です。

複数人のチームでデザインを進めるとき、デザインシステムを活用すれば一貫性のあるデザインをおこなえます。またデザインシステムに内包されているライブラリを使うことで、効率よくスピーディーにデザインできるでしょう。

デザインシステムを作るとき、以下の3つを作ることが重要です。

■ デザイン原則・ルール
ユーザーが誰なのか、そのユーザーに対してどのような印象を与えたいのかを決め、方向性を定めます。そのとき、どのようなことを意識してデザインをすべきなのか、実際にどのように進めていくかも決め、根本の原則を固めましょう。

■ スタイルガイド
スタイルガイドは、デザイン全体の統一性を担保するガイドです。ここでトンマナやカラーパレット、タイポグラフィといったデザインのスタイルを定義します。

■ コンポーネントライブラリ
ボタンやアイコンなど、実際のデザインで使用するUIパーツを定義し、まとめたものがコンポーネントライブラリです。ライブラリ上のコンポーネントを組み合わせてデザインを進めます。

・UI/UX
・アプリデザイン
・カラーパレット
・デザインガイドライン
・フレームワーク