設計システム：それらは何であり、あなたはそれを必要としますか？

最終更新日：2019年11月21日

ウェブ上の均一性には否定的な意味があります。 それはしばしば退屈な、オリジナルではない、あるいはコピーされたものと同義です。 しかし、サイトの統一性に関しては、まったく異なるストーリーがあります。 信頼性、先見性、ケア、組織の1つ。 デザインは毎年ますます重要な役割を果たしています。 したがって、製品のさまざまな要素の設計を互いに調和させることは困難な作業になる可能性があります。 これを支援するために、設計システムの概念が登場しました。 しかし、設計システムとは何ですか？ 私の会社にも必要ですか？ これはスタイルガイドとどう違うのですか？ これらすべての質問（およびそれ以上）は、この記事で回答されます。

デザインシステムとは？

設計システムは、製品を通じてさまざまな要素にわたって設計を実装するためのスケーラブルな方法です。 製品全体で使用される要素の目的、外観、感触、および使用法を定義する明確なドキュメント、原則、およびルールが必要です。

設計システムの目的は、最終製品の作成を支援することです。 そのことを念頭に置いて、再利用可能でモジュール式の事前定義された要素を使用して、あなたやあなたのチームがそうするのを簡単にする必要があります。これにより、さまざまな方法で要素を組み合わせて、目的が異なる場合でも一貫した感触の製品を作成できます。 。

これはあなたが急いでやりたいことではありません。 あなたのデザインシステムはあなたのビジネスのための現在そして将来のプロジェクトを構築するためのガイドであるべきです、それであなたはそれを作るのに時間を費やしたいと思います。

それはあなたがそれを作ったらあなたのデザインシステムが石に設定されるという意味ではありません。 それはあなたが取り組んでいる進行中のプロジェクトと見なされるべきであり、何が機能し、何が機能しないかを見て、それを改善します。 それはそれが数日で行われないことを意味します。 それには、企業としての目標と、顧客に製品を提供するために実行する手順を詳細に分析する必要があります。

デザインシステムVSスタイルガイド

これまでのところ、デザインシステムはスタイルガイドの単なる新しい名前のように思われるかもしれません。 スタイルガイドが色、スタイル、タイポグラフィなどの同じ要素の多くをカバーした後。 それで、違いは何ですか？ それらを互いに対立させると考えるのではなく、スタイルガイドをデザインシステムの一部にすることができます。 デザインに含まれる要素の多くを概説していますが、それらを作成したプロセス、それらを作成したツール、およびそれらすべての要素がどのように連携するかが欠けています。

デザインシステムは、スタイルガイドにはない方法でデザインにコンテキストを設定します。 設計システムを使用すると、概説されているルール、プロセス、およびツールに従って、製品の構成要素を作成できます。 これは、要素が従う基本的なプロパティのセットとは異なります。 あなたのスタイルガイドはあなたのデザインシステムの副産物であり、全体像のごく一部をカバーしていると考えることができます。 この例を考えてみましょう：

今日作られたレゴブロックは、1958年に作られたレゴブロックと互換性があります。これらは、さまざまな素晴らしいものを作るために使用できる交換可能な部品の最も優れた例の1つです。 レゴカンパニーは、あなたがあなたの心が望むほとんどすべてのものを作ることを可能にする様々なセットを一年にわたって作りました。 スタイルガイドは、すべてのパッケージに含まれているブリックリストに例えることができます。 含まれているレンガの数、色、サイズ、部品番号がわかります。 設計システムは、セットが何であれ、構築するための指示ガイドのようなものです。 それは、どの部分がどこに行き、どのようにそれらをつなぎ合わせて作品を構築するかを概説します。ただし、1つのものを構築する方法を説明する代わりに、同じ正確なレンガのセットを使用して複数の異なる構造を構築する方法を示します。 それらがどのように組み合わされ、なぜそれらが組み合わされるのかを知ることは、同じ部分からまったく新しいものを作るのに役立ちます。

関連している間、スタイルガイドとデザインシステムは、デザインに関して非常に異なる役割を果たす2つの異なるものです。

なぜ設計システムが必要なのですか？

デザインシステムとは何か、そしてそれらとスタイルガイドの違いは何かがわかったので、本当に必要かどうか疑問に思うかもしれません。 結局のところ、あなたはウェブサイトを1つか2つしか構築していないかもしれませんし、コア製品を1つしか持っていないかもしれません。 設計システムを構築することは、間違いなく多大な時間のコミットメントです。 あなたは本当に費やした時間を正当化できますか？ 次のいずれかを改善したい場合、それはあなたのためだけかもしれません。

一貫性

製品やサイト全体で一貫したルックアンドフィールを実現したい場合は、デザインシステムの恩恵を受けることができます。 いくつかのフレームワークを使用して構築するサイトを想像してみてください。 ボタンのスタイル、見出しのフォント、その他の一貫性のない要素が異なる場合があります。 それは非常にパッチワークを感じ、それはサイトを顧客に非常に低品質に感じさせる可能性があります。 設計システムを使用すると、チームは要素の外観、感触、および動作の正確な方法についてより多くの指示を受けることができます。

効率

設計者と開発者で構成される大規模なチームがある場合でも、自分だけの場合でも、設計システムを使用すると効率が向上します。 つなぎ合わせることができる既成の要素があると、時間が節約され、作業が速くなります。 これは、新しいプロジェクトの構築を計画している場合にはさらに当てはまります。 フレームワーク、色、タイポグラフィを見るのに時間を無駄にする必要はもうありません。デザインシステムに問題はありません。

チームの団結

チームで作業している場合、設計システムは、全員が独自に作成するのではなく、設計のガイドとして機能します。 これを使用すると、設計の実装方法に関する質問が少なくなります。 誰もが参照できる中心的なリソースを持っており、製品に関する決定を導きます。 これは、新入社員、リモートワーカー、フリーランサーなど、迅速に対応する必要がある人にとって特に役立ちます。

これらの領域のいずれかを増やしたい場合は、会社の設計システムを作成することは、十分に費やされた時間と見なすことができます。

誰が設計システムを使用していますか？

設計システムとその重要性についてのこのすべての話で、誰がそれらを使用していますか？ 多くの有名な大企業はデザインシステムを使用しており、一般の人々が閲覧できるようにしています。 ここにいくつかあります：

• Microsoftの流暢さ
• Googleのマテリアルデザイン
• ShopifyのPolaris
• Firefoxのフォトン

米国政府でさえ、独自の設計システムを持っています。 これは単なるコンポーネントライブラリではなく、設計システム自体を形作った原則と目標も含まれていることに注意してください。

あなたはそれを始めるために大企業である必要はありません。 あなたが小さいときでさえそれを適所に置くことはあなたが成長するにつれてそれを実行しそして維持するのを助けるでしょう。 これは、組織が一貫性、組織化、および効率を維持するための日常的なツールです。 したがって、すべてのプロジェクトで車輪の再発明に時間を浪費するのをやめ、設計システムの構築に真剣に検討してください。

作者：タージR。