優れたデザインシステムを構築するための6つのステップ

「デザインシステムは、企業にとって最も重要な戦略的資産の1つです。これは、チーム、計画、および一連の専用ツールを必要とする生きたデジタル製品です。」

— Brent Stewart, Senior Director Analyst, Gartner

私たちインフラジスティックスも、デザインシステムの価値を強く信じています。これにより、企業のイノベーションの方法が変わり、アプリ作成のペースが加速します。また、デザインシステムは進化しており、将来的に報われる投資であることも付け加えておきます。しかし、多くの企業はまだデザインシステムの利点を見落としており、残念ながら、行動や視覚的な混乱、ブランドの不一致、使いやすさの悪さ、デザイン基準の伝達ミス、およびデザインプロセスにおけるその他の一貫性の欠如をもたらします。また、デザインシステムを構築してから適切に実装する瞬間までの間に、失敗の瞬間が生じることもあります。これもまた、上記と同じ挫折につながります。

これらの課題に対処するために、効果的なデザインシステムを設計する方法と内容を掘り下げ、それに何が必要で、なぜそれを使用する必要があるのかを示します。

すでにデザインシステムに精通している場合は、すぐにデザインシステムを構築するための6つのステップにスキップできます。 そうでない場合は、読み続けてください。

デザインシステムとは?

デザインシステムとは、ユーザーインターフェースの構築に使用するデザインアセットのコレクションであるという一般的な定義があります。しかし、これは実際には再利用可能なUIコンポーネントのライブラリ以上のものです。デザインシステムは、手作りの「デザインエンパワーメント」であり、次のような特徴があります。

• 製品チームの信頼できる唯一の情報源として機能します。
• 特定の使用状況コンテキストとアプリのドメインにチューニングします。
• UXデザインパターンとブランドスタイルガイダンスのインベントリとして機能します。
• 設計プロセスをスピードアップし、一貫性を大幅に向上させます。

私たちインフラジスティックスにとって、一貫性とは、デザインプログラム、開発IDE、およびその間に発生するすべてのことにおいて、スタイルと動作の一貫性を保つことを意味します。一貫性をまったく異なるレベルに引き上げると、私たちの目標は、Sketch、Adobe、およびすぐにFigma用のUIキットでさまざまなデザインプログラムを使用するデザイナーだけでなく、Angular、Blazor、または何か他のフレームワークを好む開発者にも一貫したツールを提供することです。このようにして、製品開発プロセスは、最終的にアプリユーザーにとって一貫したエクスペリエンスを実現します。

私たちが話しているような合理化されたプロセスと一貫性は、自動化や、たとえば、デザインライブラリに包括的なテーマを一度に適用できるプラグインによって実現できます。また、デザイナーと開発者のハンドオフを処理するための革新的ではるかに効率的なアプローチを可能にし、通常はSketch、Adobe XD、およびFigmaファイルにないアイデアを説明したり、アニメーションやマイクロインタラクションを正当化したりする時間とエネルギーを節約することも意味します。

なぜデザインシステムを使用するのか - その利点とその価値は?

IBM、Atlassian、Salesforce.com、NASA などの企業が、設計から開発までのプロセスを管理するための設計システム パラダイムを実装していることは驚くことではありません。デザインシステムを構築、使用、および保守すると、コンポーネントやパターンを再構築する必要がないため、より一貫性のあるエクスペリエンスが得られます。代わりに、デザイナーと開発者は、次のような統合インベントリの恩恵を受けることができます。

• 再利用を促進し、柔軟な設計資産を提供することで、設計資産をゼロから設計する時間と労力を節約できます。
• 一貫したタイポグラフィ、色、声、トーンを通じて、明確な基準とブランドコンプライアンスを管理します。
• UI コントロールがチームやさまざまなプロジェクト間で大規模に使用されるため、運用上の欠陥が減少します。

デザインシステムを使用するすべての利点については、すでに総合ガイドで説明しています。したがって、その利点、それがもたらす価値、その構造、およびいくつかのデザインシステムの例について学びたい場合は、そこにすべてを見つけることができます。

6つのステップで優れたデザインシステムを構築する方法は?

優れたデザインシステムを構成するものは、簡単に言えば、デザインのブラックボックスではなく、さまざまな統合を可能にするもので、デザイナーがプロセスやDesignOpsに統合するための柔軟性のある形で提供され、同時に、エンドユーザーを念頭に置いて設計し、利害関係者からのフィードバックを収集するためのさまざまな方法を可能にし、実際のユーザーとのテストを簡単に実行できます.そしてもちろん、優れたデザインシステムは、維持費がかからず、進化が容易で、クリーンで透明性の高いデザインシステムアーキテクチャを備えています。

Step 1 – Run an inventory

サードパーティのデザインシステムの構築または使用を開始する場合、最初のステップは、製品またはワイヤーフレームのインベントリを実行することです。これにより、製品を探索しながら1つの画面から次の画面に何度も表示されるため、プロジェクトにとって重要なコンポーネントを絞り込むことができます。在庫が手元にあると、これらの作品が小さな要素からどのように作られているかをより簡単に理解できます-ボタンには特定の形状、色の組み合わせ、そして忘れてはならないのは、そのラベルの書体が付属しています。また、深く掘り下げるにつれて理解できるのは、ボタンだけでは最終的に必要なものにはほど遠いこと、ユーザーが入力する必要があるメニューナビゲーションやフォームで特別な役割を果たしているということです。

ステップ2 – 亜原子のピースを定義する

これにより、ステップ2は、サブアトミックピース、つまり物事がどのように見えるかの基礎となる基盤を定義し、一貫性があり、目に心地よい製品を形作ることができるようになることです。Indigo.Designの経験から、このカテゴリに当てはまり、システムを使用する設計者に見える要素は次のとおりです。

• 色
• タイポグラフィ
• シャドウ
• アイコン
• イラストなどのビジュアルグラフィック

ただし、レイアウトグリッドサイズ(通常はパディングサイズを決定する)や、コンポーネントの丸めの境界線半径など、同様に重要でありながら、より微妙に見えるものが存在する可能性があります。例として、4pxグリッドを使用する場合、コンポーネント内のパディングは4px、8px、16px、またはそれらの組み合わせ(8px+16px=24px)になる可能性が高くなります。その結果、たとえば、ボタンの 8px の丸めと、隣接する 2 つのボタン間の 24px の余白が定義されます。

ステップ 3 – 実際の UI コンポーネントを絞り込む

3番目のステップには、インベントリの作成中に特定した実際のコンポーネントが含まれます。常に、製品のUIで最も頻繁に表示されるものから始めます。これらは通常、ボタン、アイコン、入力フィールド、テキスト段落、画像であり、通常はコンポーネントとして形成されず、ネイティブ要素として存在します。入力フィールドがテキスト入力に使用されるかどうか、数値の入力、日付の選択など、さまざまなタイプのコンポーネントについて考えることが重要です。例えば、ページ上に10個のボタンがあるかもしれませんが、通常は他のボタンよりも目立つもの、つまりCTAがあります。

Step 4 – Design validation states

4 番目のステップは、これらのコンポーネントを使用して UI パターンとレイアウトを構築することであり、これにより製品画面の設計に一歩近づくと思われるかもしれません。しかし、違います。その前に、再度コンポーネントに戻る必要があります。

覚えておくべきことの 1 つは、UI は決して静的ではないということです。これは、ユーザーが行う操作に応答してユーザーのために流れます。ホバー、フォーカス、または無効状態を定義しないコンポーネントは、ガラスハンマーと同じくらい優れています。それにもかかわらず、ユーザーが常に正しい軌道に乗っているとは期待できません。したがって、検証状態とエラーメッセージの設計は、設計システムアーキテクチャのこの中間段階で重要です。

さらに、コンポーネントのレイアウトの複雑なコンテンツテンプレートを作成する場合は、次のことを確認してください。

• Fluid
• Behaving as expected when resized
• 構成要素の移動や削除に対する適切な対応

私たちがIndigo.Design構築している3つのデザインツール(Sketch、Adobe XD、Figma)はすべて、スマート/オートレイアウトを適度以上に提供します。スマートコンポーネントの征服が完了すると、パターンのレイアウトに同じ戦略を適用することで、すべてのメリットを享受できます。

Step 5 – Build design patterns

さて、5番目のステップは、これらのパターンを構築することです。これはかなり簡単なプロセスなので、Indigo.Designで作成したUIパターンの例をいくつか紹介したいと思います。メディアを再生する製品を構築している場合は、事前に構築されたメディア プレーヤーとボリューム コントロール レイアウトがあると便利な場合があります。会話型 UI を構築している場合は、チャットとソーシャル フィードのパターンが便利です。より正式な文脈に移行すると、保険およびコンプライアンス業界の製品にはさまざまなフォームが必要になる場合があります。そして最後に、ほとんどすべてのビジネスは、最終的には製品詳細ページ、価格比較表、オンボーディング、またはユーザープロファイルが必要になります。

パターンの最も良い点は、進めていくうちにパターンを構築できることです。特定のタイプのフォームは、単一のコンテキストでのみ使用されるため、最初はデザインに存在する場合があります。しかし、製品での使用が拡大するにつれて、それは自然に、使用されているさまざまなコンテキストでそのレイアウトのすべてのインスタンスの信頼できる唯一の情報源となるパターンになります。

Step 6 – Prepare design documentation

最後のステップは、デザインシステムを文書化することです。ここでの目標は、これに対する労力をできるだけ減らすことです。デザインシステムのアーキテクチャが十分に安定していて柔軟性が十分であれば、文書化する必要があるものの数は最小限に抑えられます。ですから、アーキテクチャの目標は、設計システムが完成したら、できるだけドキュメントを書くことではないと冗談めかして言うかもしれません。ただし、UI キット ファイルにリリース ノートのセクションを含めることは除外されません。または、オンボーディングの例やオンラインドキュメント、さらにはコンポーネントの使用と設定、またはデザインシステムのブランド変更に関して、デザインシステムの例に「すべきこと」と「すべきでないこと」を提供するセクションを設けます。物事を少し簡単にするために、これらすべては、デザインシステムマネージャーを活用して処理することもできます。

デザインシステムアーキテクチャのもう一つの目標は、メンテナンスをできるだけ少なくし、既存のコンポーネントやパターンを壊すことなく新しいコンポーネントやパターンを追加することで、デザインシステムがカバーできるシナリオを拡大することです。また、多くの人が3をラッキーナンバーと考えているため、デザインシステムアーキテクチャを成功させるための3つ目の目標を追加します。それは、新しいマーケティングまたはデザインの責任者が、特定の企業のブランドを完全に刷新する必要があると決定したときです。デザインシステムは、再設計を合理化し、数週間ではなく数分で再設計に適応できます。

これらのステップを踏んで、ブランド、ユースケース、製品にとらわれずにデザインシステムについて考えながら構築することで、将来の製品設計と開発の課題を減らすことができます。基盤が安定したら、戻ってきて、これらすべての詳細をその上に適用できます。

しかし、新しいプロセスを実装する際には、常に一定の課題があることを理解するのは当然のことです。しかし、それは大丈夫です。だからこそ、私たちはIndigo.Designを創造するために出発したときに私たちのものを共有したいと思います。それらの多くは、私たちがサポートしたいデザインプログラムの特定のパラダイムシフトに関連していました。次に、設計時に使用するコンポーネントと開発者がコーディングに使用するコンポーネントが常に同期していることを確認するという継続的な課題がありました。これらすべてがスムーズに機能するように、特定のプロセスを確立し、定期的なレビューを行っています。これは、品質、ワークフロー、一貫性が向上することを知って、時間を費やす価値のあるものだからです。

非常に多くの潜在的なリスクがあるため、設計システムの保守ビジネスに参加したいのか、それとも製品に集中してそれを私たちやIndigo.Designのような人に任せたいのか疑問に思い始めるかもしれません。

Why Choose Indigo.Design For Your Design System?

デザインシステムの堅牢で将来性のあるアーキテクチャを導入するために、もちろん、Indigo.Designをダウンロードして内部と外部を探索することをお勧めします。時間と労力を節約し、実際の設計に集中することができます。

覚えておくべきいくつかの簡単なこと:

1. Indigo.Designは、コピー&ペーストする要素でいっぱいのキャンバスではなく、近い将来にSketchとFigmaのためのネイティブライブラリです。
2. Indigo.Designには、ステートを持つコンポーネントだけでなく、デザインシステムのユーザーがコンポーネントの構成を変更すると自動的に調整されるテンプレートやバリアントもあります。
3. また、Indigo.Designは WYSIWYG App Builderと連携して、Web 上に実際のコンポーネントを作成します。

4. Indigo.Designには、テーマ設定のための強力なメカニズムがあり、ブランドカラーやタイポグラフィを適用して自分だけのものにすることができます。
5. Indigo.Design Material、Bootstrap、Fluentの異なるバリアントを展開し、これらのフレームワークと同様のルックアンドフィールを提供します。

Sources:

[1]ガートナー社、Build Better Products Faster With Design Systems、Brent Stewart、Van Baker、2021年3月2日