【SAP Fiori】Design Guidelines - UIに関する推奨事項について

はじめに

前回の記事でFiori Design Guidelinesの主要なコンセプトについてご紹介しました。
Design Guidelinesの"Foundation"の項には以下のトピックがあり、前回の記事で取り上げたのは前半の4つです。
前半がコンセプトの話、後半はUIに関する実装寄りの内容となっています。

前回の内容
Design Principles
Design-Led Development Process
Multi-Device Support: Responsive vs.Adaptive
Mobile First

今回の内容
Content Density (Cozy & Compact)
Theming
Motion Design
Colors
Iconography
Typography

マルチデバイス対応のためのcontent density

content densityはCSS用のクラスで、余白のサイズを指定するためのものです。Fioriではデバイスがタッチパネルによる入力をサポートしているかによってcontent densityを切り替えることを推奨しています。
content densityには2種類（cozy、compact）あり、cozyはタッチパネルで操作するデバイス向け、compactはマウスとキーボードで操作するデバイス向けです。cozyにすると余白が広がり、タッチしやすくなります。

compactに設定した場合

cozyに設定した場合

Fiori Design Guidelines - Content Density (Cozy & Compact)より引用

実装に関する情報

• デバイスがタッチパネルによる操作をサポートしているかどうかは、デバイスヘルパーメソッドで判断できます。実装例についてはこちらを参考にしてください。
• cozyの場合、"sapUiSizeCozy"クラスを設定します。
• compactの場合、"sapUiSizeCompact"クラスを設定します。

UI theme designerによるテーマ設定

Fioriはデフォルトでいくつかのテーマを持っていますが、ロゴや色を企業に合わせて変えたい場合、UI theme designerというツールを使います。
UI theme designerはGateway serverで有効化することが必要ですが、以下のリンクから試してみることができます。
https://themedesigner-themedesigner.dispatcher.hanatrial.ondemand.com

UI theme designer特徴は、項目、ボタンなど部品の種類ごとに設定がグルーピングされていることです(クイックモードの場合)。

アニメーションに関する推奨事項

適切にデザインされたアニメーションはUXの向上に役立ちます。
Design Guidelinesでは3つの観点について説明があります。

1. 持続時間(animation-duration)
2. 開始と終了のスピード(transition-timing-function)
3. 動作の方向(transform)

※カッコ内に関連すると思われるCSSの属性を記載しました。

これらの動きを組み合わせることによってアプリケーションをよりシンプルに、効果的に、楽しく使えるようにすることができます。

1. 持続時間(animation-duration)

持続時間については用途に合わせてに4つのクラスが定義されています。

Immediate response(< 150 ms)

ユーザに直接オブジェクトを操作していると感じさせたいとき（例：ドラッグ&ドロップ）

Small Moves (150 ms – 250 ms)

ユーザの操作に対してアプリケーションが何らかの反応を返すとき（例：ボタンを押したらメニューが開く）
この反応時間だと、待たされているようには感じない

Large Moves (250 ms – 500 ms)

画面のコンテンツが大きく移動するとき（例：Fioriのビューポートを左右に動かす）
ある程度時間をとることによりチカチカしないようにする

Continuous Animations (500 ms – ∞)

持続時間が予測できないとき（例：データをロードする）

2. 開始と終了のスピード(transition-timing-function)

この項は開始と終了のパターンの紹介にとどめられています。
詳しくは以下のページをご参照ください。
https://experience.sap.com/fiori-design-web/motion-design/#easing

3. 動作の方向(transform)

オブジェクトの動きは、人が通常想定するようなパターンであるべきということが述べられています。（例：オブジェクトが画面から出て、また戻ってくるときは出て行ったところから入ってくるべき）
詳しくは以下のページをご参照ください。
https://experience.sap.com/fiori-design-web/motion-design/#direction-and-orientation

色のデザイン

Fioriにおいて色は重要な意味を持ちます。
標準のFiori画面は以下のようにブルー系を中心とした配色になっています。

Fiori Design Guidelines - Colorsより引用

Fioriで使われる色は4つに分類されます。

• Primary Colors：アプリケーション全体の外観を決める基調色
• Semantic Colors：特定の意味を持つ色（ポジティブ、ネガティブ、注意など）
• Accent Colors：重要な要素を強調するために使う色。ここぞというときにだけ使う
• Grayscale：テキスト、背景、線の色などに使われる色

配色はUI theme designerで変更することもできます。（デフォルトの配色が良く考えられているので、特別な要件がない限り変更しないほうがよさそうですが）

アイコン

アイコンはボタンやタイルなどに使われ、機能やオブジェクト、ステータスなどを表します。Fioriではアイコンはフォントとして提供されており、拡大・縮小してもきれいに表示されます。

タイルでの使用例

推奨事項

アイコンの作成または利用にあたっては以下を考慮することが重要です。

• ユーザが簡単に理解できるように、現実の物事から着想を得たものであること
• コンテキストを活用すること。同じアイコンでもコンテキストによって異なる意味を持ち得る。（たとえば、ラベルとの組み合わせで）
• 明快、単純かつ認知しやすい形にすること
• グラフィカルユーザインターフェース全体について、インタラクションデザインの標準に従うこと（具体的にどういうことか読み取れなかったので直訳）

アイコンの探し方

Icon Explorerというツールを使って、標準で用意されたアイコンを検索することができます。使用したいアイコンが見つかったら、以下のURLのような部分をコピーするだけで使うことができます。

ボタンでの使用例

フォント

Fiori用に"72"というフォントが作られました。読みやすく、できるだけ幅をとらないようにデザインされたということです。Fiori Design Guidelinesのページもこのフォントで作成されています。
残念ながら、日本語はサポートされていません。