83.3K+ダウンロード
企業ソフトウェア · 新しいリソース

SAP Fiori デザインシステム.

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

OpenDesign をダウンロード DESIGN.md をダウンロード
OpenDesign ガイド8章37 件のリファレンス項目オリジナルアプリケーションガイド
01

SAP Fiori デザインシステムのインターフェースプレビュー

購買申請を編集し、数量を検証し、密度を変更して、ローカルで概要を作成します。

購買申請ワークスペース完全な例を開く
Morning Horizon パラメーターと UI5 のフォーム構成をオフラインで HTML として表現しています。ネイティブパッケージの例は別途用意されています。・ 実装リファレンス
02

SAP Fiori デザインシステムの設計リファレンス

Morning Horizon (sap_horizon) のソースパラメーターと、現行の UI5 Web Components ドキュメント。以下の Less @sap 名はソースパラメーターです。ブラウザーのスタイルでは、対応する --sap カスタムプロパティを使用します。保護された寸法は観察結果であり、上書きを推奨する箇所ではありません。

Horizon のカラーの役割

ソース
名前 / ルール値 / 設定用途
@sapBrandColor#0070f2 主要なブランドカラーの役割。
@sapBackgroundColor#f5f6f7 ページの背景。
@sapBaseColor#ffffff ベースの背景。
@sapTextColor#131e29 主要テキスト。
@sapNegativeColor#aa0808 否定的な状態。
@sapCriticalColor#e76500 重大な役割。テキストには別途、派生した役割があります。
@sapPositiveColor#256f3a 肯定的な状態。
@sapInformationBackground#e1f4ff 情報メッセージの背景。
@sapWarningBackground#fff8d6 重大メッセージの背景。

文字と形状

ソース
名前 / ルール値 / 設定用途
@sapFontFamily"72", "72full", Arial, Helvetica, sans-serif公開されているフォントスタック。
@sapFontSize0.875rem基本サイズ。
@sapContent_LineHeight1.5コンテンツの行の高さに適用する倍率。
@sapElement_Height2.25rem保護された標準寸法。
@sapElement_Compact_Height1.625remコンパクトサイズは変更できません。
@sapElement_LineHeight2.75rem標準サイズの行ボックスは変更できません。
@sapElement_Compact_LineHeight2remコンパクトサイズの行ボックスは変更できません。
@sapButton_BorderCornerRadius0.5remボタンの角丸パラメーター。
@sapContent_FocusWidth0.125remフォーカス幅。
@sapContent_FocusColor#0032a5 フォーカスカラー。

テーマと密度の設定

ソース
名前 / ルール値 / 設定用途
sap_horizonMorning Horizonコンポーネントに組み込まれたデフォルトテーマ。
sap_horizon_darkEvening Horizon追加テーマにはアセットが必要です。
sap_horizon_hcb / sap_horizon_hcwHigh contrast black / whiteサポートされている高コントラストテーマは、それぞれ別のテーマです。
Assets.jsOne import per component library used追加テーマのアセットを登録します。
setTheme(name)@ui5/webcomponents-base/dist/config/Theme.js公開APIを使ってテーマを変更します。

Selectの仕様

ソース
名前 / ルール値 / 設定用途
ui5-select valueMatches option value or textoptionのselectedフラグと併用しないでください。
selectedOptionRead-only IOption選択されたoptionオブジェクトを読み取ります。
changeevent.detail.selectedOption確定した選択変更。
live-changeNavigation preview確定済みの業務上の選択として扱わないでください。
accessible-name-refID of visible labeling element表示されているテキストをコントロールに関連付けます。

入力とフィードバック

ソース
名前 / ルール値 / 設定用途
valueString数値入力は明示的に変換します。
inputEach keystrokeリアルタイムの概算合計に使用します。
changeEnter or focusoutキー入力ごとの入力とは異なります。
value-stateNone / Negative / Critical / Information / Positive現在のAPIにおける状態名。
slot="valueStateMessage"One root element特定のフィールドに関する説明。

メッセージストリップ

ソース
名前 / ルール値 / 設定用途
designInformation / Positive / Critical / Negativeアプリケーションの意味を伝えるメッセージ。
hide-close-buttonBoolean attribute必要な説明は常に表示しておきます。
default slotPrefer text contentメッセージストリップを複雑なパネルにしないでください。
03

SAP Fiori デザインシステム完全ガイド

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

DESIGN-sap-fiori.md

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

ガイドをダウンロード

SAP Fiori デザインシステムの設計とUI5の実装では対象範囲が異なります

具体的な導入例

SAP Fioriはエンタープライズ向けのユーザーエクスペリエンスを定義しています。このリファレンスでは、実装可能な購買依頼のサンプルにUI5 Web Componentsを採用しています。これらのコンポーネントをインストールしても、SAPUI5アプリケーション、Fiori elementsのフロアプラン、または認可されたSAPの業務トランザクションが作成されるわけではありません。

この OpenDesign ガイドから

メインのコンポーネントパッケージには、Input、Select、Buttonが含まれています。より高機能なFioriコンポーネントは別のパッケージにあります。この例で使用するモジュールだけをインポートすることで、導入の入口を明確にし、サポートされていない全コンポーネント向けCDNがあるかのような誤解を避けられます。

関連する仕様を確認する

SAP Fiori デザインシステム 汎用的な青系配色ではなく、Horizonの名前付きパラメーターを使用する

背景レイヤーと状態の役割

Morning Horizonでは、ページの背景にライトグレー、ベースとなる背景レイヤーに白を使用します。ブランドブルーとテキストカラーは別々のパラメーターです。Negative、Critical、Positive、Informativeは意味を表す役割であり、カードごとに使い回す装飾色の一覧ではありません。

このプレビューでは、準備段階の内容を情報ストリップで要約しています。準備は購買の承認ではないためです。商品価格、コストセンター、承認に関する注記は、この例のために作成したサンプルデータです。SAPが提供する業務ルールとして解釈しないでください。

関連する仕様を確認する

SAP Fiori デザインシステムのコンパクト設定は、スクリーンショットを小さくする設定ではありません

意味のある範囲に密度を適用する

UI5では、ルート、body、領域、またはコンポーネントにコンパクトマーカーを設定できます。data-ui5-compact-size属性とui5-content-density-compactクラスは、公開されている設定方法です。マーカーを動的に変更しても、別の密度APIは必要ありません。

操作に適している場合に限り、情報量の多いデスクトップ作業でコンパクトなコントロールを使用します。埋め込み表示ではコントロールと行の間隔を詰めますが、情報量は変えません。狭いレイアウトでは、すべてのラベルやボタンを縮小するのではなく、領域を縦に並べます。

html
<section data-ui5-compact-size>
  <ui5-input accessible-name="Request title"></ui5-input>
</section>

コードリファレンス

関連する仕様を確認する

SAP Fiori デザインシステム 72フォントファミリーと読み込み動作

フォントの利用可否もセットアップの一部です

Horizonテーマでは、フォールバックフォントより前に72と72fullを指定します。UI5には、デフォルトのフォント読み込みを無効にする方法と、フォントをローカルでホストする方法が記載されています。簡便なFontFace.cssエントリは実験的な機能のため、この方法を選ぶ場合はパスを固定し、再確認してください。

単体のプレビューでは、オフライン時のフォールバックとしてArialを明示的に使用します。ネイティブUI5の例では、公開されているfont-family変数を使用します。この違いにより、見た目が似たフォールバックのスクリーンショットを、SAPのフォントアセットが読み込まれた証拠と誤認することを防げます。

関連する仕様を確認する

SAP Fiori デザインシステム Selectには確定済みの変更と仮の変更があります

選択方法は一つに統一する

Selectのvalueは、Optionのvalueまたはテキストと一致します。SelectのvalueとOptionのselectedフラグを併用することは推奨されません。存在しない値を指定すると、選択されたoptionはありません。この例では実在するコストセンターのoptionを初期値に設定し、結果の準備時にSelectのvalueを読み取ります。

changeイベントには選択されたoptionが含まれます。live-changeは、option間を移動している間やEscapeキーで元に戻す際にも発生します。業務データには確定済みの選択を使い、仮の変更はプレビューに限って使用してください。

  • タグをレンダリングする前に、SelectとOptionを登録するモジュールをインポートします。
  • accessible-name-refを使って、表示されているコストセンターのラベルを関連付けます。
  • この例では、選択方法をvalueだけに統一します。

関連する仕様を確認する

SAP Fiori デザインシステム 数値入力にもアプリケーション側の検証が必要です

値の状態とメッセージはセットで扱う

入力タイプがNumberでも、Inputのvalueは文字列です。サンプル価格を掛ける前に数値に変換し、有限の整数であることと範囲を確認します。空の値を0として受け入れてはいけません。ここで使う現在の意味的なエラー状態はNegativeであり、Errorという列挙値を独自に作るものではありません。

valueStateMessageスロットには、具体的な説明を含むルート要素を一つ指定します。リアルタイムの合計はinputイベントを監視し、準備済みの要約はユーザーがアクションを実行したときにのみ更新します。

  1. コンポーネントからタイトルと数値文字列を読み取ります。
  2. このサンプルでは、タイトルが入力されていることと、数量が1から20までの整数であることを必須にします。
  3. 該当するコントロールをNegativeに設定し、入力値は保持します。
  4. 両方の条件を満たした場合にのみ、要約を準備します。

関連する仕様を確認する

SAP Fiori デザインシステム 結果は説明的に、ローカルにとどめる

簡潔な結果の表示にはストリップを使う

MessageStripは意味を表すデザインと閉じる操作に対応しています。必要な説明を常に表示するには、閉じるボタンを非表示にできます。デフォルトスロットにはテキストを設定し、フォームやダッシュボードのように拡張しないでください。

要約には、タイトル、数量、サンプルの合計額、コストセンターが含まれます。最後の文で、何も送信されていないことを説明します。実際のサービスでは、このローカルな処理を、認可された依頼と実際のバックエンド状態を示す応答に置き換えます。

関連する仕様を確認する

SAP Fiori デザインシステム テーマアセットとモジュール登録

テーマを選択するには、対応するリソースが必要です

Morning Horizonはドキュメントで定義されているデフォルトテーマで、コンポーネントに組み込まれています。追加テーマを使うには、使用する各ライブラリのAssets.jsモジュールが必要です。その後、setThemeでEvening Horizonまたはいずれかの高コントラストバリアントを選択できます。読み込み済みのリソースを確認せずにダークテーマの名前を指定しても、統合が完了したことにはなりません。

提供されたエントリーポイントは、マークアップを作成する前に各カスタム要素を登録します。Viteは動的なESインポートとJSONリソースを処理します。ネイティブプロジェクトをビルドし、オフラインのHTMLサンプルとは別に、フォント、テーマの読み込み、キーボード操作を確認してください。

関連する仕様を確認する

SAP Fiori デザインシステムのコンポーネント例

完全なスタンドアロンのインタラクティブ見本

ドキュメント全体をindex.htmlとして保存し、ブラウザーで開いてください。Morning HorizonのパラメーターとUI5のフォーム構成を、オフラインでHTML向けに再現しています。ネイティブパッケージの例は別途掲載しています。

html
<!doctype html><html lang="en"><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><title>Fiori purchase request</title><style>
*{box-sizing:border-box}body{margin:0;color:#131e29;background:#f5f6f7;font:14px/1.5 Arial,sans-serif}header{background:white;padding:12px 24px;display:flex;gap:16px;align-items:center;border-bottom:1px solid #d5dadd}.symbol{width:32px;height:32px;display:grid;place-items:center;background:#0070f2;color:white;border-radius:8px;font-weight:bold}header strong{font-size:16px}header span:last-child{margin-left:auto;color:#556b82;font-size:12px}main{max-width:1100px;margin:auto;padding:24px}.objecthead{display:flex;justify-content:space-between;gap:20px;align-items:start;margin-bottom:24px}h1{font-size:28px;line-height:36px;margin:0 0 6px}h2{font-size:18px;margin:0 0 16px}.subtitle{color:#556b82;margin:0}.draft{background:#e1f4ff;color:#0032a5;padding:6px 12px;border-radius:6px}.layout{display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:24px}.panel{background:white;border-radius:12px;padding:24px;border:1px solid #d5dadd}label{display:block;margin-bottom:6px;color:#556b82}input,select{width:100%;height:44px;border:1px solid #758ca4;border-radius:8px;padding:8px 12px;background:#fff;font:inherit;color:inherit}input:focus,select:focus,button:focus-visible{outline:2px solid #0032a5;outline-offset:3px}.fields{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-bottom:24px}.fields>div:first-child{grid-column:1/-1}.line{border-top:1px solid #d5dadd;padding-top:20px;display:grid;grid-template-columns:64px minmax(0,1fr) auto;gap:16px;align-items:center}.monitor{background:#e1f4ff;border:2px solid #556b82;height:42px;border-radius:4px;position:relative;margin-bottom:12px}.monitor:after{content:'';position:absolute;bottom:-12px;left:25%;width:50%;height:10px;border-bottom:3px solid #556b82;border-left:8px solid transparent;border-right:8px solid transparent}.line strong{display:block}.line small{color:#556b82}.money{font-size:24px;font-weight:600;white-space:nowrap}.unit{font-size:12px;color:#556b82}.total{display:flex;justify-content:space-between;padding-top:24px;font-weight:600}.controls{display:flex;gap:12px;flex-wrap:wrap;margin-top:24px}button{border:1px solid #0070f2;background:white;color:#0057b8;padding:10px 16px;border-radius:8px;font:600 14px/20px Arial;cursor:pointer}button.primary{background:#0070f2;color:white}button:hover{filter:brightness(.95)}.steps{list-style:none;padding:0;margin:0;counter-reset:step}.steps li{position:relative;padding:0 0 24px 36px;color:#556b82}.steps li:before{counter-increment:step;content:counter(step);position:absolute;left:0;top:0;border:1px solid #758ca4;border-radius:50%;width:24px;height:24px;text-align:center;background:white}.steps strong{display:block;color:#131e29}.steps li:first-child:before{background:#e1f4ff;color:#0057b8;border-color:#0070f2}.strip{margin-top:24px;background:#e1f4ff;border:1px solid #0070f2;padding:12px 16px;border-radius:8px}.strip.error{background:#ffeaf4;border-color:#aa0808;color:#aa0808}.foot{font-size:12px;color:#556b82;margin-top:24px}.compact input,.compact select{height:32px;padding:4px 8px}.compact .fields{gap:12px}.compact .panel{padding:16px}.compact .line{padding-top:12px}.compact button{padding:6px 12px}.hint{font-size:12px;color:#556b82;margin:6px 0 0}@media(max-width:700px){main{padding:20px 16px}.layout{grid-template-columns:1fr}.fields{grid-template-columns:1fr}.objecthead{display:block}.draft{display:inline-block;margin-top:12px}.line{grid-template-columns:48px minmax(0,1fr)}.line>.money{grid-column:2}.panel{padding:20px}header{padding:12px 16px}}
</style><header><span class="symbol">P</span><strong>Procurement workspace</strong><span>Sample environment</span></header><main><div class="objecthead"><div><h1>Purchase request</h1><p class="subtitle">PR-DRAFT · Workplace equipment</p></div><span class="draft">Draft · not submitted</span></div><div class="layout"><section class="panel"><h2>Request details</h2><form id="form" novalidate><div class="fields"><div><label for="title">Request title</label><input id="title" placeholder="e.g. Studio display upgrade" aria-describedby="notice"></div><div><label for="team">Cost center</label><select id="team"><option value="Design · CC-240">Design · CC-240</option><option value="Research · CC-360">Research · CC-360</option></select></div><div><label for="qty">Monitor quantity</label><input id="qty" type="number" min="1" max="20" step="1" value="2" aria-describedby="qty-help notice"><p id="qty-help" class="hint">Whole number from 1 to 20.</p></div></div><div class="line"><div class="monitor" aria-hidden="true"></div><div><strong>27-inch studio monitor</strong><small>Equipment · Item 100240</small></div><div class="money">€320 <span class="unit">/ unit</span></div></div><div class="total"><span>Estimated line total</span><output id="total">€640</output></div><div class="controls"><button class="primary">Prepare summary</button><button type="button" id="density" aria-pressed="false">Compact controls</button></div></form></section><aside class="panel"><h2>Request path</h2><ol class="steps"><li><strong>Prepare draft</strong>Check quantities and cost center.</li><li><strong>Review summary</strong>Confirm the local request details.</li><li><strong>Submit to service</strong>Not connected in this preview.</li></ol><p class="hint">The review path and price are illustrative application data.</p></aside></div><div class="strip" id="notice" role="status">Complete the draft before preparing the summary.</div><p class="foot">HTML interpretation of SAP Morning Horizon · UI5 native integration provided in guide · No SAP transaction created</p></main><script>
const $=id=>document.getElementById(id);function amount(){const n=Number($('qty').value);return Number.isInteger(n)&&n>=1&&n<=20?n:null}$('qty').oninput=()=>{$('total').textContent=amount()===null?'Invalid quantity':'€'+amount()*320};$('density').onclick=()=>{const active=document.body.classList.toggle('compact');$('density').setAttribute('aria-pressed',String(active));$('density').textContent=active?'Cozy controls':'Compact controls'};$('form').onsubmit=e=>{e.preventDefault();const title=$('title').value.trim(),n=amount();$('title').setAttribute('aria-invalid',String(!title));$('qty').setAttribute('aria-invalid',String(n===null));$('notice').classList.toggle('error',!title||n===null);if(!title||n===null){$('notice').textContent=!title?'Enter a title for this request.':'Use a whole quantity from 1 to 20.';(!title?$('title'):$('qty')).focus();return}$('notice').textContent='Local summary: '+title+' · '+n+' monitors · €'+n*320+' · '+$('team').value+'. Nothing submitted.'};
</script></html>

コードリファレンス

  • このHTMLドキュメントの密度切り替えは独自の再現です。UI5のエントリーポイントでは、実際のコンパクト表示マーカー、登録済みカスタム要素、Horizonアセットを示しています。

数量を検証するHorizon購買依頼

Input、Select/Option、Button、MessageStripを組み合わせて、ローカルの購買依頼概要を作成します。キー入力ごとの合計は、作成済みの結果とは別に扱います。

JavaScript
// main.js in a Vite vanilla project. index.html contains <div id="app"></div>.
import '@ui5/webcomponents/dist/Button.js';
import '@ui5/webcomponents/dist/Input.js';
import '@ui5/webcomponents/dist/Select.js';
import '@ui5/webcomponents/dist/Option.js';
import '@ui5/webcomponents/dist/MessageStrip.js';
import '@ui5/webcomponents/dist/Assets.js';
import {setTheme} from '@ui5/webcomponents-base/dist/config/Theme.js';
setTheme('sap_horizon');
document.querySelector('#app').innerHTML = `
  <main style="max-width:800px;margin:auto;padding:24px;font-family:var(--sapFontFamily)">
    <h1>Purchase request</h1>
    <p>Prepare a local requisition summary. No SAP transaction is created.</p>
    <p id="request-label">Request title</p>
    <ui5-input id="title" accessible-name-ref="request-label" required>
      <span slot="valueStateMessage">Enter a title for this request.</span>
    </ui5-input>
    <p id="team-label">Cost center</p>
    <ui5-select id="team" accessible-name-ref="team-label" value="design">
      <ui5-option value="design">Design · CC-240</ui5-option>
      <ui5-option value="research">Research · CC-360</ui5-option>
    </ui5-select>
    <p id="qty-label">Monitor quantity</p>
    <ui5-input id="qty" type="Number" accessible-name-ref="qty-label" value="2">
      <span slot="valueStateMessage">Use a whole number from 1 to 20.</span>
    </ui5-input>
    <p id="total">Estimated line total: €640</p>
    <ui5-button id="prepare" design="Emphasized">Prepare summary</ui5-button>
    <ui5-button id="density">Toggle compact controls</ui5-button>
    <ui5-message-strip id="notice" design="Information" hide-close-button style="display:block;margin-top:24px">
      Complete the draft before preparing the summary.
    </ui5-message-strip>
  </main>`;
const title=document.querySelector('#title'),qty=document.querySelector('#qty');
qty.addEventListener('input',()=>{
  const n=Number(qty.value);
  document.querySelector('#total').textContent=Number.isInteger(n)&&n>=1&&n<=20
    ? `Estimated line total: €${n*320}` : 'Enter a valid quantity to calculate the total.';
});
document.querySelector('#prepare').addEventListener('click',()=>{
  const n=Number(qty.value), validTitle=!!title.value.trim(), validQty=Number.isInteger(n)&&n>=1&&n<=20;
  title.valueState=validTitle?'None':'Negative';qty.valueState=validQty?'None':'Negative';
  const notice=document.querySelector('#notice');
  if(!validTitle||!validQty){notice.design='Negative';notice.textContent='Correct the request title or quantity before continuing.';return;}
  notice.design='Information';
  notice.textContent=`Local summary: ${title.value.trim()}, ${n} monitors, €${n*320}, ${document.querySelector('#team').value}. Nothing submitted.`;
});
document.querySelector('#density').addEventListener('click',()=>document.body.toggleAttribute('data-ui5-compact-size'));

コードリファレンス

  • 数量ルール、商品単価320ユーロ、原価センターは、SAPの方針ではなく、このアプリケーション用に作成したデータです。
  • UI5 Web ComponentsはFioriのパターンを実装する方法のひとつです。完全なSAPUI5アプリケーションでも、Fiori elementsのフロアプランでもありません。
  • SAPのトランザクションは作成されません。オフラインプレビューの検証は、ネイティブ依存関係のビルドを意味するものではありません。
04

SAP Fiori デザインシステムのエージェント設定

実装の出発点

Viteのmain.jsをサンプル全体で置き換えてください。UI5のドキュメントではESモジュールバンドラーが必要とされています。すべてのコンポーネントに対応する公式CDNは提供されていません。

bash
npm create vite@latest fiori-request -- --template vanilla
cd fiori-request
npm install
npm install @ui5/webcomponents @ui5/webcomponents-base
npm run dev

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

AI エージェント用プロンプト
Horizonテーマを使い、UI5 Web ComponentsのInput、Select、Button、MessageStripでFioriの購買依頼を構成します。数値の検証、正しいNegative value state、明示的なコンパクト表示、ローカルの概要表示の範囲を正確に保ってください。
05

SAP Fiori デザインシステムの情報源と適用範囲

独立したOpenDesignの参考例です。UI5 Web Componentsの使用例であり、SAPの本番トランザクションや完全なFiori elementsアプリケーションではありません。