あやね
複数の画面やサービスで同じ操作を提供するには、色や文字だけでなく、部品の状態や使い方もそろえる必要があります。デザインシステムは、そのための共通の部品とルールをまとめたものです。
毎回同じボタンを作り直す代わりに、検討済みのコンポーネントを再利用できます。デザイナーと開発者が同じ仕様を参照できることも、チームで運用する利点です。
ただし、用意するだけでは定着しません。誰が更新し、変更をどう伝えるかまで決めることで、日々の制作に使える仕組みになります。
この記事では、デザインシステムの役割と構築する理由を解説し、各社のガイドラインやコンポーネントから学べる点を紹介します。
1.デザインシステムとはなにか？
デザインシステムは、製品の画面を作るためのコンポーネント、スタイル、原則、利用ガイドをまとめた仕組みです。チームが共通の判断基準を使って制作できるようにします。
部品には見た目だけでなく、状態、操作、使ってよい場面と避ける場面も示します。デザインデータと実装用の部品を対応付けると、開発時にも参照しやすくなります。
すべての画面を一度に共通化する必要はありません。使用頻度が高く、チーム間で違いが生じやすい部品から整理すると、運用を始めやすくなります。
たとえばボタンなら、色と大きさに加え、主操作と補助操作の使い分け、無効状態、ラベルの書き方を定めます。こうしたルールが画面をまたぐ一貫性につながります。
2. 企業がデザインシステムを構築する理由
デザインシステムは、製品の変更に合わせて更新する共有資料です。新しい画面を作ったときには、既存の部品で対応できるか、新しいパターンが必要かを検討します。
繰り返しの制作と確認を減らす
共通の部品を再利用すると、毎回同じ見た目と動作を決め直す作業を減らせます。担当者は、その画面固有の問題に時間を使いやすくなります。
デザイナーと開発者が同じ部品名と状態の定義を使うと、レビュー時のやり取りも具体的になります。
効果を確認するには、部品の利用状況や修正の手戻りを見ます。使われていない部品が多い場合は、探しやすさや説明、実装との対応を見直しましょう。
・プロダクト間でビジュアルの一貫性を生み出す
製品ごとに色、文字、操作が異なると、利用者は同じ機能でも覚え直す必要があります。共通のルールは、そうしたばらつきを抑えるために使えます。
共通にする範囲と製品ごとに変えてよい範囲を分けることも大切です。ボタンの状態はそろえつつ、用途に応じた画面構成は選べるようにします。
ブランドの色や文字を変更するときにも、共通のスタイルと対応する画面が整理されていれば、影響範囲を確認しながら更新できます。
チームで運用を始める際は、Pixsoでデザインシステムを構築するための機能を確認し、共通化するコンポーネントとスタイルの範囲を決めておきましょう。
3. デザインシステムの活用事例10選
3.1 Google マテリアル デザインシステム
マテリアル デザインでは、ブランドや個人が、アトミック デザインや業界の革新、独自のブランド表現に取り組む際に、強固な基盤となるデザインシステムを構築できます。
マテリアル デザインによって、ユーザーは、さまざまなデバイス、プラットフォーム、入力方法において、UI / UX を完全に統一する貴重な情報を得ることができます。
3.2 Mailchimp デザインシステム
Mailchimp はオール イン ワンのマーケティング プラットフォームなので、複雑なマーケティングを単純化できます。
さらに今回、Mailchimp は、ブランディングとアイデンティティのシステムをアップデートしました。
新たなイラストレーション スタイルを使用してシステムをデザインすることで、複雑なツールやマーケティング プラクティスを、よりシンプルで人間らしい方法で伝えることが可能です。
3.3 Microsoft Fluent デザインシステム
Fluent は、オープンソース、クロス プラットフォームのデザインシステムです。Fluentは、アクセシビリティ、国際化、パフォーマンスに配慮した製品体験を作るためのフレームワークを、デザイナーと開発者に提供します。
Fluent では、Microsoft はデザインの基本に立ち返り、シンプルさをより重視しています。大胆なタイポグラフィーやボーダーレスなコンテンツの代わりに、Fluent ではライト、深度、モーション、素材のような微細な要素に焦点を当てています。
Windows では、モーション キューやぼかし効果に表れています。Office のほか、OneDrive、Office Online、Outlook といったウェブ上のサービスにも利用されています。Microsoftは、Fluentをデザインに対する考え方の中核に据え、段階的に取り入れています。
3.4 Apple ヒューマン インターフェース ガイドライン
HIG (Human Interface Guidelines) には、Apple のすべてのプラットフォームで優れたエクスペリエンスをデザインするために役立つガイダンスとベスト プラクティスが含まれています。
HIGは、アプリケーションのデザインや開発について判断する際に役立つ資料の一つです。
HIG は、Apple のすべてのプラットフォームに関わるデザインを定義する原則を示しています。また、ソフトウェア使用にあたりほとんどのユーザーが望むものを予測して実装するのに役立つ推奨事項を提示します。
3.5 Atlassian
昨今はタイムラインがあまりに過密なため、時代遅れのプロジェクト ワークフローでは追いつくことができません。
Atlassian の デザインシステムは、セルフ サービス型のガイドライン、再利用可能なコンポーネント、プラットフォームの機能を通じて、チームがシンプルで直感的、魅力的かつ快適なエクスペリエンスを生み出すことを支援し、デザインシステムの利点を最大化できます。
3.6 Shopify Polaris デザインシステム
Shopify は、すべての人々の商取引をより良くするという理念のもとに構築された e コマースプラットフォームです。
Shopify Polaris デザインシステムは、Shopify のアプリケーションやチャンネルを構築する際にデザイナーが利用できる包括的なガイドラインと原則のセットです。
Polaris は、Shopify パートナーが利用できる、さまざまなリソースおよびパターンなどの構築要素を提供しています。
利用者にとっての起業、事業の運営・展開の複雑さを軽減し、自立を支援することを意図しています。
3.7 Adobe Spectrum デザインシステム
Spectrumは、Adobeの製品づくりに使われるデザインシステムです。コンポーネントに加え、色、文字、操作などのガイドラインが公開されています。
共通のコンポーネントとツールを利用することで、製品チームは画面ごとの違いを抑え、一貫した操作体験を設計できます。
参考にする際は、部品の見た目だけでなく、状態の違い、使い方、アクセシビリティの説明にも注目しましょう。自分たちの製品で必要な仕様を整理する手がかりになります。
3.8 Uber Base デザインシステム
Uber の Base デザインシステムは、Webアプリケーションの起動、開発、および統一を行うためのアプリケーションです。Base に沿った React コンポーネントとユーティリティのオープンソース ツールキットであり、基本的にデザインをコードに変換しています。
すべての画面は、コンテンツごとによく整理され、名前が付けられています。すべてのデザインは非常に簡単に変更できます。
3.9 Salesforce Lightning デザインシステム
Salesforce の Lightning Design System (SLDS) は、CSSを 1 行も記述せずに Lightning Experience と同じような外観と操作性を持つアプリケーションを構築するのに役立ちます。
SLDS は CSSフレームワークであり、ユーザーは Salesforce の開発者が Lightning Experience を作成するために使用したアイコン、カラーパレット、およびフォントを利用できます。
参照するときは、コンポーネントの構造と状態、アクセシビリティの説明を確認しましょう。CRM製品そのものの機能と、デザインシステムが提供する部品やルールは分けて捉えます。
3.10 IBM Carbon デザインシステム
Carbon は、IBM のすべてのソフトウェア製品のためのオープンソース デザインシステムです。Carbon には統一したプロダクト エクスペリエンスを生み出すために使用される一連のスタイル、コンポーネント、ガイドラインが含まれます。
Carbon は、ユーザーがプロダクトやデジタル エクスペリエンスのためのシステムをデザインできるように特別に開発されたデザインシステムです。
IBM のプラットフォームで提供されるサービスを含め、ビジュアル、コード ガイドライン、およびデザイン標準などが豊富に用意されています。
まとめ
デザインシステムは、製品とともに更新していく仕組みです。使われなくなった部品や説明の不足も、運用しながら見直します。
新しい部品を追加する条件、レビューする担当者、変更の周知方法を決めておきましょう。制作と実装の両方で無理なく使える運用にすることが大切です。
各社の例を参考にするときは、色や部品の見た目だけでなく、状態の使い分け、文章のルール、更新方法にも注目しましょう。自分たちの製品に必要な部品から取り入れると、使えるデザインシステムに育てやすくなります。
事例を参考に仕組みを作った後は、デザインシステムの運用と管理を確認し、更新の担当者や共有の手順まで整えることが大切です。
