デザインシステムベスト8の事例

 

デザインシステムとは、製品の一貫性がありブランドイメージに合ったインターフェイスを構築するために使用されるコンポーネント、ルール、スタイルガイド、ドキュメンテーションの集合体です。企業の多くは独自にデザインシステムを構築しています。

今回は、UXPinが選ぶ 参考にしたい8つの デザインシステム をご紹介していきます。デザインシステムの導入検討の方のみではなく、デザインについて学習中の方もぜひ最後までご覧ください。以下で紹介するデザインシステム以外にも、Adeleというデザインシステムのリポジトリがあります。

UXPin Mergeでデザインシステムの導入とガバナンスを強化しましょう。デザインシステムからすべてのインタラクティブ性のあるコンポーネントをエディターに取り込み、最終製品と同じ操作・機能性を持つインタラクティブなプロトタイプを作成し、デザインの一貫性を保ちましょう。UXPin Mergeについての詳細を読む。

デザインシステムとは

デザインシステムとは、プロダクトチームがアプリ、ウェブサイト、eコマースストア、その他開発する必要のあるUIデザインを構築するために使用するすべてのデザインリソースをまとめたものをいいます。

デザインシステムはデザイナーのためだけのものではなく、フロントエンドのコードとドキュメント、デザインガイドライン、関連プラグイン、デザインパターン、スタイルガイド、再利用可能なコンポーネント、ルールとガイドライン、その他ウェブデザインと開発のワークフローに役立つすべてのビルディングブロックを含むすべてのコードスニペットと開発リソースが含まれることから、開発者にとっても役に立ちます。

これらのデザインシステムは、オンラインのウェブサイトとしてホストされ、一般に公開されることもあれば（オープンソースのデザインシステム）、企業内だけで利用されることもある。

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

このように、デザインシステムに関連するプロダクトデザインのコンセプトはたくさんあります。デザインシステムとパターンライブラリ、コンポーネントライブラリ、UIキットの違いを知りたい方は、こちらの記事をお読みください。：デザインシステム、パターンライブラリ、スタイルガイドの違い

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

GoogleのMaterial Design Systemは非常に洗練されているように見えますね。多くのデザインガイドラインがありますが、開発で使用されるコンポーネントに関するドキュメントも含まれており、コンポーネントがデザインでも使うことができます。UXPinのMergeテクノロジーで、開発者のコンポーネントをデザインに取り込みましょう。UXPin Mergeへのアクセスはこちら。

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

 

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

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

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

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

以下のデザインシステムに関するドキュメントも含みます：

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

Atlassian デザインシステム

 

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

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

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

Atlassian Design System

• UI components
• brand values
• UI kit
• UI patterns
• design tokens
• illustration library
• content guidelines

Uber デザインシステム

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

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

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

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

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

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

IBM Carbon デザインシステム

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

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

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

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

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

• Data Visualization
• Patterns
• Components
• Guidelines
• Tutorials

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

Mailchimp デザインシステム

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

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

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

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

Salesforce Lightningデザインシステム

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

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

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

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

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

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

なぜデザインシステムを作るのか必要があるのか

開発者、デザイナー、プロダクトマネージャーなど、会社のプロダクトチーム全員が集まり、フォントやカラーパレットからUXライティングのルールやCSSコードなど、今あるデジタルプロダクト資産のすべてを話し合い、マッピングします。

表現の仕方（どのようにデザイン、コード化されるべきか）などについての基本的な方針を共同で作成します。

そうすることで、すべてのチームが視覚的な参照情報、ツール、記事、パターン、データライブラリなどの完全な証拠となる情報源（業界でデザインシステムが信頼できる唯一の情報源と呼ばれるのには理由があります）を手に入れることができます。これにより、作業の一貫性と統一性を保ちながらメンバー全員が同じページを確認することができます。これはデザインシステムの最終的な目標です。

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

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

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

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

デザインシステムから学ぶべきこと

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

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

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

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

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

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

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

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

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

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

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

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

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

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

 

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

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

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

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

Mergeが持つ技術は、デザインチームと開発チームの間にコミュニケーションのギャップがある場合に起こりがちな課題に対するソリューションとして開発されました。そのため、さまざまなUIコンポーネントやコーディング、ドキュメントの不整合が生じ、製品の効率やメンテナンスに影響を及ぼす可能性があります。

必要なコンポーネントをすべてまとめたデザインシステムをはじめ、MergeはすべてのUI要素をデザインエディターに取り込みます。

イメージ通りに仕上がるのはもちろん、不整合を避けることができるので製品開発での時間と費用の節約にもつながります。

Mergeは、コードコンポーネントをデザインに変換することに重点を置いています。そのため、デザイナーは最終製品の外観だけに基づいてプロトタイプを作成するのではなく、すでにコード化されたコンポーネントを使ってプロトタイプのイメージをデザインすることができます。

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

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

理想なデザインシステムは見つかりましたか？

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

しかし、デザインシステムのメンテナンスや実装が不十分であれば、デザインシステムは、不便で混乱を招くコードスニペット、ライブラリ、コンポーネントになってしまいます。

デザインシステムは、チームメンバーを迅速に教育し、一貫性を促進すると同時に、デザイナーがより複雑なUXの問題に対処できるようにします。そして、革新的なMergeのテクノロジーをミックスに加えれば、デザインシステムを次のレベルに引き上げることができます。

１４日間の無料トライアルで今すぐコードベースデザインご体験ください。