SLDS リソースの探索

学習の目的

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

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

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

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

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

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

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

SLDS の基本事項

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

デザインガイドラインは、特定のユースケースに基づくパターンについて説明しています。パターンはブループリント (ドキュメント化されたアクセス可能な CSS) に関連付けられます。利用者は、ブループリントを使用して、Lightning Experience を使用した Web アプリケーションやネイティブアプリケーションを作成します。デザインガイドラインは、Salesforce ユーザーエクスペリエンスに関する大局的な質問に対応しています。たとえば、データはどのように表示されるか、データはどのように入力されるか、検索はどのように処理されるか、情報を読み込み中であることを UI でどのように示すかといった質問です。SLDS には 2 種類のデザインガイドラインがあります。

• ブループリント: デザインガイドラインの一種で、静的でフレームワークから独立している UI 要素 (チェックボックス、ページヘッダー、動的メニューなど) のアクセス可能な HTML と CSS です。開発者はブループリントを使用してコンポーネントを作成します。(ブループリントの完全名はコンポーネントブループリントです。単にコンポーネントと呼ばれることがよくありますが、それは正確ではありません。通常、コンポーネントは完全に機能しますが、SLDS の HTML5 と CSS は静的です。ユーザーが操作できるようにするには、SLDS ブループリントと JavaScript フレームワークを連携させる必要があります。)
  
• トークン: もう 1 種類のデザインガイドラインで、ビジュアルデザイン属性を保存する名前付きエンティティです。Salesforce では、ハードコードされた値 (色の 16 進数値や間隔のピクセル値など) の代わりに設計トークンを使用できます。トークンは、スケーラブルで一貫した UI を維持するのに役立ちます。設計トークンを使用することで、デザイナーは時間を節約し、一貫性を保つことができます。さらに重要なのは、デザイナーがトークンを使用すると、その各インスタンスは、そのトークンが SLDS で更新されるたびに自動的に更新され、手動での更新が必要ないことです。トークンを使用してデザイン属性を表すと、デザインシステムチームが Web アプリケーションとネイティブアプリケーションでのデザイン要素の更新や拡張を行うのが容易になります。
  

その他のリソース

SLDS には次のものも含まれます。

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

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

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

SLDS の将来

Salesforce はデザインシステム領域での業界リーダーです。SLDS は、世界初のオープンソースエンタープライズデザインシステムでした。今日、SLDS チームは次世代のデザインシステムについて、次のような疑問について考えています: デザインシステムでどのように人工知能を使用できるか? あらゆる JavaScript プラットフォームで誰もが Lightning Web コンポーネントを使用できるようにすることは可能か? コードを書き直さずにそれを実現できるか? 複数のデザインシステムで互いを基盤としてその上に作成することで、ユースケースを他のテーマに拡張するにはどうすればよいか?

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

リソース

• Creating Confident Users Through “Clicks, not Code” (「コードではなくクリック」によるユーザーの自信向上)
  
• Web Content Accessibility Guidelines (WCAG) 2.0
  
• SLDS Design Guidelines (SLDS デザインガイドライン)
  
• SLDS Blueprint Overview (SLDS ブループリントの概要)
  
• SLDS Design Tokens (SLDS 設計トークン)
  
• SLDS Voice and Tone (SLDS の語調)
  
• SLDS Accessibility Overview (SLDS アクセシビリティの概要)
  
• Lightning Design System の Web サイト