# Salesforce Lightningデザインシステム

## Salesforce Lightningデザインシステムのインターフェースプレビュー

優先度またはステータスを変更し、更新メモを検証して、ローカルの活動履歴を保存します。その後、保存済みレコードを変更せずに、後から作成した下書きを破棄します。

## Salesforce Lightningデザインシステムのデザインリファレンス

公開されている@salesforce-ux/design-system 2.264.1のネイティブCSSとui-forceのトークンエクスポートを使用しています。これはバージョンを固定した従来版のブループリントを参照するもので、新しいSLDS 2デザイン言語との互換性や、Lightning Web Componentsランタイムの使用を示すものではありません。過去の上流リポジトリはアーカイブされています。

### レコードの背景とセマンティックテキスト

| 名前 / ルール | 値 / 設定 | 用途 |
| --- | --- | --- |
| COLOR_BACKGROUND | rgb(243, 243, 243) | 公開パッケージの参照例です。ブランドカラーを一律に適用せず、テキスト、背景、アクションそれぞれの役割を維持してください。 |
| COLOR_BACKGROUND_ALT | rgb(255, 255, 255) | 公開パッケージの参照例です。ブランドカラーを一律に適用せず、テキスト、背景、アクションそれぞれの役割を維持してください。 |
| COLOR_TEXT_DEFAULT | rgb(3, 45, 96) | 公開パッケージの参照例です。ブランドカラーを一律に適用せず、テキスト、背景、アクションそれぞれの役割を維持してください。 |
| COLOR_TEXT_WEAK | rgb(116, 116, 116) | 公開パッケージの参照例です。ブランドカラーを一律に適用せず、テキスト、背景、アクションそれぞれの役割を維持してください。 |
| COLOR_BORDER | rgb(201, 201, 201) | 公開パッケージの参照例です。ブランドカラーを一律に適用せず、テキスト、背景、アクションそれぞれの役割を維持してください。 |
| COLOR_BORDER_ERROR | rgb(234, 0, 30) | 公開パッケージの参照例です。ブランドカラーを一律に適用せず、テキスト、背景、アクションそれぞれの役割を維持してください。 |
| COLOR_BORDER_SELECTION | rgb(1, 118, 211) | 公開パッケージの参照例です。ブランドカラーを一律に適用せず、テキスト、背景、アクションそれぞれの役割を維持してください。 |
| COLOR_BACKGROUND_BUTTON_BRAND | rgb(1, 118, 211) | 公開パッケージの参照例です。ブランドカラーを一律に適用せず、テキスト、背景、アクションそれぞれの役割を維持してください。 |
| COLOR_BACKGROUND_BUTTON_BRAND_HOVER | rgb(1, 68, 134) | 公開パッケージの参照例です。ブランドカラーを一律に適用せず、テキスト、背景、アクションそれぞれの役割を維持してください。 |
| COLOR_BACKGROUND_BUTTON_BRAND_ACTIVE | rgb(3, 45, 96) | 公開パッケージの参照例です。ブランドカラーを一律に適用せず、テキスト、背景、アクションそれぞれの役割を維持してください。 |
### 従来版のスペーシングスケール

| 名前 / ルール | 値 / 設定 | 用途 |
| --- | --- | --- |
| SPACING_X_SMALL | 0.5rem | 従来版のSPACING_*エクスポートです。別個のコンパクトなVAR_SPACING_*セットではありません。 |
| SPACING_XXX_SMALL | 0.125rem | 従来版のSPACING_*エクスポートです。別個のコンパクトなVAR_SPACING_*セットではありません。 |
| SPACING_XX_SMALL | 0.25rem | 従来版のSPACING_*エクスポートです。別個のコンパクトなVAR_SPACING_*セットではありません。 |
| SPACING_SMALL | 0.75rem | 従来版のSPACING_*エクスポートです。別個のコンパクトなVAR_SPACING_*セットではありません。 |
| SPACING_MEDIUM | 1rem | 従来版のSPACING_*エクスポートです。別個のコンパクトなVAR_SPACING_*セットではありません。 |
| SPACING_NONE | 0 | 従来版のSPACING_*エクスポートです。別個のコンパクトなVAR_SPACING_*セットではありません。 |
| SPACING_X_LARGE | 2rem | 従来版のSPACING_*エクスポートです。別個のコンパクトなVAR_SPACING_*セットではありません。 |
| SPACING_XX_LARGE | 3rem | 従来版のSPACING_*エクスポートです。別個のコンパクトなVAR_SPACING_*セットではありません。 |
| SPACING_LARGE | 1.5rem | 従来版のSPACING_*エクスポートです。別個のコンパクトなVAR_SPACING_*セットではありません。 |
### 文字のサイズ階層

| 名前 / ルール | 値 / 設定 | 用途 |
| --- | --- | --- |
| FONT_SIZE_1 | 0.625rem | 役割に応じて文字サイズを選び、ケースのメモやフィールドラベルの読みやすさを保ちます。 |
| FONT_SIZE_2 | 0.75rem | 役割に応じて文字サイズを選び、ケースのメモやフィールドラベルの読みやすさを保ちます。 |
| FONT_SIZE_3 | 0.8125rem | 役割に応じて文字サイズを選び、ケースのメモやフィールドラベルの読みやすさを保ちます。 |
| FONT_SIZE_4 | 0.875rem | 役割に応じて文字サイズを選び、ケースのメモやフィールドラベルの読みやすさを保ちます。 |
| FONT_SIZE_5 | 1rem | 役割に応じて文字サイズを選び、ケースのメモやフィールドラベルの読みやすさを保ちます。 |
| FONT_SIZE_6 | 1.125rem | 役割に応じて文字サイズを選び、ケースのメモやフィールドラベルの読みやすさを保ちます。 |
| FONT_SIZE_7 | 1.25rem | 役割に応じて文字サイズを選び、ケースのメモやフィールドラベルの読みやすさを保ちます。 |
| FONT_SIZE_8 | 1.5rem | 役割に応じて文字サイズを選び、ケースのメモやフィールドラベルの読みやすさを保ちます。 |
| FONT_SIZE_9 | 1.75rem | 役割に応じて文字サイズを選び、ケースのメモやフィールドラベルの読みやすさを保ちます。 |
| FONT_SIZE_10 | 2rem | 役割に応じて文字サイズを選び、ケースのメモやフィールドラベルの読みやすさを保ちます。 |
| FONT_SIZE_11 | 2.625rem | 役割に応じて文字サイズを選び、ケースのメモやフィールドラベルの読みやすさを保ちます。 |
### 角丸

| 名前 / ルール | 値 / 設定 | 用途 |
| --- | --- | --- |
| BORDER_RADIUS_SMALL | 0.125rem | 公開されている角丸のリファレンスです。円形のステータスマーカーは、長方形のフォームコントロールとは異なります。 |
| BORDER_RADIUS_MEDIUM | 0.25rem | 公開されている角丸のリファレンスです。円形のステータスマーカーは、長方形のフォームコントロールとは異なります。 |
| BORDER_RADIUS_LARGE | 0.5rem | 公開されている角丸のリファレンスです。円形のステータスマーカーは、長方形のフォームコントロールとは異なります。 |
| BORDER_RADIUS_CIRCLE | 50% | 公開されている角丸のリファレンスです。円形のステータスマーカーは、長方形のフォームコントロールとは異なります。 |
### ネイティブCSSブループリントの構成

| 名前 / ルール | 値 / 設定 | 用途 |
| --- | --- | --- |
| slds-page-header | Record context | ケースの識別情報と概要を編集フォームより上に配置します。 |
| slds-card | Grouped content region | ケースの詳細と活動履歴は、別々のセマンティック領域にします。 |
| slds-form-element | Label + control + help | 編集可能な値ごとに、まとまりのあるフィールドで囲みます。 |
| slds-has-error | Invalid field modifier | aria-invalidと具体的なエラーメッセージを設定します。 |
| slds-button_brand | Primary action | ローカルの更新を保存します。このクラスが提供するのはスタイルであり、永続化ではありません。 |
| slds-button_neutral | Secondary action | 下書きを破棄し、最後に保存したローカルの値に戻します。 |
## Salesforce Lightningデザインシステム完全ガイド

実際のインターフェースで、このデザインシステムを選び、適用し、レビューするための実践ガイドです。

詳しいガイダンス、実装の出発点、ソースへのリンクをまとめています。

## Salesforce Lightningデザインシステムのレコードレイアウトとコンテキスト

### レコードの識別情報をローカルタスクより上に配置する

> ページヘッダーにはケース番号、件名、取引先、担当者を表示します。これらの値で、ユーザーがフィールドを変更する前にオブジェクトを識別できます。ステータスバッジは保存済みのローカルレコードの概要を示すため、未確定の選択値に連動するのではなく、保存時に変更します。

### 詳細と活動履歴を分ける

広い領域には顧客のコンテキストと編集フォームをまとめます。副次的な領域には時系列の履歴を配置します。この分離により、別の画面に移動せずに、依頼内容と記録済みの変更を照らし合わせることができます。モバイルレイアウトでは、同じセマンティックな順序でこれらの領域を縦に並べます。

## Salesforce Lightningデザインシステムのセマンティックカラーと状態

### トークン名を役割として読み取る

ui-forceのエクスポートでは、標準テキスト、控えめなテキスト、選択中の境界線、ブランドカラーのボタン背景が区別されています。サンプルでは本文を濃色にし、メタデータを控えめに、主アクションを青色にしています。赤色は無効なフィールドと、その対処方法を示すメッセージに使い、未保存の値すべてには適用しません。

### 色だけに頼らず状態を伝える

優先度とステータスは、概要と新しい活動履歴の両方で文字として表示します。エラー状態は、ネイティブのslds-has-error修飾子、aria-invalid、テキストエリアに関連付けたメッセージを組み合わせて示します。ローカルでの確認結果はステータス領域にテキストで表示します。緑色のアクセントだけでは、何が保存されたのかユーザーに伝わりません。

## Salesforce Lightningデザインシステムの文字サイズとレコード密度

### 見出しを過度に大きくせず、階層を明確にする

公開されている番号付き文字サイズのスケールは0.625remから始まり、2.625remまであります。ケース作業画面のすべての領域に、最大のディスプレイサイズを使う必要はありません。ネイティブのページヘッダータイトルでレコードを識別し、カード見出しで各領域を区別し、本文で顧客からの依頼やメモを伝えます。

### 長いレコードの件名をそのまま表示する

カスタムレイアウトでは、狭い幅でもページタイトルを省略せず折り返して表示します。メタデータも複数行に折り返す場合があります。取引先名が長いからといって、すべてのテキストを小さくしないでください。省略する場合に全文を安全に確認できる代替手段を設けたうえで、現実的な件名と担当者名の長さをテストしてください。

## Salesforce Lightningデザインシステムのスペーシングとブループリント構造

### 従来版と可変スペーシングのエクスポートを混在させない

このガイドでは、ui-force の SPACING_* を示しています。別の var-spacing エクスポートには異なるコンパクトな値が含まれており、VAR_SPACING_MEDIUM は SPACING_MEDIUM と同じ参照先ではありません。名前が似ているという理由だけで値を混在させると、フォームの間隔が不揃いになることがあります。意図する密度のシステムを選び、その参照元を統一してください。

### フィールドのラッパーを一貫して使う

各ラベルとコントロールは slds-form-element の内側に配置し、入力欄は slds-form-element__control で囲み、ヘルプテキストはその直後に置きます。元のグリッドでは、関連する2つの選択フィールドを横並びにし、画面幅が狭い場合は縦に並べます。このグリッドはアプリケーションのレイアウトであり、フィールドの基本構造にはネイティブのブループリントを使用します。

## Salesforce Lightning デザインシステム：下書きと保存済みレコードの動作

### 保存済みレコードをコントロールと分けて管理する

スクリプトでは、保存済みの優先度とステータスをレコードオブジェクトに保持します。選択フィールドを編集しても、変更されるのは下書きだけです。保存すると、値がオブジェクトにコピーされ、概要が更新されて、アクティビティ項目が追加されます。これにより、何度か編集を保存した後でも「下書きを破棄」が意図どおりに機能します。

### バックエンドで成功したかのように見せない

このサンプルには、レコード ID の検索、権限モデル、API、データベースはありません。ボタンと確認メッセージには、ローカルでの処理であることを明示しています。本番環境で Salesforce と連携するには、確定したレコードのステータスを更新する前に、適切なデータ API とサーバー応答が必要です。CSS クラスだけでは、そうした保証は提供できません。

## Salesforce Lightning デザインシステム：フィールドの検証とアクティビティ

### メモで変更内容を説明する

作成時のルールでは、前後の空白を除いた10文字以上の入力が必要で、テキストエリアの上限は300文字です。メモが空または短すぎる場合はレコードを変更せず、フィールドエラーを表示してメモにフォーカスを移します。編集すると古いエラーは消えますが、次に保存するときに現在の値を再検証します。

1. メモを入力せずに送信し、保存済みの概要値が変わらないことを確認してください。

2. 内容のあるメモを入力して保存し、最新のアクティビティ項目を確認してください。

3. もう一度フィールドを変更して下書きを破棄し、最後に保存した値に戻ることを確認してください。

### 変更内容が分かる項目を追加する

ローカルでの更新が成功すると、保存済みのステータスと優先度から作成したタイトルの下に、入力されたメモがそのままテキストとして表示されます。項目は先頭に追加されるため、最新の変更が最初に表示されます。メモはHTMLとして解釈されず、静的な初期アクティビティはユーザーがローカルで追加した項目の下に残ります。

## Salesforce Lightning デザインシステム：アクセシブルなフォームと復元

### 実際のラベルと明示的な説明を使う

選択フィールドとテキストエリアには、for と id で関連付けた視認可能なラベルがあります。メモはヘルプテキストとエラーテキストを参照し、必須マークには読み上げ可能なタイトルを設定しています。保存と破棄の操作には適切な submit および button タイプのボタンを使い、下書きを破棄したときに誤って送信されないようにしています。

### 破棄後に予測可能な場所へ戻す

破棄すると、保存済みの優先度とステータスが復元され、メモとフィールドエラーが消去されて、優先度のコントロールにフォーカスが移ります。アクティビティ履歴は削除されず、レコードが初期状態に戻ることもありません。いったん保存してから別の変更を試し、その2回目の下書きを取り消す場合には、この違いが重要です。

## Salesforce Lightning デザインシステム：CSS との連携とバージョンの範囲

### 公開済みのスタイリングパッケージをインストールする

完全なソースでは、バージョンを固定した CSS ディストリビューションと、小規模なアプリケーション用スタイルシートを読み込みます。Vite がパッケージ内のフォントと画像の URL を解決します。レコードの動作は HTML と JavaScript が担います。これは CSS のブループリントを実装したものであり、lightning-record-edit-form をラップするものではありません。

- ネイティブパッケージの CSS が、フィールド、ボタン、カードの外観を提供します。

- 元の HTML が、レコードの構造とラベルを提供します。

- 元の JavaScript が、下書きの状態、検証、ローカルのアクティビティを管理します。

### アーカイブ済みのソースをバージョン管理された参照資料として扱う

公式 GitHub リポジトリはアーカイブ済みです。そのため、このページでは、現在も積極的に保守されている最新の推奨版としてではなく、実際に使用しているパッケージを明記しています。Salesforce プラットフォームのコンポーネント、新しいデザインシステムのガイダンス、スタイリングフックのサポートについては、対象環境で確認してください。選択した CSS パッケージとフレームワーク連携の判断は明示してください。

## Salesforce Lightning デザインシステム：コンポーネント例

### index.html — ケースワークスペース全体

セマンティックな HTML で記述したレコードの概要、フォーム、初期アクティビティ。

```
<!doctype html>
<html lang="en">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Local case workspace</title>
<body>
<main class="slds-example">
  <header class="slds-page-header">
    <p class="slds-text-title_caps">Service workspace · fictional record</p>
    <div class="record-title">
      <div>
        <h1 class="slds-page-header__title">
          Case 004218 · Delivery address update
        </h1>
        <p class="slds-text-body_small">
          Northstar Studio · Opened today · Owner: Maya Chen
        </p>
      </div>
      <span id="status-badge" class="slds-badge">New</span>
    </div>
  </header>
  <div class="record-grid">
    <section class="slds-card">
      <div class="slds-card__header">
        <h2 class="slds-card__header-title">Case details</h2>
      </div>
      <div class="slds-card__body slds-card__body_inner">
        <div class="summary">
          <div>
            <span class="slds-text-title">Contact</span>
            <p>Alex Morgan</p>
          </div>
          <div>
            <span class="slds-text-title">Channel</span>
            <p>Email</p>
          </div>
          <div>
            <span class="slds-text-title">Priority</span>
            <p id="read-priority">Medium</p>
          </div>
          <div>
            <span class="slds-text-title">Status</span>
            <p id="read-status">New</p>
          </div>
        </div>
        <div class="slds-box slds-theme_shade slds-m-top_medium">
          <h3 class="slds-text-heading_small">Customer request</h3>
          <p class="slds-m-top_small">
            Please update the delivery location for order NS-1842 before it
            leaves the warehouse. The contact is available to confirm the new
            address.
          </p>
        </div>
        <form id="case-form" class="slds-m-top_large" novalidate>
          <h3 class="slds-text-heading_small slds-m-bottom_medium">
            Update the local case
          </h3>
          <div class="field-grid">
            <div class="slds-form-element">
              <label class="slds-form-element__label" for="priority"
                >Priority</label
              >
              <div class="slds-form-element__control">
                <div class="slds-select_container">
                  <select class="slds-select" id="priority">
                    <option>Low</option>
                    <option selected>Medium</option>
                    <option>High</option>
                  </select>
                </div>
              </div>
            </div>
            <div class="slds-form-element">
              <label class="slds-form-element__label" for="case-status"
                >Status</label
              >
              <div class="slds-form-element__control">
                <div class="slds-select_container">
                  <select class="slds-select" id="case-status">
                    <option>New</option>
                    <option>Working</option>
                    <option>Escalated</option>
                    <option>Closed</option>
                  </select>
                </div>
              </div>
            </div>
          </div>
          <div id="note-field" class="slds-form-element slds-m-top_medium">
            <label class="slds-form-element__label" for="case-note"
              ><abbr class="slds-required" title="required">*</abbr> Update
              note</label
            >
            <div class="slds-form-element__control">
              <textarea
                class="slds-textarea"
                id="case-note"
                rows="3"
                maxlength="300"
                aria-describedby="note-help note-error"
              ></textarea>
            </div>
            <p id="note-help" class="slds-form-element__help">
              Explain the change in 10–300 characters. Nothing is sent to
              Salesforce.
            </p>
            <p id="note-error" class="slds-form-element__help" hidden>
              Enter an update note of at least 10 characters.
            </p>
          </div>
          <div class="form-actions">
            <button
              type="button"
              id="cancel"
              class="slds-button slds-button_neutral"
            >
              Discard draft</button
            ><button type="submit" class="slds-button slds-button_brand">
              Save local update
            </button>
          </div>
          <p id="save-result" class="slds-m-top_small" role="status"></p>
        </form>
      </div>
    </section>
    <aside class="slds-card">
      <div class="slds-card__header">
        <h2 class="slds-card__header-title">Case activity</h2>
      </div>
      <div class="slds-card__body slds-card__body_inner">
        <p class="slds-text-body_small slds-m-bottom_medium">
          Newest updates first
        </p>
        <ol id="activity" class="activity">
          <li>
            <span class="activity-dot"></span>
            <div>
              <h3 class="slds-text-heading_small">Case opened</h3>
              <p>Customer requested a delivery address change.</p>
              <small>Initial example activity</small>
            </div>
          </li>
        </ol>
      </div>
    </aside>
  </div>
  <footer>
    Native SLDS 2.264.1 CSS with original HTML and JavaScript. Local
    demonstration; no Salesforce record or message is created.
  </footer>
</main>

<script type="module" src="/src/main.js"></script>
</body></html>
```

コードリファレンス

- Viteプロジェクトのルートに保存します。

### main.js — 下書き、検証、アクティビティ

アプリケーションの動作全体とネイティブの CSS の読み込み。

```
import "@salesforce-ux/design-system/assets/styles/salesforce-lightning-design-system.css";
import "./slds.css";
let record = { priority: "Medium", status: "New" };
const form = document.querySelector("#case-form"),
  priority = document.querySelector("#priority"),
  status = document.querySelector("#case-status"),
  note = document.querySelector("#case-note"),
  field = document.querySelector("#note-field"),
  error = document.querySelector("#note-error"),
  result = document.querySelector("#save-result");
function clearError() {
  field.classList.remove("slds-has-error");
  error.hidden = true;
  note.removeAttribute("aria-invalid");
  result.textContent = "";
}
form.addEventListener("input", clearError);
form.addEventListener("submit", (e) => {
  e.preventDefault();
  const text = note.value.trim();
  if (text.length < 10) {
    field.classList.add("slds-has-error");
    error.hidden = false;
    note.setAttribute("aria-invalid", "true");
    note.focus();
    return;
  }
  record = { priority: priority.value, status: status.value };
  document.querySelector("#read-priority").textContent = record.priority;
  document.querySelector("#read-status").textContent = record.status;
  document.querySelector("#status-badge").textContent = record.status;
  const li = document.createElement("li"),
    dot = document.createElement("span"),
    body = document.createElement("div"),
    h = document.createElement("h3"),
    p = document.createElement("p"),
    small = document.createElement("small");
  dot.className = "activity-dot";
  h.className = "slds-text-heading_small";
  h.textContent = record.status + " · " + record.priority + " priority";
  p.textContent = text;
  small.textContent = "Local update · this session";
  body.append(h, p, small);
  li.append(dot, body);
  document.querySelector("#activity").prepend(li);
  note.value = "";
  clearError();
  result.textContent = "Local case updated. No server request was made.";
});
document.querySelector("#cancel").addEventListener("click", () => {
  priority.value = record.priority;
  status.value = record.status;
  note.value = "";
  clearError();
  priority.focus();
});
```

コードリファレンス

- src/main.js として保存してください。更新はすべてローカルで行われます。

### slds.css — レスポンシブなレイアウト

元のレコード用グリッド、履歴の装飾、モバイルレイアウトのみを記述します。

```
[hidden] { display: none !important; }
body {
  margin: 0;
}
.slds-example {
  background: #f3f3f3;
  padding: 24px;
  min-height: 680px;
}
.record-title {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  margin-top: 12px;
}
.record-title h1 {
  white-space: normal;
}
.record-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(260px, 1fr);
  gap: 20px;
  margin-top: 20px;
}
.record-grid > .slds-card {
  margin: 0;
  min-width: 0;
}
.summary,
.field-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.summary p {
  font-weight: 600;
  margin-top: 4px;
}
.form-actions {
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 20px;
}
.activity {
  list-style: none;
  padding: 0;
  margin: 0;
}
.activity li {
  display: flex;
  gap: 12px;
  padding-bottom: 24px;
  position: relative;
}
.activity li:not(:last-child):before {
  content: "";
  position: absolute;
  left: 5px;
  top: 12px;
  bottom: 0;
  border-left: 1px solid #c9c9c9;
}
.activity-dot {
  flex: none;
  width: 11px;
  height: 11px;
  background: #0176d3;
  border-radius: 50%;
  margin-top: 5px;
}
.activity p {
  margin: 8px 0;
}
.activity small {
  color: #747474;
}
.slds-example footer {
  font-size: 12px;
  color: #747474;
  margin-top: 20px;
}
.slds-form-element.slds-has-error #note-help {
  color: #444;
}
@media (max-width: 760px) {
  .slds-example {
    padding: 12px;
  }
  .record-grid {
    grid-template-columns: 1fr;
  }
  .record-title {
    gap: 12px;
  }
  .field-grid {
    grid-template-columns: 1fr;
  }
  .form-actions {
    justify-content: flex-start;
  }
}
```

コードリファレンス

- src/slds.css として保存してください。パッケージのスタイルは別のままにします。

## Salesforce Lightning デザインシステム：AIエージェントの設定

### 実装の出発点

バージョンを固定したネイティブの CSS の例であり、Salesforce 組織へのデプロイ例ではありません。バンドルしたアセットを再配布する際は、パッケージとアセットに関する注意書きを残してください。

```
npm create vite@latest slds-case -- --template vanilla
cd slds-case
npm install
npm install @salesforce-ux/design-system@2.264.1
# Replace index.html; add src/main.js and src/slds.css from the complete examples.
npm run dev
```

### あなたのプロジェクト向けプロンプト

```
バージョンを固定した SLDS CSS ブループリントを使って、目的を絞ったケースワークスペースを構築します。レコードの識別情報、顧客のコンテキスト、保存済みの状態、編集中の下書きを明確に分けてください。フィールドの正確な構造、実際のトークン参照、ここに記載したソース全体を使用します。概要を変更する前にメモを検証し、破棄後もローカルのアクティビティを保持してください。また、Salesforce のバックエンドに接続しているかのように見せないでください。
```

## Salesforce Lightning デザインシステム：参照元と適用範囲

バージョンを固定した SLDS CSS パッケージの OpenDesign ガイドです。プレビューでは、オリジナルの HTML と JavaScript を使ったネイティブの CSS、架空のケースデータ、ローカルの状態を使用します。Lightning Web Components は読み込まず、Salesforce にも接続しません。上流のリポジトリはアーカイブ済みです。本番環境で使用する場合は、現在の Salesforce プラットフォームのガイダンスを確認してください。

- 公式ソースリポジトリ アーカイブ済みのソース、ブループリント、パッケージの履歴。

- 固定されたトークンのエクスポート 従来のスペーシング、タイポグラフィ、角丸、色の正確な値。

- コンポーネントブループリント ネイティブのマークアップと修飾子のパターン。

## Salesforce Lightning デザインシステム：関連リソース

### Samsung One UI

ダーク表示と明示的なリセット時の復旧を備えた、オリジナルの読書設定プレビューを通じて、One UIの閲覧・操作の構成、24dpのマージン指針、テキストを200%に拡大する要件を確認できます。

### SAP Fiori

UI5 Web Componentsを使ってSAP FioriのHorizonテーマを適用します。実際のテーマパラメーター、明示的なコンテンツ密度、セマンティックな値の状態、ローカル検証を備えた購入申請画面の構成を使用します。

### SEEK Braid

テーマごとにスコープされた変数、実際の4つのブレークポイント、文脈に応じたテキスト、トーンの異なるボタン、操作を無効にするのではなく検証内容を説明する制御付きフィールドを使った、独自の求人検索レイアウトを通して Braid を理解しましょう。


- [実装リファレンス](https://github.com/salesforce-ux/design-system)
- [ソース](https://cdn.jsdelivr.net/npm/@salesforce-ux/design-system@2.264.1/design-tokens/dist/ui-force.json)
- [ソース](https://github.com/salesforce-ux/design-system/tree/main/ui/components)
- [コードリファレンス](https://github.com/salesforce-ux/design-system)
- [公式ソースリポジトリ アーカイブ済みのソース、ブループリント、パッケージの履歴。](https://github.com/salesforce-ux/design-system)
- [固定されたトークンのエクスポート 従来のスペーシング、タイポグラフィ、角丸、色の正確な値。](https://cdn.jsdelivr.net/npm/@salesforce-ux/design-system@2.264.1/design-tokens/dist/ui-force.json)
- [コンポーネントブループリント ネイティブのマークアップと修飾子のパターン。](https://github.com/salesforce-ux/design-system/tree/main/ui/components)