開発者のためのデザインシステム
一貫性は贅沢品ではありません。ユーザーは、あらゆる画面において製品がスムーズで信頼できるものであることを期待しています。
デザインシステムは、単なる色やボタンの集まりではありません。それは、デザイン、開発、そしてプロダクトチームのための共通言語です。再利用可能なコンポーネント、パターン、およびルールの集合体なのです。
デザインシステムの中身とは？
- ボタンや入力フォームなどのUIコンポーネント
- 色や余白のためのデザイントークン
- アクセシビリティのルール
- コーディング規約
- ドキュメント
代表的な例として、Google Material Design、Microsoft Fluent、IBM Carbonなどが挙げられます。
デザインシステムは、現実のエンジニアリング上の課題を解決します。
繰り返しの作業を防ぐ システムがないと、同じボタンやフォームを何度も作り直すことになります。デザインシステムがあれば、再利用可能なコンポーネントを利用できます。要素ごとにカスタムCSSを書く必要がなくなります。スタイリング、状態（ステート）、レスポンシブ対応を処理する単一のコンポーネントを使用するだけで済むため、時間を節約できます。
一貫性を確保する あるページでは角丸のボタンがあり、別のページでは四角いボタンがあるといった状態では、製品が未完成に見えてしまいます。デザインシステムは、ボタン、余白、タイポグラフィをどこでも同じに保ちます。ユーザーはインターフェースを学び直す必要がありません。
コミュニケーションの齟齬を解消する デザイナーと開発者は、しばしば互いに誤解が生じることがあります。デザイナーが「モダンなボタン」を求めたとしても、その解釈は人によって異なるかもしれません。デザインシステムは、曖昧な言葉を標準に置き換えます。特定のトークンやコンポーネントを使用することで、全員が同じ言語で話せるようになります。
クリーンなアーキテクチャを促進する ボタンごとに個別のファイルを作成するのではなく、バリエーションを持たせた一つのButtonコンポーネントを作成します。これはDRY原則に従うものであり、コードのメンテナンス性を向上させます。
グローバルな変更を容易にする ブランドのプライマリーカラーが変更された際、何百ものファイルを探し回る必要はありません。デザイントークンを使用していれば、一箇所で値を変更するだけで、即座にすべての箇所に反映されます。
アクセシビリティを核に組み込む アクセシビリティを毎回手動で行うのは困難です。デザインシステムには、キーボードナビゲーションやARIA標準が含まれています。デフォルトでアクセシブルなコンポーネントを利用できるのです。
デザインシステムは、単なるコンポーネントライブラリではありません。ライブラリは「ボタンの作り方」を教えるものですが、デザインシステムは「なぜそのボタンが存在するのか、そしてどのように振る舞うべきか」を教えてくれるものです。
より良い製品を作るために、よりスマートなシステムを構築しましょう。
出典: https://dev.to/pixel_mosaic/design-systems-for-developers-why-they-matter-18f0