Office アドインのデザイン言語

Office のデザイン言語は、エクスペリエンス全体の整合性を保証するクリーンでシンプルなビジュアル システムです。Office のインターフェイスを定義する、次のようなビジュアル要素のセットが含まれています。

  • 標準的な書体
  • 一般的なカラー パレット
  • 文字体裁のサイズと太さのセット
  • アイコンのガイドライン
  • 共有アイコンのアセット
  • アニメーションの定義
  • 一般的なコンポーネント

Office UI Fabric は、Office デザイン言語を作成するための正式なフロントエンドのフレームワークです。Fabric の使用はオプションですが、アドインが Office の自然な拡張であるかのように使えるようにする最速の方法です。Fabric を活用して、Office を補完するアドインを設計して作成します。

多くの Office アドインは、以前から存在するブランドに関連付けられています。強力なブランドとそのビジュアルまたはコンポーネント言語を、アドインに保持できます。Office と統合する際に、独自のビジュアル言語を保持する機会を探します。Office の色、文字体裁、アイコン、その他のスタイルの要素を、独自のブランドの要素と交換する方法を検討してください。お客様によく知られているコントロールやコンポーネントを挿入する際は、一般的なアドイン レイアウトや UX 設計パターンに従う方法を検討してください。

過度にブランド化された HTML ベースの UI を Office 内に挿入すると、お客様が不満を抱く可能性があります。Office にシームレスに適合するためのバランスを見つけるだけでなく、サービスや親ブランドとはっきり調和するようにします。アドインが Office に適合しないとき、ほとんどの場合はスタイル要素の競合が原因です。たとえば、文字体裁が大きすぎてグリッド線を越えている、色が対照的で派手である、アニメーションが余計で Office と動作が異なる場合です。コントロールやコンポーネントの外観と動作が、Office の基準から大幅にそれています。

文字体裁

Segoe は、Office の標準的な書体です。Office の作業ウィンドウ、ダイアログ ボックス、コンテンツ オブジェクトと調和するように、アドインで使用します。Office UI Fabric では、Segoe にアクセスできます。フォントの太さからサイズまで数多くのバリエーションで Segoe の完全な文字体裁を、便利な CSS クラスで提供します。すべての Office UI Fabric のサイズと太さが Office アドインで適切に表示されるわけではありません。調和よく収めるため、または競合を回避するために、Fabric 文字体裁のサブセットを使うことを検討してください。Office アドインでの使用をお勧めする Fabric の基底クラスの一覧を次に示します。

サンプル クラス サイズ 太さ お勧めの用法
ヒーロー テキスト イメージ .ms-font-xxl 28 px Segoe Light
  • これは、Office の他のすべての文字体裁の要素よりも大きいクラスです。視覚的な階層から外れないように、慎重に使用します。
  • 制約のある領域内で長い文字列に対して使用しないでください。
  • このクラスを使用して、テキストの周りに十分な余白を確保してください。
  • 通常、最初の実行メッセージ、ヒーロー要素、その他の行動喚起に使用します。
ヒーロー テキスト イメージ .ms-font-xl 21 px Segoe Light
  • このクラスは、Office アプリケーションの作業ウィンドウ タイトルと一致します。
  • 文字体裁の階層が平板にならないように、慎重に使用します。
  • 通常、ダイアログ ボックス、ページ、コンテンツ タイトルなどの最上位の要素として使用します。
ヒーロー テキスト イメージ .ms-font-l 17 px Segoe Semilight
  • このクラスは、タイトルの 1 つ下です。
  • 通常、サブタイトル、ナビゲーション要素、グループ ヘッダーとして使用します。
    ヒーロー テキスト イメージ .ms-font-m 14 px Segoe Regular *通常、アドイン内の本文として使用します。
    ヒーロー テキスト イメージ .ms-font-xs 11 px Segoe Regular *通常、タイムスタンプなどの 2 番目や 3 番目のテキストとして、行、キャプション、フィールド ラベルごとに使用します。
    ヒーロー テキスト イメージ .ms-font-mi 10 px Segoe Semibold *文字体裁の最小の階層は、稀にしか使用しないでください。読みやすさが求められない状況で使用できます。

    これらの基底クラスには、テキストの色が含まれていません。背景が白の場合、ほとんどのテキストには Fabric の "中間色" を使用します。

    色は、ブランドを強調し、視覚的な階層を明確にするためにしばしば使用されます。インターフェイスを識別し、エクスペリエンスに従ってお客様をガイドするのに役立ちます。Office 内で色は、同じ目的で使用されますが、意図的に適用され、最小限に抑えられます。お客様のコンテンツを圧倒しないでください。それぞれの Office アプリは、独自の主要な色を使用してブランド化されているとしても、慎重に使用します。

    Office UI Fabric には、既定のテーマの色のセットが含まれています。Fabric が、コンポーネントやレイアウトとして Office アドインに適用されると、同じ目的が適用されます。色は、階層を示して、コンテンツに干渉することなく、意図的にお客様の行動を喚起するものであるべきです。Fabric テーマの色により、インターフェイス全体に新しいアクセント カラーを取り込むことができます。この新しいアクセントは、Office アプリのブランドと競合し、階層に干渉する可能性があります。つまり、Fabric は、アドイン内で使用すると、インターフェイス全体に新しいアクセント カラーを取り込むことができるということです。この新しいアクセント カラーは、注意をそらし、階層全体に干渉する可能性があります。競合との干渉を回避する方法を検討してください。ニュートラルのアクセントを使用したり、Fabric テーマの色を上書きしたりして、Office アプリのブランドや独自のブランドの色に合わせます。

    Office アプリケーションを使用すると、お客様は、Office UI テーマを適用することによって、インタ フェースをカスタマイズできます。お客様は、4 つの UI テーマから選択でき、Word、PowerPoint、Excel、Office スイートに含まれる他のアプリの背景やボタンをさまざまなスタイルに変えることができます。Office の自然な一部であるかのような、個人用設定に対応するアドインを作成するには、テーマ API を使用します。たとえば、作業ウィンドウの背景色を、いくつかのテーマで濃い灰色に切り替えます。テーマ API を使用すると、先例に倣い、アクセシビリティを確保するために前景色を調整することができます。

    メール アドインと作業ウィンドウ アドインの場合は、Context.officeTheme プロパティを使用して Office アプリケーションのテーマに合わせます。この API は、現在 Office 2016 でのみ使用できます。

    PowerPoint コンテンツ アドインの場合は、PowerPoint アドインでの Office テーマの使用に関する記事をご覧ください。

    色について、次の一般的なガイドラインが適用されます。

    • 色は、階層を示し、ブランドを明確するために、慎重に使用します。
    • 対話型要素と非対話型要素の両方に適用される単一のアクセント カラーの使いすぎは、混乱を招くことがあります。たとえば、ナビゲーション メニューで選択された項目と選択されていない項目について、同じ色を使用することは避けてください。
    • Office ブランドのアプリの色との不必要な競合を避けます。
    • 独自のブランドの色を使用して、サービスや会社との関連付けを作成します。
    • すべてのテキストにアクセスできることを確認します。前景テキストと背景が 4.5:1 のコントラスト比であることを確認します。
    • 色覚障碍者に配慮してください。操作や階層を色だけで識別することは避けてください。
    • Office アイコンのカラー パレットを使用したアドイン コマンド アイコンの設計について詳しくは、アイコンのガイドラインをご覧ください。

    レイアウト

    Office に埋め込まれている各 HTML コンテナーは、レイアウトを持つことになります。これらのレイアウトは、アドインのメイン画面です。そこでは、お客様による操作の開始、設定の変更、表示、スクロール、コンテンツ間の移動を可能にするエクスペリエンスを作成します。エクスペリエンスの継続性を保証するために、画面全体のレイアウトが整合性のあるアドインを設計します。お客様が使い慣れている既存の Web サイトがある場合、既存の Web ページのレイアウトを再利用することを検討してください。Office HTML コンテナー内に調和よく収まるようにそれらを適合させます。

    レイアウトのガイドラインについては、作業ウィンドウコンテンツダイアログ ボックスに関する記事をご覧ください。Office UI Fabric コンポーネントと一般的なレイアウトやユーザー エクスペリエンス フローとをまとめる方法の詳細については、UX デザイン パターン テンプレートに関する記事をご覧ください。

    レイアウトについて、次の一般的なガイドラインが適用されます。

    • HTML コンテナーでは、狭い余白や広い余白は使用しないでください。20 ピクセルが最適な既定値です。
    • 要素を意図的に配置します。追加のインデントや新しい配置点は視覚的な階層をより明確にするのに役立ちます。
    • Office インターフェイスは、4 px グリッド線上にあります。要素間のスペースを 4 の倍数に維持することを目標にします。
    • インタ フェースに詰め込みすぎると、混乱を招き、タッチ操作が使いにくくなります。
    • 画面全体でレイアウトの整合性を保ちます。予期しないレイアウトの変更は、ソリューションの信頼と信用を失う一因となるビジュアルのバグのようになります。
    • 一般的なレイアウトのパターンに従います。規則は、ユーザーがインターフェイスの使用方法を理解するのに役立ちます。
    • ブランドやコマンドのような要素を冗長に使用しないでください。
    • コントロールとビューを統合して、マウスを移動させる回数を減らします。
    • HTML コンテナーの幅と高さに適合する応答性の高いエクスペリエンスを作成します。

    コンポーネント言語

    画面やレイアウトは、コンテンツとコンポーネントで構成されます。コンポーネントは、お客様がソフトウェアやサービスの要素を操作するのに役立ちます。ボタン、ナビゲーション、バッジ、通知、ドロップダウンはすべて、整合性のあるスタイルと動作を持つことの多い、一般的なコンポーネントの例です。

    Office UI Fabric では、外観も動作も Office の一部のようなコンポーネントを表示します。Fabric を活用して、Office とシームレスに統合します。アドインに既存のコンポーネント言語がある場合、Fabric のためにその言語を削除する必要はありません。Office と統合する際に、それを保持する機会を探します。スタイル要素の入れ替え、競合の削除、ユーザーの混乱を取り除くためのスタイルやと動作の採用を行う方法を検討してください。

    コンポーネントについて、次の一般的なガイドラインが適用されます。

    • アドイン内で Office リボンをレプリケートしないでください。
    • Office コンポーネントと動作が異なるメニュー、ボタン、その他のコンポーネントを作成しないでください。
    • アドイン用に推奨されている Office UI Fabric コンポーネントを使用します。
    • 一般的な Office UI コンポーネントに UX デザイン パターン テンプレートを使用します。

    アイコン

    アイコンは、動作や概念を視覚的に表現するものです。多くの場合、コントロールとコマンドに意味を与えるために使用します。環境内でユーザーが移動するのにサインが役立つのと同じように、リアルなビジュアルや象徴的なビジュアルにより、ユーザーは UI 間を移動できるようになります。お客様がコントロールを選択するときの動作をすばやく解析できるにように、必要な詳細のみを含む、簡単で明確なビジュアルにする必要があります。

    Office リボンのインターフェイスには、標準の視覚スタイルが使用されています。Office リボンのアドイン コマンドを設計している場合、アイコンのガイドラインに従ってください。これにより、Office アプリ間の一貫性と親和性を保つことができます。このガイドラインは、ソリューションの PNG アセットのセットを Office の自然な一部のように設計するのに役立ちます。

    多くの HTML コンテナーには、コントロールとアイコン画像が含まれています。Office UI Fabric のカスタム フォントを使用して、Office スタイルのアイコンをアドインで表示します。Fabric のアイコンのフォントには、ニーズに合わせて拡大縮小、色付け、スタイリングできる一般的な Office メタファーのグリフが多数含まれています。独自のアイコンのセットで既存のビジュアル言語を使用している場合、HTML キャンバスでも自由に使用できます。アイコンの標準セットを使用して独自のブランドの継続性を築くことは、すべてのデザイン言語の重要な一部をなしています。Office メタファーとの競合により、お客様が混乱することのないように注意してください。

    アイコンについて、次の一般的なガイドラインが適用されます。

    • Office リボンやコンテキスト メニューにあるアドイン コマンドの Office UI Fabric グリフの用途を変更しないでください。Fabric アイコンはスタイルが異なるので、適合しません。
    • Office アイコンの言語を使用して、動作や概念を示します。
    • 書式設定用のペイントブラシや検索用の虫眼鏡など、一般的な Office の視覚的メタファーを再利用します。
    • 関連のない操作でメタファーを誤用しないでください。さまざまな動作や概念に同じビジュアルを使用すると、ユーザーが混乱する場合があります。

    アニメーション

    UI 要素、コントロール、コンポーネントには多くの場合、切り替え、モーション、アニメーションを必要とする対話型の動作が関係します。UI 要素全体においてモーションの共通の特性は、デザイン言語のアニメーション要素を定義することです。Office は生産性に重点を置いているため、Office のアニメーション言語は、お客様による業務の遂行を支援するという目的をサポートします。優れた応答性、信頼できるビジュアル、きめ細やかな魅力のバランスが重要です。

    Office UI Fabric には、HTML コンテナー内のモーションを制御するためのアニメーション ライブラリが含まれています。Office でシームレスに適合するように使用します。これは、外観よりも体験によるエクスペリエンスを実現するのに役立ちます。アニメーション CSS クラスは、Office のメンタル モデルを明確するための方向性、開始/終了、期間に関する詳細や、アドインを操作する方法についてお客様が学ぶ機会を提供します。

    アドインで独自のアニメーション言語を使用している場合は、それを使用します。Office と統合する際に、独自のブランド化されたアニメーションを保持する機会を探します。一般的な Office のモーション パターンに干渉または競合しないように注意してください。お客様の注意をそらすことになるだけの装飾となるエクスペリエンスを作成しないでください。

    アニメーションについて、次の一般的なガイドラインが適用されます。

    • アニメーションは、感じて、無意識に体験できるようにし、業務の遂行を妨げることのないようにすべきです。
    • 期待、バウンス、輪ゴムなどの自然界の物理特性を模倣するだけの効果は使用しないでください。
    • 階層とメンタル モデルを明確するためのビジュアル要素です。
    • モーションを使用して、ユーザーをガイドし、業務を遂行するための重要な要素を組み合わせて集中させます。
    • 要素のトリガー元を検討してください。モーションを使用して、アクションと結果の UI 間のリンクを作成します。
    • アニメーションを選択する際は、コンテンツのトーンと目的を検討してください。重要なメッセージは、探索的ナビゲーションとは異なる方法で処理します。