# Siemens iXデザインシステム
## Siemens iXデザインシステムのインターフェースプレビュー
架空のイベントを絞り込み、設備のメモを確認し、元の重大度を表示したままレコードをローカルで確認済みにできます。
## Siemens iXデザインシステムの設計リファレンス
公開中のiXドキュメントと、公式mainブランチのコンポーネントAPIスナップショットに基づいています。以下のカラー項目はセマンティックロールであり、固定の16進カラー値を独自に設定したものではありません。インストールするパッケージのバージョンは、すべて整合するよう固定してください。オフラインのサンプルでは、独自のパレットと寸法を使用していることを明示しています。
### テーマとパッケージの導入
| 名前 / ルール | 値 / 設定 | 用途 |
| --- | --- | --- |
| Core package | @siemens/ix | Webコンポーネントとグローバルスタイルシート。 |
| React wrappers | @siemens/ix-react | Reactコンポーネントの統合。 |
| Icons | @siemens/ix-icons | 公式アイコンの依存関係。 |
| data-ix-theme | classic | ドキュメントレベルのテーマセレクター。 |
| data-ix-color-schema | dark \| light \| system | 正確な属性表記はスキーマに準拠します。 |
| Global CSS | @siemens/ix/dist/siemens-ix/siemens-ix.css | アプリケーションのエントリーポイントで一度だけインポートします。 |
### テキストと背景のロール
| 名前 / ルール | 値 / 設定 | 用途 |
| --- | --- | --- |
| --theme-color-primary | Primary action role | 選択したテーマに応じて解決されます。 |
| --theme-color-std-text | Default reading color | イベントのタイトルと本文。 |
| --theme-color-soft-text | Secondary reading color | 時刻とアセットのメタデータ。 |
| --theme-color-weak-text | Disabled reading color | 重要な補足情報には使用しないでください。 |
| --theme-color-alarm-text | Alarm text role | エラーテキストに前景色が必要な場合に使用します。 |
| --theme-color-component-1 | Interactive component fill | 半透明のため、下地となる背景によって見え方が変わります。 |
| color-0 | Transparent background role | その他の背景レベルは不透明です。 |
### 重大度の語彙
| 名前 / ルール | 値 / 設定 | 用途 |
| --- | --- | --- |
| Alarm | Error, invalid or dangerous condition | 色付きのマーカーには、テキストラベルを必ず添えてください。 |
| Critical | Between alarm and warning | 独立した意味を表します。装飾のための別の色合いではありません。 |
| Warning | Condition requiring attention | 暗黙のうちにアラームへ格上げしないでください。 |
| Success | Positive outcome | 確認操作によって、アラームが解決したとは限りません。 |
| Info | Informational condition | 無効化されたコンテンツとは区別してください。 |
| Neutral | Unclassified neutral condition | ステータスの判断が当てはまらない場合に使用できます。 |
### 境界の階層
| 名前 / ルール | 値 / 設定 | 用途 |
| --- | --- | --- |
| --theme-color-hard-bdr | Strong solid boundary | 明確に区切る境界。 |
| --theme-color-std-bdr | Standard control boundary | 入力または選択用のコントロール。 |
| --theme-color-soft-bdr | Card boundary | ノートのインスペクターに使用します。 |
| --theme-color-weak-bdr | Region boundary | 主要な領域を控えめに区切ります。 |
| --theme-color-x-weak-bdr | Very subtle boundary | 目立たない区分線。 |
| --theme-primary-bdr-1 | Complete border value | 色としてではなく、border: var(--theme-primary-bdr-1)として使用してください。 |
### タイポグラフィの役割
| 名前 / ルール | 値 / 設定 | 用途 |
| --- | --- | --- |
| Headings | H1 through H6 | ドキュメントの階層 |
| Body | Multiline reading | 確認メモと説明。 |
| Label | Single-line component text | 短いコントロールとフィールド。 |
| Display | Single-line KPI presentation | 件数。段落には使用しません。 |
| Code | Code and technical syntax | 適切な場合は、APIの例や識別子に使用します。 |
### Event List APIのスナップショット
| 名前 / ルール | 値 / 設定 | 用途 |
| --- | --- | --- |
| IxEventList.itemHeight | S \| L \| number; default S | サンプルのタイトルとメタデータにはLを使用します。 |
| IxEventList.compact | boolean; default false | コンパクトモードを明示的に選択します。 |
| IxEventList.chevron | boolean; default false | ナビゲーションを示す要素を表示します。 |
| IxEventList.animated | boolean; default false | 静的なログでは不要な動きを避けます。 |
| IxEventListItem.itemColor | string | テーマCSSのカラー表現。 |
| IxEventListItem.selected | boolean; default false | 選択したレコードIDによって制御されます。 |
| IxEventListItem.variant | outline \| filled; default outline | 表示方法の選択。 |
| IxEventListItem.disabled | boolean; default false | 操作できない場合に限り、無効にしてください。 |
| itemClick | Custom event | ReactラッパーのonItemClickでレコードを選択します。 |
## Siemens iXデザインシステム完全ガイド
実際のインターフェースで、このデザインシステムを選び、適用し、レビューするための実践ガイドです。
詳しいガイダンス、実装の出発点、ソースへのリンクをまとめています。
## Siemens iXデザインシステム：確認状態と解決状態を明確に区別した産業用イベント
### 機械制御パネルではなく、ノートブック
> 動作するサンプルは、架空の設備ノートブックです。3件のレコードは元の重大度を保持し、別個のローカル確認状態で、読者が確認した項目を記録します。この区別は構成の要です。行の選択、メモの閲覧、物理的な状態の解決は、それぞれ異なる操作です。プレビューで実装しているのは最初の2つであり、実際の機器を制御するものではありません。
選択状態、重大度マーカー、シェブロンによって、繰り返し表示されるレコードをナビゲーション可能な一覧として読み取りやすくできるため、装飾的なカードよりEvent Listが適しています。詳細な文章はインスペクターに表示し、行の外に分けて配置します。偽のテレメトリストリームや、アラームが解除されたと偽る成功トーストはありません。
関連する仕様を確認する
## Siemens iXデザインシステム：運用上の意味を伝えるカラーの役割
### マーカーには、読みやすい色のラベルを添える
カラーシステムでは、不透明な背景レイヤーと半透明のコンポーネント塗りつぶしを区別します。コンポーネントの塗りつぶしは、その下にある背景と切り離して評価できません。ネイティブコードではスクリーンショットの16進カラー値を各行にコピーするのではなく、実際のテーマ変数を使用してください。
StandardとSoftのテキストは、それぞれ異なる読み取り優先度に対応します。Weakテキストは無効なコンテンツ向けです。そのため、調査に必要なタイムスタンプを、理由なくこのロールに割り当てないでください。エラーの前景色には、ステータスの塗りつぶしをそのまま再利用するのではなく、専用のアラームテキストロールを使用するのが適切です。
- 色付きの境界マーカーの横に「アラーム」「警告」「情報」の文字を表示します。
- ローカルで確認済みにした後も、アラームマーカーを残してください。確認しても、元の状態は変わりません。
- 選択スタイルはナビゲーション状態に限定し、重大度と選択状態を区別できるようにしてください。
関連する仕様を確認する
## Siemens iX デザインシステムのタイポグラフィでメモとラベルを区別する
### 推測したピクセル値ではなく、フォーマットを使う
iXでは、タイポグラフィを見出し、本文、ラベル、ディスプレイ、コードに分類しています。点検メモには複数行に対応する本文のスタイルが必要です。大きな数値にはディスプレイ、短いフィルターラベルにはラベルのカテゴリが適しています。イベントの説明全体を大きく表示するために、ディスプレイのスタイルを流用しないでください。
ドキュメントに記載された ix-typography format="h3" の例を使えば、実装方法を具体的に確認できます。同等の Sass の typography-h3 mixin を使うと、フォントルールを再現せずに独自の要素へ適用できます。プレビューでは意図的にシステムフォントをフォールバックとして使い、アプリケーション側で文字サイズを設定しています。これらの値は、Siemensの公式トークンではありません。
関連する仕様を確認する
## Siemens iX デザインシステムのイベントリストの選択と密度
### 項目の識別と表示を別々に制御する
APIのスナップショットでは、itemHeight に S、L、または数値を指定できます。この例では L を選び、compact は既定値の false のままにして、chevron を有効にしています。ローカライズ後にタイトルが長くなる本番環境のログでは、サンプルのように各レコードが収まると決めつけず、折り返しを考慮して高さを検証してください。
各項目にはIDの比較結果を selected として渡し、ラッパーの onItemClick ハンドラーを通じて itemClick を送信します。インスペクターも同じIDを参照します。これにより、選択表示と詳細パネルが気づかないうちに別のレコードを指す事態を防げます。フィルターを変更したときは、選択中のIDを明示的にクリアします。
関連する仕様を確認する
## Siemens iX デザインシステムで狭い画面にも対応するインスペクター
### 詳細をイベント一覧の下に移動する
この例の2対1のグリッドはアプリケーション側のレイアウトであり、公開されているiXのグリッドトークンではありません。画面が狭い場合は1列にし、インスペクターより先にレコードが表示される順序を保ちます。インスペクター内にスクロール領域を入れ子にしないため、ページ全体を自然にスクロールできます。
イベントのメタデータは、読みやすいセカンダリカラーを使って2行目に表示します。フィルターは繰り返し表示される行の外に置き、レコードが変わっても位置を移動させません。ステータスの段落では、フィルターを変更したりタイトルを置き換えたりせずに、選択中のレコードに対するローカルな確認結果を示します。
関連する仕様を確認する
## Siemens iX デザインシステムで色やポインターの精度に頼らず状態を伝える
### テキスト、キーボード操作、フォーカス
オフラインプレビューでは、レコードにネイティブのボタン、重要度の選択にラベル付きのセレクトボックス、確認結果の通知に aria-live ステータス領域を使用します。EnterキーとSpaceキーでレコードを選択できます。ネイティブライブラリの構成では、Event Listのラッパーを使用します。カスタムのフォーカス設定を採用する前に、インストール済みバージョンのキーボード操作と支援技術への対応をテストしてください。
ラベルでは、「アラームを解決」ではなく「ローカルで確認済みにする」という業務上の違いを明確にします。確認済みの状態は、確認操作を無効にする場合も画面上に表示します。状態の意味を色だけに頼って伝えないでください。また、フィルターを変更した際に、別のカテゴリに隠れたまま操作できない古い選択状態を残さないようにします。
関連する仕様を確認する
## Siemens iX デザインシステムにパッケージ、テーマ、アプリケーションのローカル状態を組み込む
### 段階を踏んで連携する
セットアップのコードには、パッケージのインポート、ドキュメントのテーマ属性、実際のコンポーネントプロパティ、Reactの状態全体、アプリケーションのCSSが含まれています。テーマセレクターには、似た名前の独自属性ではなく data-ix-color-schema を使います。アプリケーションでは、インストールする core、ラッパー、アイコンのバージョンに互換性があることを確認してください。
ビジュアルのサンプルは、このガイドの操作ルールを表現したオフラインのHTML/CSSです。濃紺の配色、24ピクセルの余白、模式的な設備のイラストは、アプリケーション独自の選択です。ネイティブの見た目を正確に確認するには、公式スタイルシートを使って別のReactの例を実行し、計算済みのテーマ値を調べてください。
1. ViteのReactスキャフォールドに core、Reactのラッパー、アイコンをインストールし、生成されたルート要素はそのまま使います。
2. main.jsx と style.css を用意されたファイルに置き換え、ドキュメントで classic と dark、light、system のいずれかを選択します。
3. レコードを選択して確認済みにし、一覧をフィルタリングします。非表示の選択が解除され、重要度が保持されることを確認してください。
関連する仕様を確認する
## Siemens iX デザインシステムのコンポーネント例
### 完全なスタンドアロンのインタラクティブ見本
ドキュメント全体を index.html として保存し、ブラウザーで開きます。独立したオフラインのHTML/CSSによる表現です。独自の配色、システムフォント、アプリケーション側の寸法を使用しており、ネイティブのiXランタイムではありません。
```
Equipment event notebook — iX interpretation EVENT NOTEBOOK Sample plant / offline Inspect the event. Review equipment notes without changing their original severity.
Severity All events Alarm Warning Info
Independent HTML interpretation of Siemens iX interaction rules. Original colors, dimensions and fictional equipment records. Local review does not acknowledge or resolve a live alarm.
Equipment event notebook Fictional records. Reviewing an entry does not control equipment or acknowledge a live alarm.
Severity {setFilter(e.target.value);setSelected('')}}>
All events Alarm Warning Info
{visible.map(r=>setSelected(r.id)}>
{r.title} {r.severity.toUpperCase()} · {r.asset} · {r.time}{reviewed.includes(r.id)?' · Reviewed locally':''}
)}
{record?<>{record.id} / {record.asset} {record.note}
setReviewed(a=>a.includes(record.id)?a:[...a,record.id])} disabled={reviewed.includes(record.id)}>Mark reviewed locally
{reviewed.includes(record.id)?'Reviewed in this browser session. Source severity is unchanged.':''}
:Select an event to inspect its record.
}
Inspection record
@import "@siemens/ix/scss/mixins/font";
.inspection-title { @include typography-h3; }
```
コードリファレンス
- プレビューではシステムフォントをフォールバックとして使用し、Siemensのブランドフォントは配布していません。
## Siemens iX デザインシステムのAIエージェント設定
### 実装の出発点
既存のルート要素があるViteのReactスキャフォールドで、main.jsx と style.css を完成させます。公式のラッパー、CSSのインポート、Event Listのプロパティはドキュメントに記載されていますが、ここではネイティブパッケージのコンパイルを実行していません。埋め込みプレビューは、独立したオフラインの表現です。
```
// In a Vite React project: npm install @siemens/ix @siemens/ix-react @siemens/ix-icons
// src/main.jsx
import React, {useState} from 'react';
import {createRoot} from 'react-dom/client';
import {IxEventList, IxEventListItem, IxTypography} from '@siemens/ix-react';
import '@siemens/ix/dist/siemens-ix/siemens-ix.css';
import './style.css';
document.documentElement.dataset.ixTheme='classic';
document.documentElement.dataset.ixColorSchema='dark';
const records=[
{id:'E-014',severity:'alarm',title:'Cooling flow below sample threshold',asset:'Pump A',time:'09:42',note:'Original demonstration record: inspect the cooling circuit before considering a reset.'},
{id:'E-015',severity:'warning',title:'Filter service approaching',asset:'Pump B',time:'09:38',note:'Original demonstration record: schedule a filter inspection.'},
{id:'E-016',severity:'info',title:'Inspection checklist attached',asset:'Line C',time:'09:30',note:'Original demonstration record: a checklist is available for review.'}
];
function App(){
const [filter,setFilter]=useState('all'),[selected,setSelected]=useState('E-014'),[reviewed,setReviewed]=useState([]);
const visible=records.filter(r=>filter==='all'||r.severity===filter);
const record=visible.find(r=>r.id===selected);
return Equipment event notebook Fictional records. Reviewing an entry does not control equipment or acknowledge a live alarm.
Severity {setFilter(e.target.value);setSelected('')}}>
All events Alarm Warning Info
{visible.map(r=>setSelected(r.id)}>
{r.title} {r.severity.toUpperCase()} · {r.asset} · {r.time}{reviewed.includes(r.id)?' · Reviewed locally':''}
)}
{record?<>{record.id} / {record.asset} {record.note}
setReviewed(a=>a.includes(record.id)?a:[...a,record.id])} disabled={reviewed.includes(record.id)}>Mark reviewed locally
{reviewed.includes(record.id)?'Reviewed in this browser session. Source severity is unchanged.':''}
:Select an event to inspect its record.
}