sap-fiori-guidelines

SAP Fiori デザインガイドライン

公式の SAP デザインシステム標準に従って SAP Fiori アプリケーションを設計、構築するための包括的なガイダンスです。

このスキルを使用する場面

• SAP Fiori アプリケーションを設計または構築する
• SAPUI5 または UI5 Web Components を実装する
• SAP のエンタープライズ UX パターンに従う
• SAP アプリケーションで使用する UI 要素を選択する
• ナビゲーション、メッセージ、データ可視化を実装する
• アクセシビリティとインクルーシブデザインを確保する
• 色、タイポグラフィ、ビジュアルスタイルを適用する
• AI 搭載機能、Joule との統合、またはガイド付きプロンプトを設計する

基本原則

SAP Fiori は、次の 5 つの原則に基づいています。

1. 役割ベース - 特定のユーザーの役割とタスクに合わせて設計されています
2. 適応性 - デバイスや画面サイズを問わず動作します
3. 一貫性 - すべての SAP アプリケーションで一貫したエクスペリエンスを提供します
4. シンプル - 重要なタスクに焦点を当て、複雑さを軽減します
5. 魅力的 - 魅力的で直感的なユーザーエクスペリエンスを提供します

テクノロジーの選択肢

テクノロジー	用途
SAPUI5	SAP Fiori アプリケーション全般、SAP BTP、S/4HANA
UI5 Web Components	フレームワークに依存しない、React/Vue/Angular との統合
SAP Fiori Elements	OData サービスを使用するメタデータ駆動型アプリ

リファレンスドキュメント

タスクに応じて、適切なリファレンスファイルを参照してください。

UI 要素

リファレンス	内容
references/ui-actions.md	ボタン、リンク、トグルボタン、メニューボタン
references/ui-inputs.md	入力フィールド、セレクト、チェックボックス、ラジオボタン、スライダー、日付／時刻ピッカー、フィルターバー
references/ui-containers.md	パネル、カード、ダイアログ、ポップオーバー、ツールバー、フォーム、シェルバー、ユーザーメニュー、通知センター
references/ui-display.md	アバター、進行状況インジケーター、ビジーインジケーター、イラスト付きメッセージ
references/ui-lists-tables.md	レスポンシブテーブル、グリッドテーブル、分析テーブル、グリッドリスト、リスト
references/ui-navigation.md	アイコンタブバー、セグメントボタン、サイドナビゲーション、シェル検索
references/ui-messages.md	メッセージストリップ、メッセージストリップ Web コンポーネント
references/ui-ai.md	AI ボタン、AI 通知、AI ライティングアシスタント、AI 確認、ガイド付きプロンプト、クイックプロンプト、再生成、ホームページバナー
references/ui-upload.md	テーブルプラグイン付きアップロードセット

ページタイプとフロアプラン

リファレンス	内容
references/page-types.md	オブジェクトページ、リストレポート、分析リストページ、概要ページ、動的ページレイアウト、ページヘッダー

基盤

リファレンス	内容
references/foundations-visual.md	色、タイポグラフィ、アイコノグラフィ、テーマ設定、コンテンツ密度
references/foundations-interaction.md	状態、カーソル、スクリーンリーダーのサポート
references/foundations-writing-and-wording.md	UX ライティング、UI テキストのガイドライン
references/foundations-best-practices.md	ナビゲーション、メッセージ、オブジェクトの処理、アクションの配置
references/foundations-ai-and-joule-design.md	AI デザインパターン、Joule アシスタント、状況への対応、AI ガイドライン
references/foundations-integration-and-services.md	Fiori ラウンチパッド、統合パターン

SAP Fiori Elements と S/4HANA

リファレンス	内容
references/fiori-elements.md	スマートテンプレート、リストレポート、オブジェクトページ、テーブル機能、AI 入力支援
references/sap-s4hana.md	S/4HANA 固有のデザイン：ナビゲーションメニュー、製品ホームページ、AI によるエラーの説明

クイックリファレンス

ボタンの種類と用途

種類	用途
強調	主要なアクション - ページ／ダイアログごとに 1 つ
デフォルト／ゴースト	二次的なアクション
透明	ツールバーのアクション、強調度が低いアクション
承認（緑）	肯定的なセマンティックアクション（承認、受け入れ）
拒否（赤）	否定的なセマンティックアクション（拒否、削除）

セマンティックカラー

色	意味	用途
ニュートラル	デフォルトの状態	通常の UI 要素
ポジティブ（緑）	成功、良好な状態	承認、完了
クリティカル（オレンジ）	警告	注意が必要
ネガティブ（赤）	エラー、不良な状態	却下、エラー
情報（青）	情報の強調表示	中立的な情報

メッセージの種類

種類	用途
エラー	タスクの完了を妨げ、ユーザーの操作が必要
警告	問題の可能性があるが、ユーザーは続行可能
成功	完了した操作を確認
情報	中立的な情報

ナビゲーションパターン

パターン	使用する場面
ドリルダウン	戻るナビゲーションでオブジェクトの詳細に移動する
フルスクリーン	現在のビュー全体を置き換える
フレキシブルカラムレイアウト	列を使ったマスター／詳細ビュー
ダイアログ／ポップオーバー	すばやく実行するタスク向けの一時的なオーバーレイ

AI コンポーネント

コンポーネント	使用する場面
AI ボタン	AI を活用したアクションを実行する
AI 利用表示	AI の貢献を透明性をもって示す
ガイド付きプロンプト	ユーザーが AI へのリクエストを作成するのを支援する
クイックプロンプト	AI とのやり取りに使える定義済みのショートカットを提供する
再生成	ユーザーが AI 生成コンテンツを新たにリクエストできるようにする
AI ライティングアシスタント	テキスト入力中の AI 支援を提供する
ローカル AI 通知	デバイス上での AI 処理についてユーザーに知らせる

実装チェックリスト

Fiori アプリケーションを構築する際は、次の点を確認してください。

• ページ／ダイアログごとに強調表示するボタンは 1 つにする
• ステータス表示に適切なセマンティックカラーを使用する
• メッセージポップオーバーでメッセージを処理する
• アクセシブルなラベルと ARIA 属性を設定する
• 画面サイズに応じたレスポンシブレイアウトを実装する
• 一貫性のあるナビゲーションパターンを使用する
• 値の状態を使ってフォームを検証する
• 非同期処理にはローディングインジケーターを表示する
• 適用可能な場合、AI 機能は Joule のデザインパターンに従う

主なガイドライン

ボタン

• プライマリー、セカンダリー、セマンティックアクションにはテキストボタンを使用する
• アイコンのみのボタンは、誰もが理解できる比喩表現に限って使用する
• アイコンボタンには必ずツールチップを設定する
• ボタンのテキストには命令形の動詞を使用する（保存、編集、作成）

フォーム

• 関連するフィールドを論理的にグループ化する
• 適切なフィールドラベルを使用する（常に表示する）
• 値の状態を使って入力エラーを表示する
• 明確なエラーメッセージを表示する

テーブル

• ほとんどの場合、レスポンシブテーブルを使用する
• 複雑なデータ分析にはグリッドテーブルを使用する
• 集計が必要な場合は分析テーブルを使用する
• 列ヘッダーを必ず表示する

メッセージ

• 複数のメッセージにはメッセージポップオーバーを使用する
• 割り込みを伴うエラーに限りメッセージボックスを使用する
• 一時的な成功確認にはトーストを使用する
• フォームフィールドにはインライン検証を使用する

AI の統合

• AI が実行するアクションには AI ボタンを使用する
• 透明性を確保するため、AI 利用表示を行う
• ユーザーが AI とやり取りしやすいよう、ガイド付きプロンプトを提供する
• デバイス上で処理が行われる場合は、必ずローカル AI 通知を含める
• AI を活用したすべての機能で、責任ある AI の原則に従う

外部リソース

• SAP Fiori デザインガイドライン：https://experience.sap.com/fiori-design-web/
• SAPUI5 SDK：https://ui5.sap.com/
• UI5 Web Components：https://sap.github.io/ui5-webcomponents/

---

特定のコンポーネントを実装する際は、詳細なガイダンスや例を確認するため、必ず該当するリファレンスファイルを読んでください。