Webデザインの現場では、UI（ユーザーインターフェース）作成にデザインシステム（Design System）をよく活用されます。
Webデザイナーなどデザインの学習をはじめた方にできるかで簡潔に解説したいと思います。
デザインシステムとは？
デザインシステムとは、以下のような様々な構成要素で成り立つ「仕組み」です。
- デザインの「概念」、「原則」
- スタイルガイド
- UIコンポーネントライブラリ
- 管理・運用ルール
デザインの規則やルールなどをプロジェクトに関わる多くのメンバーに共有できるようになります。
多くのメンバーが同じ方向性を意識してプロジェクトの達成に向き合えます。
導入のメリットとデメリット
メリットとしては、「あるべきデザインを一貫して実現する」ことそのものが最大のメリットです。
デザインを一貫して実現
一貫したUIはユーザーが迷わず操作できることにつながります。
結果、ユーザーは心地よく、安心してそのプロダクトを使い続けることができます。
プロダクトの使い方を一から学ばなければならない事になると、ユーザーは不満を感じてしまいます。
そのほかにも以下のようなメリットがあります。
開発の効率化
デザイナーがスタイルガイドをつくり、それを見たエンジニアが疑問点を質問するという作業が何度か繰り返されることを軽減できます。
それぞれが本来自分のやるべき作業に注力できるようになります。
UIを統一してデザインシステムを導入することで、サービスごとに異なるデザインを用意する必要がなくなります。
デメリット
デザインシステムの構築・管理自体にも工数がかかります。
「規模が小さいプロジェクト」「継続的にデザインを管理する必要がないプロジェクト」はデザインシステムを構築するべきではありません。
初期コストを回収することが難しくなります。
具体例からデザインシステムのイメージを掴む
他にも様々な企業が公開しています。
Design Systems Repo
An organized and frequently updated collection of Design System examples, resources, tools, articles and videos.
designsystemsrepo.com
まとめ
学習コストがかかりますが、一つでもデザインシステムのドキュメントを一通り目を通しておくことでデザイン対する方向感がつかめると思います。
