知る・触れる・楽しむ carbon design system と design system

はじめに

みなさん、こんにちは。
いつもIBM UX Communityをご覧いただきありがとうございます。

IBM UX CommunityのUXデザイナー、前壮一郎です。
現在、IBMの新しく立ち上がった部門ICE（ IBM Client Engineering ）でUXデザイナーをしています。

近年、デジタルプロダクトの世界は急速に進化しています。ユーザーはますます高い期待を持ち、多様なデバイスやプラットフォームを通じてシームレスな体験を求めています。私は、この複雑な環境で、デザインとユーザーエクスペリエンスの一貫性を保つことは、成功するために不可欠だと思っています。
プロジェクトが成長するにつれて、デザインの一貫性を保ちながらも柔軟性を保つことは難しい課題ですが、design systemはその難題に立ち向かう強力なツールとなっています。

この記事では、design systemの重要性、設計から実装、保守までの過程、そして成功するdesign systemの要素について記載しています。
また、弊社のcarbon design system についても触れていますのでそちらもご一読いただけると幸いです。

carbon design systemとはなんですか？

carbon design systemは、IBMの製品やデジタル体験を支えるためのオープンソースの総合的なdesign system（デザインフレームワーク）です。このシステムは、IBM Design Languageを基盤に構築されており、実用的なコード、デザインツール、リソース、そして人間中心のインターフェースガイドラインを包括しています。carbon design systemは、デザインと技術の要素を統合し、IBM製品の一貫性の高いユーザーエクスペリエンスを実現するために設計されています。
このシステムは、デザインと開発のプロフェッショナルが連携して作業し、効率的なプロダクト開発を支援する役割を果たしています。さらに、carbon design systemは活発なコミュニティによって支えられており、多様なバックグラウンドを持つ貢献者たちが集まり、共同でシステムの成長と進化を推進しています。
carbon design systemは、単なるデザインガイドラインやコンポーネントライブラリを超えて、継続的なイノベーションとユーザーエクスペリエンスの向上を追求するツールとして、IBMの製品群において不可欠な存在となっています。

carbon design systemの名前の由来
carbon design systemの名前は、自然界に存在する元素である炭素の特性に由来しています。炭素は単純な化合物から複雑な構造を築く能力を持ち、その特性からこのシステムは「カーボン」と名付けられました。このモチーフは、私たちの個々のスタイルやコンポーネントが組み合わさり、美しく複雑でありながら自然で直感的なデザインを実現できることを象徴しています。炭素が自然界で多様な分子を形成するように、carbon design systemはさまざまなデザイン要素を一体化し、統一された見た目と使いやすいユーザーエクスペリエンスを提供するフレームワークを提供します。このアプローチは、自然のデザインの複雑さと優雅さを反映しつつ、シームレスで直感的なデジタル体験を実現することを目指しています。

carbon design systemはオープンソース
carbon design systemは、IBMによって資金提供され、構築されています。このシステムはIBMのビジネスニーズに適合するようにデザインされていますが、オープンソースとして一般の方々に利用と貢献の機会を提供しています。中心となるアプローチはオープンソースですが、carbon design systemは同時に、IBMのビジネスの様々な側面にも適用されるインナーソースモデルに従っています。このインナーソースモデルは、オープンソースの開発手法を組織内部で実践する考え方です。これにより、IBM内の異なる部門やチームが協力し、デザインと技術の共有や連携を促進しています。carbon design systemは、オープンソースコミュニティへの貢献と同時に、IBM内部のイノベーションやプロダクト開発にも価値をもたらす、独自の開発モデルを体現しています。

出典：What is Carbon?

design systemとはなんですか？

design systemは、一貫性のあるデザインと開発を促進し、効率的なプロダクト作成を支援するためのコンポーネント、パターン、ガイドライン、コード、ツール、リソースの組み合わせです。デザインシステムは、デザインの基本原則、カラーパレット、フォント、アイコン、コンポーネントなどのデザイン要素に関する指針を提供し、それらの要素を一貫して使い、組み合わせてプロダクトをデザインおよび開発する際の効率性と一貫性を高めます。

design systemは、以下の目的を持っています。

1. 一貫性の確保
   プロダクト内で使用されるデザイン要素が統一され、能力や状況に関係なく、すべてのユーザーにが利用しやすいように一貫したエクスペリエンスを提供します。

2. 効率的な開発
   デザインシステムに含まれるコンポーネントやパターンを再利用することで、開発プロセスを迅速化し、品質を向上させます。各コンポーネントは、ユーザーのニーズに合わせて自由に組み合わせられるよう、シームレスに動作するよう設計されています。

3. デザインの向上
   design systemは最新のデザイントレンドやベストプラクティスを統合し、ニーズや要望を厳密にリサーチし、リアルな人々に焦点をあてユーザーエクスペリエンスの向上を支援します。

4. コラボレーションの促進
   デザイナーやエンジニアなど異なる専門分野のチームメンバーが共通のガイドラインとリソースを使用することで、シームレスなコラボレーションが可能となります。

5. 変更の管理
   プロダクトのアップデートや変更時に、デザイン要素を一括で修正できるため、メンテナンスが容易です。

design systemは、単なるデザインガイドラインやスタイルガイドよりも進んで、具体的なデザイン要素や開発コンポーネントを提供し、プロダクト全体の統一性と品質を向上させる役割を果たします。

出典：What is Carbon?

design system 概念拡張（将来像）

デザインシステムの概念拡張（将来像）は以下のようなイメージになるのではないでしょうか。

参照：ヒョンミンさん定義のdesign systemイメージ

design system概念拡張（将来像）における各ステージごとの管理方法

参照：ヒョンミンさん定義のdesign systemイメージ

こちらはあくまでsampleですので参考にしてみてください。

design system は technologyの発展でどういった影響を受けるのですか？

design systemの概念拡張（将来像）は、technologyの発展とデザインの進展によって大きく影響を受けるでしょう。以下に、technologyの進化がdesign systemに与えるであろう影響をいくつか例を挙げてみました。

1. 自動化とAIの活用
   人工知能（AI）や自動化技術の進化により、design system内でのタスクの自動化が進むことが考えられます。デザイン要素の自動生成や最適なデザインパターンの提案、レイアウトの最適化などがAIによって行われ、デザイナーの仕事の効率化やクリエイティブな活動への専念が可能になるでしょう。

2. リアルタイムコラボレーション
   高速な通信技術とクラウドコンピューティングの進化により、デザイナーや開発者がリアルタイムでdesign systemを共有し、協力することが容易になるでしょう。地理的な制約を超えたリアルタイムコラボレーションが強化され、チーム全体での作業が円滑に進むようになるでしょう。

3. ユーザーエクスペリエンスの拡張
   テクノロジーの進化により、design systemは新たなユーザーエクスペリエンスを提供する手段として活用されるでしょう。拡張現実（AR）、仮想現実（VR）、音声認識、ジェスチャー制御などのテクノロジーを組み込んだデザイン要素が増加し、ユーザーにより没入感のある体験を提供することが可能になるでしょう。

4. デバイスとプラットフォームの多様性への適応
   新たなデバイスやプラットフォームが登場するたびに、design systemはそれらに対応するデザイン要素やコンポーネントを提供する必要があります。モバイルデバイス、スマートウォッチ、スマートスピーカーなど、さまざまなコンテキストに適したデザインが求められるでしょう。

5. データ駆動の最適化
   ビッグデータとデータ分析技術の進歩により、ユーザーの行動や嗜好に基づいたデータ駆動型のデザイン最適化が可能となります。ユーザーのニーズに合わせたカスタマイズやパーソナライズドなデザインが実現し、ユーザーエクスペリエンスが向上するでしょう。

technologyの発展はdesign systemをより効果的に活用し、革新的なデジタルエクスペリエンスを提供するための道を拓いていくでしょう。

carbon design system と design systemの比較

IBMのCarbon Design SystemはIBM製品やサービスを開発する際の統一感と効率性を重視し、ユーザビリティとアクセシビリティに焦点を当てています。一方、一般的なデザインシステムはカスタマイズ性が高く、幅広いデザインニーズに対応できます。選択肢はプロジェクトの目標やニーズに応じて行うべきです。
以下は、活用シーンと特徴で比較したイメージとなります。

carbon design system

活用シーン

1. IBMの製品やサービスを開発する場合に特に適しています。IBMのプロダクトエコシステムに統一感を持たせたい場合に役立ちます。

2. エンタープライズ環境でのデザイン作業を効率化し、一貫性のあるデザイン体験を提供したい場合に適しています。

特徴

1. 既に作成されたデザインパターンやコンポーネントが含まれており、IBMのデザイン哲学に基づいています。

2. グローバルな企業の規模に合わせてスケーラブルなデザインガイドラインが提供されており、エンタープライズ環境での利用に適しています。

3. ユーザビリティとアクセシビリティに重点を置いたデザインが特徴であり、ユーザーエクスペリエンスの向上が図られています。

design system

活用シーン

1. 企業や組織内での独自のデザインガイドラインを構築する場合に適しています。

2. プロジェクトごとに異なるデザインニーズがある場合に、柔軟なカスタマイズが求められることがあります。

特徴

1. カスタマイズ性が高く、特定の企業やプロジェクトのニーズに合わせてデザインガイドラインを作成できます。

2. デザインの自由度が高いため、クリエイティブなデザイン表現が可能ですが、一貫性が保たれるためのガイドラインの策定が必要です。

デザインシステムの利用者は誰ですか？

デザイナー、開発者、マーケティング担当者、オファリングマネージャーなど、部門横断的なチームのメンバー一人ひとりのために開発します。

ユーザーのジャーニーにあるすべての地点が、全体的なブランド体験の一部であると感じられる必要があり、そこでdesign systemの出番となります。デザイナーの共通した法則性を持つデザインを作るツールだけではなく、開発者、製品やサービスを取り巻く関係者とのコミュニケーションの活性化、円滑なコミュニケーションを行うことができることでコスト削減にもつながるものとして最近ではdesign systemが利用されています。

出典：Who uses Carbon?

利用するとどういうメリットがあるのですか？

Designerのメリット

1. 効率的なデザインプロセス

2. 一貫性を維持したUI/UX設計

3. コラボレーションの円滑化とクオリティの担保

Designerのメリット イメージ

Engineerのメリット

1. 開発効率の向上FrontEnd , BackEndのプロセス標準化

2. ゼロからコーディングする際のバグのリスク低減

3. 一貫性とユーザーエクスペリエンスの向上

4. 新人エンジニアのオンボーディングの容易化

Engineerのメリット image

どういう会社がデザインシステムを導入しているのですか？

「デザインシステム」と検索すると数限りない企業で導入されているものが確認できます。AppleのHuman Interface Guidelines、GoogleのMaterial Design、AtlassianのAtlassian Design Systemなどなど。企業が提供する design systemであり異なる特徴とアプローチを持っています。

今回は、例としてIBMのcarbon design systemとSalesforceのLightning Design Systemの違いをsampleとして載せさせて頂きます。

1. 対象ユーザー
   carbon design system
   IBMのcarbon design systemは、広範な領域でのデザインと開発に従事する人々を対象としています。企業内の多様なプロジェクトやアプリケーションにおいて、一貫したデザインとエクスペリエンスを提供することを目指しています。
   Salesforce Lightning Design System（LDS）
   Salesforceのプラットフォームを使用するアプリケーション開発者やデザイナーを対象としています。主にビジネスアプリケーションやカスタマーエンゲージメントツールを開発するユーザー向けにデザインされています。

2. デザインスタイルとアプローチ
   carbon design system
   クリーンでモダンな外観を持ち、ユーザーエクスペリエンスにフォーカスしたデザイン要素を提供しています。ユーザビリティとアクセシビリティにも配慮されています。
   Salesforce LDS
   モダンでスタイリッシュな外観を持ち、ビジネス志向のアプリケーションに適したデザイン要素を提供しています。アイコンやカラーパレットなど、Salesforceのエコシステムに合わせた要素も含まれています。

3. 焦点とカバレッジ
   carbon design system
   ユーザーインターフェースだけでなく、デザインに関連する様々な側面（コンポーネント、スタイル、デザイン原則、トーンなど）を網羅し、幅広いプロダクトやプラットフォームに適用されるデザイン全体を提供します。
   Salesforce LDS
   ユーザーインターフェースコンポーネントやパターン、ガイドラインを提供し、Salesforceアプリケーションの一貫性を確保することを重視しています。

4. 開放性とカスタマイズ性
   carbon design system
   より広範なコンテキストに適用できるようなユーザーエクスペリエンスを提供し、柔軟なカスタマイズ性を重視しています。
   Salesforce LDS
   主にSalesforceプラットフォーム内で使用されることを意図しており、Salesforce製品との一体感を重視します

総じて、carbon design systemとSalesforce LDSは、それぞれの企業やプラットフォームのニーズに合わせてデザインとユーザーエクスペリエンスを提供するために異なるアプローチを取っています。

さいごに

ここまで読んで頂きどうもありがとうございます。
design systemは、単なるデザインの枠組みを超えて、統一性と効率性を提供する強力なツールとなっています。ユーザーエクスペリエンスの向上やブランドの一貫性の確保に寄与する一方で、チームの連携やスピードアップにも寄与します。これからもデザインとtechnologyの進化に合わせてdesign systemも成長し続けると思います。この記事をお読みいただいた皆様が、design systemの真の力を引き出し、知識と洞察を深めることで、一層効果的なデザインガイドラインの構築やユーザーエクスペリエンスの向上に向けて進んでいただけたらと思います。design systemの可能性を最大限に追求し、魅力的なプロダクトを創り出す過程を楽しんでいただければ幸いです。

Carbon Design System

※当アカウントで発信する情報は会社を代表してのコメントではありません。

前壮一郎（コラボレーション募集）
社内UX勉強会の講演や社外登壇をやっております。
たくさんのネタを持っています！
是非、ご連絡よろしくお願い致します！
mae.design.community@gmail.com

過去記載した記事