デザインシステムについて

学習の目的

この単元を完了すると、次のことができるようになります。

優れたデザインシステムの特徴と機能を挙げる。
デザイナーと開発者がデザインシステムを使用、管理し、デザインシステムに貢献する方法を説明する。
開発者が Salesforce プラットフォーム上でソリューションを作成するために Salesforce Lightning Design System (SLDS) がどのように役立つかを説明する。
SLDS がほとんどのデザインシステムとどのように異なるかとその理由を説明する。

デザインシステムとは?

その優れた機能を詳しく見る前に、デザインシステムを定義しましょう。

デザインシステムとは何だろうと考えている人

デザインシステムの定義

説明

デザインシステムとは、反復可能なデザインパターンと再利用可能なコード (コンポーネントと呼ばれる) のコレクションです。

コンポーネントには、ボタン、メニュー、音、アニメーション、ビジュアルパターンなどが含まれます。一部のデザインシステムでは、コンポーネントは 1 つの UI プラットフォーム上で完全に機能し、作成されます。SLDS を含むその他のデザインシステムでは、コンポーネントはプラットフォームから独立しています。

デザインシステムをビルディングブロックのセットだと考えてください (子供にも大人にも愛されるあの有名なプラスチックの組み立てブロックでもいいでしょう)。

デザインシステムでは、明確でアクセス可能な標準、原則、ドキュメントが指針として使用されます。

あの愛すべきブロックのように、デザインシステムのコンポーネントは高度に標準化されており、認識しやすいデザインになっています。

開発者はデザインシステムのコンポーネントをさまざまな方法で組み合わせて、JavaScript でアプリケーションを作成します。デザインガイドラインは、コンポーネントを特定のユースケースのためのパターンに組み立てる手順書として機能します。

コンポーネント単体で実行できることは限られていますが、それらのブロックを組み立てることで、ありとあらゆるものを作成できます。

ビルディングブロックを配置し、はめ合わせて作られた宇宙船

優れたデザインシステムには次の特徴があります。

スケーラブルである。デザインシステムが成熟するにつれ、基本要素 (ビルディングブロック) の作成に費やす時間と費用は少なくなります。開発者は、それらの要素をさまざまな製品や機能に再利用します。
効率的である。デザインシステムを使用すると、デザイナーと開発者は使いやすさと意味に集中できるため、時間と労力が節約できます。
視覚的な一貫性がある。デザインシステムのパターンは目的に関連付けられています。デザイン的要素は、ユーザーのニーズから生まれたものです。コンポーネントの標準化によって、ビジュアルスタイルとブランド設定の両方が強化され、その結果、外観に一貫性がある製品や機能によって一貫性のあるユーザーエクスペリエンスが提供されます。
共有される。再利用可能で、ドキュメント化され、アクセス可能な要素によってコラボレーションが可能となり、プロジェクトの一部を引き継いだり、他の人の作業内容の上に積み上げる形で作成することが容易です。

作成の開始

ビルディングブロックと同じように、デザインシステムを使用すれば、すぐに作成を開始できます。あらかじめデザインされたコンポーネントを使用することで、複雑な問題の解決と最良のユーザーエクスペリエンスの提供に集中できます。

デザインシステムのもう 1 つの大きな利点は、大規模にデザインを管理できることです。コンポーネントのライブラリ、ルール、ガイドラインによって、デザイナー、開発者、チーム、製品間の一貫性を維持できます。デザインシステムはニーズの変化に合わせて進化するため、デザイナーや開発者は複雑なプラットフォーム内ですばやく簡単にインターフェースやツールを更新できます。

関係者を知る

デザインシステムの良し悪しは関係者によって決まります。

利用者は、デザインシステムの要素を使用してアプリケーションを作成するデザイナー、開発者、関係者です。Salesforce のようにデザインシステムを作成した会社に、その会社のプラットフォーム上にアプリケーションを作成する利用者のエコシステムがある場合は、社内と社外の両方の利用者がいます。
貢献者は、デザインシステムを構成する要素やパターンを作成します。各リリースで、誰でも新しいパターン、コンポーネント、ガイドラインを提案したり、既存のものの変更を提案したりできます。
キュレーターは、デザインシステムの管理者です。エンジニア、製品デザイナー、ビジュアルデザイナーから構成されるこのチームは、デザインシステムを管理し、コードを統括し、コミュニティに使用方法を教えます。キュレーターは、提案された更新を確認し、更新を組み込んで、デザインシステムを進化させます。

これを読んでいる皆さんは、おそらく SLDS の利用者または貢献者でしょう。

Salesforce の Lightning Design System

Salesforce では、デザインシステムを重視しています。Salesforce プラットフォームが強力である理由の 1 つは、さまざまなユーザーの複雑なニーズに適応できることです。

ビルディングブロックを配置し、はめ合わせて作られた宇宙船

また、Salesforce は、非常に急速に成長しており、製品の範囲と従業員の数は拡大し続けています。成長するにつれて、ますます多くのユーザーのニーズに対応しています。そのため、効率的かつ大規模に一貫性のある製品のエクスペリエンスをデザインすることが非常に重要です。

SLDS は、Salesforce のチームがそれを実現するのに役立ちます。ユースケース固有のパターンを使用することで、デザイナーは、反復に要する時間を短縮し、より効率的に一貫性のあるソリューションを作成できます。コンポーネント開発者は、常に最新のフレームワークで、クリーンでアクセス可能なマークアップやピクセル単位まで完璧な CSS を使用できることで、作業速度を上げ、エラーを減らすことができます。顧客とパートナーは、Salesforce プラットフォーム上で、頻繁に更新され、クリーンで一貫性があり、明確な説明やデザイン例も用意されたシステムを使用してカスタマイズを作成することで、ソフトウェアのリバースエンジニアリングを行いたいという誘惑にかられることがなくなります。

ほとんどのデザインシステムでは、完全に機能するコードが提供されます。一方、SLDS は、Lightning Web コンポーネントや React など、さまざまなコードベースをサポートしているため、独立性を保つ必要があります。(SLDS と他のデザインシステムとの違いについては、この単元の最後にあるリソースを参照してください。)

次は、過去にさかのぼって SLDS の誕生について説明します。