構造の力–システムモデルを設計するためのガイド

設計システムは、組織が多様な製品、サービス、およびビジネス全体で経験的な一貫性を維持するのに役立ちます。 一般的に視覚的なガイドラインとコンポーネントライブラリに関連付けられていますが、設計システムはまったく異なります。 より多くの企業が設計の継続性の価値を認識するにつれて、新しく形成された設計システムチームは、組織の設計努力の長期的な関連性を確保するためのベストプラクティスを確立しています。

複数の人が同じデザインを追求する場合、よくある質問が出てきます。 これらの質問に対する答えがすぐに利用できないか、簡単に理解できない場合、設計の一貫性は途方に暮れます。 設計システムを入力してください。

現代のデザインの議論では人気がありますが、デザインシステムのルーツは、新聞や雑誌の出版の世界に何十年も深く根付いています。 現在でも、編集ページの体系化された階層は明らかであり、事前構成されたパターンにより、テキストとビジュアルの一貫した配置が可能になっています。

2007年以降、デジタルの流入により、企業は製品やプラットフォーム全体の設計のまとまりについてより意図的になるようになりました。 視覚的なガイドラインとコンポーネントライブラリに重点が置かれましたが、そのようなドキュメントはPDFや共有ファイルのページですぐに石灰化されました。 試行錯誤の末、現代のデザインシステムのメーカーは、自分たちの作品を静的なドキュメントではなく、生きた製品と見なすようになりました。

Zalandoは、ヨーロッパを代表するオンラインファッションマーケットプレイスです。 Atlassianは、そのソフトウェア開発ツールで世界的に認められています。 それぞれに大規模な製品チームと複雑な設計ニーズがあります。 彼らの設計システムモデルから何を学ぶことができますか？

Zalando：設計システムモデルとしてのコラボレーション

Zalandoは、ヨーロッパ最大の靴と高級ストリートウェアのオンライン小売業者です。 1,900以上のブランドを擁するその巨大なデジタルストアフロントは、数百人のデザイナーと開発者のチームによって管理されています。 このような幅広い商品コレクションで一貫したショッピング体験を保証するために、同社は高度に構造化された設計システムに依存しています。

このような知名度の高いブランドのデザインシステムを維持するには、厳格なガバナンスとデザインの意思決定者の緊密なサークルが必要になると考える人もいるかもしれません。 代わりに、Zalandoのアプローチは明らかに協調的です。 Zalandoは、設計システムをエントロピーの脅威にさらされている完全なエンティティと見なすのではなく、機能チームが必要に応じて新しいアイデアを提供することを奨励しています。 それはどのように機能しますか？

Zalandoの設計システムチーム（ZDS）の主な目的は、機能チームが製品を輝かせるのに必要なコンポーネントを開発するのを支援することです。 同時に、ZDSは、設計システムの整合性が損なわれないことを保証します。 このように、ZDSはリエゾンであると同時にセーフティネットでもあります。

Zalandoの機能チームは、会社の設計システムと対立するソリューションを必要としていることに気付いた場合、簡単なGoogleフォームを使用して投稿を送信します。 寄付チケットを受け取ると、ZDSは変更のリクエストを確認し、ライト、ミディアム、またはヘビーに分類します。 各カテゴリには、独自の共同レビュー、設計、および反復のシーケンスがあります。

貢献がこのプロセスを経て実現すると、ZDSチームは中央で共有される設計システムポータルを更新し、毎週のデモで変更を紹介し、更新を利害関係者と顧客に伝達します。

Zalandoの貢献モデルの単純さにより、会社の多様な意見がシステムの進化について発言権を持つことができます。 哲学的には、Zalandoはそのシステムを製品と見なしており、製品を視覚的に調整することを目的とした単なるドキュメントリソースではありません。 この見通しから、さまざまな設計システムモデルに適用できる実用的なポイントを以下に示します。

• ガバナンスは重要ですが、設計システムを監督するチームは、組織内の他のチームの成功に焦点を当てる必要があります。
• 機能提供プロセスをシンプル、透過的、協調的にし、すべてのコミュニケーションを文書化します。
• 設計者と開発者が協力してシス​​テムの変更に取り組み、共有システム言語を育成します。
• システムへのすべての更新がアクセシビリティの問題に対処することを保証するチェックリストを作成します。

Atlassian：デザインシステムの考え方を再考

Atlassianは、JiraやTrelloなど、ソフトウェア開発とコラボレーションのためのツールを作成しています。

2017年、Atlassianはブランドを変更し、デザインガイドラインのサイトを立ち上げました。 同時に、同社はUIコンポーネントとそれに対応するコード例専用の別のサイトをホストしていました。

時間の経過とともに、2つのサイトはダブテールになり、内部の設計および開発チーム、サードパーティのアプリ統合ベンダー、およびAtlassianの顧客の間でフラストレーションと混乱を引き起こしました。

Atlassianは、設計と開発の間の亀裂が拡大していることを認識し、設計システムへのアプローチを再考することを選択しました。 もはや、設計および開発のドキュメントを、アトラシアン製品のコードおよびグラフィック出力を生成する手段にすぎないものとして扱うことはできません。 デザインシステムは、それ自体が製品として尊重されなければなりませんでした。

その問題を完全に理解するために、Atlassianは外部監査を受け、顧客満足度調査を発行しました。 予想通り、2つのサイトはずれていて古くなっていると見なされていました。 Atlassianは、その評判と、変更を求める設計者、開発者、および利害関係者の大規模なエコシステムにより、その欠点を認識し、設計システムの再考に着手しました。

2020年8月の初めに、アトラシアンのデザインシステムチーム（ADS）は、ブランド、ビジュアル、コンテンツ、コンポーネント、およびパターンのガイドラインを統合する新しいサイトを立ち上げました。

さらに、ADSチームは次のことを行います。

• UIコンポーネントの半分を新しいシステムに移行しました（残りは進行中です）
• 全体を通して書き直され、簡素化されたドキュメント
• システム内の検索の改善
• Click-to-Copyコードリンクを追加

Atlassianの成熟した考え方の最も明白な証拠は、ADSのリードデザイナーであるJennie Yipから来ています。「設計システムに関する一般的な誤解は、公開されると、変更できない真実の情報源になるというものです。 設計システムは決して完全ではありません。 Atlassianでは、デザインシステムの見方を、生き生きとした呼吸する存在にシフトし始めています。」

覚えておく価値のある5つの設計システムの原則

今日の最先端は、明日の鈍い刃です。これは、すべての設計分野に浸透している問題です。 設計システムを作成およびホストするためのツールとプラットフォームは豊富にありますが、デジタル設計の急速な発展により、指針となる原則の観点から設計システムを考えることがより有益になります。

1.デザインシステムはデジタル製品です。

すべてのデジタル製品と同様に、設計システムには定期的な維持管理が必要です。 長期間休止状態にあるシステムは、使用されなくなったり、機能しなくなったりします。

2.設計システムは協調的です。

設計システムは、複数のビジネス機能を代表する利害関係者のニーズに応える必要があります。 コラボレーションの手段を提供することで、システムが設計およびエンジニアリングのサイロ内に存在することを防ぎ、製品のアイデアが無視されないようにします。

3.設計システムはシンプルさで繁栄します。

デザインシステムは答えを見つける場所であり、派手なビジュアル、複雑なアニメーション、または機知に富んだコピーに対する称賛を集めるものではありません。 情報は適切に整理され、ナビゲートしやすく、検索可能である必要がありますが、テキストの説明はコンテキストと簡潔な指示のバランスをとる必要があります。

4.設計システムには、コミュニケーションとエンゲージメントの戦略が必要です。

設計システムを管理するチームは、更新や新機能を関係者に定期的に伝達する方法を検討する必要があります。 ニュースレター、Q＆Aセッション、およびその他のアウトリーチ戦略は、次のように通知し、関与する必要があります。 これがあなたが気にかけるべき理由です。」

5.設計システムは一元化されています。

設計システムは、単一のクラウドベースの場所でアクセスできる必要があります。 システムをナビゲートしたり、資産を取得したりするために、特定の設計プログラムの知識は必要ありません。 また、設計と開発について別々のガイドラインを公開することは、製品の不協和への確実な道であることを忘れないでください。

設計における構造的柔軟性の力

デザインシステムは、一枚岩で、大きくて印象的で、永遠に変わらないという意味ではありません。 また、それらは単にデザインコンポーネントやスタイルのリポジトリではありません。 彼らは生きている、呼吸する製品、植え付けと剪定を必要とする有機的な努力をしています。 そのため、継続的な保守と更新に取り組む設計者で構成される専任のチームに値します。 結局のところ、設計システムは決して完成しません。

最終的に、最高の設計システムは、単純で、協調的で、柔軟性があります。 彼らは、差し迫った設計の質問に明確に答え、複数の利害関係者からの意見を歓迎し、独断的な公式よりも強力なソリューションを優先します。

ご意見をお聞かせください。 以下にあなたの考え、コメント、フィードバックを残してください。

•••

Toptal Designブログでさらに読む：

• 一貫性が鍵– FigmaDesignSystemを構築する方法
• デザインシステムとパターンを理解する
• Figma vs. Sketch vs. Axure –タスクベースのレビュー
• マテリアルデザインを使用する理由長所と短所を比較検討する
• 過去はまだ存在している–時代を超越したデザインの概要