SLDS が開発された方法と理由を知る
学習の目的
この単元を完了すると、次のことができるようになります。
- Salesforce Lightning Design System の開発に影響を与えた状況を説明する。
- SLDS デザインシステムチームの目標を説明する。
昔々あるところに
想像しがたいかもしれませんが、Salesforce は常に包括的なデザインシステムを持っていたわけではありません。遠い過去にさかのぼって、現在の Salesforce Lightning Design System 1 (SLDS 1) の起源の物語を紐解きましょう。
SLDS 1 は、遠回りの道のりを経て今日のデザインシステムにまで成長してきました。Salesforce の成長、テクノロジーの変化、ユーザーニーズの増加に応じて進化してきたのです。急速な成長と変化に後れを取らないように、SLDS 1 も拡張する必要がありました。SLDS 1 の当初から現在までの道のりを知ることで、今日の SLDS 1 と SLDS 2 の進化、そして今後の展開を理解することができます。
物語は、Lightning Experience の稼働開始の 2 年前、2013 年に始まります。急速に成長していた Salesforce は、ExactTarget を買収したばかりで、最初の完全なモバイルバージョンの Salesforce プラットフォームである Salesforce1 を稼働開始しようとしていました。急速な成長の中で、Salesforce のデザイナーと開発者は、すべての Salesforce アプリケーションのエクスペリエンスの一貫性を保ち、会社やプラットフォームと共に進化するデザインシステムの基盤を築くことの必要性を認識していました。
そこで、Salesforce1 の稼働が開始されると、この先見性を持った勇敢なチームは、パターンライブラリのドキュメント化とデザインチームのための最初のスタイルガイドの作成を始めたのです。Salesforce1 のエンジニアリングチームは、ネイティブオペレーティングシステムと Web アプリケーションの間で機能するスタイルガイドの価値を設計トークンという用語で表しました。
Landmark Design System
古い映画で、時の経過を表すためにカレンダーのページをめくる早送りの映像を使用することがありますね。くつろいで、ページがめくられるのをご覧ください。2015 年前半になりました。Salesforce のデザイナーと開発者は、パターンライブラリとトークンを拡張カスケードスタイルシート (CSS) フレームワークと組み合わせて Landmark Design System を作成しました。
Landmark Design System がどのプラットフォームでも機能するように、チームはデザインシステムで一般的な完全に機能するコンポーネントではなく HTML ブループリントを使用して Landmark Design System を構築しました。このシステムには、拡張 CSS フレームワークと、デザインのベストプラクティスに従った幅広い UI インタラクションパターンも含まれています。その結果、要素が連携して一貫性のある高品質なユーザーエクスペリエンスを実現するデザインシステムができました。
Lightning の登場
素晴らしい成果ですが、Landmark Design System チームはそれだけで満足しませんでした。新しいデザインシステムの稼働を開始しながら、チームは Salesforce Classic (Aloha) ユーザーインターフェースを Lightning Experience と呼ばれる包括的な視覚的言語によって再設計し、Salesforce のすべてのコア製品のデザインを一新しました。ますます多くのチームが、製品に Lightning Experience を採用することを決定しています。Lightning Experience に関する Landmark Design System チームの目標は次のものでした。
- 営業ユーザーが迅速に販売することを支援する。
- サービスユーザーの生産性を高める。
- すべてのユーザーに最新のユーザーインターフェースを提供する。
大げさなものではありませんね。
新しい名前
2015 年、デザインシステムをデザイナーと開発者の両方にとってさらに使いやすいものにするために、デザインガイドラインが CSS フレームワークと組み合わされました。そのロールアウトと共に、Lightning Experience はモバイルからデスクトップに拡張されました。最初の Salesforce デザインシステムチームは、Landmark CSS フレームワークも更新し、Salesforce 全体での採用を推進しました。
Landmark の採用率が高まり、Salesforce の CEO 兼創業者の Marc Benioff はその可能性を重視して Salesforce Lightning Design System (SLDS) と名前を変更しました。2016 年の前半には、SLDS CSS フレームワークがコア Salesforce コードに追加されました。SLDS は現在、SLDS 1 と呼ばれています。
SLDS 1 を早期に採用したのは、Sales Cloud (2015 年の冬にトークンとスタイルガイドドキュメントの使用を開始)、Salesforce モバイル、Service Cloud (2016 年夏) でした。採用が増えてくると、SLDS 1 エンジニアはユーザーエクスペリエンスデザイナーと連携し、コアパターンとドキュメントを標準化しました。お客様の要求に応えて、Salesforce は世界初のオープンソースエンタープライズデザインシステムを v1.lightningdesignsystem.com で稼働開始し、誰もが SLDS 1 を使用できるようになりました。
SLDS 1 と SLDS 2 の現在、そして SLDS の未来
Salesforce プラットフォームへの SLDS 1 の導入は 2018 年には完了し、以降は Salesforce プラットフォーム全体に影響する更新が定期的にリリースされています。成長の過程で、このデザインシステムは、Salesforce の拡大する製品スイート全体に一流のサポートとガバナンスを提供するというミッションにおいて、いくつもの課題に直面してきました。3 年間で 5 倍の成長を遂げながら、お客様に対し一貫したユーザーエクスペリエンスを維持しているということは、数社の買収、新たな製品、テクノロジーの変化、そしてメジャーリリースごとの優先事項の変更に際して慎重な検討を重ねてきたということです。SLDS 1 チームは、リリースごとにパターンを更新するだけでなく、製品ポートフォリオ全体の新しいデザイン要素を統合して SLDS 1 に取り入れ、お客様が一貫したエクスペリエンスを継続的に楽しめるようにすることを目指しています。
それでも全体として SLDS 1 は肯定的に受け止められ、ますます多くのお客様やパートナーがこのシステムを採用し、そのコンセプトやガバナンスモデルの要素を各自の組織内で再現しています。デザインシステムチームは、常にフィードバックを募り、利用者と貢献者の両方のニーズに合わせてシステムを更新しています。さらに、企業の飛躍的な成長といった新たな課題が出現したときも、SLDS 1 はエクスペリエンスの一貫したビジョンを維持しつつ、顕著な成長に対応できるよう慎重な姿勢で進化していきます。最新のデザインシステムである SLDS 2 は、デザインシステムチームが熟慮のうえで革新を追求している姿勢の現れです。
リソース