デザインシステム例トップ8

Top 8 DS

AirbnbやUberなど、すでに多くの企業が独自のデザインシステムの使用に切り替えています。

競合他社との差別化を図り、ユーザーエクスペリエンスを向上させるためには、業界内での絶え間ないイノベーションが必要不可欠であり、特にグローバルに事業を展開しているブランドにとっては欠かせません。

繰り返し使用できるコンポーネントを最大限に活用することで、デザインシステムをワークフローに組み込んだブランドは、チーム間のスピード、インスピレーション、効率性を向上させることができます。

ここで注意していただきたいのは、パターンライブラリやコード、UI要素のコレクションだけでは、デザインシステムとして完成したとは言えないということです。総合的なデザインシステムには、デザインの基礎知識、独自のデザインシステムの構築、全体的な実装など、他にも多くの要素があります。

ここでは、一般的なデザインシステムについて学び、このテクノロジーを使って成功と価値を生み出している他社の優れた事例をチェックして、さらなるインスピレーションを得ましょう。

デザインシステムとは何でしょうか?

デザインシステムとは、デザイン会社が保有するすべてのUIリソースの集合体です。これには、必要なコード、ドキュメント、ページのスクリーンショットや画像例、デザインガイドライン、関連ツール、ドキュメント、記事、スタイルガイド、再利用可能なコンポーネントや哲学など、ウェブデザインのワークフロー全体に役立つすべてのコードスニペットや開発リソースが含まれます。

これらのデザインシステムは、オンラインのウェブサイトとしてホストされ、ブランドが決定したものであれば、公開でも非公開でもよい。

デザインシステムは、適用可能な指示や例、スタイルガイドやコーディングガイドラインを含む貴重なドキュメントとして機能する膨大なデータライブラリであり、同時にUIキットの一部であると考えることができます。

なぜ企業はデザインシステムを作るのか?

開発者、デザイナー、エンジニア、プロダクトマネージャーなど、企業のプロダクトチームに所属する全員が集まり、ロゴやカラー、言語やコードなど、デジタル製品資産の既存部分のすべてを議論し、マッピングします。そして、具体的にどのように表現(デザインやコーディング)すべきかを説明する、究極のマスタープランを共同で作成します。

このようにして、すべてのチームは、ビジュアルリファレンス、ツール、記事、パターン、データライブラリなどの完全な証拠となる情報源(業界でデザインシステムが単一の真実の情報源と呼ばれるのには理由があります)を手に入れることができます。これにより、作業の一貫性と統一性を保ち、メンバー全員が同じページを見ることができます。これはデザインシステムの究極の目標です。

デザインシステムの活用と導入

デザインシステムの実装と開発に関して言えば、開発者は、再利用可能なコンポーネントやライブラリから必要なものがすべてコピーできるようになっていれば、繰り返しのコードスニペットに時間を費やす必要はありません。

同様に、デザイナーは、色、ロゴ、ヘッダー、フッターなどの標準的なデザインやUI要素のライブラリがあれば、新しいランディングページをゼロから作成する必要はなく、デザインプロセスをスピードアップすることができます。

また、ウェブマーケティング担当者は、必要なものがすべてシステム内にあれば、ニュースレターのトーンやテンプレートを何度も作り直す必要はありません。

デザインシステムから何を学ぶべきか?

デザインシステムの大半は、わりと一般的な設定パターンに従っています。

システムは多くの場合、トップナビゲーションに主要なカテゴリーを備えています。デザイン、コード、言語、コンポーネントなどです。

これらのメインカテゴリには、より詳細な情報を提供するサブカテゴリがあり、原子レベルのデザイン構造を最大限に活用しています。例えば、「タイポグラフィ」「カラー」「フォーム」「バナー」などのサブカテゴリです。

直感的なナビゲーションにより、デザインのベストプラクティスに関する貴重な情報を得ることができます。

他の人やブランドにとってのメリットは?

多くの企業がオンラインで公開しているデザインシステムの優れた点は、他の人々もそこから学び、さらには自分のアトミックデザインの例として使用することができることです。

Shopify社のショッピングデザインシステムは、ウェブ上で公開されています。つまり、Eコマースサイトをデザインしようとする人は、すべてのデザイン要素について、その基準、デザインコンポーネント、デザイン言語、パターンライブラリを使用することができ、自分が素晴らしい仕事をしていることを100%確信できるのです。

それでは、多くのことを学ぶことができる(そして、必要に応じて盗むことができる)最高のデザインシステムの例をいくつか見てみましょう。

デザインシステムの例

以下で紹介するデザインシステム以外にも、Adeleというデザインシステムのリポジトリがあります。インスピレーションを得てください。

1. Googleマテリアルデザインシステム

Googleは、Microsoft、Apple、Amazonと並ぶBig4テクノロジー企業のひとつであり、オンライン広告、検索エンジン、クラウドコンピューティング、ソフトウェアなどのウェブサービスや製品に注力している有名なハイテク企業です。

GoogleはMaterial Design Systemを作成し、公開しています。Material Design Systemでは、デザインとデザイン原則に関するすべての事柄について、非常に詳細に説明しています。UXPinユーザーは、UXPinライブラリの一つであるマテリアルデザインコンポーネントを簡単に使用することができます。

このシステムのおかげで、ユーザーは様々なデバイス、プラットフォーム、入力方法においてUI UXを完全に統一する貴重な情報を得ることができます。

さらに、Material Designによって、他のブランドや個人が、アトミックデザイン、業界の革新、独自のブランド表現に対する独自のアプローチを行う際に、土台となる強固な基盤を持つことができます。

Google Material Design Systemの主な機能は以下の通りです:

  • Starter Kits
  • Design Source Files
  • Material Theming
  • Layout
  • Typography
  • Color
  • Components
  • Mobile Guidelines

2. Apple ヒューマンインターフェースガイドライン

Apple Human Interface Guidelinesは、ウェブデザインのエッセンスやパターンライブラリが、ダウンロード可能なテンプレートのための膨大でむしろ貴重なデザインシステムのリソースを提示しています。iOSのUIキットライブラリもUXPinのアカウントで利用できます。

このシステムは、スティーブ・ジョブのデザイン原則に従っています:

  • 細部にまで気を配り、正確に作る
  • ユーザーエクスペリエンスを重視し、ユーザーとのつながりを大切にする
  • より大きなスケールで本当に重要なことに集中する
  • 具体的なデザイン言語と手法により、ユーザーの求める反応を生み出す
  • 初心者から上級者まで、ハイテクの親しみやすさを活用する
  • すべてをシンプルに

Apple Human Interface Guidelinesは、iOS、macOS、vOS、watchOSのデザイナーとデベロッパーのための、実用的なリソース、ビジュアルガイドライン、スタイルガイドで構成されています。

その主な機能は以下の通りです:

  • Visual Design
  • Visual Index
  • App Architecture
  • System Capabilities
  • User Interaction
  • Themes
  • Menus
  • Buttons
  • Icons and Images
  • Fields and Labels
  • Window and View
  • Touch Bar
  • Indicators
  • Selectors
  • Extensions

3. Atlassian デザインシステム

Atlassian Design Systemは、世界中のチームのコラボレーションをシームレスかつ容易にすることで、価値ある支援を提供することに重点を置いています。また、Atlassianデザインガイドラインは、UXPinのライブラリコレクションの一部です。

Atlassianのデザイン哲学は、デジタルエクスペリエンスを活用して、チームや個々のチームメンバーの生産性や総合的な可能性を向上させることにあり、世界的に使用されているコラボレーションツールであるTrelloやJiraに見事に反映されています。

Atlassian Design System は、アジャイルプラクティスと、プロジェクト内のすべてのステップを効率的に追跡することを特徴としており、最終的に製品の納品と開発の面で価値ある結果をもたらします:

  • Design Principles
  • Brand Guidelines
  • Product
  • Illustration
  • Prototyping
  • Marketing
  • Personality

4. Uber デザインシステム

Uberによれば、移動が機会に火をつけるといいます。

Uberのサービスは、ライドハイリング、ピアツーピアのライドシェアリング、フードデリバリー、スクーターや電動バイクを使ったマイクロモビリティなど、移動を基本としています。

このようなサービスが、サブブランドから社内ブランド、製品からプログラムに至るまで完璧に機能するために、Uberには、会社が世界と共有する効果的なデザインシステムが必要です。

Uber Design System の主な機能は以下の通り:

  • Brand Architecture
  • Composition
  • Tone of Voice
  • Motion
  • Illustration
  • Photography
  • Iconography
  • Color
  • Logo
  • Typography

5. Shopify デザインシステム Polaris

ShopifyはグローバルなEコマースプラットフォームで、ブランドがビジネスを運営・成長させるために必要なものをすべて提供しています。

Shopifyのデザイン方針が、より良い、よりアクセスしやすいコマース体験の創造に焦点を当てているのも不思議ではありません。

ShopifyのPolarisと呼ばれるパブリックデザインシステムは、同社のコアバリューを包括しています:

  • ユーザーへの思いやりと配慮を忘れない
  • ユーザーがやりたいことを実現するための適切なツールを提供する。
  • ブランドイメージに合った最高レベルのクラフトマンシップを享受すること
  • 正確で迅速な解決策を提供し、手間を省く
  • ユーザーからの信頼を得ること
  • ユーザーが安心して製品を使用できるようにする

Polaris Design Systemは、Shopifyプラットフォーム用のデザインのための、わかりやすく実用的なスタイルガイドを提供します。これは、より良いユーザーエクスペリエンスと製品を作成するためのUIコンポーネント、視覚的要素、コンテンツ、デザイン言語を活用するための広大な知識ベースを提供します。Polarisのコンポーネントは、UXPin管理の一部でもあります。

Shopify Design System Polarisには、上記のプラクティスに忠実に従った主な機能が含まれています:

  • Data Visualization
  • Accessibility
  • Interaction States
  • Colors
  • Typography
  • Icons
  • Illustrations
  • Spacing
  • Sounds
  • Resources

6. IBM Carbon デザインシステム

IBMは、大企業のITニーズに応えることで、グローバルな規模で事業を展開しています。

そのサービスは、ビジネス・コンサルティングやファイナンス、ソフトウェア開発、ITホスティング/管理、ソフトウェア・ハードウェア製品など多岐にわたっています。

そのサービスは、ビジネス・コンサルティングやファイナンス、ソフトウェア開発、ITホスティング/管理、ソフトウェア・ハードウェア製品など多岐にわたっています。

IBMによれば、優れたデザインは単なる要件ではなく、ユーザーに対する実際の責任である。

Carbon Design Systemは、Adobe、Axure、Sketchなどのデザイナーや開発者のために、豊富なツールとビジュアルリソースを提供しているのが大きな特徴です:

  • Data Visualization
  • Patterns
  • Components
  • Guidelines
  • Tutorials

UXPinユーザーは、Carbonで必要なすべてのものをアカウントで簡単に見つけることができます。

7. Mailchimp デザインシステム

Mailchimpは、Eメールマーケティングのリーダーとして有名になってから、Eメールだけではなく、オールインワンのマーケティングプラットフォームを提供するまでになりました。

Mailchimpの明確な目標は、中小企業が自社のブランドアイデンティティやイメージに忠実でありながら成長できるよう支援することです。

Mailchimp Design Systemを開発した背景には、創造的な表現、より良いユーザーエクスペリエンス、最高の品質に焦点を当てた主な機能があるのもそのためです:

  • Data Visualization
  • Grid System
  • Color
  • Typography
  • Components

8. Salesforce Lightning デザインシステム

セールスフォースは、統合されたクラウドベースのCRMソフトウェアを通じて、ユーザーにパーソナライズされた体験を提供するために、それ以上の努力をしています。

Salesforce CRMの目的は、マーケティング、商取引、IT、サービス、販売の取り組みを改善することであり、ユーザーがユーザーと同じことができるようにすることです。

セールスフォースのデザイン哲学は、ハワイ語で家族を意味するOhana(オハナ)に反映されており、4つのコアバリューが企業活動と文化全体を推進しています:

  • 革新
  • 平等
  • 信頼
  • カスタマーサクセス

そのため、Salesforceは独自のLightning Design Systemを発表しており、コンテンツ管理システムに携わるすべての人がその主な機能を学び、恩恵を受けることができるようになっています:

  • Design Guidelines
  • Platforms
  • Accessibility
  • Components (and a lot of them)

Lightning components are Lightningコンポーネントは、UXPinのアカウントライブラリにも含まれています。

会社でデザインシステムを作るメリット

包括的なデザインシステムを導入することで、企業はチームワークと規律を大幅に改善することができます。

デザインシステムの最も重要な利点の一つは、リソース、要素、データの収集により、デザイナーと開発者間のコミュニケーションの問題を最小限に抑え、UXデザインのバグが発生する可能性を最小限に抑えることができることです。

さらに、このようなリファレンスが豊富なライブラリを持つことで、プロトタイプから実際の製品に至るまでの必要な時間を大幅に短縮することができます。

例えば、PayPalFluent UIとMergeテクノロジーを併用しています。これにより、Fluent のコードコンポーネントを UXPin ライブラリに組み込むことができます。これにより、デザイナーも製品チームのメンバーも、これらのコンポーネントに簡単にアクセスし、何度も繰り返してデザインすることができます。

デザインシステムは、デザイナーと開発者の間の断絶を最小限にする素晴らしい方法ですが、それだけではまだ理想的なソリューションとは言えません。Mergeの技術革新のおかげで、製品チームのメンバーは開発ツールを簡単に活用し、デザインコードのパリティを設定してDesignOpsのワークフロープロセスを改善することができます。これは、開発者とデザイナーの両方が、1つのソースから同じコード、ドキュメント、UI要素にアクセスして使用できることを意味します。

デザインシステムを最大限に活用する:UXPinのMergeの方法

The UXPin’s Merge is UXPinのMergeは、デザイナーがコード・コンポーネントを使ってデザインすることを可能にし、容易にする技術です。

この問題に関しては、2つの利用可能なソリューションがあります:

  • コンポーネントの同期は、GitHub、GitLab、BitBucketなどのdevsのGitリポジトリを使用します
  • Storybookからのコンポーネントの同期

それらのコンポーネントはすべてUXPinのライブラリに持ち込まれます。

Merge techは、デザインチームと開発チームの間にコミュニケーションギャップがあるときにしばしば起こる共通の課題に対する適切な解決策として作られました。そのため、様々なUIコンポーネント、コーディングやドキュメントの不整合が発生し、製品の効率やメンテナンスに影響を与えることがあります。

必要なコンポーネントを整理したデザインシステムを第一歩として、Mergeはそれらのコーディングされたコンポーネントをそのままデザインエディターに取り込みます。

最初に思い描いたものと全く同じ最終製品を見ることができる喜びはもちろん、不整合を避けることで時間とコストを節約することができます!

デザインシステムの課題と解決策

企業がデザインシステムを構築しようとしても、特にすべての要素、ドキュメント、コードを維持する際には、具体的な問題や一貫性の断絶が起こり得ます。

設計システムの課題と解決策について、設計のトップリーダーの一人であるジョンソン・エンド・ジョンソンからご紹介します。ウェビナーでは、J&Jチームが彼らのベスト・プラクティスをすべて共有しました。

マージテックは、コード・コンポーネントを使ったデザイン、つまりコード・コンポーネントをデザインに変換することに重点を置いています。この点において、デザイナーは最終製品の視覚的な側面のみに基づいて(必要なインタラクションのみを偽造しながら)単純にプロトタイプを作成するのではなく、すでにコード化されたコンポーネントを使用してプロトタイプのイメージを設計します。

デザインチームは、すでにコード化されたコンポーネントをUXPinのエディターに同期させ、必要なコンポーネントをドラッグ&ドロップして新しいデザインを作成することができるので、デザインチームと開発チームの間を行き来する必要はありません。

基本的に、デザイナーは偽のインタラクションを作成したり、それを追加したり、適切な色を探したりする必要はありません。

一方、開発者はプロトタイプのプレビューを入手し、製品化可能な要素を使って作業を続けることができます。

 

まとめ

デザインシステムは、大量のUIコンポーネントとガイドラインで構成されており、デザイン作業を最適化、改善し、チーム間の一貫性を促進することを目的としています。

しかし、デザインシステムのメンテナンスや実装が不十分であれば、デザインシステムは、多くの不便で混乱を招くコードスニペット、ライブラリ、コンポーネントにすぎなくなってしまいます。デザインシステムは、チームメンバーを迅速に教育し、一貫性を促進すると同時に、デザイナーがより複雑なUXの問題に対処できるようにします。そして、革新的なMerge技術をミックスに加えれば、デザインシステムの構成を次のレベルに引き上げることができます。

 
まだデザインに飢えていますか?

UXPinは、世界中の優秀なデザイナーが使用している製品デザインプラットフォームです。ローフィデリティのワイヤーフレームから完全にインタラクティブなプロトタイプまで、チームで簡単にデザイン、コラボレーション、プレゼンテーションを行うことができます。

無料トライアルを開始

これらのE-BOOKSに興味がありますか?