モデル駆動型アプリのモダンで爽やかなデザイン

モデル駆動型アプリでは、[ 新しい外観 のアプリ] 設定がオンになっていると、最新の外観が更新されます。 新しい外観では、フォント、色、境界線、影など、最新の Microsoft Fluent デザイン システムに合わせて更新されたスタイルが提供されます。 更新されたデザインにより、モデル駆動型アプリが使いやすくなり、ユーザーは目的を迅速かつ効率的に達成できます。 Fluent デザイン システムは、一貫性、品質、および Microsoft 全体のプラットフォームの一貫性を提供します。 また、拡張性の強固な基盤を提供し、将来的にダーク モードをサポートできるようにします。

モダンで刷新されたデザインの内容

更新された最新のエクスペリエンスで期待できることは次のとおりです。

• フォーム、ビュー、ダッシュボード ページのスタイルを更新し、ドロップ シャドウや明るい背景色などを使用して、高さや 浮いた 様子を作成できるようになりました。 浮いた様子はセクションを視覚的に分離し、主要なコンテンツに注目を集めるために役立ちます。
• フォーム、ビジネス プロセス フロー、およびダイアログの新しい Fluent ベースのコントロール。 ダイアログの高さがコンテンツに基づいて自動的に変更されるようになりました。
• ビューおよび標準のダッシュボード ページで、読み取り専用グリッドの代わりに新しい Power Apps グリッドを使用します。
• 個人または組織のブランディングに合わせてアプリのヘッダーの色をカスタマイズするための新しいメカニズム。 詳細については 最新のテーマを使用するを参照してください。

コマンド バー

floating コマンド バーは、Microsoft 365 エクスペリエンスに合わせて配置され、一貫した間隔、丸みを帯びた角で、上部にあります。 次の例では、コマンド バーがページ上部の別のセクションにあることに注意してください。

ビュー ページ

新しいコマンドバーと、標高の変化を利用してユーザーの注意を引くように更新されたグリッド エリアを使用してページを表示します。

ビュー ページの最も重要な変更点は、読み取り専用グリッドから Power Apps グリッド コントロール への切り替えで、最新のデータ参照エクスペリエンスのための無限スクロール機能を備えています。 このグリッドは、メイン フォームおよびダッシュボードのサブグリッドおよび関連するグリッドにも表示されます。 Power Apps グリッド コントロールは、フィルター処理を有効にする プロパティを使用したインライン編集もサポートしています。 作成者は、編集可能なグリッドを手動で構成して、Power Apps グリッドコントロールを使用できます。

次の例は、更新された最新のデザインのビュー ページを示しています。

フォーム ページ

フォーム ページでは、ヘッダー、タブ、セクション、ビジネス プロセスフローが更新された新しいコマンド バーを使用します。 クイック ビュー、カード フォーム、ヘッダー、サイトマップ、およびタイムライン コントロールも、スタイルが更新されています。

次の例は、更新された最新のデザインのフォーム ページを示しています。

フィールド コントロール

テキスト入力、アクション入力、検索、チェック ボックス コントロールなどのフィールド コントロールは、Fluent コンポーネントを使用して構築および設計されています。 今後のアップデートでは、Fluent デザインを使用してさらに多くのフィールド コントロールが最新化される予定です。

フォーム上のフィールドのコンテナーであるフィールド セクションは、より合理化されたデザインになっています。 アイコンがフィールド ラベルの右側に表示されるようになりました。 レイアウトをすっきりさせるため、一部の冗長なアイコンが削除されました。 入力およびエラー メッセージのスタイルも、Fluent デザインに基づいて更新されます。

次の例は、更新された最新のデザインのフィールド セットを示しています。

ダッシュボード ページ

独立したサブグリッドとグラフを含むシステム ダッシュボード ページは、新しいコマンド バー を使用するように更新されており、フォーム ページやビュー ページのセクションと同様のスタイル設定になっています。 モダン エクスペリエンスがオンになっている場合、または 月次チャネル を使用している場合、システム ダッシュボード グリッドでは新しい Power Apps グリッド コントロール が使用されます。 新しいグリッドはデフォルトではオンになっていません。

チャット コントロール

ビュー ページとダッシュボードのグラフ コントロールが新しいカラー パレットに更新され、モダンでリフレッシュされた外観になりました。

グラフの色がカスタマイズされている場合、新しい外観がカスタム色よりも優先されます。 作成者は、チャートの .xml ファイルに CustomColorOverride プロパティを追加することで、カスタム カラーを保持できます。

<Chart CustomColorOverride="true">

ヘッダーとナビゲーションの更新

刷新されたヘッダーとナビゲーションにより、モダンなアプリヘッダー、簡素化されたサイトマップ、コンパクトなコマンドを備えた凝縮されたページ ヘッダーにより、アプリがより使いやすくなりました。 このエクスペリエンスは、ページのナビゲーションやコマンドの検索、レイアウトの習得にかかる時間を短縮することで、生産性を向上させます。

新しいアプリ ヘッダーと簡素化されたサイトマップは以下のように表示されます:

新しいフォーム ヘッダーは、行の詳細にさらに焦点を当てると次のように表示されます。

この更新プログラムは、プラン デザイナーによって生成されたすべてのアプリに自動的に適用されます。 他の既存のアプリについては、次の手順に従ってオプトインできます。

1. アプリ デザイナーのコマンド バーで、設定 を選択します。
2. 機能を選択し、ヘッダーとナビゲーションの更新を有効にします。

詳しくは ヘッダーとナビゲーションの更新に関するよくあるご質問をご参照ください。

既知の制限

モデル駆動型アプリの更新された最新のデザインには、いくつかの制限があります。

ブラウザー外でのモダンで刷新されたデザイン

モバイル アプリ、メール アプリは、モダンで爽やかなデザインをサポートしておらず、プレビューや一般提供に含まれません。

テーマの切り替えまたはダークモードの有効化

テーマの切り替えやダーク モードの有効化は、現時点ではサポートされていません。

クラシック テーマの尊重

モダンで刷新されたデザインで、Power Apps は クラシック テーマのカスタマイズ をサポートしなくなりました。 ただし、アプリ ヘッダーの色を上書きして、組織のブランドをモダンで刷新されたデザインに合わせることができます。 詳しくは、アプリのヘッダーの色を変更するをご覧ください。 モダンで刷新されたデザインの他のテーマのカスタマイズ オプションはまだ利用できません。

ユーザー定義アイコン

SVG アイコンのみがサポートされます。 PNG などの他の形式を使用する場合、ナビゲーションにはそれらは表示されず、代わりにデフォルトのアイコンが表示されます。

よく寄せられる質問 (FAQ)

1. Power Apps component framework またはカスタム コード コンポーネントで、最新のリフレッシュされた外観を使用できますか?

使用中のモダン テーマは Power Apps component framework コンポーネントに渡され、モダン テーマでコンポーネントをスタイル設定 できます。

2. カスタム ページでモダンでリフレッシュされた外観を使用できますか?

モダン コントロールは、カスタム ページおよびモダンで刷新されたデザインで使用できます。 現在、カスタム ページでは最新のテーマは使用されていません。

3. アプリのヘッダーの色を変更できますか?

モダンで刷新されたデザインのまま、組織に合わせてアプリ ヘッダーの色を変更することができます。 詳細については 最新のテーマを使用するを参照してください。 モダンで刷新されたデザインの他のテーマのカスタマイズ オプションはまだ利用できません。

4. ヘッダーおよびナビゲーションの更新に関するFAQ

新しい外観をオンにせずに、ヘッダーとナビゲーションのリフレッシュをオンにできますか？

いいえ、アプリ内で更新されたヘッダーとナビゲーションを表示するには、ヘッダーとナビゲーションの更新を有効にするだけでなく、新しいデザインも有効化する必要があります。

既存のアプリでヘッダーとナビゲーションの更新を有効にするにはどうすればよいですか?

この機能は、既存のアプリに対してはオプトイン機能として利用できます。 アプリの設定で有効にできます。

アプリ ヘッダーのグローバル コマンド バーにヘルプ アイコンが表示されないのはなぜですか？

ドキュメントへのヘルプ リンクは、設定ウィンドウにあります。

Copilot チャット ペインの横にあるサイド ペイン レールはどこですか？

サイド ペイン スイッチャーは、アプリ内に 2 つ以上のサイド ペインがある場合にのみ利用可能になります。 Copilot チャットが唯一のサイド ペインである場合、スイッチャーは非表示になります。

プラン デザイナーが生成したアプリのサイトマップが既存のアプリのサイトマップと異なるのはなぜですか?

プラン デザイナーが生成したアプリには、合理化されたサイトマップがあります。 ホーム、最近使ったもの、ピン留め、およびサイトマップ グループは既定でオフになっており、サイトマップのナビゲーション オプションはシンプルなフラット リストで表示されます。

従来の外観に戻す

エンド ユーザーは 、2025 Wave 1 リリース以降、従来の外観に戻すことができませんでしたが、管理者はモデル駆動型アプリの新しい外観のアプリ設定を更新することで、すべてのユーザー の新しい外観 をオフにできます。

1. https://make.powerapps.com/をオープンする
2. ソリューション で、1 つ以上のモデル駆動型アプリを含む既存ソリューションを開きます。
3. 既存を追加>その他>設定を選択します。
4. 新デザイン を検索します。
5. モデル駆動型アプリの新デザイン を選択します。
6. 追加 を選択しソリューションに追加します。
7. ソリューション エクスプローラーから モデル駆動型アプリの新デザイン を選択します。
8. 設定環境の値 を いいえ に更新します。
9. 新しい外観を無効にするソリューションにアプリを追加します。
10. アプリの値をいいえに更新します。
11. 保存を選択します。
12. すべてのカスタマイズを公開します。

このアプリ設定とその他のアプリ設定の詳細については、 アプリ デザイナーでのモデル駆動型 アプリ設定の管理に関するページを参照してください。