# Microsoft Fluent 2 デザインシステム ## Microsoft Fluent 2 デザインシステムのインターフェースプレビュー BriefとPeopleを切り替え、ウェブテーマを変更して、入力エラー、重複、ローカルでの追加成功を試せます。招待は送信されません。 ## Microsoft Fluent 2 デザインシステムのデザインリファレンス Fluent UI React v9のウェブ向けリファレンスです。グローバルな数値は、リンク先のReactトークンソースに基づいています。以下のカラー値は、alias/lightColor.ts内の古いサンプル用16進数コメントではなく、brandWebを使ったライトテーマのエイリアスマッピングを反映しています。ダークカラーとTeamsテーマには、それぞれ別のマッピングがあります。ウェブサイトのタイポグラフィ表では現在Subtitle1が20/26とされていますが、Reactのfonts.tsソースでは20/28となっており、この実装では後者に従っています。参照元の確認日：2026年10月3日。lockfileに記録されたバージョンを必ず確認してください。 ### ライトテーマのニュートラルな役割 | 名前 / ルール | 値 / 設定 | 用途 | | --- | --- | --- | | colorNeutralForeground1 | #242424 | 本文の基本色。 | | colorNeutralForeground2 | #424242 | 補助ラベル。 | | colorNeutralForeground3 | #616161 | メタデータ。最終的なコントラストも確認してください。 | | colorNeutralBackground1 | #ffffff | メインの界面表面。 | | colorNeutralBackground2 | #fafafa | 控えめな補助用背景。 | | colorNeutralBackground3 | #f5f5f5 | ワークスペースのキャンバス。 | | colorNeutralStroke1 | #d1d1d1 | 標準的なコンポーネントの境界線。 | | colorNeutralStroke2 | #e0e0e0 | 目立ちにくい区切り線。 | | colorNeutralStrokeAccessible | #616161 | コントラストを高めたコントロールの境界線。 | | colorNeutralForegroundOnBrand | #ffffff | サポート対象のブランドカラー塗りつぶし上のテキスト。 | | colorStrokeFocus1 / colorStrokeFocus2 | #ffffff / #000000 | 2つのフォーカスカラー。コンポーネントの端でコントラストを保ってください。 | ### brandWebから解決されるウェブ用ブランドの役割 | 名前 / ルール | 値 / 設定 | 用途 | | --- | --- | --- | | colorBrandBackground | #0f6cbd · brandWeb[80] | webLightThemeのプライマリアクション。 | | colorBrandBackgroundHover | #115ea3 · brandWeb[70] | そのアクションのホバー状態。 | | colorBrandBackgroundPressed | #0c3b5e · brandWeb[40] | 押下状態。汎用的な選択状態としては使いません。 | | colorBrandBackground2 | #ebf3fc · brandWeb[160] | 控えめなブランドカラーの背景。 | | colorBrandForegroundLink | #115ea3 · brandWeb[70] | ライトウェブテーマのリンク文字色。 | ### 横方向と縦方向のスペーシング | 名前 / ルール | 値 / 設定 | 用途 | | --- | --- | --- | | spacingHorizontalNone / spacingVerticalNone | 0 | レイアウトの方向に応じて軸を選びます。共通のスペーシング単位です。 | | spacingHorizontalXXS / spacingVerticalXXS | 2px | レイアウトの方向に応じて軸を選びます。共通のスペーシング単位です。 | | spacingHorizontalXS / spacingVerticalXS | 4px | レイアウトの方向に応じて軸を選びます。共通のスペーシング単位です。 | | spacingHorizontalSNudge / spacingVerticalSNudge | 6px | レイアウトの方向に応じて軸を選びます。アイコンの位置合わせ用の微調整です。 | | spacingHorizontalS / spacingVerticalS | 8px | レイアウトの方向に応じて軸を選びます。共通のスペーシング単位です。 | | spacingHorizontalMNudge / spacingVerticalMNudge | 10px | レイアウトの方向に応じて軸を選びます。アイコンの位置合わせ用の微調整です。 | | spacingHorizontalM / spacingVerticalM | 12px | レイアウトの方向に応じて軸を選びます。共通のスペーシング単位です。 | | spacingHorizontalL / spacingVerticalL | 16px | レイアウトの方向に応じて軸を選びます。共通のスペーシング単位です。 | | spacingHorizontalXL / spacingVerticalXL | 20px | レイアウトの方向に応じて軸を選びます。共通のスペーシング単位です。 | | spacingHorizontalXXL / spacingVerticalXXL | 24px | レイアウトの方向に応じて軸を選びます。共通のスペーシング単位です。 | | spacingHorizontalXXXL / spacingVerticalXXXL | 32px | レイアウトの方向に応じて軸を選びます。共通のスペーシング単位です。 | ### React ウェブ用タイポグラフィの組み合わせ | 名前 / ルール | 値 / 設定 | 用途 | | --- | --- | --- | | Caption2 · fontSizeBase100 | 10px / 14px / 400 | サイズ／行高／ウェイト。lineHeightBase100と組み合わせてください。 | | Caption1 · fontSizeBase200 | 12px / 16px / 400 | サイズ／行高／ウェイト。lineHeightBase200と組み合わせてください。 | | Body1 · fontSizeBase300 | 14px / 20px / 400 | サイズ／行高／ウェイト。lineHeightBase300と組み合わせてください。 | | Body2 / Subtitle2 · fontSizeBase400 | 16px / 22px / 400 / 600 | サイズ／行高／ウェイト。lineHeightBase400と組み合わせてください。 | | Subtitle1 · fontSizeBase500 | 20px / 28px / 600 | サイズ／行高／ウェイト。lineHeightBase500と組み合わせてください。 | | Title3 · fontSizeBase600 | 24px / 32px / 600 | サイズ／行高／ウェイト。lineHeightBase600と組み合わせてください。 | | Title2 · fontSizeHero700 | 28px / 36px / 600 | サイズ／行高／ウェイト。lineHeightHero700と組み合わせてください。 | | Title1 · fontSizeHero800 | 32px / 40px / 600 | サイズ／行高／ウェイト。lineHeightHero800と組み合わせてください。 | | LargeTitle · fontSizeHero900 | 40px / 52px / 600 | サイズ／行高／ウェイト。lineHeightHero900と組み合わせてください。 | | Display · fontSizeHero1000 | 68px / 92px / 600 | サイズ／行高／ウェイト。lineHeightHero1000と組み合わせてください。 | ### フォントファミリーとウェイト | 名前 / ルール | 値 / 設定 | 用途 | | --- | --- | --- | | fontFamilyBase | 'Segoe UI', 'Segoe UI Web (West European)', -apple-system, BlinkMacSystemFont, Roboto, 'Helvetica Neue', sans-serif | プロバイダーのデフォルトのウェブ用フォントスタックです。周囲のサイトのフォントをFluentのものとして表記しないでください。 | | fontFamilyMonospace | Consolas, 'Courier New', Courier, monospace | コードと技術識別子。 | | fontWeightRegular / Medium / Semibold / Bold | 400 / 500 / 600 / 700 | 対応するタイポグラフィのスケールと組み合わせて、役割に応じたウェイトを使用してください。 | ### 形状トークン | 名前 / ルール | 値 / 設定 | 用途 | | --- | --- | --- | | borderRadiusNone | 0 | まずコンポーネントのデフォルトを使用してください。これは利用可能なトークンであり、すべての界面表面に適用する必要はありません。 | | borderRadiusSmall | 2px | まずコンポーネントのデフォルトを使用してください。これは利用可能なトークンであり、すべての界面表面に適用する必要はありません。 | | borderRadiusMedium | 4px | まずコンポーネントのデフォルトを使用してください。これは利用可能なトークンであり、すべての界面表面に適用する必要はありません。 | | borderRadiusLarge | 6px | まずコンポーネントのデフォルトを使用してください。これは利用可能なトークンであり、すべての界面表面に適用する必要はありません。 | | borderRadiusXLarge | 8px | まずコンポーネントのデフォルトを使用してください。これは利用可能なトークンであり、すべての界面表面に適用する必要はありません。 | | borderRadius2XLarge | 12px | まずコンポーネントのデフォルトを使用してください。これは利用可能なトークンであり、すべての界面表面に適用する必要はありません。 | | borderRadius3XLarge | 16px | まずコンポーネントのデフォルトを使用してください。これは利用可能なトークンであり、すべての界面表面に適用する必要はありません。 | | borderRadius4XLarge | 24px | まずコンポーネントのデフォルトを使用してください。これは利用可能なトークンであり、すべての界面表面に適用する必要はありません。 | | borderRadius5XLarge | 32px | まずコンポーネントのデフォルトを使用してください。これは利用可能なトークンであり、すべての界面表面に適用する必要はありません。 | | borderRadius6XLarge | 40px | まずコンポーネントのデフォルトを使用してください。これは利用可能なトークンであり、すべての界面表面に適用する必要はありません。 | | borderRadiusCircular | 10000px | まずコンポーネントのデフォルトを使用してください。これは利用可能なトークンであり、すべての界面表面に適用する必要はありません。 | ### モーション時間のスケール | 名前 / ルール | 値 / 設定 | 用途 | | --- | --- | --- | | durationUltraFast | 50ms | 利用可能な実行時トークンです。この例ではホバーにFastを使用し、動きを抑える設定が有効な場合はトランジションを無効にします。 | | durationFaster | 100ms | 利用可能な実行時トークンです。この例ではホバーにFastを使用し、動きを抑える設定が有効な場合はトランジションを無効にします。 | | durationFast | 150ms | 利用可能な実行時トークンです。この例ではホバーにFastを使用し、動きを抑える設定が有効な場合はトランジションを無効にします。 | | durationNormal | 200ms | 利用可能な実行時トークンです。この例ではホバーにFastを使用し、動きを抑える設定が有効な場合はトランジションを無効にします。 | | durationGentle | 250ms | 利用可能な実行時トークンです。この例ではホバーにFastを使用し、動きを抑える設定が有効な場合はトランジションを無効にします。 | | durationSlow | 300ms | 利用可能な実行時トークンです。この例ではホバーにFastを使用し、動きを抑える設定が有効な場合はトランジションを無効にします。 | | durationSlower | 400ms | 利用可能な実行時トークンです。この例ではホバーにFastを使用し、動きを抑える設定が有効な場合はトランジションを無効にします。 | | durationUltraSlow | 500ms | 利用可能な実行時トークンです。この例ではホバーにFastを使用し、動きを抑える設定が有効な場合はトランジションを無効にします。 | ### テーマの変更は意味上の切り替えであり、色の単純な反転ではありません | 名前 / ルール | 値 / 設定 | 用途 | | --- | --- | --- | | colorNeutralBackground1 | #292929 | ライトテーマの#ffffffに代わる、ダークテーマのメインの界面表面。 | | colorNeutralForeground1 | #ffffff | ライトテーマの#242424に代わる、ダークテーマの本文色。 | | colorNeutralForeground2 | #d6d6d6 | ダークテーマのセカンダリテキスト。 | | colorBrandBackground | brandWeb[70] = #115ea3 | ダークテーマのプライマリ塗りつぶし。ライトテーマではbrandWeb[80]を使用します。 | | colorBrandForegroundLink | brandWeb[100] = #479ef5 | ダークテーマのリンクの役割。プライマリボタンの塗りつぶしとは異なります。 | ## Microsoft Fluent 2 デザインシステム完全ガイド 実際のインターフェースで、このデザインシステムを選び、適用し、レビューするための実践ガイドです。 詳しいガイダンス、実装の出発点、ソースへのリンクをまとめています。 ## Microsoft Fluent 2 デザインシステムとReact v9の実装 ### ウェブ向けの実装を明示的に選択してください > Fluent 2はクロスプラットフォームのデザイン言語です。このガイドでは、より範囲を絞り、実用性を重視して、統合されたReact v9ライブラリの@fluentui/react-componentsを選びます。ルートはFluentProviderで、この例ではwebLightThemeまたはwebDarkThemeを使用します。Teamsのテーマは、ブランドに合わせた別の設定です。Teamsでおなじみの紫は、Webのデフォルトの青いランプではありません。Windows、iOS、Androidのネイティブリソースも、互換性のあるReactパッケージではありません。 以下の完成例では、プロジェクト概要とローカルのアクセスリストを表示します。Title3とBody1で階層を作り、TabListとTabで2つのビューを切り替え、DialogにField、Input、Selectを組み合わせてアクセスの判断を示します。このコードは、実在の人物を招待する機能を備えているとはうたっていません。このように分けることで、共有サービスを装うことなく、コンポーネントの動作を確認できます。 関連する仕様を確認する ### プロバイダーが実際に提供するもの FluentProviderは、テーマ変数をそのサブツリーに適用します。tokens.colorNeutralBackground2でスタイルを指定したカスタムサーフェスは選択したテーマに追従しますが、白でハードコードしたサーフェスは追従しません。テーマが必要なコンポーネントより上位にプロバイダーを配置してください。ライブラリはスタイリングランタイムを通じてコンポーネントにスタイルを適用します。この例では、存在しないfluent.cssをインポートする必要はありません。 関連する仕様を確認する ## Microsoft Fluent 2デザインシステム：セマンティックカラーと実際のWebブランドランプ ### 選択したブランドに合わせてエイリアスを解決する ライトテーマのエイリアスソースでは、colorBrandBackgroundにbrand[80]が割り当てられています。WebテーマではbrandWebが使われ、そのステップ80は#0f6cbdです。そのため、この例では#0f6cbdが解決後のプライマリ塗りつぶし色になります。エイリアスファイルには古い説明用の16進数コメントが含まれています。これらのコメントを現在のWebパレットとして読み取ると、誤った結果になります。値を決めるのはコメントではなく、ソース間の関係です。 概要にはcolorNeutralForeground1、補足ラベルにはcolorNeutralForeground2、周囲のワークスペースにはcolorNeutralBackground3を使います。プライマリアクションには、colorBrandBackgroundとcolorNeutralForegroundOnBrandを組み合わせられます。テーマが変わっても、役割を示す名前は変わりません。人物の権限はテキストで示します。青い境界線やタブのインジケーターが示すのは選択状態であり、権限ではありません。 関連する仕様を確認する ### ダークモードではマッピングが変わる ダークモードでは、メインサーフェスは#292929、プライマリテキストは#ffffffに解決されます。プライマリブランドの塗りつぶしにはステップ70が、リンクの前景色にはステップ100が使われます。そのため、プレビューではページの背景色を反転するだけでなく、トークンの役割をまとめて切り替えています。切り替え後は、アクセスダイアログ、選択中のタブ、控えめに表示されるメタデータを確認してください。これらはすべて、同じテーマの適用範囲に含まれます。 関連する仕様を確認する ## Microsoft Fluent 2デザインシステムのタイポグラフィ：テキストの役割をランタイムトークンに対応付ける ### サイズと行の高さをセットで使う Body1は、14pxのサイズと20pxの行の高さを持つ、基本の読みやすいスタイルです。Caption1は12/16、Subtitle2は16/22でセミボールド、Title3は24/32でセミボールドです。これらの組み合わせにより、任意の中間サイズに頼らず、タイトル、ラベル、本文を明確に区別できます。上の表には参考として大きなサイズも掲載していますが、コンパクトなワークスペースに見出しディスプレイサイズは必要ありません。 ReactのトークンソースとデザインWebサイトでは、実用上重要な点に違いがあります。ランタイムソースではfontSizeBase500 / lineHeightBase500が20/28ですが、WebのデザインチャートではSubtitle1が20/26です。この例ではランタイムの組み合わせに従っています。このような違いは、モックアップに合う数値を都合よく組み合わせるのではなく、バージョンと実装を確認する際のポイントとして扱ってください。 関連する仕様を確認する ### テキストプリセットとフォントスタック 視覚的なプリセットと合わせて、セマンティックなHTMLも使います。Title3 as="h1"は見出しです。見た目をスタイルで整えるだけでは、ドキュメントのアウトラインは作られません。基本のフォントスタックはSegoe UIから始まり、プラットフォームごとの代替フォントを含みます。スクリーンショットと見た目を合わせるためだけに、プロプライエタリなフォントをバンドルしないでください。このサンプルではドキュメントに記載されたスタックを使用しているため、字形の細部は閲覧端末にインストールされたフォントによって異なります。 カスタムテキストには、フォントファミリー、サイズ、太さ、行の高さをまとめたtypographyStyles.body1を使います。fontSizeBase300だけをコピーするより、この組み合わせを優先してください。アクセスリストでは、折り返し可能な読みやすいメールアドレスを使用します。権限ラベルにはセミボールドの強調を使いますが、ページタイトルより目立たせません。 関連する仕様を確認する ## Microsoft Fluent 2デザインシステム：ワークスペースの間隔、形状、密度 ### Reactのスペーシング名はデザインツールの名称とは異なる Fluentの一般的なレイアウトガイダンスでは、4単位のリズムに基づくグローバルなサイズ名を使用し、位置合わせの調整には2、6、10なども含まれます。Reactでは、軸ごとのエイリアスが公開されています。spacingHorizontalSは8px、Mは12px、Lは16px、XXLは24pxで、垂直方向にも対応する名称があります。size120をspacingHorizontal120に読み替えないでください。そのReact識別子は存在しません。 このレイアウトでは、パネル内側の余白に24px、フォームフィールド間に16px、アクセス行の間隔に12pxを使用しています。ページの正確な幅や2カラムの配置は、アプリケーション側で決めるものであり、Fluentの公式ブレークポイントではありません。画面幅が狭い場合は、概要の下にチームの補足情報を配置し、2つのタブラベルは表示したままにします。 関連する仕様を確認する ### 形状はコンポーネントのスケールを表す 使用可能な半径トークンにはMedium（4px）とXLarge（8px）がありますが、すべてのコントロールに同じ角丸を適用するという意味ではありません。HTMLのサンプルでは、明示的な検討例として、コントロールに4px、ドキュメントのサーフェスに8pxの形状を使っています。選択したデザイン要件で上書きが妥当と判断されない限り、ネイティブコンポーネントではサポートされている既定の構造を維持してください。形状を変えるために、生成されたクラス名を直接参照しないでください。 関連する仕様を確認する ## Microsoft Fluent 2デザインシステムのTabList：選択状態、パネル、キーボード操作 ### 選択中の値はアプリケーションの状態で管理する この例では、アプリケーション側のReact状態でタブを管理し、その値をselectedValueに渡します。onTabSelectはdata.valueを受け取り、その値で状態を更新します。各Tabには固定のvalueがあり、aria-controlsを通じて対応するパネルを参照します。各パネルにはrole="tabpanel"とaria-labelledbyを設定し、条件に応じて非表示にします。コンポーネントがプロジェクト概要やアクセスリストを提供するわけではありません。これらは明示的に描画します。 APIでは、フォーカスと選択を分けています。selectTabOnFocusの既定値はfalseです。単独で動作するサンプルでは、Left/RightとHome/Endでフォーカスを移動し、EnterまたはSpaceでフォーカス中のタブを有効にします。この手動アクティベーションの動作により、予期しないコンテンツの切り替えを起こさずにタブの選択肢を確認できます。タブのラベルは短く保ちましょう。公式のレイアウトガイダンスによると、横並びのタブは自動的に折り返されたり、スクロールしたりしません。 関連する仕様を確認する ### カテゴリが増えたら別のパターンを選ぶ BriefとPeopleは同じワークスペースの密接に関連した2つのビューなので、タブが適しています。組織内のすべてのプロジェクトを一覧にするなら、それはナビゲーションであり、タブをもう1列追加するケースではありません。狭い幅にカテゴリが収まらなくなった場合は、オーバーフローや別の選択パターンを意図的に設計しましょう。ラベルを読めなくなるまで縮めるのは、レスポンシブ対応とは言えません。 関連する仕様を確認する ## Microsoft Fluent 2 デザインシステムの実践：アクセシブルなラベルと適切な検証 ### フィールドは単なる装飾付き入力ではなく、複数要素の組み合わせ Fieldは、ラベル用スロット、子コントロール、任意のヒント、検証メッセージを組み合わせます。ドキュメントで定義されているコントロールの契約には、id、aria-labelledby、aria-describedby、aria-invalid、aria-requiredが含まれます。Fluentの入力コンポーネントは直接子要素にできます。カスタムコントロールでは、render関数のpropsを利用できます。そのため、メールアドレス用のInputをFieldで囲むほうが、入力欄の上に無関係なテキストを配置するより有用です。 この例では、無効な内容でローカル送信を試みた後に限り、validationStateがerrorになります。アプリケーションはメールアドレス形式の値かどうかと、メモリ内リストとの重複を確認します。入力値は保持され、validationMessageで修正方法を示します。Fieldはその結果を表示して関連付けますが、アドレスが実在するかの確認、招待の送信、アクセス権の付与は行いません。 関連する仕様を確認する ### 検証状態と権限を区別する 権限を選ぶSelectにはCan viewとCan editがあり、メールアドレス欄には独自のエラー状態があります。アドレスが未完成というだけでダイアログ全体を赤くするのは避けましょう。requiredはアクセシビリティのための表示であり、サーバー側の認可や検証の代わりにはなりません。このサンプルフォームでは、明示的な検証メッセージを一貫して示すためにnoValidateを使用しています。本番サービスでは、リクエストを再度検証する必要があります。 - アドレスが空、または形式が不正な場合：ダイアログを開いたままにし、受け付ける形式を説明します。 - アドレスがローカルのアクセスリストにすでにある場合：重複専用のメッセージを表示し、行を追加しません。 - 新しい有効なアドレスの場合：選択された権限をローカルに追加し、ダイアログを閉じて、ローカルのみで行われた処理であることが伝わる結果を表示します。 関連する仕様を確認する ## Microsoft Fluent 2 デザインシステムのDialog：サポートされている構成でフォームを作る ### 送信ボタンをフォーム内に置く 構成要素は、Dialog、DialogTrigger、DialogSurface、form要素、そしてDialogTitle、DialogContent、DialogActionsを含むDialogBodyです。フォームが本文を囲むことで、フッターの送信ボタンもフォームの送信に参加します。キャンセルボタンはtype="button"にして、ダイアログを閉じるDialogTriggerの中に配置します。そうしないと、ボタンの既定のtypeによって誤ってフォームが送信されることがあります。 openとonOpenChangeで表示状態を制御します。disableButtonEnhancementを指定すると、すでにボタンとしての動作を備えたFluent Buttonがトリガーによって重複して拡張されるのを防げます。成功ハンドラーは、ローカル検証に通った場合にのみダイアログを閉じます。検証に失敗した場合は、同じメールアドレスと権限を修正に使える状態で保持します。 関連する仕様を確認する ### 実際の判断内容に合ったモーダル動作を選ぶ この簡潔なアクセス設定では、既定のモーダルタイプを使用します。非モーダルダイアログなら背後の作業を続けられますが、アラートダイアログは緊急の判断を想定しており、閉じ方にもより厳しい制約があります。通常のアクセス設定フォームにアラートのセマンティクスは必要ありません。公式ガイダンスでは、ダイアログ内にフォーカスを移し、閉じた後はトリガーに戻すことが求められています。この単独サンプルでは、ネイティブのdialog要素を使い、トリガーへのフォーカス復帰を明示的に行います。 関連する仕様を確認する ## Microsoft Fluent 2 デザインシステムのカスタムスタイルでテーマを損なわない ### makeStylesとセマンティック変数を使う コード全体では、背景層、間隔、角丸にトークンを使うmakeStylesを使用しています。これにより、カスタムパネルをプロバイダーのテーマに合わせられます。生成されたクラス名は実装の詳細なので、DevToolsからコピーしてスタイルシートに貼り付けないでください。テーマを試すときは、プロバイダーのテーマを変更し、ネイティブコントロールとカスタム領域の両方をまとめて確認しましょう。 公開されている時間の段階は50msから500msまでです。HTMLのサンプルでは、単純なホバー時の変化にdurationFast（150ms）を使用し、prefers-reduced-motionの設定時にはトランジションをなくします。これは利用可能なトークンを使ったアプリケーション上の選択であり、Fluentのすべてのインタラクションを150msにするべきだという意味ではありません。動きをなくしても、コンテンツやエラーメッセージは理解できます。 関連する仕様を確認する ### 解釈の適用範囲を確認する 埋め込みの例には、ネイティブのFluent実装ではなく、意図的にHTML/CSSとラベルを付けています。プレビューでフレームワークをダウンロードせずに、検証済みの値とアクセスダイアログの操作を示すための例です。ネイティブのスタイル、ポータル、フォーカス管理、コンポーネントの更新を評価する場合は、完全なReactの例を使ってください。単独での操作チェックに合格しても、確認できるのはこのサンプルの動作であり、本番の共有アプリケーションが認定されたことにはなりません。 関連する仕様を確認する ## Microsoft Fluent 2 デザインシステムの完全な構成をインストールして検証する ### 手順の概要ではなく、実行できるエントリーポイント このセットアップは、idがrootの要素を持つ既存のReactアプリケーションを対象としています。v9のスイートをインストールし、JSXのエントリーポイントをアプリケーションに配置します。インポート、プロバイダー、コンポーネントツリー、ハンドラー、状態管理、ルートのレンダリングをまとめて示しています。外部の共有APIは呼び出しません。スターターがすでにAppをレンダリングしている場合は、ルートのエントリーポイントをそのまま使い、ルートをもう1つ作るのではなくAppをエクスポートしてください。 解決されたパッケージバージョンをロックファイルに記録してください。リンク先のソース資料は、調査時点のReact v9の実装を説明していますが、master URLの内容は変わることがあります。アップグレードする前に、エクスポートされたテーマと、ここで使用しているField、TabList、Dialogの正確な動作を比較してください。このセットアップでは、v8の@fluentui/reactコンポーネントとv9の例を意図的に混在させていません。 1. 既存の React プロジェクトに @fluentui/react-components@9 をインストールし、生成されたロックファイルをそのまま保持します。 2. 用意されたエントリーを 1 つの FluentProvider で囲み、初期テーマに webLightTheme を設定してレンダリングします。 3. ダイアログを開き、無効なアドレスを送信してから修正します。追加したユーザーがローカルの状態にのみ反映されることを確認します。 4. webDarkTheme とキーボード操作でも同じ確認を行い、パネルとの関連付け、エラーの通知、フォーカスの復帰を検証します。 関連する仕様を確認する ### 実際の共有プロダクトで連携すべき内容 ローカルでの追加を置き換える前に、サービスの契約を定義します。認証済みの実行ユーザー、対象のワークスペース、許可される権限値、招待の結果、重複時の動作を明確にしてください。サービスからリクエストを拒否された場合はダイアログを開いたままにし、アクセス権を楽観的に付与したと見せかけず、確定した結果を表示します。こうしたルールは Fluent の範囲外ですが、コードでは汎用的な送信ボタンの裏に隠さず、引き継ぎ箇所を明示しています。 関連する仕様を確認する ## Microsoft Fluent 2 デザインシステムのコンポーネント例 ### 完全なスタンドアロンのインタラクティブ見本 ドキュメント全体を index.html として保存し、ブラウザーで開きます。単独で動作する HTML/CSS による、Fluent UI React v9 の Web トークンと、ドキュメントに記載された Field、TabList、Dialog の構造の解釈です。Fluent のネイティブなコンポーネントランタイムではありません。 ``` Fluent web workspace study
Northstar workspace / Product team
Team workspace · October launch

Launch workspace

One brief. A clear decision. The right people.

Alex Chen · Product design
Updated today at 09:30

A more welcoming first project

Help a new team move from an empty workspace to its first useful result. This review focuses on the welcome screen and the first-project setup.

The decision

Should a sample project be created automatically, or offered as an option?

We want a clear starting point without filling the workspace with content someone did not choose. Review both paths before the team walkthrough.

Review checklist

Checklist changes are local to this example.

Fluent UI React v9 web-token study · HTML/CSS interpretation, not native library components. Try tabs, theme, checkboxes and the access form.

Add a person to Launch workspace

Choose an address and permission. This demonstration updates the local list only.

For example, jordan@example.com
Viewers can read; editors can change the brief in a real application
 ``` コードリファレンス - このドキュメントのアクセスダイアログとタブには、ネイティブの HTML コントロールを使用しています。FluentProvider、Field、Dialog の動作を評価するには、別途 React v9 のエントリーを実行してください。 ### 完全なネイティブ実装のエントリ セットアップの完全な実装を、焦点を絞った API の解説とあわせてここにまとめています。セットアップに記載されたパッケージとビルドの前提条件に従ってください。 ``` // Terminal: npm install @fluentui/react-components@9 // Existing React application; index.html must contain
. // Entry file: src/main.jsx import * as React from 'react'; import { createRoot } from 'react-dom/client'; import { FluentProvider, webLightTheme, webDarkTheme, makeStyles, tokens, Button, Body1, Title3, TabList, Tab, Field, Input, Select, Dialog, DialogTrigger, DialogSurface, DialogBody, DialogTitle, DialogContent, DialogActions } from '@fluentui/react-components'; const useStyles = makeStyles({ page: { maxWidth: '880px', margin: '0 auto', padding: tokens.spacingHorizontalXXL }, header: { display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: tokens.spacingHorizontalL }, panel: { padding: tokens.spacingHorizontalXXL, marginTop: tokens.spacingVerticalL, backgroundColor: tokens.colorNeutralBackground2, borderRadius: tokens.borderRadiusXLarge }, form: { display: 'grid', gap: tokens.spacingVerticalL }, row: { display: 'flex', flexWrap: 'wrap', justifyContent: 'space-between', gap: tokens.spacingHorizontalM, paddingTop: tokens.spacingVerticalM, paddingBottom: tokens.spacingVerticalM }, }); function Workspace({ dark, setDark }) { const styles = useStyles(); const [tab, setTab] = React.useState('brief'); const [open, setOpen] = React.useState(false); const [email, setEmail] = React.useState(''); const [permission, setPermission] = React.useState('Can view'); const [error, setError] = React.useState(''); const [notice, setNotice] = React.useState(''); const [people, setPeople] = React.useState([{ email: 'alex@example.com', permission: 'Owner' }]); function submit(event) { event.preventDefault(); const value = email.trim().toLowerCase(); if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value)) { setError('Enter an email address such as name@example.com'); return; } if (people.some(person => person.email === value)) { setError('This address already appears in the local access list'); return; } setPeople(previous => [...previous, { email: value, permission }]); setNotice(`Added ${value} as ${permission.toLowerCase()} in this local example. No invitation was sent.`); setEmail(''); setError(''); setOpen(false); setTab('people'); } return
Launch workspace
Project brief and access settings · local demonstration setTab(data.value)}> Brief People setOpen(data.open)}>
Add a person to Launch workspace

This example updates local state only. It does not send email or change real access.

{ setEmail(data.value); setError(''); }} />

{notice}

; } function App() { const [dark, setDark] = React.useState(false); return ; } createRoot(document.getElementById('root')).render(); ``` コードリファレンス - 既存の React アプリ向けに、React v9 のコンポーネントを完全に組み合わせた例です。スタンドアロンのプレビューは、別個の HTML/CSS による解釈です。このコードで行うのは、ローカルでの入力検証と状態更新のみです。メール送信や実際の権限変更は行いません。ソース API は確認済みですが、対象プロジェクトでテストするまでは、ネイティブパッケージのコンパイルを確認したとはしていません。 ### Field + Input + Select：ラベル付きのアクセスフォーム 以下のコード片は、後述の完全なセットアップにある状態変数とインポートを使用します。Field がラベル、ヒント、検証結果の表示を担い、メールアドレスのルールと重複チェックはアプリケーション側で処理します。 ``` { setEmail(data.value); setError(''); }} /> ``` コードリファレンス - required はアクセシブルな必須項目の表示を行いますが、アプリケーションの検証ルールを実装するものではありません。 - validationMessage がある場合、既定では検証状態が error になります。エラーを表示しない場合は、none を明示的に設定してください。 - Input の onChange では、現在の文字列が data.value に渡されます。ハンドラーを、DOM イベントのみを受け取る通常の入力ハンドラーと混同しないでください。 ### パネルとの関連付けを明示した、制御可能な TabList 選択状態とタブの動作は TabList が制御します。コンテンツパネルは独自にレンダリングし、各 Tab の ID とアクセシブルな名前を対応するパネルに関連付けてください。 ``` setTab(data.value)}> Brief People ``` コードリファレンス - selectedValue は TabList に設定し、各 Tab には個別の値を設定します。 - selectTabOnFocus の既定値は false です。この動作を明示的に変更しない限り、矢印キーによるフォーカス移動と選択は別々に行われます。 - Fluent の横並びタブは、自動的に折り返されたりスクロールしたりしません。この例では、常に表示できるよう短いラベルを 2 つ使用しています。 ## Microsoft Fluent 2 デザインシステムのエージェント設定 ### 実装の出発点 既存の React アプリ向けに、React v9 のコンポーネントを完全に組み合わせた例です。スタンドアロンのプレビューは、別個の HTML/CSS による解釈です。このコードで行うのは、ローカルでの入力検証と状態更新のみです。メール送信や実際の権限変更は行いません。ソース API は確認済みですが、対象プロジェクトでテストするまでは、ネイティブパッケージのコンパイルを確認したとはしていません。 ``` // Terminal: npm install @fluentui/react-components@9 // Existing React application; index.html must contain
. // Entry file: src/main.jsx import * as React from 'react'; import { createRoot } from 'react-dom/client'; import { FluentProvider, webLightTheme, webDarkTheme, makeStyles, tokens, Button, Body1, Title3, TabList, Tab, Field, Input, Select, Dialog, DialogTrigger, DialogSurface, DialogBody, DialogTitle, DialogContent, DialogActions } from '@fluentui/react-components'; const useStyles = makeStyles({ page: { maxWidth: '880px', margin: '0 auto', padding: tokens.spacingHorizontalXXL }, header: { display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: tokens.spacingHorizontalL }, panel: { padding: tokens.spacingHorizontalXXL, marginTop: tokens.spacingVerticalL, backgroundColor: tokens.colorNeutralBackground2, borderRadius: tokens.borderRadiusXLarge }, form: { display: 'grid', gap: tokens.spacingVerticalL }, row: { display: 'flex', flexWrap: 'wrap', justifyContent: 'space-between', gap: tokens.spacingHorizontalM, paddingTop: tokens.spacingVerticalM, paddingBottom: tokens.spacingVerticalM }, }); function Workspace({ dark, setDark }) { const styles = useStyles(); const [tab, setTab] = React.useState('brief'); const [open, setOpen] = React.useState(false); const [email, setEmail] = React.useState(''); const [permission, setPermission] = React.useState('Can view'); const [error, setError] = React.useState(''); const [notice, setNotice] = React.useState(''); const [people, setPeople] = React.useState([{ email: 'alex@example.com', permission: 'Owner' }]); function submit(event) { event.preventDefault(); const value = email.trim().toLowerCase(); if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value)) { setError('Enter an email address such as name@example.com'); return; } if (people.some(person => person.email === value)) { setError('This address already appears in the local access list'); return; } setPeople(previous => [...previous, { email: value, permission }]); setNotice(`Added ${value} as ${permission.toLowerCase()} in this local example. No invitation was sent.`); setEmail(''); setError(''); setOpen(false); setTab('people'); } return
Launch workspace
Project brief and access settings · local demonstration setTab(data.value)}> Brief People setOpen(data.open)}>
Add a person to Launch workspace

This example updates local state only. It does not send email or change real access.

{ setEmail(data.value); setError(''); }} />

{notice}

; } function App() { const [dark, setDark] = React.useState(false); return ; } createRoot(document.getElementById('root')).render(); ``` ### あなたのプロジェクト向けプロンプト ``` @fluentui/react-components の Fluent UI React v9 を使用します。webLightTheme を設定した FluentProvider をレンダリングし、webDarkTheme に切り替えられるようにします。概要には Title3 と Body1 を使い、TabList とビューを制御可能な形で組み合わせ、各パネルを明示します。アクセス用 Dialog には Field、Input、Select と実際のフォームを含めます。独自の背景レイヤーと余白にはトークンを使用します。提示されたコンポーネント例とランタイムの型ペアに従い、Subtitle1 は 20/28 とします。無効な入力を保持し、ローカルでのアドレス重複を拒否し、ダイアログのフォーカスを復元し、ローカルでの追加を実態に即して説明します。認可と結果の契約が提示された場合に限り、共有サービスと連携します。 ``` ## Microsoft Fluent 2 デザインシステムの出典と対象範囲 Microsoft の製品でも、実際に利用できる共有サービスでもなく、OpenDesign アプリケーションを対象にした Fluent UI React v9 の検証です。スタンドアロンのプレビューは、検証済みの Web トークンとコンポーネント構造を HTML/CSS で解釈したものです。以下の React コードでは Fluent のネイティブコンポーネントを使用します。参照値は 2026 年 10 月 3 日に確認したリンク先のソーススナップショットに基づき、すべてのリリース、プラットフォーム、ブランドで同一の値が使われることを保証するものではありません。 - React v9 パッケージのエントリー プロバイダーとスイートのインストール。 - テーマの構成 セマンティックトークンの使い方と利用可能なテーマ。 - ランタイムのタイポグラフィ フォントスタック、サイズ、行の高さ、ウェイト。 - テキストスタイルの対応関係 プリセットとグローバルトークンの対応。 - デザインの文字サイズ体系 デザイン言語の表。Subtitle1 はランタイムの値の組み合わせとは異なります。 - ランタイムの余白 水平方向と垂直方向のトークン名。 - レイアウトの指針 グローバルな余白とレスポンシブ対応に関する考慮事項。 - 角丸トークン ランタイムで使用できる形状の値。 - モーションの再生時間 ランタイムの再生時間の値。 - ライトテーマのセマンティックマッピング ニュートラルカラーとブランドカラーのエイリアス割り当て。 - ダークテーマのセマンティックマッピング ダークテーマのエイリアス割り当て。 - ブランドのカラースケール Web と Teams の実際のブランドカラー値。 - Web テーマの構成 webLightTheme は brandWeb を使用します。 - Field の使い方 ラベル、検証、組み合わせ方に関する指針。 - Field の API スロットとアクセシブルな子要素の仕様。 - TabList の使い方 レイアウトとカテゴリ選択に関する指針。 - TabList の API 選択状態の制御とフォーカスのオプション。 - Dialog の使い方 フォームの配置とモーダル操作に関する指針。 - Dialog API 表示状態の制御とモーダルの種類。 ## Microsoft Fluent 2 デザインシステムの関連リソース ### Monday Vibe Vibe 4のトークンとReactコントロールを使って、実用的なデリバリーボードを構成します。アクションを示すセマンティックカラーとボードラベルの違い、名前付きの余白ステップ、フォントのショートハンド、新しいアプリケーションに必要な明示的なCSSの設定について確認できます。 ### Morningstar デザインシステム 数値の桁を揃え、アセットカラーの意味を保ち、読みやすいタイポグラフィを実現するリサーチ用インターフェースを構築します。MDS定数、Vue 3への導入、Morningstar Intrinsicへの移行、並べ替え可能な架空の資産配分ノートブックを紹介します。 ### Mozilla Protocol 実際のフォントスタック、余白、コンテナのスケールを含む、編集者向けの Protocol ガイドです。イラスト付きのレスポンシブな読書ページと、ネイティブな CSS フォームの完全な例も掲載しています。 - [実装リファレンス](https://github.com/microsoft/fluentui/blob/master/packages/react-components/react-components/README.md) - [ソース](https://github.com/microsoft/fluentui/blob/master/packages/tokens/src/alias/lightColor.ts) - [ソース](https://github.com/microsoft/fluentui/blob/master/packages/tokens/src/global/brandColors.ts) - [ソース](https://github.com/microsoft/fluentui/blob/master/packages/tokens/src/global/spacings.ts) - [ソース](https://github.com/microsoft/fluentui/blob/master/packages/tokens/src/global/fonts.ts) - [ソース](https://github.com/microsoft/fluentui/blob/master/packages/tokens/src/global/borderRadius.ts) - [ソース](https://github.com/microsoft/fluentui/blob/master/packages/tokens/src/global/durations.ts) - [ソース](https://github.com/microsoft/fluentui/blob/master/packages/tokens/src/alias/darkColor.ts) - [関連する仕様を確認する](https://github.com/microsoft/fluentui/blob/master/packages/react-components/react-components/README.md) - [関連する仕様を確認する](https://github.com/microsoft/fluentui/blob/master/docs/architecture/design-tokens.md) - [関連する仕様を確認する](https://github.com/microsoft/fluentui/blob/master/packages/tokens/src/alias/lightColor.ts) - [関連する仕様を確認する](https://github.com/microsoft/fluentui/blob/master/packages/tokens/src/alias/darkColor.ts) - [関連する仕様を確認する](https://github.com/microsoft/fluentui/blob/master/packages/tokens/src/global/fonts.ts) - [関連する仕様を確認する](https://github.com/microsoft/fluentui/blob/master/packages/tokens/src/global/typographyStyles.ts) - [関連する仕様を確認する](https://github.com/microsoft/fluentui/blob/master/packages/tokens/src/global/spacings.ts) - [関連する仕様を確認する](https://github.com/microsoft/fluentui/blob/master/packages/tokens/src/global/borderRadius.ts) - [関連する仕様を確認する](https://github.com/microsoft/fluentui/blob/master/packages/react-components/react-tabs/library/src/components/TabList/TabList.types.ts) - [関連する仕様を確認する](https://fluent2.microsoft.design/components/web/react/core/tablist/usage) - [関連する仕様を確認する](https://github.com/microsoft/fluentui/blob/master/packages/react-components/react-field/library/src/components/Field/Field.types.ts) - [関連する仕様を確認する](https://fluent2.microsoft.design/components/web/react/core/field/usage) - [関連する仕様を確認する](https://github.com/microsoft/fluentui/blob/master/packages/react-components/react-dialog/library/src/components/Dialog/Dialog.types.ts) - [関連する仕様を確認する](https://fluent2.microsoft.design/components/web/react/core/dialog/usage) - [関連する仕様を確認する](https://github.com/microsoft/fluentui/blob/master/packages/tokens/src/global/durations.ts) - [コードリファレンス](https://github.com/microsoft/fluentui/blob/master/packages/react-components/react-components/README.md) - [コードリファレンス](https://github.com/microsoft/fluentui/blob/master/packages/react-components/react-field/library/src/components/Field/Field.types.ts) - [コードリファレンス](https://github.com/microsoft/fluentui/blob/master/packages/react-components/react-tabs/library/src/components/TabList/TabList.types.ts) - [React v9 パッケージのエントリー プロバイダーとスイートのインストール。](https://github.com/microsoft/fluentui/blob/master/packages/react-components/react-components/README.md) - [テーマの構成 セマンティックトークンの使い方と利用可能なテーマ。](https://github.com/microsoft/fluentui/blob/master/docs/architecture/design-tokens.md) - [ランタイムのタイポグラフィ フォントスタック、サイズ、行の高さ、ウェイト。](https://github.com/microsoft/fluentui/blob/master/packages/tokens/src/global/fonts.ts) - [テキストスタイルの対応関係 プリセットとグローバルトークンの対応。](https://github.com/microsoft/fluentui/blob/master/packages/tokens/src/global/typographyStyles.ts) - [デザインの文字サイズ体系 デザイン言語の表。Subtitle1 はランタイムの値の組み合わせとは異なります。](https://fluent2.microsoft.design/typography) - [ランタイムの余白 水平方向と垂直方向のトークン名。](https://github.com/microsoft/fluentui/blob/master/packages/tokens/src/global/spacings.ts) - [レイアウトの指針 グローバルな余白とレスポンシブ対応に関する考慮事項。](https://fluent2.microsoft.design/layout) - [角丸トークン ランタイムで使用できる形状の値。](https://github.com/microsoft/fluentui/blob/master/packages/tokens/src/global/borderRadius.ts) - [モーションの再生時間 ランタイムの再生時間の値。](https://github.com/microsoft/fluentui/blob/master/packages/tokens/src/global/durations.ts) - [ライトテーマのセマンティックマッピング ニュートラルカラーとブランドカラーのエイリアス割り当て。](https://github.com/microsoft/fluentui/blob/master/packages/tokens/src/alias/lightColor.ts) - [ダークテーマのセマンティックマッピング ダークテーマのエイリアス割り当て。](https://github.com/microsoft/fluentui/blob/master/packages/tokens/src/alias/darkColor.ts) - [ブランドのカラースケール Web と Teams の実際のブランドカラー値。](https://github.com/microsoft/fluentui/blob/master/packages/tokens/src/global/brandColors.ts) - [Web テーマの構成 webLightTheme は brandWeb を使用します。](https://github.com/microsoft/fluentui/blob/master/packages/tokens/src/themes/web/lightTheme.ts) - [Field の使い方 ラベル、検証、組み合わせ方に関する指針。](https://fluent2.microsoft.design/components/web/react/core/field/usage) - [Field の API スロットとアクセシブルな子要素の仕様。](https://github.com/microsoft/fluentui/blob/master/packages/react-components/react-field/library/src/components/Field/Field.types.ts) - [TabList の使い方 レイアウトとカテゴリ選択に関する指針。](https://fluent2.microsoft.design/components/web/react/core/tablist/usage) - [TabList の API 選択状態の制御とフォーカスのオプション。](https://github.com/microsoft/fluentui/blob/master/packages/react-components/react-tabs/library/src/components/TabList/TabList.types.ts) - [Dialog の使い方 フォームの配置とモーダル操作に関する指針。](https://fluent2.microsoft.design/components/web/react/core/dialog/usage) - [Dialog API 表示状態の制御とモーダルの種類。](https://github.com/microsoft/fluentui/blob/master/packages/react-components/react-dialog/library/src/components/Dialog/Dialog.types.ts)