デザインシステムについて知っておくべきことすべて

デザインはますます複雑になっています。 最新の設計プロセスでは、製品の作成に関与するすべてのチーム間で機能を超えた緊密なコラボレーションが必要です。 市場投入までの時間が製品開発において非常に重要な役割を果たす場合、設計チームは、ユーザーエクスペリエンスを犠牲にすることなく、製品を迅速に作成するためのプロセスの最適化に努めます。

これを実現するために、製品チームはデジタル製品の設計方法を変更します。設計システムを導入して、設計プロセスをより透過的かつ予測可能にします。

この記事では、設計システムの概念と、新しい設計システムを構築するための重要なステップについて説明します。

設計システムは、明確な慣行に基づいて再利用可能なコンポーネントのコレクションであり、製品チームが製品をより迅速に作成できるようにします。 設計システムは、製品チームが製品を設計および開発できるようにするための信頼できる唯一の情報源と考えてください。

多くの設計者は、設計システムに何を含めるべきか疑問に思っています。 組織ごとに異なるニーズがあり、すべての設計システムが使用する必要のある要素の普遍的なリストを提供することは不可能です。 ただし、多くの設計システムが共有する要素がいくつかあります。

コンポーネントとパターン

コンポーネントは、設計の機能要素です。 それらを設計システムの構成要素と考えてください。 これらのコンポーネントを組み合わせると、設計者が製品を作成するときに参照および使用するライブラリが形成されます。

パターンは、設計者がコンポーネントを使用するときに参照するための構築マニュアルの形式を提供するプロトコルです。

スタイルガイド

スタイルガイドは、グラフィックスタイル（色、フォント、イラスト）とその使用法に焦点を当てた成果物です。 スタイルガイドは、ブランドの価値を考慮して作成する必要があります（つまり、召喚ボタンなどの機能要素にブランドの色を使用します）。

設計原則

設計原則は、チームが意味のある設計上の決定を下すのに役立つ指針です。 設計原則は、設計チームの共通の信念を反映しています。

実装したい設計システムの種類をよりよく理解するには、まず、会社の設計に対する現在のアプローチを確認および分析する必要があります。 次の質問に対する答えを見つけてください。

• あなたの会社が従う設計プロセスは何ですか？
• あなたの会社が使用している既存のツールは何ですか？

製品チームの設計の成熟度を評価することもお勧めします。 この知識は、システムを組織に導入するために必要な時間を見積もるのに役立ちます。

デザイナーが使用する視覚言語は、ブランドのアルファベットに基づいている必要があります。 アルファベットには、ブランドアイデンティティ（ブランドと製品の価値）とブランド言語（色、フォント、形、アニメーション、声、トーン）が含まれます。 ブランドのガイドラインを確認し、関係者にインタビューすることで、ブランドのアイデンティティと言語を定義し、デザインの原則とスタイルガイドに取り組むときにこの情報を参照します。

製品設計で最も危険な問題の1つは、設計の重複であり、これは断片化につながり、断片化は不整合につながります。 設計要素の重複を特定することで、チームメンバーが要素を最初から作成して、類似したバージョンの要素がすでに存在するというシナリオを回避できます。

そのため、製品内のすべてのビジュアルコンポーネントを分類することは、設計システムを構築する前に設計チームが行う最初のタスクである必要があります。 デザイン要素の視覚的品質を確認する必要があります。 このアクティビティには2つの目標があります。

1. 製品内で最も重大な不整合がある領域を強調表示します。
2. 製品の最も重要で最も使用されている要素とコンポーネントを特定します。

UI監査は、複数のステップからなるプロセスです。 最初に色、フォント、画像などの主要なUIプロパティを特定してから、これらのプロパティがコンポーネントでどのように使用されるかを分析することが重要です。 CSS Statsなどのツールを使用して、スタイルシートに含まれる固有の色や書体の数を確認します。

スタイリングに関する情報を入手したら、コンポーネントを調べることができます。 BradFrostのAtomicDesign方法論は、すべてのWebページを個々の要素（原子、分子、および有機体）に分解するのに役立ちます。

優れたユーザーエクスペリエンスを作成するには、設計上の決定の背後にある理由を理解することが重要です。 そのため、システムの設計原則を確立する際には、一貫性とバランスを維持するために、明確な一連の目標に沿ってチームを調整することが不可欠です。

設計原則は、次の3つの基本的な質問に答える必要があります。

• 私たちが構築しているもの、
• なぜそれを構築しているのか
• どのように構築しますか

設計原則が組織の価値観を真に反映し、全体的なビジョンを持っていることが重要です。

UIのすべての機能的および装飾的な部分（入力フィールド、ボタン、フォーム、画像など）を収集し、プロジェクトのニーズに応じて（ユーザーのニーズ/ビジネス目標に応じて）評価し、必要なものだけを残します。

デザインシステムの主な目標の1つは、クリエイティブの方向性を広げることです。 システムは、設計者を特定の設計方向に固定してはなりません。 代わりに、設計者と開発者が従うべきアプローチを選択する前に、さまざまなアプローチを探索するのに十分な自由を提供するフレームワークを提供する必要があります。

彼女の著書「DesignSystems」で、AllaKholmatovaは2種類のルールを定義しています。

• 厳しい規則。 設計者は、設計システムに新しいコンポーネントとパターンを導入するための厳密なプロセスに従う必要があります。
• 緩いルール。 緩いルールは、厳密な制約ではなく、推奨事項のように機能します。 設計者と開発者は、ルールがないと、より良いデザインを作成できると信じている場合は、ルールをスキップできます。

厳格なルールと緩いルールのバランスを見つけることで、厳格さと柔軟性のスイートスポットを見つけます。

設計システムは動的であり、常に進化しています。 そのため、設計システムの変更を承認するプロセスを定義することが重要です。 明確なガバナンス戦略を作成することは、設計システムが変更に適応できるようにするために不可欠です。

記事「設計システムをスケーリングするためのチームモデル」で、NathanCurtisは3つの異なるガバナンスモデルを定義しています。

1.孤独なモデル：このモデルでは、「オーバーロード」（直接責任のある個人または個人のグループ）が設計システムを支配します。

2.集中型モデル：このモデルでは、1つのチームがシステムを担当し、その進化を導きます。

3.フェデレーションモデル：このモデルでは、複数のチームの複数の人がシステムを担当します。

それぞれのモデルには長所と短所がありますが、リスクが組み込まれているため、単独モデルが最も脆弱です。1人の担当者が多くを担当すると、その人はすぐに多くのモデルを完成させるためのボトルネックになる可能性があります。タスク。

多くの場合、モデルを組み合わせて使用​​することが可能です。 たとえば、Salesforceチームのモデルは、集中型モデルと統合型モデルを組み合わせたものです。 SalesforceのLightningDesign Systemには、システムの管理を担当するコアチームがありますが、実践者の連合として機能する寄稿者もいます。

多くの設計システムは、機能要素の重複に悩まされています。チームメンバーは、単一のユースケースに焦点を合わせすぎたコンポーネントを作成します。 その結果、システムは柔軟性がなくなり、そのユーザー（設計者と開発者）は、新しいシナリオをカバーする必要があるたびに新しいコンポーネントを作成する必要があります。

マテリアルデザインのような成功した設計システムを分析すると、そのようなシステムは非常に再利用可能であることがわかります。 高い再利用性により、設計者と開発者はマテリアルデザインを製品の基盤として使用できます。

単一のユースケースに結び付けられていないが、複数のコンテキストで再利用できるコンポーネントを開発することをお勧めします。 再利用可能でスケーラブルであるためには、コンポーネントは次のものである必要があります。

• 基本単位。 モジュラーコンポーネントは自己完結型であり、依存関係はありません。 モジュール性は、再利用可能で交換可能なコンポーネントの作成に役立ちます。
• 構成可能。 既存のコンポーネントを組み合わせることで、新しいコンポーネントを作成することができます。
• カスタマイズ可能。 コンポーネントを調整および拡張して、さまざまなコンテキストで機能するようにすることができます。

設計システムの基本的な目的は、チームの作業を容易にすることです。そのため、設計システムを構築するよりも、すべての人にそれを使用するように促すことがさらに重要です。 設計システムは、チームのワークフローに統合され、設計者と開発者の日々の生産性の重要な部分になり、チームメンバーに価値を提供する必要があります。

組織の設計プロセスに設計システムを組み込み始めたばかりの場合は、一連のインタビューを実施して、人々がそれをどのように使用しているかを理解し、この情報を使用して設計システムを調整します。

設計システムは、アーティファクトの静的なコレクションではありません。 これは、組織とともに進化する製品設計の副産物です。 チームが設計システムの使用を開始したら、変更や更新を組織全体に伝達することが重要です。 定期的に変更ログを付けて更新を出荷します。 ログには、新しいバージョンで導入された変更と、アップグレードが作業にどのように影響するかがユーザーに示されます。

ここにいくつかの人気のあるデザインシステムがあります。

マテリアルデザインは、2014年にGoogleによって開発されたデザイン言語です。このデザイン言語を作成するというアイデアは単純でした。デザイナーや開発者に、直感的で美しい製品を作成できるツールを提供するためです。 マテリアルデザインは、さまざまな製品に使用できる非常に適応性の高いシステムです。

Lightning Design Systemを使用すると、製品チームはパターンを使用して豊富なエンタープライズエクスペリエンスとカスタムアプリケーションを構築し、Salesforceにネイティブなベストプラクティスを確立できます。

巧妙に作成された設計システムは、製品開発のノーススターとして機能します。 これは、製品チームがより一貫したユーザーエクスペリエンスを生み出し、デザイン主導の文化を増幅するのに役立つ組織のDNAの一部になります。 デザインシステムは、製品に取り組む人々がビルディングブロックを超えて見て、彼らのデザインの目的について考えることを奨励します。

Elementor 3.0を使用すると、設計システムを1ページから簡単に管理できます。