【Power Apps #0122】固定レイアウトをやめてレスポンシブ化する最初のステップガイド

Power Apps のキャンバスアプリは、デバイスに応じてレイアウトが自動調整されるように設計できます。でも実際には、「固定 を切ったあと何をすればいい？」「どんな式を使えばいい？」と迷う場面も多いんですよね。
今回は Microsoft Learn の公式情報をベースに、レスポンシブ対応の考え方と実装のコツを、技術者の視点からわかりやすくまとめました。

概要

Power Apps のキャンバスアプリでは、デバイスやブラウザーサイズに合わせて最適な表示を行うために、レスポンシブレイアウトを構築できます。
その第一歩が「固定」の無効化で、これによりアプリは実際の画面サイズに従って動的にレイアウトされるようになります。
続いて、画面やコントロールの位置・サイズには固定値ではなく数式を用いることで、画面の幅や高さ、親コントロールの幅・高さに応じて柔軟に調整されます。さらに、コンテナーコントロールやギャラリー内のテンプレート構造を活用し、親子関係に基づいた階層レイアウトを設計することがポイントです。
また、縦横のデバイス回転や画面サイズ（Small〜ExtraLarge）に応じてレイアウトを切り替える方法も提供されており、より高度なユーザー体験を実現できます。これにより、小さなスマートフォンから大きなデスクトップ環境まで、自然な UI 表示が可能になります。

導入

キャンバスアプリは最初に「電話用」か「タブレット用」を選択します。この時点ではまだ固定レイアウトですが、「固定」をオフにすると、実際のデバイスサイズに応じた UI 調整が可能になります。
これを前提に、画面の Width/Height プロパティや App.DesignWidth、DesignHeight を利用したレイアウト構築がスタートします。

手順

1. 固定 を無効化する

• Power Apps Studio の上部メニューから 設定 > 表示 から アプリレイアウトをプルダウンから「レスポンシブ」を選択する

• 同時に Lock aspect ratio もオフになる
  → これにより、UI が実際のデバイスサイズに従って動的に変化するようになる

2. 画面サイズの取得と理解

画面には以下の数式が使用される：

• Width = Max(App.Width, App.DesignWidth)

• Height = Max(App.Height, App.DesignHeight)

これにより、最低設計サイズ（DesignWidth/DesignHeight）以下には縮まらず、必要に応じてスクロールが発生する。

3. コントロールの位置とサイズは式で設定する

例：画面全体を埋める場合

• X: 0

• Y: 0

• Width: Parent.Width

• Height: Parent.Height

固定値を使わず、必ず親コントロールのサイズを参照する。

4. 複数コントロールを柔軟にレイアウトする

上下分割などは、

• 位置を他コントロールの Height や Y で計算

• Size変更時にも自動調整されるように式を構成する

5. よく使うレイアウトパターン（マージン、中央寄せ etc.）

Microsoft Learn に具体的な式パターンが多数掲載されており、

• 中央配置

• 右寄せ

• 余白つき配置
  などを共通式で実装できる。 [note | PDF]

6. 階層レイアウト（ギャラリー / コンテナー）

• ギャラリー内では Parent.TemplateHeight / TemplateWidth を使用

• コンテナー内では Parent.Width / Parent.Height を使って子コントロールを配置

• Auto-layout コンテナーを使えば X/Y の指定が不要

7. デバイスの回転（縦・横）に応じたレイアウト切り替え

Orientation プロパティを利用して、

• 縦の場合は縦積み

• 横の場合は左右配置
  といった UI の切り替えが可能。

8. 画面サイズ（Small〜ExtraLarge）によるブレークポイント処理

ScreenSize.Small (1) 〜 ExtraLarge (4) で表示を変更可能：
例：
Visible = Parent.Size >= ScreenSize.Medium

9. カスタムブレークポイント

SizeBreakpoints プロパティを変更することで、

• 独自の表示切替ポイントを設定可能。

次のステップ

レスポンシブ対応は「式ベースでの UI 設計」に慣れることが大切です。
まずは Scale to fit をオフにしたサンプル画面を作って、Parent.Width や Parent.Height の値がどう変化するか確認してみましょう。

その上で、上下分割・左右分割・コンテナー利用といった基本パターンを自分のアプリに当てはめてみると、効果がすぐに体感できますよ。

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
🔧 市民開発者の “理解できない” を、リアルタイムで解消します。

・新しく追加された機能がどこにあるか分からない
・メニューが変わって、どう操作するのか迷ってしまう
・変数やコレクションが “どのタイミングでどう変わるか” が分からない
・デバッグという概念がなく、エラーの原因が追えない
・テンプレを買っても、自分の環境で動かず不安になる

私は、MS Teams の画面共有で
実際のアプリを一緒に触りながら

　✔ メニューの意図と最新機能の位置
　✔ 開発手順の “なぜ”
　✔ 変数／コレクションを “可視化”して理解
　✔ デバッグの基本（値の確認・切り分け）
　✔ 壊れない構成の考え方

を丁寧に解説し、
【理解が開ける瞬間】を作る伴走を行っています。

🔹 プレミアム（月10,000円）
・Teamsでのリアルタイムセッション
・チャット相談（原因切り分け・理解補強）
・デバッグ方法の習得（自分で直せるようになる）
・再発しない構成／設計レビュー
・深掘り技術ライブ

👉 「作れるけど、理解できていない」市民開発者に最適です。
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━