SLDS リソースの探索

学習の目的

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

• 主な SLDS 1 リソースであるデザインガイドライン、コンポーネントブループリント、設計トークンについて説明する。
  
• SLDS 1 のデザイン、アクセシビリティ、語調に関するガイドラインとなる SLDS 1 ドキュメントにアクセスする。
  

デザインシステムチームの紹介

デザインシステムチームが SLDS 1 に責任を持っていることはご存知でしょう。ただし、このチームの責任はそれだけではありません。その正式な目標は次のとおりです。

人へのガイダンスと内部ツールによって、製品全体の高品質でブランドに沿ったエクスペリエンスを確立する。

詳しく見ていきましょう。

デザインシステムチームは、デザイナーと開発者が高品質でブランドに沿ったデザインソリューションを作成できるようにすることで、人へのガイダンスを提供します。また、貢献者が小さな変更によって大きなシステムに影響を及ぼせることや、複数の製品、ユースケースで使用できる要素に貢献する方法を理解できるように支援します。最後に、チームは、概要レベルでの概念、デザインパターン、ページタイプを対象としたインタラクションガイドラインやビジュアルデザインガイドラインなどのツールを作成します。

SLDS 1 の基本事項

次に、SLDS の基本事項について説明します。製品を Salesforce ユーザーエクスペリエンスに沿ったものにするために、lightningdesignsystem.com には製品チーム向けのデザインリソースの完全なセットがあります。

SLDS 1 のデザインガイドラインを SLDS 2 ではパターンと呼んでいます。デザインガイドラインは、特定のユースケースに基づいてパターンやコンポーネントを使用する方法を説明します。このガイドラインは Salesforce ユーザーエクスペリエンスに関する大局的な質問に対応しています。たとえば、データはどのように表示されるか、 データはどのように入力されるか、 検索はどのように処理されるか、 情報を読み込み中であることを UI でどのように示すかといった質問です。SLDS 1 には 2 種類のデザインガイドラインがあります。

コンポーネントブループリント: 静的でフレームワークから独立している UI 要素 (チェックボックス、ページヘッダー、動的メニューなど) のアクセス可能な HTML と CSS です。開発者はブループリントを使用してコンポーネントを作成します。通常、Lightning 基本コンポーネント自体は完全に機能しますが、SLDS の HTML5 と CSS は静的です。ユーザーが操作できるようにするには、SLDS ブループリントと JavaScript フレームワークを連携させる必要があります。

デザイントークン: ビジュアルデザイン属性を保存する名前付きエンティティです。SLDS 1 は、ハードコードされた値 (色の 16 進数値や間隔のピクセル値など) の代わりに設計トークンを使用します。トークンは、SLDS 1 でスケーラブルかつ一貫した UI を維持するうえで役立ちます。設計トークンを使用することで、デザイナーは時間を節約し、一貫性を保つことができます。さらに重要な点は、デザイナーがトークンを使用すると、トークンの値が SLDS で更新されるたびにその各インスタンスが自動的に更新され、手動での更新が必要ないことです。トークンを使用してデザイン属性の値を設定すれば、デザインシステムチームが Web アプリケーションやネイティブアプリケーションでデザイン要素を簡単に更新や拡張できるようになります。

SLDS 2 のアーキテクチャは、SLDS 1 とは異なります。

SLDS 2 では構造がビジュアルスタイルから切り離されるため、真のカスタマイズとテーマ設定が可能になり、ダークモードを実現することもできます。また、ビジュアル言語として CSS カスタムプロパティが優先されるため、デザイントークンの使用が抑えられます。SLDS 2 は、カスタム実装のブループリントではなく、すぐに使える Lightning 基本コンポーネントを重視します。これが、今後リリースされる AI 対応コンポーネントの基盤になります。

SLDS 2 には、ほかにも多くの特徴があります。詳細やデザインコードを SLDS 2 に移行する方法については、こちらのドキュメントをご覧ください。

その他のリソース

SLDS 1 には以下も含まれます。

• ツール: SLDS を使用した作成をより迅速かつ容易にする API、プラグイン、デザインキット。
  
• 語調ガイドライン: アプリケーション内またはオンラインの Salesforce コンテンツを明確で一貫した魅力あるものにします。これらのガイドラインは、公式なコミュニケーションから画面上の手順やエラーメッセージまで、すべての Salesforce テキストに適用されます。
  
• アクセシビリティガイドライン: 障害のあるユーザーが、Salesforce アプリケーションの認識、理解、移動、操作や、Salesforce アプリケーションへの貢献を行いやすくします。Salesforce アプリケーションはすべて、WC3 WCAG 2.0 AA 業界標準を満たし、あらゆるユーザーが認識、操作、理解可能で、堅牢であることを目指しています。いくつかの例を紹介します。
  

• すべてのマウスベースのアクションに対するキーボード操作による代替方法の提供
  
• すべてのフォーム項目やボタンの適切なラベル付け
  
• すべての画像、動画、アイコン、SVG に対するテキストベースの代替方法の提供
  

各 SLDS 1 コンポーネントは、ID、操作モデル、状態を支援技術に伝える必要があり、ARIA マークアップを使用して支援技術のユーザーに対してコンポーネント自体を識別する必要があります。アクセシビリティについての詳細は、下記のリソースを参照してください。

SLDS の将来

Salesforce はデザインシステム領域での業界リーダーです。SLDS 1 は、世界初のオープンソースエンタープライズデザインシステムでした。今日、SLDS チームは次世代のデザインシステムである SLDS 2 について、

「デザインシステムでどのように人工知能を利用できるのか?」と考えています。あらゆる JavaScript プラットフォームで誰もが Lightning Web コンポーネントを使用できるようにすることは可能か? コードを書き直さずにそれを実現できるか? 複数のデザインシステムで互いを基盤としてその上に作成することで、ユースケースをほかのテーマに拡張するにはどうすればよいか?

答えが何であっても、疑問は次々と浮かんできます。SLDS が進化を続けるジャーニーに、ぜひご参加ください。

リソース

• Web Content Accessibility Guidelines (WCAG) 2.0
• Salesforce Lightning Design System 1: Design Guidelines (デザインガイドライン)
• Salesforce Lightning Design System 1: Blueprint Overview (ブループリントの概要)
• Salesforce Lightning Design System 1: Design Tokens (設計トークン)
• Salesforce Lightning Design System 1: Voice and Tone (語調)
• Salesforce Lightning Design System 1: Accessibility Overview (アクセシビリティの概要)