デザインシステムの包括的なガイド

デザインチームと開発チームの間には大きな隔たりがあり、これは「ハンドオフ」と呼ばれること、つまりアプリのプロトタイプが開発チームに送られる瞬間であることは周知の事実です。スポーツにおけるハンドオフは、クォーターバックがランニングバックの手にフットボールを抱きしめているような、スムーズで楽な動きを示唆することがよくありますが、アプリ構築におけるハンドオフは決してスムーズではありません。

これは、設計と開発がソフトウェア製品チーム内の中核的な機能分野であり、各分野が独自に急速に進化しているためです。また、デザイナーや開発者のみを対象とした成熟したツール ソリューションもありますが、デザインからコードまでのストーリーを対象とするソリューションはまれです。しかし、それは私たちがすぐに話すように変化しています。

ガートナーは、最近のレポート^「​Build Better Products Faster with Design Systems」で、今日の企業によるソフトウェア構築に関する分析で、3つの主要な調査結果を強調しています。

• ゼロから設計されたデジタル製品は、多くの場合、ユーザビリティの低下、視覚的および動作の不整合、および設計サイクルの長期化につながります。
• 多くの製品チームは、オリジナルのカスタムメイドのデザインシステムを作成しているため、設計、構築、保守に多くの時間と労力を必要とする不必要な複雑さが生じています。
• デザインシステムは急速に老朽化し、製品の使いやすさと品質を向上させ、市場投入までの時間を短縮する能力を損なっています。

ビジネスの成功という観点から、企業はアプリケーションに魅力的なUXを提供する必要性を認識しています。しかし、魅力的なUXを実現するには、デザインと開発の間で高度なコラボレーションが必要です。そして、このレベルのコラボレーションは、次の場合に困難であるため、長年にわたって困難でした。

• 開発者は、デザイナーが作成または思い描いたものを正確に複製します。
• デザイナーは、デザインの意図を伝え、視覚的な仕様をコードに変換します。
• 開発者は、モックアップに表示されているが、ハンドオフ中に配信されなかった機能や画像のファイルを見つけることもできます。

 デザインシステムは、デザイナーと開発者の間の従来のサイロを埋めるのに役立ちます。

近年、デザインシステムと開発のコラボレーションを改善するためのソリューションとして、デザインシステムが台頭しています。デザイン システム アプローチは、Salesforce、IBM、Atlassian などの組織で採用されており、その魅力を示しています。

デザインシステムとは?

デザインシステムとは、簡単に言えば、UXパターンとブランドスタイルガイドの意図的なインベントリを表し、その後、ソフトウェアアプリケーションの構築に再利用またはコンテキスト化できる一致するソフトウェアコンポーネントとして実現されます。デザイン システムを拡張して、コンテンツ、ページ テンプレート、さらにはユーザー フローを作成するための音声とトーンのガイダンスを含めることもできます。これは、各組織の特定のアプリケーションドメインと使用コンテキストに合わせて手作りされています。何よりも、製品チームがアプリケーションを構築する際の信頼できる唯一の情報源として機能し、設計と開発の間のコラボレーション契約を表しています。

デザインシステムを使用する利点

デザインシステムが整うと、デザイナーと開発者は、デザインの実装に関する低レベルのチェックを必要とせずに、独自のツールで独立して作業できます。代わりに、結果に関する価値の高い相互作用に焦点を当てることができます。 合意された設計システムには、次の利点があります。

• 承認済みおよび承認された事前定義されたUIコントロールとUIパターンを使用してプロトタイプを作成/構築する時間を短縮します。
• インタラクションモデルだけでなく、WCAG、ARIA、セクション508コンプライアンスなどのアクセシビリティ要件の観点から、アプリケーションやチーム間での一貫性。
• デザインシステムとUIコントロールが複数のアプリケーションやチームで長期間にわたって大規模に使用されるため、欠陥とテストが削減されます。
• デザインシステムのコアコンポーネントとしてのブランドの一貫性は、デジタル製品チーム/デザインセンターオブエクセレンスによって受け入れられ、承認されています。

顧客の視点から見ると、同じ組織が提供するアプリケーション間で意味のある一貫性を保つことで、ユーザーは過去のアプリとのやり取りから学んだことを再利用できます。

GitHubのDiana Mounter氏は、自身のYouTubeトークで次のように述べています。

• デザインシステムは混沌に秩序をもたらします。全員が同じページにいるため、製品全体が一貫して洗練されています。
• デザインシステムは、馴染みのある実績のあるパターンを繰り返し使用することで、ユーザーエクスペリエンスを向上させます。何かをゼロから設計するとエラーの余地が残るので、すでに機能しているものを使用してみてください。
• デザインシステムはワークフローの効率を向上させます。製品チームは、新機能のコンポーネントがどのように見えるべきか、そしてそれらをどのように実装するかを正確に理解しています。

デザインと開発の間の共有語彙

一貫性は大きなメリットですが、コンポーネントやパターンの命名について相互に合意したような単純なことでも、大きな効果を発揮することができます。これは、デザインシステムの現在のユーザーだけでなく、将来のメンバーのオンボーディングにも役立ちます。命名規則を明示して共有にすると、開発者と設計者の両方がそれぞれのツール環境でコンポーネントを見つけやすくなります。

時間が経つにつれて、UX パターンの名前が会話で浮かび上がり始め、ユーザー要件の代理として機能します。たとえば、誰かがコンボボックスコンポーネントを使用する必要があると言及したとき、デザイナーと開発者の両方にとって、それがどのような種類の動作をサポートし、ユーザーのタスクエクスペリエンスにどのように役立つかが明確になります。デザインシステムはコンポーネントをパターンとして文書化するため、通常、特定のコンポーネントをいつ使用するか、どのように正しい方法を使用するかを例を挙げて説明します。つまり、その意味で、デザインシステムは親しみやすいUXガイダンスのニーズを満たすことができ、その結果、デザインの実践を伝道することができるのです。

Accelerate Design Process and Development

納期の短縮は、デザインシステムでコンポーネントを再利用する明確な利点です。設計の観点から見ると、新しいコンポーネントやパターンは既に設計システムのUIキットの一部であるため、新しいコンポーネントやパターンを作成する必要がないことから効率性がもたらされます。新しい複雑なパターンを作成する必要に直面した場合でも、デザイナーはデザインシステムのガイドラインに頼り、すでに利用可能なボタン、ラベル、またはメニュードロップダウンを使用して何かを構築できます。

開発者の視点から見ると、このコンポーネントまたはパターンのコードを生成できると、設計仕様とコードの間の不整合を回避できます。学習速度は、デザインシステムアプローチを使用するあまり明白ではない利点です。デザイナーがピクセルクラフトから解放された今、デザイナーは真のデザインプロセスに戻り、ユーザージャーニーやフローの設計とユーザーによる評価に集中することができます。設計成果物の作成に使用されるアプローチは、ユーザビリティ テストや利害関係者からのフィードバックを得るための中間プロトタイプの作成にも使用できます。

デザインシステムは、単なるUXのベストプラクティスやUIキットのセットではないことに注意することが重要です。また、開発側で UI コンポーネントを一致させる必要があります。デザインシステム運動は、伝統的に大規模な組織のデザインチームによって支持されてきましたが、真に成功するためには、開発チームがデザインシステムの共同所有者/貢献者になる必要もあります。

これは、デザインシステムが通常陥るところです - それらはデジタル製品チームのデザイン側によって支持されています。開発側は含まれておりません。これらの場合でも、ハンドオフの管理ミスによるコミュニケーションの誤りと時間のロスが存在します。

なぜデザインシステムを使うのか?

デザインシステムは、設計者に自分の仕事を体系化し、コンポーネントで考えることを強います。フロントエンド開発者はすでにこれを行っています。彼らはこれをやってきた。デザインチームがデザインシステムを作成すると、突然、彼らは開発者のチームメイトのように考え、同じ言語を話し始めます。

デザインシステムは単に仕事に別のレイヤーを追加しているように感じるかもしれませんが、デザインシステムは効率を高めるのに役立ちます。これがどのように適用されるかをよりよく理解するために、次の質問を検討してください。

• スケール– 100 以上の画面を持つ製品 (または製品) を設計していますか?あなたの製品は大幅に成長しますか?
• 一貫性–製品に一貫したブランディング、ルックアンドフィール、エクスペリエンスを持たせたいですか?現在、製品には20種類のボタンスタイルがありますか?
• 効率性– ビジュアルデザイナー、ユーザーエクスペリエンスデザイナー、フロントエンド開発者がより迅速に作業し、時間を節約したいと思いませんか?
• チームワーク– デザイナー間で多くのハンドオフがあるプロジェクトや、多くのデザイナーが同時に同じプロジェクトに取り組むプロジェクトはありますか?

上記の質問のいずれかに「はい」と答えた場合でも、デザインシステムはおそらくあなたに適しています。大規模に作業し、一貫性と効率を向上させることが、デザインシステムを作成して使用する最大の利点です。

デザインシステムの解剖学

デザインシステムでは、原子、分子、生物として最もよく説明できるスケーラブルな要素を構築するためのアプローチを使用します。これは一般に、ブラッド・フロストによって作成されたアトミックデザイン方法論と呼ばれています。これは、デザインシステムの構造を記述するための一般的なアプローチになっています。

原子-分子-生物の概念を例を挙げて説明します。

原子、分子、生物の比喩に戻ると、最も小さなコンポーネント(ボタン、アバター、ラベル、見出しなど)を設計することから始めます。この最も小さなコンポーネントは、原子と呼ばれます。

さらに一歩深く掘り下げると、原子は陽子や中性子などの粒子で構成されています。デザインシステムの場合、これは組織のブランドアイデンティティを定義する基本カラーパレットとタイポグラフィにマッピングできます。

原子から1つ上のレベルに進むと、原子で構成される分子があります。分子はコンポーネントにマッピングでき、メニュー項目、リスト項目、ドロップダウン項目などのより複雑な構造を表すことができます。

次に、レイアウトと複数のコンポーネントを組み合わせることで、次の階層単位であるUXパターンが得られます。生物学的な比較にこだわると、生物にたどり着きます。これらは、「優れた」設計原則に従ってUXのベストプラクティスをカプセル化し、製品の特定のニーズに合わせて構築されています。

原子、分子、生物としてのデザインシステムを説明するポイントは、生命システムとの類似点を描くことです。デザインシステムは、静的で決して変化しないものであってはならず、製品のUXニーズを反映し、使用する製品やテクノロジーとともに常に進化する必要があります。新しいデバイスのレイアウト要件により、新しい要件が発生します。新しい製品機能やブランドアイデンティティの変更は避けられません。私たちは、これらの変化に適応するために、デザインシステムが柔軟で変更する準備ができていることを確認する必要があります。

デザインシステムの構築方法

まず、既存のデザインシステムを、構築するもののベースとして使用できます。既存のシステムを使用する利点は、特に実際のUIコントロールとコンポーネントに支えられている場合に、時間を大幅に節約できることです。この場合、設計システムの定義と、開発チームに設計を引き継ぐときにそれをバックアップするコントロールがあります。これは、私たちが常に話しているコードハンドオフへの設計です。既存のデザイン システムをベースとして開始すると、独自のデザイン ニーズを犠牲にすることなく、この記事で強調した他の利点を維持しながら、UI キットとデザイン システム定義のあらゆる側面を企業のニーズに合わせてカスタマイズできます。

Indigo.Designシステムを開始するには、UIキットと同期ツールをIndigo.Designから入手し、このドキュメント(https://www.infragistics.com/products/indigo-design/help/sync-themes-plugin)に従って、自分のニーズに合わせてカスタマイズします。

既存のデザインシステムから始める場合でも、ゼロから始める場合でも、デザインシステムを構築するための重要な手順をいくつか紹介します。

ビジュアル監査の実施

デザインシステムを構築するための最初のステップは、アプリ、ウェブサイト、その他のデジタル製品のデザインなど、現在のデザインを視覚的に監査することです。使用している CSS のインベントリを作成し、要素の視覚的な品質を把握することで、このプロセスがどの程度の作業になるかを判断できます。

Create a Visual Design Language

ビジュアルデザイン言語は、デザインシステムの中核です。これは、デジタル製品の構築に使用する識別可能なコンポーネントで構成されています。ビジュアルデザイン言語は 4 つの主要なカテゴリで構成されており、これらの各デザイン要素が画面上のすべてのコンポーネントで果たす役割を考慮する必要があります。

• 色– デザインシステムの一般的な色には、ブランドを表す 1 〜 3 個の原色が含まれます。さまざまな色合い(色と白を混ぜた色)やシェード(色と黒を混ぜた色)を含めて、デザイナーにいくつかのオプションを提供することをお勧めします。
• タイポグラフィ– ほとんどのデザインシステムには、見出しと本文のコピーの両方に1つのフォントと、コード用の等幅フォントの2つのフォントしか含まれていません。ユーザーの過負荷や混乱を避けるために、シンプルに保ちます。フォントの数を少なくしてください。これは、タイポグラフィデザインのベストプラクティスであるだけでなく、Webフォントの過度の使用によって引き起こされるパフォーマンスの問題も防ぎます。
• サイジングとスペーシング– スペーシングとサイジングに使用するシステムは、リズムとバランスが取れているときに最適に見えます。4 ベースのスケールは、iOS や Android の標準、ICO サイズ形式、さらには標準のブラウザー フォント サイズで使用されているため、推奨されるスケールとして人気が高まっています。
• 画像– ビジュアルデザイン言語で画像を成功させる鍵は、計画を立て、それを守ることです。イラストやアイコンのガイドラインを設定し、シチュエーションに最適な画像形式を使用します。

UI/パターンライブラリの作成

すでに実施したビジュアル監査 (デザイン要素のビジュアル品質を調べた) とは異なり、プロセスのこのステップでは UI の実際のコンポーネントを調べます。現在本番環境のUIのすべてのパーツとピースを収集します。つまり、すべてのボタン、フォーム、モーダル、画像を意味します。不要なものをマージして削除します。

各コンポーネントの文書化と使用

この手順は重要です。各コンポーネントが何であるか、いつ使用するかを必ず文書化してください。ドキュメンテーションと標準は、パターンライブラリを真のデザインシステムから分離するものです。

デザインシステムを製品のように扱う

他の製品と同様に、デザインシステムにはプロダクトマネージャー(通常は組織のデザインリーダーまたはUXリーダー)が必要であり、バックログ、ロードマップ、およびメンテナンスが必要です。 製品のように扱われない設計システムは、最終的には企業内の製品のようになり、無視されます。それらは陳腐化し、時代遅れになり、最新のベストプラクティスやパターンが含まれず、企業の標準に追いつくことができません。デザインシステムを他の製品と同じように扱うことが重要です - それは、ユーザーに未来があり、サポートを受ける場所があるという自信を与えることができます。

デザインシステムの例

商業デザインシステム

• Quickbooks Design System
• GEL – BBCのグローバルエクスペリエンス言語​
• Material from Google
• Lightning from Salesforce
• Airbnb’s Visual Language
• Joystick from EA
• Fluent from Microsoft
• Plasma from WeWork
• Polaris from Shopify
• ロンリープラネット
• Meetupからの群れ​
• Hubspotのキャンバス​

政府のデザインシステム

• S. Web Design Standards
• USPTO UI Design Library
• USA Jobs Design System
• カリフォルニア州
• Bristol City Council
• City of Philadelphia
• Australian Government

インディゴデザインシステム

​Indigo Design Systemは、Ignite UI for Angularコントロールにもマッピングされる60+のUIコンポーネントでデザインワークフローを強化します。各コンポーネントは、レスポンシブ Web 開発用に最適化されており、ライブラリに設定されたスマート レイアウトとサイズ変更ルールを通じて、さまざまなテンプレート機能を提供します。さらに、ダイナミックなエクスペリエンスを設計する際に選択できるライト/ダークモードとさまざまなインタラクション状態を追加しました。これらすべてがアプリケーションの設計と開発を効率化し、Sketchのライブラリで作成された任意のユーザーインターフェイスをIgnite UI Angularで構築できるようにします。

Sketchライブラリには、それらに関連するすべてのコンポーネントとシンボルを含む [コンポーネント] ページがあります。以下は、「デザインサイド」の形でデザインシステムのごく一部です -SketchのUIキット 、この記事で言及したデザインシステムのすべてのコア領域が含まれています。 これは、いくつかの種類のボタン、ボタングループ、チェックボックス、スイッチ、ラジオグループなどのフォーム要素など、単純なアーティファクトの一部を示しているだけでなく、エンタープライズデザインシステムに必須のデータグリッドのようなリッチなUIコントロールを示しています。

詳細を確認するには:

• マテリアルアイコン- 150 +マテリアルアイコンのコレクションは、マテリアルアイコンのデザインガイドラインに従って私たちが作成した250 +以上のアイコンで拡張され、さらに簡単に拡張できます
• 色– プライマリ、セカンダリ、グレーのカラーバリエーション、特殊な色、データビジュアライゼーション用に特別に設計されたパレット(さまざまなタイプの色覚異常に最適化されたセットを含む)のパレット
• タイポグラフィ– 汎用およびコンポーネント固有のテキストスタイルのコレクション
• エレベーション–マテリアル デザインでお馴染みの 24 個の影のセットで、影の色、影の色に基づいています。
• イラスト–デザインをより遊び心のある完全なものにするための17のカスタマイズ可能でスタイリング可能なイラストのセット

​Indigo.Designにアクセスして、デザインシステムだけでなく、プロトタイピング、ユーザーテスト、アプリ構築、コード生成をApp Builderと統合するこの完全なデザインからコードまでのシステムについて詳しく学んでください。

¹ Gartner 'Build Better Products Faster with Design Systems," 2021年3月2日, Brent Stewart, Van Baker