Salesforce Cosmosテーマの有効化で新しいデザインを確認してみたら丸くて明るかった話
再び明るい世界へ
Admin
{{getTime(record.UpdatedTime)}}
前々から噂になっていた新しいUIについて、ここ最近具体的な情報が出てきました。2025年2月末にはほぼすべての既存の組織で有効化およびテストができるようになるとのアナウンスがあり、私の持っている環境でも有効化できるようになっていたので、関心のある方は是非テスト環境で試してみてください。
先日公開された公式ブログの記事で紹介されています。
◇ The 360 Blog ＞What is SLDS 2 (Beta)? It’s a Path to the Future
↑のページから概要をかいつまんでまとめます。
Salesforce Lightning Design System 2 (SLDS 2) は、従来のデザインシステムSLDS 1のアップデート版であり、より柔軟かつAIに対応した基盤を提供します。これにより、ユーザーエクスペリエンスのカスタマイズがさらに容易になり、ブランドの一貫性を保ちながら高品質なデザインを実現できます。主な特徴は以下の通りです。
柔軟なスタイリング: CSSカスタムプロパティを使用して、ボタン、モーダル、フォント、ボーダーなどのデザインを自由にカスタマイズ可能。
テーマとブランディングの統合:アドミニストレーターはコードを使わずにブランドカラー、ロゴ、画像を簡単に設定できる。
ダークモードのサポート: ダークモードや動的な Agent体験の基盤を提供。
新しいデフォルトテーマ「Salesforce Cosmos」: モダンなデザイン、適応的なスペーシング、豊富なカラーパレット、読みやすいタイポグラフィスケールなどを特徴とする。
アドミニストレーターはコード不要の設計が可能になり、開発者とアーキテクトはプロコードによる制御が可能になります。
※組織の状況によっては有効化を行ってもSLDS 2が反映されない場合もあります。
◇ Trailblazer Community ＞Design Trailblazers
また、Roadmap Exchangeでも進捗を確認することができます。
◇ Roadmap Exchange ＞Your Salesforce Experience / Design Systems
Design Systems
〔設定 ＞ ホーム ＞ユーザーインターフェース ＞テーマおよびブランド設定］のページを確認すると、「Salesforce Cosmos」が追加されています。
【有効化】をクリックします。
※すぐに有効化してますが、良い子の皆はプレビューから始めてください。
ちなみに同じレコード画面でSLDS 1のデザインだとこう↓です。
SLDS 2で作られたSalesforce Cosmos の世界です。
角が取れて、明るさが増し、文字やアイコンがよりくっきり見えるようになりました。
Sandboxに表示される上部の帯の部分もさわやかになってますよね。
◇ LIGHTNING DESIGN SYSTEM 2 ＞Welcome to SLDS 2 (Beta) （SLDS 2へようこそ）
◇ LIGHTNING DESIGN SYSTEM 2 ＞Get Started Transition to SLDS 2 （SLDS 2への移行）
◇ Trailhead ＞The Salesforce Cosmos Theme: Quick Look
Salesforce Lightning Design System 2 とは
簡単に言うと、新しい Salesforceのデザインシステムです。デザインシステムとは、デザインの方針や基準、パターンおよびコンポーネント等を体系的にまとめたものです。先日公開された公式ブログの記事で紹介されています。
◇ The 360 Blog ＞What is SLDS 2 (Beta)? It’s a Path to the Future
↑のページから概要をかいつまんでまとめます。
Salesforce Lightning Design System 2 (SLDS 2) は、従来のデザインシステムSLDS 1のアップデート版であり、より柔軟かつAIに対応した基盤を提供します。これにより、ユーザーエクスペリエンスのカスタマイズがさらに容易になり、ブランドの一貫性を保ちながら高品質なデザインを実現できます。主な特徴は以下の通りです。
柔軟なスタイリング: CSSカスタムプロパティを使用して、ボタン、モーダル、フォント、ボーダーなどのデザインを自由にカスタマイズ可能。
テーマとブランディングの統合:アドミニストレーターはコードを使わずにブランドカラー、ロゴ、画像を簡単に設定できる。
ダークモードのサポート: ダークモードや動的な Agent体験の基盤を提供。
新しいデフォルトテーマ「Salesforce Cosmos」: モダンなデザイン、適応的なスペーシング、豊富なカラーパレット、読みやすいタイポグラフィスケールなどを特徴とする。
アドミニストレーターはコード不要の設計が可能になり、開発者とアーキテクトはプロコードによる制御が可能になります。
※組織の状況によっては有効化を行ってもSLDS 2が反映されない場合もあります。
最新情報を得るには
最新情報はコミュニティグループ「Design Trailblazers」でも共有されるようです。疑問点がある場合はこちらで質問すると担当の方が答えてくれるようなので、SLDS 2について詳しく知りたい方はグループへの参加をおすすめします。◇ Trailblazer Community ＞Design Trailblazers
また、Roadmap Exchangeでも進捗を確認することができます。
◇ Roadmap Exchange ＞Your Salesforce Experience / Design Systems
Design Systems
SandboxでSalesforce Cosmosを有効化してみた
私が自由にてきるSandboxで「Salesforce Cosmos」を有効化してみました。なお、「拡張Lightning ユーザーインターフェース」の有効化という手順もあるようなのですが、現段階ではまだ確認できておりません。おそらく徐々に組織にリリースされていくのではないかと思います。〔設定 ＞ ホーム ＞ユーザーインターフェース ＞テーマおよびブランド設定］のページを確認すると、「Salesforce Cosmos」が追加されています。
【有効化】をクリックします。
※すぐに有効化してますが、良い子の皆はプレビューから始めてください。
Salesforce Cosmosの世界
有効化して画面を更新すると……個人的な感想ですが、なんだか可愛らしい世界になりました。ちなみに同じレコード画面でSLDS 1のデザインだとこう↓です。
SLDS 2で作られたSalesforce Cosmos の世界です。
角が取れて、明るさが増し、文字やアイコンがよりくっきり見えるようになりました。
Sandboxに表示される上部の帯の部分もさわやかになってますよね。
ダッシュボードも明るい＆丸い。
背景も違う
SLDS 1では別ウィンドウが表示される際に背景は暗くなりますが、SLDS 2に切り替えると暗くなる＋すりガラス状態になっています。感想
Classicは遠くなりにけり、と時代の変化を感じますが、コントラストがよりはっきりして読みやすいですね。ダークモードも実装予定だそうで、目が弱っているときにはダークモードに助けられましたので、お早目のリリースを強く希望いたします。しかしデザイン検討のプロジェクト、面白そうだな～。参考
◇SALESFORCE ヘルプ ＞ドキュメント ＞Salesforce 組織の設定および管理 ＞Salesforce Cosmos テーマおよび SLDS 2 の可用性 (ベータ)◇ LIGHTNING DESIGN SYSTEM 2 ＞Welcome to SLDS 2 (Beta) （SLDS 2へようこそ）
◇ LIGHTNING DESIGN SYSTEM 2 ＞Get Started Transition to SLDS 2 （SLDS 2への移行）
◇ Trailhead ＞The Salesforce Cosmos Theme: Quick Look