Fiori Design Guielinesとは
SAP Fioriは、デザイン思想にかなりこだわりがあるようです。
FioriのアプリとはFioriのDesign Guielineを踏襲したアプリのことであり、そうでないアプリはただのFiori-likeなアプリだ、とOpen SAPのコースで言っていました。
なので、Fiori Appの開発をするにあたってDesign Guielineを知っておくことは不可欠です。
今回はFiori Design Guidelinesから基礎となる部分を1ページにまとめます。
※私自身はFioriの開発にかかわったことはなく、上記ページの情報およびOpen SAPのコースの内容にもとづいた記載となります。
5つの原則
SAP Fioriのデザイン哲学は以下の5つの原則にもとづいています。
1. Role-based（ロールベース）
その人の役割に応じて必要な機能を提供すること
2. Delightful（使って楽しい）
わかりやすい、ストレスがない、使って楽しいこと
3. Coherent（一貫性）
すべてのアプリは同じ原則に従って作られること
4. Simple（シンプル）
トレーニングを受けなくても使えるぐらい簡単であること
5. Adaptive（どんな環境にも適応できる）
どんな場所、デバイスでも使えること
開発サイクル
SAP Fioriの開発サイクルでは、開発の前工程に重点が置かれています。
前工程はDiscoverとDesignという2つのフェーズに分けられます。
Design-Led Development Processより引用
Discoverフェーズ
ユーザを理解するフェーズです。ユーザはどのような作業をしていて、どんな要求があるのかに着目します。
このフェーズでは実際に現場を訪れてユーザにインタビューしたり、異なるステークホルダーを招いたデザインシンキングのワークショップを開催したりします。
「ペルソナ」という概念もここで登場します。ペルソナとは、実際のデータにもとづく架空の人物のことです。その人がどんなバックグラウンドを持ち、どんな作業をどのような状況で行うのかを具体的に想定します。
ペルソナを中心にに議論すると、メンバーの間で要求に対する共通の理解が深まります。
Designフェーズ
要求をもとに最初のプロトタイプを作ります。
出来上がったものをユーザに評価してもらいます。
Designフェーズで活用できるツールとしてBuildがあります。
Developフェーズ
開発、テストを行います。
このフェーズの成果物と、前工程の結果の整合性が取れていることが重要です。
（ずれがある場合は、前工程に戻って整合をとることが望ましい）
Mobile First
Mobile、すなわちスマートフォン用の設計を最初にやりましょうという考え方です。
これには3つのメリットがあります。
1. 必要な機能にフォーカスできる
スマートフォンは画面が小さく、できることが制限されるため、本当に必要な機能にフォーカスできる。
作ってから機能を削るより、小さく作ってあとから拡張したほうがよいという考え方。
2. スマホ固有の機能を最初から考えられる
スマートフォン固有の機能（センサー、カメラ、音声認識等）の利用を最初から考えられる。
3. ユーザの置かれる状況を想像しやすい
スマートフォンの場合、ネットワークに接続できないこともありうる。
そうしたケースを想定すれば、たとえばオフラインでも作業を続行できるような作りにしておくことも可能になる。
マルチデバイス対応のアプローチ
5つの原則の5番目の"Adaptive"にも関係しますが、マルチデバイス対応のアプローチが2種類あります。
Responsive Design
Responsive Designでは、異なるデバイスでも同じ作業を行えるようにします。
操作性を高めるために、スマートフォンではマージンを大きくに取ってタッチしやすくするなどの調整を行う必要があります。
このために、FioriのUIコントロール（部品）はデバイスの種類や提供される機能に合わせて、自動的にサイズなどを調整する仕組みがあります。
Adaptive Design
Adaptive Designでは、デバイスの特性に応じて異なる機能を提供します。
たとえば、デスクトップでは大量のデータを見られる一方、スマートフォンでは入力したデータのみ見られるようにするなどです。
こちらのアプローチでは、開発者がデバイスごとのユースケースをもとに機能を設計する必要があります。
2つのアプローチの対比として、わかりやすい例がDesign Guidelinesに載っています。
https://experience.sap.com/fiori-design-web/responsiveness-adaptiveness/