次の方法で共有

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

  • [アーティクル]

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

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

Fluent UI は、Office デザイン言語を使用してビルドするための公式のフロントエンド フレームワークです。 Fluent UI の使用は省略可能ですが、アドインが Office の自然な拡張機能のように感じられるようにするための最速の方法です。 Fluent UI を利用して、Office を補完するアドインを設計および構築します。

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

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

ビジュアル要素のガイドラインを確認する

ガイドラインや推奨されるプラクティスなど、Office アドインを構成する各ビジュアル要素について説明します。

ダウンロード用のツールキットを設計する

作業を開始するために、 Mac 用 Sketch アプリケーションまたは Windows または Mac 用 Adobe XD アプリケーションで使用するためのツールキットを作成しました。 次のダウンロードには、利用可能なすべてのパターンと、簡単な説明とレイアウトに関する推奨事項が含まれています。