デザインシステムとは

デザインシステムとは色・文字・余白・ボタンなどの部品と、その使い方のルールをまとめ、サイトやサービス全体で同じ品質のデザインを保てるようにした仕組みのことです。

デザインシステムにはブランドの色や文字の大きさといった基本の決まりごと、ボタンや入力欄などの部品、それらをいつどう使うかの指針が含まれます。Googleの「Material Design」のように、大きな企業が自社のデザインシステムを公開している例もあります。デザイナーだけでなく、実装するエンジニアや更新する担当者も同じものを見て作業します。

なぜ必要か

ページが増えたり、作る人が増えたりすると、ボタンの形や見出しの大きさが少しずつずれていきます。共通の部品とルールがあれば、誰が作っても同じ見た目と使い心地にそろえられます。新しいページを作るたびに一からデザインを考えなくて済むので、制作のスピードも上がります。修正が必要になったときも、部品を1か所直せば全体に反映できる作りにしておくと、管理の手間が減ります。

小さく始められる

大規模なサービスでなくても、使う色、文字の大きさの段階、ボタンの種類といった基本を決めておくだけで効果があります。Figmaなどのデザインツールで部品として登録し、実装する側でも同じ名前で管理すると、デザインと実際のサイトのずれを防げます。トンマナと一緒に決めておけば、見た目と言葉の両方で一貫性を保てます。運用しながら少しずつ育てていくものです。