Salesforce Lightning
Salesforce Lightning Design System / 2015– / スタイル / プラットフォームの画面言語
営業、顧客、案件、活動という大量の業務情報を、カード、関連リスト、状態パス、再利用部品で一つの操作言語へまとめるSalesforceのデザインシステム。
ひと目で判断
見た目の特徴
- 淡い灰の地に白いカードを積む
- 青いヘッダーと主操作
- 案件の段階を横一列のパスで示す
- レコード、関連情報、活動を別パネルへ分ける
向いている用途
- CRMや営業支援で一人の顧客に関する情報を集約するとき
- 業務の段階と次の行動を同じ画面で明確にするとき
このスタイルを使う
短い指針を制作へ持ち込むか、構造化された仕様をAIへ渡せます。
詳しい作り方と出典制作ルール、実在作例、比較、研究、引用形式
辞書情報
- 文字
- 短いラベルと数値を中心に、見出しよりフィールド名の判別を優先する。
- 構成
- 上部に状態と主要操作、下部にレコードと関連情報のカードを配置する。
- 素材
- 淡い灰、白い面、Salesforce Blueを基礎に、段階と状態の色を固定する。
- 注意
- 関連カードを増やし続けると顧客の現在地が埋もれる。上部の要約と次の行動を先に絞る。
- 関連研究
- record pageの構造 / Pathによる進行表示 / design tokensとLightning components
関連項目
- Atlassian Design System（Atlassian Design System）同じ「プラットフォームの画面言語」の系統。Salesforce LightningとAtlassian Design Systemの違いを見る
- Ant Design（Ant Design）同じ「プラットフォームの画面言語」の系統。Salesforce LightningとAnt Designの違いを見る
プラットフォームの画面言語をさらに見る
同じ「プラットフォームの画面言語」から、共通する印象が多い順に次の項目を選んだ。
- Shopify Polaris（Shopify Polaris）共通する印象：信頼 / 親密 / 技術。
- Ubuntu Yaru（Ubuntu Yaru）共通する印象：技術 / 親密 / 信頼。
- モチーフ（Motif）共通する印象：技術 / 信頼。
この項目を引用する
辞典はリンクされるためにある。書いている場所に合う形をそのまま持っていってよい。
- Link
- https://indexstyle.org/ja/styles/salesforce-lightning
- Markdown
- [Salesforce Lightning（Salesforce Lightning Design System） — デザインスタイル辞典](https://indexstyle.org/ja/styles/salesforce-lightning)
- HTML
- <a href="https://indexstyle.org/ja/styles/salesforce-lightning">Salesforce Lightning（Salesforce Lightning Design System） — デザインスタイル辞典</a>