応答性の高いデザインのガイドライン

レスポンシブ キャンバス アプリは、固定キャンバスをスケーリングするのではなく、レイアウトとナビゲーションを使用可能なビューポートに合わせて調整します。 アプリがサポートされているすべてのウィンドウ サイズ、デバイスの向き、ズーム レベル、および入力モードで使用できるように、意図的に応答性の高い動作を設計します。

次の各ガイドラインは、デバイスの画面サイズや向きに関係なく、キャンバス アプリが最適なユーザー エクスペリエンスを提供することを目的としています。 これらのガイドラインは、最新のアプリ開発の最も重要な側面の 1 つに対処します。 これらのガイドラインは、Power Apps のアクセシビリティとユーザー エンゲージメントの向上を目指す開発者にとって有益なものです。

画面サイズに適応する

キャンバス アプリは、デバイスの画面サイズに基づいてレイアウトとインターフェースを自動的に調整するように設計する必要があります。 この応答性により、スマートフォンからデスクトップ コンピューターまで、さまざまなデバイスでアプリが機能し、見た目も魅力的に保たれます。

自動レイアウト コンテナを使用する

応答性の高い画面の主な構造として、水平および垂直の自動レイアウト コンテナーを使用します。 これらのコンテナーは、アプリ コンポーネントを動的に整理して配置し、画面のサイズの変更に効果的に対応できるようにします。

枠に合わせて拡大縮小を無効にして、縦横比と向きを管理する

真のアプリのレスポンシブ動作を有効にするには、Scale to Fit 設定をオフにします。 この設定により、スケーリングを防ぎ、さまざまな画面サイズに対する自然なレイアウトの適応を促進します。 また、縦横比と ロック方向 の設定を調整します。 これらの調整により、アプリのレイアウトがさまざまな画面サイズと向きに効果的に応答します。 アプリは、デバイスが縦モードか横モードかに関係なく、一貫性のある機能インターフェイスを維持します。

レスポンシブ レイアウトを使用する

さまざまなデバイスでさまざまなユーザー エクスペリエンスを提供する、分割画面やサイドバーなどのレイアウトデザインを使用します。 この適応性により、アプリの機能が強化され、どのデバイスのユーザーにとってもより直感的なものとなります。

動的なレイアウトに数式を使用する

配置コントロールとサイズ設定コントロールには、固定座標の代わりに数式を使用します。 このアプローチにより、動的で応答性の高いレイアウトの画面サイズの変更に適応できます。

さまざまなデバイスを計画する

効果的なレスポンシブ デザインには、さまざまなデバイス上でのアプリの外観と機能を予測することが含まれます。 この予測には、スペースを最適化し、使いやすさを維持するために、要素のサイズを変更したり、小さな画面で要素を完全に非表示にしたりする決定が含まれます。

実践的な実装

レスポンシブではないキャンバス アプリをレスポンシブなものに変換するには、体系的なアプローチが必要です。 このアプローチでは、応答性の設定を調整し、コンテナーのプロパティを慎重に構成して、アプリ内の要素がさまざまな画面サイズに適応するようにします。

リソース

次のステップ

コードの読みやすさ

  • 最終更新: