デザインシステムについて
学習の目的
この単元を完了すると、次のことができるようになります。
- 優れたデザインシステムの特徴と機能を挙げる。
- デザイナーと開発者がデザインシステムを使用、管理し、デザインシステムに貢献する方法を説明する。
- 開発者が Salesforce プラットフォーム上でソリューションを作成するために Salesforce Lightning Design System (SLDS) がどのように役立つかを説明する。
- SLDS がほとんどのデザインシステムとどのように異なるかとその理由を説明する。
Salesforce Lightning Design System (SLDS) には現在 2 つのバージョンがあります。
Salesforce Lightning Design System 2 (SLDS 2) は Spring '25 で導入されました。従来の SLDS は、現在は SLDS 1 と呼ばれています。
この Trailhead バッジでは、デザインシステム全般、SLDS 全体、そして SLDS 1 に焦点を当てています。SLDS 2 の詳細について学習するには「Get Started with SLDS 2 (SLDS 2 の使用開始)」トレイルを受講してください。
SLDS 2 は、新しい CSS フレームワークを使用して構造とビジュアルデザインを分離するスタイリングフックに基づいて構築されています。スタイリングフックとは、より深いカスタマイズとテーマ設定を可能にする CSS カスタムプロパティであり、独自のエクスペリエンスをより迅速に作成できます。
各自の組織で Salesforce Cosmos テーマを選択すると、SLDS 2 にオプトインできます。「Salesforce Cosmos テーマおよび SLDS 2 の可用性」を参照してください。
デザインシステムとは?
その優れた機能を詳しく見る前に、デザインシステムを定義しましょう。
デザインシステムの定義 |
説明 (Explanation) |
|---|---|
|
デザインシステムとは、再利用可能な UI 要素 (コンポーネントという) と反復可能なデザインパターンのコレクションです。 コンポーネントの例として、ボタン、メニュー、サウンド、アニメーション、ビジュアルパターンなどが挙げられます。デザインシステムの中には、UI プラットフォームを基盤に構築されたフル機能のコンポーネントが含まれるものがあります。SLDS のようなほかのデザインシステムは、プラットフォームに依存しないコンポーネントを備えています。こうしたコンポーネントには HTML と CSS がありますが、機能コードはありません。 パターンは、ユーザーの一般的な問題やタスクに対する文書化されたソリューションで、再利用できます。パターンはコンポーネント、レイアウト、相互作用の特定の組み合わせで構成され、完全なユーザーエクスペリエンスを創出します。単なるコンポーネントとは異なり、パターンは、複数ステップのフォームやログイン画面など、ユーザーの目的やプロセスに応じたコンテキストやベストプラクティスを伴います。 簡単に言うと、UI パターンは、コンポーネントがどのように構成され、相互作用して最適なユーザーエクスペリエンスをもたらすかの指針になります。 |
デザインシステムは、製品の作成を誘導する包括的な一連の標準です。このシステムはパターン、コンポーネント、ガイドライン、ベストプラクティスのライブラリを網羅し、デザイン全体の一貫性を確保します。 デザインシステムが包括的なフレームワークとなり、チームで用語が共有されるため、製品開発プロセスが効率化します。 それとは対照的に、デザインパターンは 1 つのソリューションで、デザインシステムの広範なアーキテクチャ内にある個々の要素です。 コンポーネントはビルディングブロックで、パターン、ルール、ガイドラインはそうしたビルディングブロックを使用するための詳細な指示と考えることができます。 |
デザインシステムは、明確で参照可能な標準、原則、ガイドラインを指針とします。 |
デザインシステムのコンポーネントは高度に標準化され、認識しやすいデザインになっています。パターンは、コンポーネントを組み合わせて使用するための目的のある構造化されたプランを備えています。 |
|
デザイナーはコンポーネントとパターンを組み合わせて UI をデザインします。 デザイナーがデザインシステムのコンポーネントをさまざまな方法で組み合わせて UI デザインを作成すると、開発者が HTML や JavaScript を使用してその UI デザインを実装してアプリケーションを構築します。デザインガイドラインは、コンポーネントを特定のユースケースのためのパターンに組み立てる手順書として機能します。 コンポーネントを設計するためのコンポーネントコードが存在する場合は、開発者がそのコードを利用します。存在しない場合は、開発者が独自の HTML や JavaScript コードを使用して UI を構築します。その際は、デザインシステムのパターンやガイドラインを参考にコードを作成します。 |
コンポーネント単体で実行できることは限られていますが、それらのブロックを組み立てることで、ありとあらゆるものを作成できます。 |
優れたデザインシステムには次の特徴があります。
-
スケーラブルである。デザインシステムが成熟するにつれ、基本要素 (ビルディングブロック) の作成に費やす時間と費用は少なくなります。開発者は、それらの要素をさまざまな製品や機能に再利用します。
-
効率的である。デザインシステムを使用すると、デザイナーと開発者は使いやすさと意味に集中できるため、時間と労力が節約できます。
-
視覚的な一貫性がある。デザインシステムの詳細な指示 (パターン、ルール、ガイドライン) は目的に基づいています。デザイン的要素は、ユーザーのニーズから生まれたものです。コンポーネントの標準化によって、ビジュアルスタイルとブランド設定の両方が強化され、その結果、外観に一貫性がある製品や機能によって一貫性のあるユーザーエクスペリエンスが提供されます。
-
共有される。再利用可能で、ドキュメント化され、アクセス可能な要素によってコラボレーションが可能となり、プロジェクトの一部を引き継いだり、ほかの人の作業内容の上に積み上げたりする形で作成することが容易です。
作成を開始する
ビルディングブロックと同じように、デザインシステムを使用すれば、すぐに作成を開始できます。あらかじめデザインされたコンポーネントを使用することで、複雑な問題の解決と最良のユーザーエクスペリエンスの提供に集中できます。
デザインシステムのもう 1 つの大きな利点は、大規模にデザインを管理できることです。コンポーネント、パターン、ルール、ガイドラインのライブラリがあれば、デザイナー、開発者、チーム、製品間の一貫性を維持しやすくなります。デザインシステムはニーズの変化に合わせて進化するため、デザイナーや開発者が複雑なプラットフォーム全体でインターフェースやツールをすばやく簡単に更新できます。
関係者を知る
デザインシステムの良し悪しは関係者によって決まります。
-
利用者は、デザインシステムの要素を使用してアプリケーションを構築するデザイナー、開発者、関係者です。Salesforce のようにデザインシステムを作成した企業に、その企業のプラットフォーム上にアプリケーションを作成する利用者のエコシステムがある場合は、社内と社外の両方に利用者がいます。
-
貢献者は、デザインシステムを構成する要素やパターンを作成します。各リリースで、誰でも新しいパターン、コンポーネント、ガイドラインを提案したり、既存のものの変更を提案したりできます。
-
キュレーターは、デザインシステムの管理者です。エンジニア、製品デザイナー、ビジュアルデザイナーから構成されるこのチームは、デザインシステムを管理し、コードを統括し、コミュニティに使用方法を教えます。キュレーターは、提案された更新を確認し、更新を組み込んで、デザインシステムを進化させます。
これを読んでいる皆さんは、おそらく SLDS の利用者または貢献者でしょう。
Salesforce の Lightning Design System
Salesforce では、デザインシステムを重視しています。Salesforce プラットフォームが強力である理由の 1 つは、さまざまなユーザーの複雑なニーズに適応できることです。
また、Salesforce は、著しい速度で成長しており、製品の範囲と従業員の数が拡大し続けています。成長するにつれて、ますます多くのユーザーのニーズに対応しています。そのため、効率的かつ大規模に一貫性のある製品のエクスペリエンスをデザインすることが非常に重要です。
SLDS は、Salesforce のチームがそれを実現するのに役立ちます。ユースケース固有のパターンを使用することで、デザイナーは、反復に要する時間を短縮し、より効率的に一貫性のあるソリューションを作成できます。コンポーネント開発者は、常に最新のフレームワークで、クリーンでアクセス可能なマークアップやピクセル単位まで完璧な CSS を使用できることで、作業速度を上げ、エラーを減らすことができます。顧客とパートナーは、Salesforce Platform 上で、頻繁に更新され、クリーンで一貫性があり、明確な説明やデザイン例も用意されたシステムを使用してカスタマイズを構築するため、ソフトウェアをリバースエンジニアリングしたいという誘惑にかられることがありません。
ほとんどのデザインシステムでは、完全に機能するコードが提供されます。一方、SLDS は、Lightning Web コンポーネント (LWC) や React など、さまざまなコードベースをサポートしているため、独立性を保つ必要があります。Salesforce は実際に、SLDS コンポーネントの多くの設計を実装する機能コードを Lightning 基本コンポーネントを用いて提供しています。(SLDS とほかのデザインシステムとの違いについては、この単元の最後にあるリソースを参照してください。)
次は、過去にさかのぼって SLDS の誕生について説明します。