アプリ デザインのガイドライン

効果的で使いやすいPower Appsの設計は、インパクトのあるビジネス ソリューションを作成するために不可欠です。 このガイドでは、最新のコントロール、フォームの設計、コンテナーの使用、ギャラリーの最適化、再利用可能なコンポーネントの構築に重点を置いて、Power Appsを設計するためのベスト プラクティスと推奨事項を示します。

モダン コントロール

キャンバスアプリのモダンコントロールは、マイクロソフト エコシステム内のユーザーインターフェイスの開発と設計における重要な進歩です。 Microsoft の Fluent Design System に基づいて、これらのコントロールは、テーマ機能とのシームレスな統合を保証しながら、高速でパフォーマンス指向でアクセス可能なユーザー エクスペリエンスを提供するように設計されています。 タブ リスト、進行状況バー、情報ボタン、スピナーなどを含むこれらのコントロールの導入は、より直感的で応答性が高く、視覚的に魅力的なアプリケーションを作成するための戦略的なシフトを強調しています。 これらの最新のコントロールを使用することで、開発者は、美的に快適で機能的に豊富な洗練されたユーザー インターフェイス (UI) 要素を簡単に実装でき、全体的なユーザー エンゲージメントと満足度が向上します。

テーマ設定を考慮したこれらのコントロールの固有の設計により、アプリケーション全体で統一された一貫した外観と操作性が実現され、アプリのカスタマイズとブランディングに必要な労力が大幅に削減されます。 設定されたテーマに基づいてすべてのコントロールのスタイルを自動的に更新する機能により、設計プロセスが簡素化され、アプリケーション全体で視覚的な一貫性が保たれます。 このアプローチは、高品質のデジタル エクスペリエンスを提供しながら、ブランドの一貫性を維持しようとする現代の企業のニーズに合わせて調整されます。 最新のコントロールは、アクセシビリティとパフォーマンスにも重点を置いており、インクルーシブ デザインの原則に沿い、障碍者を含む幅広いユーザーがアプリケーションを使用できるようになっています。 このように、キャンバス アプリのモダンコントロールは、単なる UI コンポーネントセットではなく、開発者がより効率的で保守性が高く、アクセシブルでまとまりのあるアプリケーションを構築できるようにする変革的なツールセットです。

フォーム デザインとガイドライン

このセクションでは、フォームの整理、フォームの再利用、フォーム モード、コントロールの配置など、Power Appsでフォームを設計するためのベスト プラクティスについて説明します。

フォームを整理する

• フォームを論理的なセクションに分割し、関連するフィールドをグループ化します。
• フォームを 1 つの画面に収めるようにしましょう。 長い場合は、複数の画面、ステップ、またはタブに分割することを検討してください。
• フィールド ラベルには明確でシンプルな言語を使用し、不慣れな用語や専門用語を避けます。
• データの正確性を確保するために検証ルールを実装します。 必須項目については、必須であることを明記してください。 必要に応じて、電子メール アドレス、電話番号、その他の形式を検証します。

フォームの再利用

• 新しいレコードの作成、既存のレコードの編集、および表示専用モードでのレコードの表示には、単一のフォームを使用します。
• 同じ形式を再利用して、一貫性を確保しながら開発とメンテナンスの時間を短縮します。

フォームモード

ユーザーの操作に基づいてフォーム モードを動的に設定します。 例:

• 新しいレコードを作成するときは、フォームを「新規」モードに設定します。
• 既存のレコードを編集する場合は、フォームを「編集」モードに設定します。
• レコードを表示する場合は、フォームを「表示」モードに設定します。

コントロール配置

• 異なるコントロール (ギャラリー、表示フォーム、編集フォームなど) を別々の画面に配置して、区別できるようにします。
• これらのコントロールを数式と組み合わせることで、まとまりのあるユーザー エクスペリエンスを実現できます。

Containers

キャンバス アプリが拡大してビジネス シナリオが増えるにつれて、コントロールの数が増え、その機能に基づいてコントロールを整理する必要があります。 これを行う方法の1つは、コントロールをグループ化することです。 ただし、コントロールをグループ化することは必ずしも推奨されません。 キャンバス アプリ Container コントロールは、一連のコントロールを保持し、独自のプロパティを持っています。

コンテナは空のスペースとして機能し、コンテナーの左上隅に関連してコントロールを挿入したり整理したりできます。 コンテナーを入れ子構造として配置することで、より複雑なレイアウトを作成し、関連するコントロールをまとめて管理することができます。

コンテナは、Width や BorderColor のような独自のプロパティを持つ実際のコントロールです。 Containers はアプリのレイアウトに影響を与え、スクリーン リーダー ユーザーがアプリの構造を理解するのに役立ちます。

グループには任意のコントロールを追加できますが、コンテナーには論理的に関連のあるコントロールのみを追加する必要があります。

グループを使用してPower Apps内の要素を整理すると、ユーザーは複数の要素に共有プロパティを適用できます。 ただし、グループ内で個々のプロパティを変更するには、手動で調整が必要になる場合があります。 スクリーン リーダーでは認識できないため、アクセシビリティ上の理由から、グループはアプリの論理構造の一部ではありません。 グループを入れ子にすることができないので、複雑なレイアウトを作成するのも困難です。

ギャラリー デザインとガイドライン

Power Appsのギャラリー コントロールを使用すると、データを表示および操作できます。 最適なパフォーマンスとユーザー エクスペリエンスを確保するためにギャラリーを設計するときは、次のベスト プラクティスに留意してください。

• ギャラリー項目を内部から変更しないようにする: ItemsやOnChangeなどの子コントロールのイベント内のギャラリーのOnSelect プロパティを変更しないでください。 このアクションは、特に値が変化したときにイベントをトリガーするコントロールを処理する場合に、予期しない動作を引き起こす可能性があります。

• OnChange によってトリガーされるコントロールには注意してください。コンボ ボックス、日付ピッカー、スライダー、ギャラリーのトグルなどのコントロールを使用する場合は注意が必要です。 これらのコントロールは、 OnChange イベントを予期せずトリガーする可能性があり、無限ループなどの潜在的な問題につながる可能性があります。

• 修正プログラムの適用に対するパフォーマンスへの影響を評価する: ギャラリー内の項目に修正プログラムを適用または更新する場合 、特に多くの項目を処理する場合は、パフォーマンスへの影響を考慮してください。 修正プログラムの適用が遅くなる可能性があり、ギャラリーはすべての項目を再読み込みする可能性があり、パフォーマンスに影響します。

• 無限ループを慎重に処理する: ギャラリー データを変更すると無限ループにつながるイベントがトリガーされる場合は、データが変更されたときに OnChange をトリガーしない最新のコントロールまたはコントロールを使用してloopを中断します。

• 入れ子になったギャラリーを回避する: 入れ子になったギャラリーは、パフォーマンスの問題や複雑なデータ バインディングにつながる可能性があります。 可能な限り、ギャラリーのネスト化は避けてください。 代わりに、データ構造を設計し、関数を最適な方法で使用してください。

• 柔軟な高さギャラリーを使用する: 固定高さのギャラリーでは、特に動的データを処理する場合に、コンテンツの可視性が制限される場合があります。 Height プロパティを Parent.Height またはデータに基づいた動的な値に設定することで、柔軟な高さのギャラリーを使用できます。 この設定により、ギャラリーの高さが調整され、さまざまなデータ量に対応できるようになります。

  

• データの読み込みを最適化する: Power Appsでのデータ読み込みを最適化する場合は、データセット全体を取得するのではなく、ギャラリー内の必要な列のみをフェッチして表示します。

  この最適化を実現する方法の例を次に示します。 複数の列を持つ ProductSales という名前のコレクションがあり、ギャラリーに "ProductName" 列と "QuantitySold" 列のみを表示するとします。

  // Collection named ProductSales with sample sales data
  
  ClearCollect(ProductSales, 
      Table(
          { ProductName: "Phone", UnitPrice: 499.99, QuantitySold: 100 },
          { ProductName: "Laptop", UnitPrice: 999.99, QuantitySold: 50 },
          { ProductName: "Tablet", UnitPrice: 299.99, QuantitySold: 75 }
      )
  )
  
  // Bind the gallery to display only the "ProductName" and "QuantitySold" columns
  
  Gallery1.Items = ShowColumns(ProductSales, ProductName, QuantitySold)
  

ギャラリーのベスト プラクティスの詳細を確認します。

Power Apps Component Framework (PCF) を使用して再利用可能なコンポーネントをビルドする

Power Platform では、Power Apps Component Framework (PCF) を使用して再利用可能なコンポーネントを作成できます。 詳細については、Power Apps コンポーネント フレームワークの概要を参照してください。

次のシナリオでは、Power Appsで PCF コンポーネントを作成することを検討してください。

• Complex UI 要素: 標準のPower Apps コントロールではすぐに使用できない複雑なユーザー インターフェイス要素またはコントロールを作成する必要があります。

• 特定の要件のカスタム コントロール: アプリには、すぐに使用できるコントロールでは満たされていない特定の要件があり、ニーズに合わせてカスタマイズされたカスタム コントロールを作成する必要があります。

• アプリ間のConsistentユーザー エクスペリエンス: PCF コンポーネント内に特定の機能をカプセル化することで、複数のPower Appsまたは環境で一貫したユーザー エクスペリエンスを維持する必要があります。

• アプリ間の再利用性: 複数のアプリで特定の機能またはユーザー インターフェイス要素を再利用する必要が予想されます。 PCF コンポーネントを作成すると、1 回ビルドして再利用できます。

• 高度なロジックの実装: Power Appsの標準の数式または関数の機能を超える高度なビジネス ロジックまたは計算を実装する必要があります。

• ユーザー エクスペリエンスの向上: 既定のコントロールでは実現できない視覚的に魅力的で対話型のコンポーネントを作成することで、全体的なユーザー エクスペリエンスを強化することを目指します。

次のステップ