Power Apps のコンテナには手動レイアウトとオートレイアウトの2種類があります。どちらを選ぶかでアプリの設計の自由度と保守のしやすさが大きく変わるので、最初に整理しておくことをおすすめします。
2種類のコンテナの概要
手動レイアウト（Manual Layout）とは
手動レイアウトは、コンテナの中に追加した子コントロールを、引き続き X・Y 座標や Width・Height で自由に配置できる方式です。コンテナという箱を用意しつつも、中の配置は自分でコントロールするため、座標配置に近い感覚で使えます。
イメージとしては区画は決まっているが、家具の置き方は自由な部屋のようなものです。コンテナで画面をいくつかの領域に分割しつつ、各領域の中はドラッグ&ドロップで好きなように配置できます。複雑なレイアウトや、コントロール同士が重なり合うデザインを実現したいときには、手動レイアウトが向いています。
オートレイアウト（Auto Layout）とは
オートレイアウトは、コンテナ内の子要素を縦方向（Vertical）または横方向（Horizontal）の一方向に自動的に並べる方式です。子要素の間隔・整列・折り返しを Wrap・Gap・Align などのプロパティで一元管理できます。子コントロールの X・Y 座標は自分では設定せず、コンテナが自動的に計算して並べます。
等間隔に並べて、要素が増えても自動で詰めてくれる棚のようなイメージです。商品を追加したら棚が自動で整列し直してくれる感覚です。カード型の一覧表示やボタンを横並びにするナビゲーションバーなど、規則的な繰り返しのレイアウトにとても向いています。
どちらを選ぶか：判断基準
2種類の使い分けを表でまとめます。
| 場面 | おすすめ | 理由 |
|---|---|---|
| カード一覧・リスト表示 | オートレイアウト（縦） | 要素の増減に自動追従する |
| 横並びのボタン・ナビ | オートレイアウト（横） | 間隔・整列を自動管理できる |
| コントロールを重ねるデザイン | 手動レイアウト | 重なりや自由配置が必要なため |
| 複雑な非構造的デザイン | 手動レイアウト | オートレイアウトでは実現しにくいことがある |
| 将来的にレスポンシブ対応したい | オートレイアウト | 相対サイズ・自動整列でデバイス対応しやすい |
シンプルなカードやフォームのように、縦か横に規則的に並べたい場合はオートレイアウトを選ぶのが基本です。一方、コントロールが複雑に重なり合うダッシュボードや、グラフと数値を重ねて表示するような場面では、手動レイアウトのほうが作りやすいです。
オートレイアウトの主要プロパティ
オートレイアウトを使い始めたときに最初に設定することになるプロパティを整理します。
- Direction（方向）：Vertical（縦）か Horizontal（横）か。最初に決める一番重要なプロパティ
- Gap（間隔）：子要素同士の間隔をピクセルで指定。0 にすると間隔なしで詰まる
- AlignItems（整列）：主軸と交差軸方向の整列を制御。Center・Start・End・Stretch から選ぶ
- Wrap（折り返し）：子要素が横幅に収まらない場合、次の行に折り返すかどうかを制御する
- Padding（余白）：コンテナの内側の余白。上下左右それぞれ設定できる
コンテナの種類の切り替え方
追加後でも Variant プロパティで変更できる
コンテナを挿入した後でも、Variant（バリアント）プロパティを変更すれば手動レイアウトとオートレイアウトを切り替えられます。値は ManualLayout か VerticalAuto・HorizontalAuto のいずれかです。
最初にどちらで作ったか気にしすぎなくても大丈夫で、設計途中でやっぱりオートレイアウトにしたいと思ったら切り替えればいいだけです。ただし切り替えると既存の子要素の配置が変わることがあるので、子要素の数が多い状態で変更するとレイアウトが崩れる可能性があります。なるべく早い段階で決める方が安全です。
よくある失敗パターン
全部手動で作ってしまいレスポンシブ対応できなくなる
私が社内でアプリのレビューをしていてよく見かけるのが、コンテナを使っているのに全部手動レイアウトにしてしまっているケースです。コンテナで画面を区切りつつ、中はすべて座標配置の感覚で作ってしまうパターンで、これだと座標配置との違いが活かせていません。
後からタブレット対応やスマホ対応の要望が来たとき、全部手動レイアウトで作ってあると修正範囲が広くなってしまいます。最初からオートレイアウトを使っておけば、Gap や AlignItems の調整だけで大部分が自動追従してくれます。設計段階で少し頭を使うだけで、後の工数が大きく変わります。
オートレイアウトに何でも詰め込もうとする
逆に、オートレイアウトを知ってから全部オートレイアウトで作ろうとして、重なりが必要な部分で詰まってしまうことも多いです。オートレイアウトは子要素を一方向に整列する仕組みなので、コントロールを重ねるような設計には向いていません。グラフの上にラベルを重ねたいとか、画像にテキストをかぶせたいといった場面では手動レイアウトが必要です。
2種類の使い分けを覚えたら、このセクションはリスト状に並べたいからオートレイアウト、このセクションは重なりが必要だから手動レイアウトと、コンテナごとに方針を変えていくのが実践的な使い方です。コンテナは何段でもネストできるので、外側のコンテナはオートレイアウト、内側の特定のコンテナだけ手動レイアウトという組み合わせも全く問題ありません。
また、コンテナとドラッグ&ドロップ配置の根本的な違いについてはPower Apps コンテナと旧来の座標配置との違いの記事で解説しています。コンテナを使い始める前に読んでおくと、この記事の内容もスムーズに理解できます。
まとめ
手動レイアウトは自由度が高いぶん、自分で配置を管理する必要があります。オートレイアウトは整列・間隔を自動管理してくれるぶん、重なりや複雑な配置は苦手です。どちらが正解というわけではなく、作りたいレイアウトに合わせて選ぶことが重要です。
最初はオートレイアウトを使ってみることをおすすめします。カード一覧やボタン並びの場面で使ってみると、ああ、これは楽だと実感できると思います。手動レイアウトが必要な場面はそのうち自然とわかってくるので、まずはオートレイアウトを使える場面で積極的に使ってみてください。楽しみながらコンテナを使いこなしていきましょう。
慣れてくると総合的にコンテナの理解が深まってきますので、あらためて全体をまとめて確認してみましょう。
