完璧な設計システムを構築するための5つの重要なステップ

設計システムを構築するための重要なステップ

設計システムは、プロジェクト設計のチーム全体のガイドラインとして提供される再利用可能なアイテム、要素、およびルールのコレクションです。 これは現在、ユーザーに成功したエクスペリエンスを提供する上で重要な役割を担うUX設計プロセスの重要な部分と広く見なされています。

過去数年にわたって、このシステムは多くの国で製品設計戦略に新鮮な空気をもたらしてきました。これは、通常のUIガイドをはるかに超えています。

このシステムが提供する一貫性やその他の利点を考慮すると、このシステムを作成する必要性について多くのことを耳にします。

IBMやAirbnbなどの有名企業も同様に、チーム内での作成をスピードアップして促進するために、独自の設計システムを組み込んでいます。

この短い紹介を念頭に置いて、設計システムのより詳細な説明に取り掛かり、それがどのように役立つかを調べましょう。

デザインシステムとは正確には何ですか？

設計システムは、製品の設計と開発においてチームメンバーを支援するためのさまざまな要素で構成されるオールインワンの情報源です。

複数のアプリケーション向けに、製品設計に関連するすべてを大規模に処理できます。 この一連のガイドラインの全体的な結果は、アクションボタンからランディングページまで、すべてのステップをカバーするシステムの一貫した順序です。

 

デザインシステムとスタイルガイドの違いは何ですか？

通常、設計システムはさまざまな要素で構成されているため、さまざまなアプリケーションの信頼できるソースになります。

スタイルガイドにあるのは、ブランドに必要なさまざまな色、ロゴ、フォント、およびその他の属性です。 デザインチームとマーケティングチームは主にスタイルガイドを使用しますが、デザインシステムは視覚とプレゼンテーションの側面よりも優れています。

これは、システムの具体化を作成するために重要なスタイル、音声、およびコンポーネントの組み合わせです。

企業が聴衆と話す方法に主に焦点を当てているガイドを検討してください。

これは通常のスタイルガイドとは異なり、人間により良い感覚を伝えるために何をすべきか、何を避けるべきかを示し、したがって、より価値のある経験を残します。

簡単に言えば、原則、ガイド、パターン、コンポーネント、およびプロトコルはすべて、設計システムと呼ばれる場所にあります。

なぜ会社はデザインシステムを持っている必要があるのですか？

設計システムは、会社が拡大したり、顧客のニーズが変化したりするにつれて、製品とともに進化する動的な情報の収集です。

生産性の向上と容易さ 環境、テクノロジーを推奨 チームワークにおける設計システムのXNUMXつの不可分の結果です。 彼らは彼らの成長で多くの方法でビジネスを助けることができます、そしてここにいくつかの最も重要なものがあります：

一貫性

多くの場合、企業は、相互作用と動作の一貫性を維持しながら、複数のプラットフォーム用に設計する必要があります。

ソースの一貫性が高いほど、デザイナーや開発者が高品質のUIを実装しやすくなります。

このようにして、特定の製品またはページを既知の要素の組み合わせと見なすことができます。 ランディングページにCTAボタンが必要だと考えてください。

フォント、パディング、色、背景についての正確な詳細を説明する代わりに、単に「プライマリCTA」を提供するように依頼します。

そうすることで、XNUMX種類を超えるボタンのスタイル、複数のデザインレイアウト、さまざまな感覚や外観を備えた製品が表示されなくなります。

別の観点から、それはコンポーネントベースと モジュラー あなたのデザイナーへの考え方。 これにより、管理しやすい要素を定義し、設計のニーズに応じて必要な変更を加えることができます。

この一貫性により、最終的な結果は得られませんが、QAチームの監視も容易にする高品質の製品が残ります。

チームワーク

あなたは、複数のチームが同時にプロジェクトに取り組んでいる企業のXNUMXつですか？ その場合、設計システムを確立することで、チームメンバー間のコラボレーションを大幅にスピードアップできます。

この情報源により、人々はさまざまなリソースにアクセスしやすくなるため、新しいプロジェクトを最初から作成したり、既存のプロジェクトをアップグレードしたりする時間を大幅に節約できます。

さらに、設計者と開発者の間のコミュニケーションがより効率的になります。 そのため、多くの人が設計システムをこれらの分野間の架け橋と見なしています。

設計システムを持つことで、現在のチームメンバーの生産性が向上するだけでなく、 オンボーディングステージ 新規参入者の。

チームの新しい設計者または開発者は、あなたの価値観にすばやく慣れることができ、必要なものを簡単に見つけることができます。

どのようなタイプの設計システムが必要ですか？

従うべき設計システムの種類は、チームと生産したい製品に大きく依存します。 いくつかの簡単な質問から始めることでそれを理解することができます。

• システムは小規模なチームで使用されますか、それとも大規模なチームで使用されますか？ 彼らは主題を完全に理解していますか？
• 調整される製品の総数はいくつですか？ どのプラットフォームとテクノロジーを使用していますか？
• すべての製品の一貫性は私たちにとって重要な問題ですか？

次の原則は、この点に関して私たちにもっと良い理解を与えることができます。

 

フレキシブルまたはリジッド？

まず第一に、あなたはさらなる実験のためにスペースを残したいかどうかについて明確な考えを持っている必要があります。

柔軟な計画により、すべてのチームメンバーは、ある程度の自由を提供しながら、使用するための一般的なガイドラインを得ることができます。 これは、設計セクションと開発セクションの両方のチームメンバーが、要件に基づいてそれを利用できることを意味します。

一方、厳格な計画は詳細なドキュメントをカバーし、設計者と開発者の両方が従うべき同期された計画を提供します。

厳格なシステムでは、新しいアイデアや要素を計画に入力することは容易ではないため、最初にすべてを考慮して準備する必要があります。

最善のアプローチは、柔軟性と剛性の組み合わせを利用することです。 設計者や開発者は、設計システムの使用にそれほど関心がない場合があります。そうすることを義務付けても、影響はなく、押し戻すしかありません。

ただし、すべてをオプションのままにする非常に緩いシステムは、設計システムとはまったく見なされませんでした。 したがって、厳密で緩いシステム計画を一緒に使用して設計システムを準備することにより、両方の世界を最大限に活用することを忘れないでください。

モジュラーvs.統合

モジュラーシステム設計は現在、さまざまな業界で広く使用されています。 複数のユーザーのニーズを伴い、短期間で拡張する必要があるプロジェクトで使用することをお勧めします。

ただし、このようなシステムの実装では、効率的に連携できる独立したパーツを作成することが困難な作業であるため、多くの場合、より高い予算が必要になります。

大規模なオンラインストアや政府のWebサイトなどの幅広いプロジェクトでよく使用されます。

一方、統合システムは、主に単一のコンテキストに焦点を合わせています。 一部の部品で構成されていますが、交換や交換が可能です。

これは、繰り返し要素がそれほど多くないシステムに適しています。

デザインシステムを構築する方法は？

組織の設計システムを開始することは、最初は非常に困難に感じる可能性があります。 考慮すべき点は多岐にわたり、設計システムを準備して一夜にして実行することはできません。

一般的に言って、私たちの目の前には、まったく新しいプロジェクトを開始する場合と、現在使用している製品を使用する場合のXNUMXつのケースがあります。 全体的なアプローチはほとんど同じですが、後者はより多くのステップをカバーします。

新しいプロジェクトの場合は、要素と概念を含むさまざまなサンプルを確認することから始める必要があります。 満足できるデザインを探し、既存の人気の原則を使用して、さまざまなパーツの色や形を考え出します。

すでにプロジェクトで作業している場合、最初のステップは、次のインベントリを作成することです。 UI要素.

そうすることで、それらの間の相違点と類似点を分析できるようになり、したがって、余分なオプションを減らすことができます。

これで、アプリケーションに基づいて効率的にグループ化し、利用可能なツールを使用してプロセスを高速化できます。

一般的な手順として、このようなシステムを作成するための主要な手順は次のとおりです。

あなたが持っているものを分析する

実装する設計システムを選択する最良の方法は、設計に適用した既存のアプローチを確認することです。 従うプロセスとその目的で使用するツールを理解することから始めます。

また、設計システムの導入に必要な時間を見積もるために、製品チームが設計の側面をどれだけ簡単に理解できるかを評価します。

次に、ブランドに使用するアルファベットを特定します。

この一般的な用語には、製品の価値と、使用する色、声、フォントが含まれます。 また、ブランドのガイドラインを確認し、設計原則に取り組むときにこのデータ収集を参照することもできます。

 

視覚的側面を調べる

あなたがこれまでに遭遇したい最後のことは、デザインの重複です。 それはあなたに矛盾をもたらし、それはプロジェクトの結果の質を低下させることにつながります。

視覚的な監査を行って重複を特定し、製品内のすべての関連コンポーネントを分類します。 この監査は、製品内の不整合を見つけるだけでなく、製品内で最も重要で使用されている要素を見つけるのにも役立ちます。

CSS統計ツールを使用して、CSS内の固有の色と書体の数を調べることにより、この多段階プロセスを開始できます。

スタイリングについてより良いアイデアが得られたので、コンポーネントを探すことができます。

ここでは、Atomic Design Webサイトを使用できます。このWebサイトでは、名前が示すように、Webページに存在する最小の要素の内訳が表示されます。

デザイン言語とパターンを作成する

あなたのデザイン言語はあなたが使用しようとしているデザインシステムの中心です。 優れたユーザーエクスペリエンスは、設計上の決定が行われる理由を明確に理解することで実現できます。

設計原則は、構築するもの、その背後にある理由、およびそのために使用した方法論に関する質問に対して、理解できる応答を提供する必要があります。 デザイン言語には、XNUMXつの主要な部分が必要です。

色

通常、ブランドのアイデンティティを表すためにXNUMXつまたはXNUMXつの主要な色が使用されます。 デザイナーにもっと多くのオプションを提供したい場合は、色の混合、色合い、色合いを含めてください。

 

フォント

適切な設計システムは、多くの場合XNUMXつのフォントで構成されています。 XNUMXつは見出しと本文用で、もうXNUMXつはコード用です。 複数のフォントを使用しないでください。ユーザーを混乱させるだけで、良い結果は得られません。 また、 ウェブサイトに適したフォントを選択する トリッキーになる可能性があるので、それに十分な注意を払ってください。

 

間隔とサイズ設定

ページで使用するスペースとマージンは、バランスが取れている場合に最も有利に表示されます。 スマートフォンと完全に互換性のあるシステムを選択することは、この点で今や必須になりつつあります。

 

画像

同様に、ガイドラインに基づいて画像を作成する必要があります。 あなたのブランドのためにいくつかのルールと計画を設定し、どんな犠牲を払ってもそれに固執してください。

次に、UIで使用される実際のコンポーネントについて詳しく説明します。 持っているパーツやピースからライブラリを作成します。これには、すべてのボタン、画像、さらにはフォームも含まれます。

正確なニーズに基づいてそれらを評価し、類似したものをマージし、余分なアイテムを削除して、より簡素化された意思決定プロセスを作成します。

 

ルールと戦略を設定する

先に指摘したように、デザインシステムの究極の目標は、創造性をより高いレベルに引き上げることです。

前のセクションで、チームメンバーの創造性が一方向に限定されないように、ルールは厳密なルールと緩いルールの組み合わせにする必要があることを説明しました。

設計システムの動的な性質を考慮に入れて、長期的に変化に対処する方法を定義する必要があります。

人気のあるモデルのXNUMXつは、ガバナンス戦略のXNUMXつのアプローチ（単独、集中型、および統合型）を説明しています。

単独モデルでは、責任のある個人またはグループが設計システムに関連するすべての決定を行います。

集中型モデルとは、チームがシステムで発生することを担当する条件を指します。 また、フェデレーションモデルとは、さまざまなチームの複数の人がシステムを担当することを意味します。

多くの人は、一人の人がすべてを決定するので、孤独なモデルが最も危険な選択であると信じています。これは、多くの場合、タスクの完了を妨げる可能性があります。

システムのアップグレードと変更を担当するチームを持っている組織は、システムをより用途の広いものにするために、他の人と緊密に連絡を取り合う必要があります。

フェデレーションモデルに複数のチームが関与していることを考えると、人々は変更にはるかに迅速に適応できます。 ただし、全体的な進捗状況を管理するには、チームリーダーが必要です。

これらの各オプションには長所と短所があり、モデルの選択はすべてあなた次第です。

チームにすべてのアプローチの組み合わせを実装できますが、何をする場合でも、常にシステムへのチームメンバーの参加に焦点を合わせ、チームメンバーにアイデアについて話し合うように促します。

アップラッピング

設計システムはもはや未来的なビジョンではありません。 設計システムは、企業の製品戦略の基盤になりつつある設計必需品の完全なパッケージです。

設計者や開発者との統合が優れているほど、より良い結果が得られます。 このシステムは、設計主導の活動を強化し、時間とともに進化し続けます。

したがって、製品の変更や開発に合わせて継続的に更新する必要があります。