はじめに
Fioriアプリを新規に作るとき、必ず最初に決めなければならないのが「Freestyleで作るか、Fiori Elementsで作るか」です。これを間違えると、後から軌道修正が非常に重くなります。
Freestyleは自由度が高い反面、実装工数が増えます。Fiori Elementsは工数が激減する反面、デザインの自由度は制限されます。この記事では4つの判断軸でどちらを選ぶべきかを整理します。
それぞれの概要
Freestyle UI5
SAPUI5の標準コントロールを使って、XML ViewとControllerを自分で書いていくやり方です。HTMLを書くWebアプリ開発とほぼ同じ感覚で、どんな画面でも自由に作れます。
基礎はSAPUI5基礎を参照してください。
Fiori Elements
CDSアノテーションから画面を自動生成する方式です。実装は基本的にアノテーションの付与とmanifest.json設定のみで完結します。詳細はFiori Elements全体像を参照してください。
4つの判断軸
1. 開発工数
Fiori Elementsは「画面1個」の構築工数がFreestyleの1/3〜1/5になります。アノテーションを書くだけで、テーブル・フィルタ・詳細画面・ルーティングがすべて自動生成されるからです。
10画面のアプリならFreestyleで2ヶ月、Fiori Elementsで2〜3週間、というのが現場感覚です。
2. UI自由度
独自のレイアウト・独自のインタラクションが必要ならFreestyle一択です。Fiori Elementsは定義済みのFloorplan（List Report、Object Page等）に縛られるため、これらに当てはまらないUIは作れません。
例：ドラッグ&ドロップで並べ替え、ゲーム的なインタラクション、独自のタイル配置など。
3. メンテナンス性
長期的にはFiori Elementsが有利です。SAPがフレームワーク側を進化させるため、新しいUX改善（Horizonテーマ対応、アクセシビリティ強化など）が自動で反映されます。Freestyleは自分でメンテする必要があります。
4. Clean Core適合度
Fiori ElementsはCDS+manifest.jsonで設定が完結し、SAP標準テンプレートを使うためClean Core（詳細はClean Core戦略）の観点で有利です。Freestyleはカスタムコードが増える傾向があるため、拡張ガバナンスが必要になります。
選択フロー
flowchart LR
S[新規アプリ] --> Q1{標準Floorplanに
当てはまる？}
Q1 -->|Yes| Q2{独自UIが
必要？}
Q1 -->|No| F["Freestyle UI5"]
Q2 -->|No| FE["Fiori Elements"]
Q2 -->|少しだけ| FEE["Fiori Elements
+ Extension Point"]
Q2 -->|多い| F迷ったらまずはFiori Elementsを試し、どうしても無理ならFreestyleに切り替える、が実務的な判断順序です。
比較表
| 観点 | Freestyle UI5 | Fiori Elements |
|---|---|---|
| 開発工数 | 大 | 小 |
| UI自由度 | 高 | 低（定型Floorplan） |
| コード量 | 多い | ほぼゼロ |
| テスト範囲 | アプリ全体 | アノテーションとCDSのみ |
| メンテ | 自前 | SAPが改善 |
| Clean Core適合度 | 工夫必要 | 高 |
| 学習コスト | UI5全般 | アノテーション習得 |
| デバッグ | JS/XMLデバッグ可能 | ブラックボックス化 |
ハイブリッドという選択肢
実務では「ベースはFiori Elementsで作り、特殊な画面だけFreestyle」という混在も一般的です。1つのアプリ内でも、Object PageのカスタムセクションにFragment/Custom Controlを差し込むことで部分Freestyle化ができます。
詳細はUI5 フラグメント・カスタムコントロールも参照してください。
よくある疑問
Q. Fiori Elementsで作って、途中からFreestyleに切り替えられますか？
A. 完全な変換は困難です。画面構造がアノテーションベースなので、Freestyleに移行するには画面コードを1から書き直すことになります。
Q. 逆にFreestyleからFiori Elementsは？
A. これも大工事です。最初の選択が重要なので、PoCで両方を比較するのがおすすめです。
Q. パフォーマンスはどちらが良いですか？
A. 大差ありません。Fiori Elementsも実態はUI5コントロールで動作しているためです。大量データのテーブル表示などはCDSビュー側の設計が性能を決めます。
Q. Fiori Elementsの学習素材は？
A. SAP Help PortalとSAP Learning（詳細はSAP公式ドキュメント完全ガイド）に公式チュートリアルがあります。
まとめ
- Freestyle UI5は自由度が高いがコスト大、Fiori Elementsは自由度が低いがコスト小
- 判断軸は「開発工数 / UI自由度 / メンテ性 / Clean Core適合度」の4つ
- 迷ったらFiori Elementsから始める、無理ならFreestyleに切り替え
- ハイブリッド（Fiori Elements + Extension Point）という中間選択肢もある
- 途中変更は困難なので、プロジェクト初期にPoCで比較するのが重要
次はSAP Build Apps入門で、3つ目の選択肢「ノーコード開発」を見ていきます。
FreestyleとFiori Elementsの使い分けを肌感覚で掴むには、両方の要素が含まれるプロジェクトを実際に作ってみるのが一番です。UI5アプリの構築からCAPバックエンド、BTPデプロイまでを一貫して体験できます。