次の方法で共有

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

  • [アーティクル]

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

現在デフォルトでオンになっているモダンで刷新されたデザイン機能は、他の機能よりも遅いスケジュールで展開されます。 詳細: デフォルトで一般提供ロールアウトを管理。

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

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

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

新しいデザイン試す設定。

コマンド バー

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

フローティング コマンド バー

ビュー ページ

ビュー ページは新しいコマンド バーを使用し、高さの変更を利用してユーザーの注意を引くのに役立つ更新されたグリッド領域があります。

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

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

更新された最新のデザインのビュー ページ。

フォーム ページ

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

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

モダンで爽やかなデザインのフォーム ページ。

フィールド コントロール

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

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

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

更新された最新のデザインのモデル駆動型アプリのフィールド。

ダッシュボード ページ

独立したサブグリッドとグラフを備えたシステム ダッシュボード ページは、新しい コマンド バー を使用するように更新され、フォーム ページやビュー ページのセクションと同様のスタイルを持ちます。 最近のエクスペリエンスが有効になるか、月次チャネル を使用すると、システム ダッシュボードのグリッドは新しい Power Apps グリッド コントロール を使用します。 新しいグリッドは既定では有効になっていません。

刷新されたモダンな外観のシステム ダッシュボード ページ。

既知の制限

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

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

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

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

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

クラシック テーマの尊重

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

ユーザー定義アイコン

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

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

Power Apps Component Framework / カスタム コード コンポーネントでのモダンで刷新されたデザインの使用

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

カスタム ページでのモダンで刷新されたデザインの使用

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

アプリ ヘッダーの色の変更

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

モダンで刷新されたデザインでの作業

モダンで刷新されたデザインに関するフィードバックを提供する

モデル駆動型アプリで更新された最新のデザインを使用した後、Power Apps コミュニティ フォーラム でご意見をお聞かせください。

オプトインの一般提供ロールアウトを管理する

モデル駆動型アプリのモダンで爽やかなデザインは、次のリリース チャネルで一般提供されています。

  • 2023 年 8 月の月間チャンネル
  • 2023 年リリース サイクル 2 での半期チャネル

一般公開されると、エンド ユーザーには 新しいデザインを試す 設定が表示され、モダンで爽やかなエクスペリエンスを有効にできます。 ユーザーはいつでも以前のユーザー インターフェイス (UI) に戻すことができます。

モダンで刷新されたデザインをオンにする

エンド ユーザーは、アプリのヘッダーにある 新しいデザインを試す 設定を有効にして、アプリのモデル駆動型アプリのデザインをモダンで爽やかにすることができます。 エンド ユーザーは いつでも 元に戻すことができます。

古い UI に戻す

はい、エンド ユーザーは 新しいデザイン トグルをオフにして以前の UI に戻すことができます。 作成者はアプリの設定を更新すると新デザインを無効にすることもできます。

モダンで爽やかなデザインを無効にする方法の詳細については、アプリ デザイナーでモデル駆動型アプリの設定を管理する を参照してください。

管理者は、ソリューション エクスプローラーを使用して モデル駆動型アプリの新デザイン の値を いいえ に設定すると、組織のすべてのアプリで 新デザイン 設定を無効にできます。 これにより、新デザイン トグルが非表示になり、モダンで刷新されたデザインが有効になりません。

  1. https://make.powerapps.com/をオープンする

  2. ソリューション で、1 つ以上のモデル駆動型アプリを含む既存ソリューションを開きます。

  3. 既存を追加 > その他 > 設定を選択します。

  4. 新デザイン を検索します。

  5. モデル駆動型アプリの新デザイン を選択します。

  6. 追加 を選択しソリューションに追加します。

  7. ソリューション エクスプローラーから モデル駆動型アプリの新デザイン を選択します。

  8. 設定環境の値 を いいえ に更新します。

  9. 保存 を選択します。

  10. すべてのカスタマイズを公開します。

    注意

    2023 リリース サイクル 2 を使用していて、新しい外観をオフにする場合は、新デザインを試す 設定を更新します。

既定でオンになっている一般提供ロールアウトの管理

モデル駆動型アプリのモダンで清楚なデザインは、次のリリース チャネルで既定で有効になっています。

  • 2024 年 4 月の月次チャネル
  • 2024 年リリース サイクル 1 での半期チャネル

一般公開されると、エンド ユーザーには、既定で有効化されているモダンで清楚なエクスペリエンスを提供する新デザインが表示されます。 ユーザーはいつでも以前のユーザー インターフェイス (UI) に戻すことができます。 半期ごとのチャネルの場合、ロールアウトは 4 月から数週間にわたってゆっくりと行われます。 作成者と管理者は、この機能がアプリに展開されるまでに遅れが出ることを想定しておく必要があります。

アプリのモダン デザインを有効にしてトグルを削除する

作成者と管理者が "常にオン" のモダン エクスペリエンスを有効にするシナリオでは、新デザインを常にオン アプリ設定を設定することで、これを有効にすることができます。 これにより、アプリのすべてのユーザーに対してモダンで刷新されたデザインが有効になり、エンド ユーザーが 新しいデザイン をオフにするためのヘッダー スイッチ機能が削除されます。

管理者は、ソリューション エクスプローラーを使用して 新デザインを常にオン の値を はい に設定することで、組織のすべてのアプリで 新デザインを常にオン 設定を有効にできます。 これにより、新しい外観 トグルが非表示になり、すべてのユーザーに対してモダンで刷新されたデザインが有効になります。

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