デザインシステムとは何か？ 歴史から紐解くその効果

一人で制作をするのではなく、チームを組みプロジェクトに取り組む場合、デザインシステムが有効です。デザインシステムを開発すれば、チームでの仕事に統一性がもたらされるだけでなく、ほかにもさまざまなメリットがありす。

今回はデザインシステムとは何か、そしてデザインシステムの活用方法について解説します。

デザインシステムの歴史

デザインシステムの基礎は、ヤン・チヒョルト氏による「スイススタイル」の発展とともに登場しました。

1927年、チヒョルト氏は著書『New Typography』で、シンプルさ、わかりやすさ、デザイン要素の使用範囲の明確化といったキーコンセプトを発表しました。

▲出典：Muzli

その後1950年代に「デザインシステム」という言葉が登場したとき、デザインシステムは視覚的なブランドアイデンティティを意味しており、デジタル製品ではなく物理的なものだけが対象でした。

たとえばニューヨークの地下鉄については、グラフィックやナビゲーションの原則、色彩ルールなど、すべての詳細が徹底的に説明されていました。

▲出典：Muzli

1960年代になると、コンピューター技術がソフトウェア開発のスピードを大幅に上回るようになります。それによりコンピューターは高性能になりましたが、ソフトウェア開発のスピードが追いつけず、メンテナンスが難しく、バグも多かったのです。

こうした状況は「ソフトウェア危機」と呼ばれていました。はじめて「ソフトウェア危機」という言葉が登場したのは、1968年の「NATO Softeare Development Conference（NATOソフトウェア開発会議）」です。

同会議でダグラス・マキロイ氏は、ソフトウェア開発におけるコンポーネント・アプローチについて発表しました。コンポーネント・アプローチはコスト削減と開発スピードの向上を実現し、コンピューターの性能をより効率的に利用することが可能になったのです。

▲出典：Muzli

それから半世紀を経たいま、私たちは同じような状況に直面しています。マーケットのダイナミクスとデジタル環境の特性から、ソリューションの一貫性と拡張性という問題を見直す必要に迫られることになりました。

従来のガイドラインは、どのようなデザインソリューションも当該プロセスに従うことを前提としており、新しい要件を満たしていませんでした。「ガイドライン→デザイン→開発→実装」というアプローチでは、各ステップでディテールが失われ、バグが発生してしまいます。

▲ガイドライン→デザイン→開発→実装（出典：Muzli）

しかし、ガイドライン・開発・実装を組み合わせれば、実装、改善、サポートに関する多くの問題を解消できます。

こうしてデザインとテクノロジーの交差点にあらわれたのが、現代のツールとしてのデザインシステムです。

▲ガイドライン＋デザイン＋開発＝デザインシステム→実装（出典：Muzli）

デザインシステムとは

デザインシステムとは、ブランドバリュー、ツール、コンポーネント（デザインとコードの両方）のセットです。製品の作成、テスト、ビジュアルと技術のアップデートを簡素化し、インターフェースの統一を保証してくれます。

▲上から、バリュー、デザイン言語、ツール、コンポーネント（出典：Muzli）

デザインシステムには、以下のような要素が含まれている必要があります。

• ブランドバリュー：
  意思決定をし、製品を構築するときの基盤となる哲学や一連の原則
• ビジュアルランゲージ：
  色、タイポグラフィー、形、サイズ、余白、イメージ、アニメーション、動きなど
• ツール：
  ガイドライン、UXパターン、研究結果、テンプレート、マニュアル、ルール、推奨事項など
• コンポーネント：
  システム内の再利用可能なコードの一部、いわゆるビルディングブロック

デザインシステムが必要な理由

理由1. チームの拠り所になる

デザインシステムがないと、デザイナーは問題解決に体系的に取り組まず、それぞれ独自の方法で取り組んでしまいます。関連するコンポーネント、スタイル、テンプレート、パターンを把握できるデザインシステムは拠り所になり、一貫性を保つことに役立ちます。

デザインシステムの重要な構成要素のひとつが、ドキュメンテーションです。ドキュメンテーションにより、チームメンバーのロスによる知識のロスというリスクを最小化できます。

▲出典：Muzli

理由2. スピードとクオリティが上がる

デザインシステムは、チームの作業スピードを上げ、均一性を保ち、長期的には製品のクオリティを向上させるのに役立ちます。

開発者は、ゼロからすべてを作る必要はありません。レゴブロックのように部品からスクリーンを組み立てられるため、何百行ものコードを書くという労力を削減できます。

また、パワフルなチームによって作られたデザインシステムがあれば、どんなレベルの専門家でも、製品を台無しにする心配をせずにチームに加えられます。

デザインシステムを使えば実験用のプロトタイプを無限に制作でき、より早くインサイトを得られるのです。

▲出典：Muzli

理由3. 制作を効率化できる

デザインシステムはチームの生産性を向上させます。デザインシステム内にあるデザイントークンやコンポーネントを活用することにより、より重要なタスクに集中できます。

開発者にとっては、レイアウトのプロセスが大幅に簡素化されます。インターフェイスのほとんどが既存のコンポーネントで構築されることになるため、ビジネスロジックと、カスタムユーザーインターフェースに注力できます。

A/Bテスト用の新機能やシナリオの開発も、迅速かつ安価に行えます。デザインに関する意思決定の正しさを定量的なデータで確認できるため、実際のユーザーに関するインサイトやデータをより早く得ることが可能です。

▲出典：Muzli

おわりに

デザインシステムとは、インターフェースの統一を保証してくれる存在です。しかし、すべての人にデザインシステムが必要なわけではありません。デザインシステムの構築にはある程度まとまった時間がかかるため、小規模なプロジェクトの場合は不要となるでしょう。

くわえてデザインシステムを開発しても、すぐに利益にはつながりません。しかし長い目で見れば、仕事のスピードアップ、チームの生産性向上、製品の品質向上につながり、多くの企業を助けてくれるはずです。

（執筆：Paul Matvienko　翻訳：Asuka Nakajima　編集：宮﨑駿　提供元：muzli magazine）