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

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

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

デザインシステムの歴史

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

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

▲出典：Muzli

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

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

▲出典：Muzli

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

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

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

▲出典：Muzli

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

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

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

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

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

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

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

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

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