# Adobe Spectrum デザインシステム ## Adobe Spectrum デザインシステム インターフェースプレビュー 3 つの独自アートワークバリエーションを検査し、エクスポートバッチを選択して、ローカル用の PNG または JPEG レシピを準備します。 ## Adobe Spectrum デザインシステム デザインリファレンス React Spectrum v3 の API とディメンションマッピング。数値のディメンション列は、Adobe の移行表におけるベース変換を記録しています。スケールに依存する size-* の値はタッチ向けに適応できます。これは Spectrum 2 のトークンエクスポートではありません。プレビューの色とカスタムアートワークはアプリケーション側の選択です。 ### Provider とテーマの設定 | 名前 / ルール | 値 / 設定 | 用途 | | --- | --- | --- | | theme | defaultTheme | @adobe/react-spectrum からインポートする必須のルートテーマオブジェクト。 | | colorScheme | light \| dark | オペレーティングシステムの設定を明示的に上書きします。 | | scale | medium \| large | ファインポインターとコースポインターのスケール。通常は Provider に選択させます。 | | locale | BCP 47 language tag | ロケールと書字方向のコンテキスト。 | | breakpoints | custom name → pixel width | このガイドでは tablet: 640 と desktop: 1024 を明示的に設定し、リファレンスページ内の競合するデフォルトを回避しています。 | | isDisabled / isReadOnly | boolean group defaults | ネストされた Provider と個々のプロップは、グループの動作を上書きできます。 | ### ベースディメンションのマッピング | 名前 / ルール | 値 / 設定 | 用途 | | --- | --- | --- | | size-50 | 4px base | 小さな間隔。 | | size-100 | 8px base | 関連するコントロール。 | | size-150 | 12px base | ツールバーの間隔。 | | size-200 | 16px base | インスペクターグループの間隔。 | | size-250 | 20px base | 中間のスペーシング。 | | size-300 | 24px base | パネルの内側の余白。 | | size-400 | 32px base | より大きなグループ化。 | | size-500 | 40px base | セクションの区切り。 | | size-600 | 48px base | 大きな構造。 | | size-1000 | 80px base | 固定サイズのイラスト領域。 | | size-2400 | 192px base | インスペクターの幅の例。 | | size-6000 | 480px base | 大きな境界付きの界面表面。 | ### スタイルプロップと適応値 | 名前 / ルール | 値 / 設定 | 用途 | | --- | --- | --- | | marginStart / marginEnd | DimensionValue | 論理的なスペーシング。書字方向をサポートするため、left/right よりも優先します。 | | padding / backgroundColor | View style props | ネイティブコントロールの内部を上書きするのではなく、カスタムの外側の界面表面を構築します。 | | width | size-* \| CSS length \| calc(...) | 例: calc(100% - size-2000)。 | | responsive value | {base: value, tablet: value} | キーは明示的な Provider のブレークポイントに対応します。 | | UNSAFE_style / UNSAFE_className | last-resort escape hatch | コンポーネントのプライベートな DOM やスタイルに依存しないでください。 | | single-line-height | 32 base mapping | すべてのコントロールが常に 32px であると主張するのではなく、セマンティックなディメンションを使用してください。 | ### コレクション選択の契約 | 名前 / ルール | 値 / 設定 | 用途 | | --- | --- | --- | | selectionMode | none \| single \| multiple | サンプルではバッチに multiple を使用します。 | | selectedKeys | Set of row keys \| all | 制御された状態では all センチネルを処理する必要があります。 | | onSelectionChange | callback with selection | 選択を承認やエクスポートの成功と解釈しないでください。 | | disallowEmptySelection | boolean | 必須の単一選択に有用です。任意のエクスポートバッチでは省略します。 | | TableHeader → Column | column anatomy | 動的レンダリングのために、列に安定したキーを付与します。 | | TableBody → Row → Cell | row anatomy | レコードの id が安定したコレクションの識別子を確立します。 | ### Picker とテキストの構成 | 名前 / ルール | 値 / 設定 | 用途 | | --- | --- | --- | | label | persistent text | エクスポート形式セレクターに名前を付けます。 | | selectedKey | one item key | png や jpeg などの制御された形式。 | | onSelectionChange | key callback | DOMイベントハンドラーとは異なる契約です。 | | Item key | stable key | 表示ラベルとは独立した値の識別情報です。 | | Heading level | 1–6 | 意味に基づく見出しレベルで、ネイティブのスタイルはコンテキストに応じて適用されます。 | | Button onPress | press callback | マウス専用の独自操作ではなく、複数の入力方法に対応した操作です。 | ## Adobe Spectrum デザインシステム完全ガイド 実際のインターフェースで、このデザインシステムを選び、適用し、レビューするための実践ガイドです。 詳しいガイダンス、実装の出発点、ソースへのリンクをまとめています。 ## Adobe Spectrum デザインシステム v3を意図的に選び、Spectrumの世代を混在させない ### この例で導入するもの > Adobeは現在、v3ライブラリと並行してSpectrum 2のドキュメントも公開しています。このページでは、Provider、コレクション、スタイルプロップの仕様により、アセットレビューの例をひととおり構成できる@adobe/react-spectrum@3を選びます。v3のレシピは既存のv3アプリケーションには役立ちますが、最新のSpectrum実装として説明すべきではありません。新たに採用する場合は、世代を選ぶ前に、リンク先の移行リファレンスを確認してください。 実際の違いはコードを見るとわかります。v3ではスタイルプロップにsize-300を渡し、ProviderにdefaultThemeを指定します。移行ガイドでは、こうした規約が別のスタイリングAPIに移行する方法を説明しています。パッケージ名だけを置き換えても、この例の移行にはなりません。コンポーネントのインポート、スタイリング、対応プロパティをあわせて見直す必要があります。 関連する仕様を確認する ## Adobe Spectrum デザインシステムのProviderで外観、スケール、ロケールを調整する ### 1つのルートで複数の独立した設定を管理 Providerは、テーブル、ピッカー、ボタンが利用する環境を設定します。テーマオブジェクトには、配色モードとスケールの定義が含まれます。colorSchemeでOSの設定を上書きでき、scaleでは入力デバイスの特性に対応できます。これらは別々の設定です。デスクトップの背景をダークにしても大きなタッチターゲットが必要になるとは限らず、明るいタッチスクリーンにマウス向けの高密度なレイアウトを誤って適用する必要もありません。 通常の本番環境では、scaleを自動設定のままにしてください。コンポーネントを検証する際にmediumやlargeを明示すると、各コントロールを比較しやすくなりますが、これは検証用の設定として説明するべきです。localeは言語コンテキストを設定するもので、プロジェクトのデータを翻訳するものではありません。キャンペーン名、レビューコメント、レシピのラベルは、引き続きアプリケーション側のコンテンツです。 関連する仕様を確認する ## Adobe Spectrum デザインシステム 対応するサイズ指定と外部レイアウト用プロップを使う ### 名前付きのスケールは、単なるピクセル値の略記ではない 基本のsize-100は8、size-200は16、size-300は24に対応します。リファレンステーブルには、ほかにも便利な段階が示されています。size-*の寸法はプラットフォームのスケールに合わせて変化しますが、static-size-*の値は意図的に変化しません。インスペクターや操作ターゲットのサイズを決める際は、この違いを保ってください。デスクトップで解決された値をすべてCSSにコピーすると、コンポーネント環境がもたらす適応性が失われます。 FlexとViewを使うと、TableViewの内部構造を変更せずに、例の外側に安定したレイアウトを作れます。テーブルはflexで拡張し、minWidth={0}で縮小できます。インスペクターは基本の画面幅では縦に並び、明示したタブレットのブレークポイントで幅が制限されます。パディングは、その背景を所有するViewに設定します。ドキュメントでは、安全でない回避策によって内部の色、境界線、タイポグラフィを上書きすることは推奨されていません。 関連する仕様を確認する ## Adobe Spectrum デザインシステム ネイティブの色とタイポグラフィはテーマに任せる ### サンプルの配色とトークンの値を区別する プレビューには控えめなグレーのキャンバス、中立的なコントロール、オリジナルのカラフルなアートワークを使っています。イラストの色は、Spectrumのトークン値として認定されたものではありません。ネイティブの例では、対応するコンポーネントの外観はdefaultThemeから取得されます。独自のネイティブな背景には、サポート対象としてドキュメントに記載されたbackgroundColorの値を使ってください。サンプリングした単一の16進数値が、どちらの配色モードでも使えると思い込んではいけません。 Headingは、コンテキストに応じたSpectrumの見た目だけでなく、意味上の構造も提供します。ページタイトルにはlevel={1}を使い、選択数などの通常のコンテンツにはTextを使います。カスタムのHTMLプレビューでは、アプリケーションが選んだシステムフォントのフォールバックと文字サイズを使っています。これはワークフローと相対的な階層を示すものであり、周囲のOpenDesignのフォントやイラスト内のタイポグラフィがSpectrumのフォント仕様だと主張するものではありません。 関連する仕様を確認する ## Adobe Spectrum デザインシステムのコレクションテーブルでキー、列、選択の仕様を定義する ### 選択はデータの契約 テーブルはTableHeaderとColumnに加え、TableBody、Row、Cellで構成されます。各アセットには安定したidがあります。selectedKeysとonSelectionChangeで選択を制御するため、エクスポート用インスペクターの選択数も同じ状態から算出できます。アセット名を変更しても、その識別情報は変わりません。行の位置を識別情報にすると、並べ替えの後に選択が不安定になります。 選択値にはallというセンチネル値を指定できます。レシピを作成する前に、セットアップ処理でその値を現在のすべてのアセットに展開します。バッチ処理は任意なので、空のSetも有効です。disallowEmptySelectionは意図的に有効にしていません。リモートデータやページネーションを使うアプリケーションでは、現在表示されている行がコレクション全体だと決めつけず、データソースにおけるallの意味を定義してください。 - アセットの識別情報：コレクションで使う安定したキー。 - プレビュー：単独のサンプルで拡大表示するアートワーク。 - バッチ選択：作成するレシピに含めるキー。 関連する仕様を確認する ## Adobe Spectrum デザインシステムのピッカーとボタンでエクスポート用インスペクターを構成する ### 形式はバッチ選択と独立して管理する Pickerには表示ラベルと安定したItemキーを使います。selectedKeyにはpngまたはjpegを指定し、onSelectionChangeから選択されたキーを受け取ります。これは、ネイティブのselectからevent.target.valueを読み取る方法とは異なります。バッチをクリアしても形式の選択は維持されるため、レビュー担当者はプリセットを作り直さずに選択内容を調整できます。 Buttonでは操作にonPressを使い、選択されたアセットがない場合はisDisabledを指定します。ネイティブの例では、IDと形式をシリアライズしてローカルのレシピを作成します。画像データの変換、実際のエクスポートファイルの生成、アセットサービスへの接続は行いません。これは、デザインシステムの範囲外に変換エンジンがあっても、操作とその入力が具体的に定義されていることを示す、わかりやすい実装境界です。 関連する仕様を確認する ## Adobe Spectrum デザインシステム アートワークを無理に縮小せず、構成を画面に合わせる ### ブレークポイントの仕様を定義する この例では tablet:640 と desktop:1024 を宣言しています。この選択が明示的である理由は、Provider ページの現状で、説明文と生成された API メタデータの間でデフォルト値が食い違っているためです。レスポンシブ値は、まさにこれらのキーを参照します。インスペクターはベースでは全幅で、その後フレキシブルなテー���ルの横へ移動します。これらのブレークポイントはアプリケーションが所有するものであり、Spectrum の新しい普遍的な標準ではありません。 スタンドアロンのイラストは、サイドインスペクターとサムネイルレールを備えた大きなキャンバスを使用します。小さな画面では、インスペクターは通常のフローに移り、アートワークはアスペクト比を保ちます。寸法やフォーマットといったテキストはアートの外側にあるため、読みやすさが保たれ、検査対象のアートワークを変化させません。 関連する仕様を確認する ## Adobe Spectrum デザインシステム 検査・選択・準備はそれぞれ別の操作です ### デモを検証可能にする アートワークのサムネイルをクリックすると、大きなイラストとその説明メタデータが切り替わります。チェックボックスはエクスポートバッチを変更します。これらを独立させておくことで、選択されていないアセットを、意図せずエクスポートすることなく検査できます。プレビューは選択件数を表示し、レビュー担当者がバッチを変更している間もフォーマットを保持します。 ネイティブの TableView は自身のコレクション操作を提供します。HTML の見本は通常のボタンとチェックボックスを使用しており、グリッドの完全なキーボードモデルを再現するものではありません。どちらも、実演する操作へのキーボード経路を備えています。レシピの結果はテキストであり、一時的な視覚効果だけではないため、レビュー担当者はどの id とフォーマットが準備されたのかを正確に検査できます。 関連する仕様を確認する ## Adobe Spectrum デザインシステム ツールを拡張する前にネイティブのスライスを統合する ### 明示的な境界で実際のエクスポートサービスを接続する 既存の React アプリに v3 スイートをインストールし、以下の完全なエントリを使用します。この例には、プロバイダー、インポート、コレクションデータ、選択状態、フォーマット状態、結果状態が含まれます。実運用の統合では、レシピの準備をエクスポートリクエストに置き換え、アセットごとに確定した結果を表示します。そのサービスが存在するようになるまで、ローカルの応答を「エクスポート完了」に改名しないでください。 Spectrum 2 へ移行する際は、寸法、ブレークポイント、コンポーネントの変更について Adobe のマッピングを使用してください。選択の挙動とフォーマットの保持を改めて確認してください。見た目が似ていても、異なるコントラクトを公開しているテーブルはあります。ソースの世代を明示しておけば、将来のコントリビューターが v3 の Provider と互換性のない例を組み合わせてしまうことを防げます。 1. 1 つのアセットを選択し、その id がローカルレシピに現れることを確認します。 2. すべて選択し、PNG を JPEG に変更して、選択されたセット全体を検査します。 3. 選択を解除し、フォーマットが選択されたままの状態でアクションが無効になることを確認します。 4. ビューポートを狭め、検査・選択・レシピ出力に引き続き到達できることを確認します。 関連する仕様を確認する ## Adobe Spectrum デザインシステム コンポーネントの例 ### 完全なスタンドアロンのインタラクティブ見本 完全なドキュメントを index.html として保存し、ブラウザで開きます。文書化された v3 のコレクションとインスペクターのワークフローに対する独自の HTML/CSS 解釈です。パレットとアートワークは例示用であり、ネイティブの Spectrum ランタイムや画像変換はありません。 ``` Spectrum asset inspector study
Campaign library / Autumn collection
Campaign master1600 × 1200

Original artwork · illustrative preview

``` コードリファレンス - アートワークは独自のサンプルコンテンツです。レシピの準備で生成されるのは選択メタデータであり、変換された画像ファイルではありません。このドキュメントは Spectrum v3 も Spectrum 2 も読み込みません。 ### 完全なネイティブ実装のエントリ セットアップの完全な実装を、焦点を絞った API の解説とあわせてここにまとめています。セットアップに記載されたパッケージとビルドの前提条件に従ってください。 ``` // Terminal: npm install @adobe/react-spectrum@3 // Existing React app with
; entry: src/main.jsx import * as React from 'react'; import {createRoot} from 'react-dom/client'; import {Provider, defaultTheme, Flex, View, Heading, Text, Button, TableView, TableHeader, Column, TableBody, Row, Cell, Picker, Item} from '@adobe/react-spectrum'; const assets = [ {id: 'hero', name: 'Campaign master', dimensions: '1600 × 1200'}, {id: 'square', name: 'Social square', dimensions: '1080 × 1080'}, {id: 'story', name: 'Vertical story', dimensions: '1080 × 1920'} ]; function AssetReview() { const [keys, setKeys] = React.useState(new Set(['hero'])); const [format, setFormat] = React.useState('png'); const [recipe, setRecipe] = React.useState(''); const selected = keys === 'all' ? assets : assets.filter(a => keys.has(a.id)); return Campaign exports AssetDimensions {asset => {asset.name}{asset.dimensions} } PNGJPEG {selected.length} assets selected

{recipe ? 'Local recipe prepared. No image files were converted.' : ''}

{recipe && 
{recipe}
} ; } createRoot(document.getElementById('root')).render(); ``` コードリファレンス - 既存の React アプリ向けの、完全な v3 コレクションおよびインスペクターの例です。ローカル状態にエクスポートレシピを作成するものであり、画像ファイルではありません。解決済みのパッケージバージョンはロックファイルに保持し、このエントリを Spectrum 2 のインポートと混在させないでください。 ### 選択は Set だけでなく all になることもあります バッチを計算したりアクションを有効にしたりする前に、コレクションのコントラクトを正規化します。このフラグメントは、完全なセットアップのアセットとキーを使用します。 ``` const selected = keys === 'all' ? assets : assets.filter(asset => keys.has(asset.id)); ``` コードリファレンス - 安定した id は並べ替えや名前変更にも耐えます。 - 空のバッチが無効にするのはレシピのアクションだけで、現在のフォーマットは消去しません。 ### 明示的なブレークポイント名を使ったレスポンシブなインスペクター Provider とレスポンシブプロップで同じキーを使用します。これらの数値は意図的に設定されたアプリケーション構成です。 ``` Asset table Export inspector ``` コードリファレンス - Provider リファレンスの説明文と生成されたデフォルト値の表では、デフォルトのブレークポイントについて見解が一致していません。明示的なマップを用意すれば曖昧さがなくなります。 - 論理的な marginStart と marginEnd は、物理的な left と right のマージンよりもよく適応します。 ## Adobe Spectrum デザインシステム AI エージェントのセットアップ ### 実装の出発点 既存の React アプリ向けの、完全な v3 コレクションおよびインスペクターの例です。ローカル状態にエクスポートレシピを作成するものであり、画像ファイルではありません。解決済みのパッケージバージョンはロックファイルに保持し、このエントリを Spectrum 2 のインポートと混在させないでください。 ``` // Terminal: npm install @adobe/react-spectrum@3 // Existing React app with
; entry: src/main.jsx import * as React from 'react'; import {createRoot} from 'react-dom/client'; import {Provider, defaultTheme, Flex, View, Heading, Text, Button, TableView, TableHeader, Column, TableBody, Row, Cell, Picker, Item} from '@adobe/react-spectrum'; const assets = [ {id: 'hero', name: 'Campaign master', dimensions: '1600 × 1200'}, {id: 'square', name: 'Social square', dimensions: '1080 × 1080'}, {id: 'story', name: 'Vertical story', dimensions: '1080 × 1920'} ]; function AssetReview() { const [keys, setKeys] = React.useState(new Set(['hero'])); const [format, setFormat] = React.useState('png'); const [recipe, setRecipe] = React.useState(''); const selected = keys === 'all' ? assets : assets.filter(a => keys.has(a.id)); return Campaign exports AssetDimensions {asset => {asset.name}{asset.dimensions} } PNGJPEG {selected.length} assets selected

{recipe ? 'Local recipe prepared. No image files were converted.' : ''}

{recipe && 
{recipe}
} ; } createRoot(document.getElementById('root')).render(); ``` ### あなたのプロジェクト向けプロンプト ``` @adobe/react-spectrum v3 を Provider と defaultTheme とともに使用してください。提供されたキー付き TableView とエクスポートインスペクターを、Picker、Item、Flex、View、Button を使って構築してください。選択は Set または all として扱い、選択が変わってもフォーマットを保持し、実際の変換サービスが接続されるまでは結果をローカルレシピと呼んでください。明示的な tablet/desktop のブレークポイントキーと、サポートされているスタイルプロップを使用してください。v3 と Spectrum 2 の API は分けておいてください。 ``` ## Adobe Spectrum デザインシステム 出典と対象範囲 @adobe/react-spectrum を使用した、維持されている React Spectrum v3 ドキュメントの OpenDesign 実装研究です。Spectrum 2 も利用可能で、API が異なります。このページは v3 を最新の実装として位置づけているわけではありません。スタンドアロンのアセットボードプレビューは、例示用のアートワークとアプリケーションが選択した色による独自の HTML/CSS 解釈であり、ネイティブの Spectrum コンポーネントやカラーマネジメントされた画像エディターではありません。 - Provider ここで扱う実装と制約に関する公式の React Spectrum リファレンスです。 - スタイリング ここで扱う実装と制約に関する公式の React Spectrum リファレンスです。 - テーマ設定 ここで扱う実装と制約に関する公式の React Spectrum リファレンスです。 - TableView ここで扱う実装と制約に関する公式の React Spectrum リファレンスです。 - Picker ここで扱う実装と制約に関する公式の React Spectrum リファレンスです。 - Heading ここで扱う実装と制約に関する公式の React Spectrum リファレンスです。 - Button ここで扱う実装と制約に関する公式の React Spectrum リファレンスです。 - 移行 ここで扱う実装と制約に関する公式の React Spectrum リファレンスです。 ## Adobe Spectrum デザインシステム 関連リソース ### Alaska Airlines Auro 実際のセマンティックカラーとタイプトークン、クラスベースのタイポグラフィ、ネイティブのフライトコンポーネントを通して、Auro の Alaska テーマを探ります。2 件の独自のフライト記録が、航空会社の在庫や予約を表すものではなく、ローカルでの絞り込みと選択を示します。 ### Arco Design Arco の制御された Transfer コンポーネントで、レポートセクションのセレクターを構築します。実際のスペーシングとサイズのスケール、CSS 変数の規約、セマンティックな界面表面、そして行を選択することと移動することの違いを探ります。 ### Atlassian デザインシステム セマンティックな Atlassian トークン、8 ピクセルのスペーシングスケール、実際の Button、Lozenge、Toggle の API、そして必須の Compiled スタイリングのセットアップを使って、課題計画ボードを構築します。課題を検査し、ボードを絞り込み、選択とステータスを混同することなくローカルの作業項目を移動します。 - [実装リファレンス](https://react-spectrum.adobe.com/v3/TableView.html) - [ソース](https://react-spectrum.adobe.com/v3/Provider.html) - [ソース](https://react-spectrum.adobe.com/migrating) - [ソース](https://react-spectrum.adobe.com/v3/styling.html) - [ソース](https://react-spectrum.adobe.com/v3/TableView.html) - [ソース](https://react-spectrum.adobe.com/v3/Picker.html) - [関連する仕様を確認する](https://react-spectrum.adobe.com/migrating) - [関連する仕様を確認する](https://react-spectrum.adobe.com/v3/theming.html) - [関連する仕様を確認する](https://react-spectrum.adobe.com/v3/styling.html) - [関連する仕様を確認する](https://react-spectrum.adobe.com/v3/Heading.html) - [関連する仕様を確認する](https://react-spectrum.adobe.com/v3/TableView.html) - [関連する仕様を確認する](https://react-spectrum.adobe.com/v3/Picker.html) - [関連する仕様を確認する](https://react-spectrum.adobe.com/v3/Provider.html) - [コードリファレンス](https://react-spectrum.adobe.com/v3/TableView.html) - [コードリファレンス](https://react-spectrum.adobe.com/v3/Provider.html) - [Provider ここで扱う実装と制約に関する公式の React Spectrum リファレンスです。](https://react-spectrum.adobe.com/v3/Provider.html) - [スタイリング ここで扱う実装と制約に関する公式の React Spectrum リファレンスです。](https://react-spectrum.adobe.com/v3/styling.html) - [テーマ設定 ここで扱う実装と制約に関する公式の React Spectrum リファレンスです。](https://react-spectrum.adobe.com/v3/theming.html) - [TableView ここで扱う実装と制約に関する公式の React Spectrum リファレンスです。](https://react-spectrum.adobe.com/v3/TableView.html) - [Picker ここで扱う実装と制約に関する公式の React Spectrum リファレンスです。](https://react-spectrum.adobe.com/v3/Picker.html) - [Heading ここで扱う実装と制約に関する公式の React Spectrum リファレンスです。](https://react-spectrum.adobe.com/v3/Heading.html) - [Button ここで扱う実装と制約に関する公式の React Spectrum リファレンスです。](https://react-spectrum.adobe.com/v3/Button.html) - [移行 ここで扱う実装と制約に関する公式の React Spectrum リファレンスです。](https://react-spectrum.adobe.com/migrating)