SAP Fiori Design Guidelinesの読み方｜Design System活用ガイド

はじめに

Fioriアプリを設計するとき、「ボタンはどこに置く？」「リストのヘッダはどういうフォーマット？」「エラーメッセージはどう出す？」といった細かい判断が無数に出てきます。これを毎回センスで決めていくと、アプリ間の一貫性が崩れ、Fioriが目指す「どのSAPアプリも同じ感覚で使える」という理想が壊れてしまいます。

この問題を解決するためにSAPが公開しているのが SAP Fiori Design Guidelines です。設計判断の拠り所になる公式ガイド集で、カスタムアプリを作るときも標準アプリをカスタマイズするときも、ここを参照するのが正解です。

Design Guidelinesを知らずに独自デザインを走らせると、後からUXレビューで全面手戻りになるリスクがあります。逆に、ガイドラインを押さえた設計は、ユーザー受け入れテストでのフィードバックが圧倒的に少なくなります。

この記事では、Design Guidelinesの全体構成と、現場での使い方を整理します。

Design Guidelinesの全体構成

Design Guidelinesは大きく5つのカテゴリに分かれています。

1. Foundations（基盤）

色・タイポグラフィ・アイコン・スペーシング・グリッドといった、デザインの最小単位を定義しています。Horizonテーマの色コード一覧、フォントサイズの階層（Small/Medium/Large）、標準アイコンライブラリへのリンクなどがここにあります。

why so：すべての画面で統一された見た目を作るには、最小単位の揃え方から決める必要があるからです。so what：カスタムCSSでFioriアプリの色を勝手に変えると、ここで定義された基盤が崩れて一貫性が失われます。

2. Layouts（レイアウト）

画面全体の骨組みに関するガイドです。Responsive Grid、Flexible Column Layout（左右2カラム表示で詳細と一覧を並べる）、Dynamic Page Layout（ヘッダが可変する標準レイアウト）などが整理されています。

現場でよく使うのは Dynamic Page Layout と Flexible Column Layout の2つです。前者はSaPUI5標準のページコンテナで、ヘッダ・サブヘッダ・コンテンツ・フッタの構造を提供します。後者はマスタ/詳細型UIで頻繁に使われます。

3. Controls（コントロール）

ボタン・入力フィールド・テーブル・リスト・ダイアログといった個別のUI部品のガイドです。SAPUI5フレームワークで提供される各コントロールに対応しており、「このコントロールはいつ使うべきか」「避けるべき組み合わせは何か」が書かれています。

たとえば「テーブルに表示する行数が100を超える場合はResponsive TableではなくGrid Tableを使え」「編集モードと表示モードの切り替えはEdit Buttonで」といった具体的な指針がここにあります。

4. Patterns（パターン）

複数のコントロールを組み合わせた典型的なUI表現のベストプラクティスです。フィルタバー、ワークリストパターン、Wizardパターン、Side Panelパターンなどが含まれます。

why so：同じ業務要件に対して毎回違う画面構造を組むと、ユーザーの学習コストが増えるからです。so what：「絞り込み検索のUIはフィルタバーパターンに揃える」「多ステップの入力フォームはWizardパターン」のように、パターンごと選ぶことで設計判断が速くなります。

5. Floorplans（フロアプラン）

1画面全体の「型」です。List Report、Object Page、Analytical List Page、Overview Page、Worklistの5つが標準フロアプランとして定義されており、これはFiori Elementsのテンプレートと完全に対応しています。

Fiori Elementsを使って開発する場合、フロアプランを選ぶことがそのまま開発テンプレート選定になります。Freestyle開発でも、フロアプランを意識して画面構造を作ると一貫性が保てます。

Design Guidelinesの使い方

flowchart LR
  R[要件
業務画面を設計したい] --> F{どんな画面？}
  F -->|一覧+詳細| LR["List Report
フロアプラン"]
  F -->|データ分析| ALP["Analytical
List Page"]
  F -->|KPI概要| OVP["Overview Page"]
  F -->|オブジェクト詳細| OP["Object Page"]
  LR --> C["Controls参照"]
  ALP --> C
  OVP --> C
  OP --> C
  C --> P["Patterns参照"]
  P --> F2["Foundations確認
色・間隔・文字"]

実践の順序はこのフローが典型です。まずフロアプランを選び、次にその中で使うコントロールを決め、コントロール同士の組み合わせ方（パターン）を確認し、最後に色やフォントといった基盤が標準に沿っているかチェックする、という流れです。

現場での使い方：よくあるシーン

シーン1：カスタム入力画面を作る

要件：「取引先からの問い合わせ情報を入力する画面を作ってほしい」

• フロアプラン：Wizard Pattern（複数ステップ）または Object Page（1ページに集約）
• コントロール：Input、Select、DatePicker、TextArea
• パターン：Form Layoutで入力項目を揃える、必須項目の表示は「*」ではなくValueState=Warningで
• Foundations：フィールド間のスペーシングは標準Grid（8pxベース）

シーン2：承認アプリを作る

要件：「マネージャーが申請を承認/却下するアプリを作ってほしい」

• フロアプラン：Worklist Floorplan（複数の未処理タスクを一覧表示）
• コントロール：Responsive Table、Dialog（承認理由入力用）
• パターン：Message Popoverでエラーをまとめて表示
• アプリタイプ：TransactionalにするかFact Sheetにするかは、詳細画面で編集するか表示のみかで分ける

シーン3：ダッシュボードを作る

要件：「今月の売上・在庫・問い合わせ件数を一画面で見たい」

• フロアプラン：Overview Page（SAP Smart Business KPIカードを並べる）
• コントロール：KPI Tile、Analytical Card、Micro Chart
• パターン：Interactive Card Pattern（カードをクリックで詳細アプリへ遷移）
• 裏側：HANA CDSビューとAnalytical Annotationで簡単に構築可能

アクセシビリティとダークモード

Design Guidelinesにはアクセシビリティ（a11y）のセクションもあり、スクリーンリーダー対応、キーボード操作、コントラスト比など、公共機関や大企業で必須となる要件が整理されています。日本でも障害者差別解消法との関連で重要性が増しているため、カスタムアプリ開発時には必ず確認しましょう。

また、Horizonテーマにはダークモードのカラーパレットも定義されています。業務時間外や工場・倉庫現場での使用を想定する場合、ダークモード対応をスコープに含めるかは要件確認が必要です。

開発フレームワークとの関係

Design Guidelinesは「設計の指針」であり、これを実装に落とすのが SAPUI5 と Fiori Elements です。ガイドラインに書かれているコントロール・パターン・フロアプランは、ほぼ1対1でUI5の標準コントロール・Fiori Elementsのテンプレートに対応しています。

つまり「Guidelinesに従う = SAP標準コントロールを素直に使う」ことに近く、独自実装を増やせば増やすほどガイドラインから外れていきます。Clean Core戦略（詳細はClean Core戦略）の観点からも、標準に寄せる設計が推奨されます。

よくある疑問

Q. Design Guidelinesに従わないとどうなりますか？

A. 技術的には動きますが、ユーザー受け入れテストで「他のアプリと操作感が違う」「慣れない」というフィードバックが増えます。長期的にはメンテナンスコストも膨らみやすくなります。

Q. 日本語ドキュメントはありますか？

A. 公式ガイドラインは英語が中心です。日本語化は進んでいないため、英語のまま読む前提で準備してください。翻訳サービスを併用しても内容は十分理解できます。

Q. モバイル専用のガイドラインは別ですか？

A. 同じガイドラインの中に「SAP Fiori for iOS」「SAP Fiori for Android」という別セクションがあり、ネイティブアプリ向けの追加規約が記載されています。モバイル開発時はFiori for Mobileと併せて読みましょう。

Q. どのくらいの頻度で更新されますか？

A. 年数回、SAPUI5のメジャーバージョン更新に合わせて改訂されます。新コントロールが追加されたり、非推奨コントロールが明示されたりするので、四半期に1度はチェックするのがおすすめです。

まとめ

• SAP Fiori Design GuidelinesはFoundations・Layouts・Controls・Patterns・Floorplansの5カテゴリで構成されている
• 設計の順序は「フロアプラン選定 → コントロール選定 → パターン確認 → Foundations準拠チェック」
• Fiori ElementsやUI5標準コントロールはガイドラインと1対1で対応しており、標準に寄せるほどガイドラインに従った設計になる
• アクセシビリティ・ダークモード対応もガイドラインに組み込まれている
• カスタムアプリ設計時は必ず一次情報として参照する習慣をつける

次はSAPUI5基礎で、Guidelinesを実装に落とすためのフレームワークを見ていきましょう。

Design Guidelinesに沿ったアプリを実際に作ってみると、ガイドラインの各規約がどう画面に反映されるかが体感で分かります。UI5アプリの構築からBTPデプロイまでを約15時間で体験できるハンズオン講座です。