Office アドインの色のガイドライン

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

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

Office アプリケーションでは、お客様は Office UI テーマを適用してインターフェイスをカスタマイズします。 お客様は、4 つの UI テーマを選択して、Office スイート内の Excel、Outlook、PowerPoint、Word、およびその他のアプリの背景とボタンのスタイルを変更します。 アドインを Office の自然な部分のように感じさせ、パーソナル化に対応するには、 テーマ API を使用します。 たとえば、作業ウィンドウの背景色を、いくつかのテーマで濃い灰色に切り替えます。 テーマ API を使用して、スーツに従い、前景のテキストを調整してアクセシビリティを確保 します。

ヒント

• アドインが UI で正しい色の組み合わせを適用することを確認するには、[ システム設定の使用 ] オプションを含む 4 つの Office テーマすべてでテストします。
• PowerPoint アドインのデザインを現在のドキュメントまたは Office テーマと動的に一致させる方法のガイダンスについては、「 PowerPoint アドインでドキュメント テーマを使用する」を参照してください。

色については、次の一般的なガイドラインを適用します。

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