セマンティック スロットを使用したセクションの背景のデザイン

セクションの背景用の Web パーツをデザインする際に、Office UI Fabric のセマンティック スロット システムを使用して、アクセシビリティを保証し、SharePoint サイト間で一貫性を保つことができます。 セマンティック スロットは、色の使用および操作のパターンを合わせるための特定のページ要素のカスタマイズを対象にしています。 また、コンポーネントに複数のパレット カラーを追加したり割り当てたりすることができるため、すべてのセクションの背景の見栄えをよくすることができます。 この記事では、セマンティック スロットの例と、Web パーツ デザインへの組み込み方法について説明します。 作業を開始する前に、Web パーツの基本的な構造を理解するために SharePoint Web パーツを設計する方法 について理解しておく必要があります。 また、SharePoint のテーマと色についても把握しておく必要があります。

セクションの背景

セクションの背景は、ページのキャンバス セクションに背景色を適用する機能です。 淡色および濃色テーマに対して、4 つの背景色オプション (なし、中間、ソフト、ストロング) があります。 セクションの背景は、サイトのテーマの Office UI Fabric パレット カラーによって定義されます。 セクションの背景機能の導入により、セマンティック スロットでページ要素にさまざまなテーマおよびセクションの背景を使用できるようになりました。

バリエーションとセクションの背景の比較

バリエーションは、既存のテーマから生成されたさまざまな色の値を表します。 バリエーションは生成元のテーマと同じ色のセットを共有しますが、それらの色の適用方法は異なります。 詳細については、「 @fluentui/scheme-utilities 」を参照してください。

セクションの背景色を使用すると、ユーザーはテーマからキャンバス セクションにバリエーション カラーを適用することができます。 どちらの概念も "Neutral"、"Soft"、"Strong" の各オプションを共有しており、色の使用を記述するときに同じ意味で使用できます。

セマンティック スロット

セマンティック スロットは、特定のページ要素を対象とするテーマ スロットです。 Office UI Fabric のパレット カラーは、同じパレット カラーを使用している他のページ要素に影響を与えることなく、特定のページ要素に割り当てることができます。 セクションの背景をデザインする場合は、各バリエーションに対してセマンティック スロットに異なる色を割り当てることができます。 セマンティック スロットは、各セクションの背景オプションに適用するため、最大 8 つの異なる値を持つことができます。 これにより、さまざまなテーマやセクションの背景全体で一貫したデザイン パターンを提供することができます。

たとえば、既定のテキストは "bodyText" セマンティック スロットを使用します。 [なし]、[中間]、[ソフト] のセクションの背景では、bodyText は neutralPrimary に割り当てられます。 [ストロング] のセクションの背景では、bodyText のパレット カラーは白に変更されます。 セマンティック スロットには、濃色テーマのすべてのバリエーションのパレット カラーも割り当てることができます。

次の表には、bodyText スロットに対して定義されている 8 色すべてのパレット カラーが示されています。

太さ	淡色テーマ	濃色テーマ
なし	neutralPrimary #333333	neutralPrimary #ffffff
中間	neutralPrimary #333333	neutralPrimary #ffffff
ソフト	neutralPrimary #333333	neutralPrimary #ffffff
ストロング	white #ffffff	white #ffffff

注:

現在のセマンティック スロット リストは、SharePoint でよく使用されるデザイン パターンによって定義されます。 ケース固有のセマンティック スロットは作成しないことをお勧めします。 新しい Web パーツをデザインする場合は、既存のデザイン パターンに合わせることを検討してください。 Office UI Fabric のポリシーでは、セマンティック スロットがリストから削除されることはないため、追加は永続的です。

デザイン内でセマンティック スロットを識別する

ページ要素の機能に基づいてセマンティック スロットを割り当てる必要があります。 セマンティック スロットの名前によって、その使用方法がすぐにわかります。 Fabric セマンティック カラーのドキュメントですべての既存のセマンティック スロットおよび使用例を確認できます。

Fabric パレット カラーは、サイト テーマの色傾斜で参照する必要があります。 サイトで SharePoint に用意されているテーマを使用している場合は、SharePoint テーマの色傾斜に関するドキュメントを参照してください。 サイトでカスタム テーマを使用している場合は、 Fluent UI テーマ デザイナーを使用して一意のカラー ランプを生成できます。

この例では、セマンティック スロットは [なし] のバリエーションのパレット カラーを参照しています。 パレット カラーは、使用しているバリエーションによって異なる場合があります。 通常、バリエーションは bodyBackground の値と一致する必要があります。 たとえば、bodyBackground の値が "neutralLighter” である場合、スロットでは [ニュートラル] のバリエーションから値を選択する必要があります。 各バリエーションの Fabric パレット カラーは、Fabric テーマのドキュメントに記載されているパレット カラーと一致している必要があります。

複数のバリエーションを使用した Web パーツ デザイン

1 つの Web パーツ デザインで複数のバリエーションを使用することがあります。 複数のバリエーションを使用する最も一般的なデザイン パターンは、カード レイアウトです。 デザインでは、どのページ要素がどのバリエーションに対応するのかを区別する必要があります。

この例では、セマンティック スロットの青で示されたすべての赤線は、カードの背景への配置以降、[なし] バリエーションで定義されたパレット カラーを使用しています。 カード上にないその他のすべてのコンテンツは [中間] バリエーションのパレット カラーを使用します。