デザインシステム
Design System
デザインのルールや部品をまとめて、統一感のある画面を作る仕組み
名前のヒミツ
「Design（設計・図案）」と「System（体系・制度）」を組み合わせた言葉。デザインを個人のセンスに頼るのではなく、ルールを持った再利用できる仕組みとして扱うという考え方からきているよ。
簡単に説明すると
ボタンの色や文字の大きさ、余白の広さといったデザインのルールをあらかじめ決めておき、それに沿った部品を用意しておく仕組みのこと。 これがあることで、どの画面を見ても同じ操作感になり、作る側も毎回ゼロからデザインしなくて済むようになるんだよ。
くわしく見てみよう！
デザインシステムとは、サービス全体のデザインのルールや、実際に画面に配置するボタンなどの部品を一つにまとめた仕組みのことだよ。
単なる見た目のガイドラインだけではなく、プログラマーがすぐに使えるコードの部品までセットになっていることが多いんだ。
複数の人が関わる大きなプロジェクトだと、人によって「赤いボタン」の色味が微妙に違ったり、ボタンの角の丸みがバラバラになったりすることがあるよね。
デザインシステムがあれば、「メインのボタンはこの赤色で、角の丸みはこのサイズ」という正解が用意されているから、誰が作っても統一感のある美しい画面になるんだよ。
また、使う側にとってもメリットは大きいんだ。
どの画面でも同じデザインのボタンがあれば、「これを押せば次に進めるな」と直感的にわかるよね。
デザインシステムは、作る側の作業を効率化するだけでなく、サービスを使う人が迷わずに操作できるようにするための重要な土台になっているんだよ。