Power Apps でモダンなUIを作りたいなら、コンテナの設計を避けて通れません。コントロールをばらばらに並べる時代は終わりました。
私が最初にコンテナを触ったときは、正直なところこれ、何が便利なの？と思っていました。座標でコントロールを置いていく旧来のやり方に慣れていたので、コンテナの概念が最初はピンとこなかったのです。ところが使い込むうちに、画面設計の考え方そのものが変わりました。コントロールをどこに置くかではなく、コントロール同士の関係をどう定義するか——この記事では、そういう設計思想の転換点から始めて、レイアウト設計・実践テクニック・実装事例・開発者向けの管理術まで、コンテナに関するすべてをまとめます。
コンテナとは何か——旧来の座標配置との根本的な違い
Power Apps にはコントロールの配置方法が2世代あります。旧来は X・Y 座標を使った絶対配置で、画面の左上を基準にピクセル単位でコントロールを固定していました。地図に緯度と経度でピンを打つイメージです。これはシンプルで直感的ですが、コントロールが増えるほど管理コストが跳ね上がります。デバイスサイズが変わるたびに全コントロールの座標を手動で修正しなければならず、20個・30個と増えていくとにっちもさっちも行かなくなります。
コンテナを使った配置は、親コンテナとの相対関係で位置やサイズを決めます。Width: Parent.Width * 0.6 のように書けば、親の幅が変わっても60%という関係性は保たれます。駅から徒歩3分、という感覚です。駅の場所が動いても、3分という関係は変わらない。この思想の転換が、コンテナ設計の核心です。
絶対座標が悪いわけではありません。小規模・固定サイズのアプリでは絶対座標のほうがシンプルで速いケースもあります。コンテナの真価はコントロール数が増えたとき・複数デバイスへの対応が必要なときに現れます。座標配置とコンテナの違いを詳しく解説した記事も合わせて読むと、この転換がより腹落ちするはずです。
コンテナの2種類——手動とオートレイアウトの使い分け
コンテナには手動レイアウト（Manual Layout）とオートレイアウト（Auto Layout）の2種類があります。この選択が後のレスポンシブ対応に大きく影響します。
手動レイアウトは、子要素を自由に配置できるコンテナです。自由度が高い反面、レスポンシブ対応は自分で書く必要があります。オートレイアウトは子要素を縦（Vertical）または横（Horizontal）の一方向に並べ、サイズ・間隔・整列を自動で管理してくれます。シンプルなカード・リスト型にはオートレイアウト、重なりや自由な配置が必要な場合は手動レイアウトと使い分けるのが基本です。
よくある失敗は、全部手動レイアウトで作り始めてしまい、後からレスポンシブ対応ができなくなるパターンです。私も最初の頃はそれをやりました。最初の設計段階でどちらを使うか判断しておくことが重要です。手動レイアウトとオートレイアウトの詳しい使い分け基準をまとめた記事も参考にしてください。
画面設計の基本。セクション分割とネスト構造
コンテナ設計で最初にやることは、画面をセクションに分割することです。コードより先に、どう分割するかを決めます。私がよくやるのは、仕切り板を1枚入れるとしたらどちらの向きか、という問いを立てることです。縦に入れてもすべてのセクションが片側に収まるなら垂直コンテナ、横に入れてもすべて片側に収まるなら水平コンテナがルートになります。
ヘッダー・フィルター・ギャラリーが縦積みなら垂直コンテナ、サイドメニューとメインコンテンツが横並びなら水平コンテナです。どちらを試してもセクションが分断されてしまう場合は、粒度が粗すぎるサインです。一段階内側の要素に対して同じ問いを繰り返します。セクション分割の設計思想を詳しく説明した記事に、ケース別の判断基準をまとめています。
セクションが決まったら、その中にさらにコンテナを入れていきます。これがネスト構造です。PCのフォルダ構造をイメージすると分かりやすく、ドライブ→フォルダ→サブフォルダ→ファイルが、画面→ルートコンテナ→セクションコンテナ→個別コントロールに対応します。各階層で向きを決めれば、あとは同じ判断の繰り返しです。ネストが深くなりすぎると管理が辛くなるので、3〜4階層を目安にするとよいです。
配置・整列プロパティを使いこなす
オートレイアウトコンテナには、子要素の配置を細かく制御するプロパティが揃っています。主なものをまとめます。
| プロパティ | 役割 | よく使う値 |
|---|---|---|
| LayoutAlignItems | 交差軸方向の整列 | Start / Center / End / Stretch |
| LayoutJustifyContent | 主軸方向の配置 | SpaceBetween / Center / Start / End |
| FillPortions | 子要素の幅・高さの比率 | 数値（例：3と2で60:40に分割） |
| Gap | 子要素間の余白 | ピクセル数 |
| Wrap | 横コンテナでの折り返し | true / false |
特によく使うのが LayoutJustifyContent の SpaceBetween です。更新ボタンと最終更新日を両端に置くような配置が、これ1行で実現できます。FillPortions は子要素に FillPortions: 3 と FillPortions: 2 を設定すれば60対40の比率で幅が分かれます。Padding（コンテナ外縁の余白）と Gap（子要素間の余白）の違いも最初は混乱しやすいので覚えておきましょう。配置・整列プロパティの全詳細はこちらの記事に整理しています。
実践テクニック。角丸・カスタムコントロール・ドロップシャドウ
角丸をコンテナで一元管理する
Dropdown や DatePicker など一部のクラシックコントロールは、ネイティブに BorderRadius プロパティを持ちません。コンテナでラップして、コンテナ側に BorderRadius を設定すると子要素に伝播します。さらに、App.OnStart で変数（例：varRadiusBI）を定義しておき、全コンテナで参照する形にすると、1箇所変えるだけでアプリ全体の角丸が変わります。上だけ角丸にするパターンでは RadiusTopLeft / RadiusTopRight のみ設定して下を0にします。カードの上辺だけ丸くするデザインでよく使います。
カスタムコントロールをコンテナで作る
Label と 透明なボタン（Fill=Transparent）をオートレイアウト水平コンテナにまとめると、コピペで量産できるカスタムボタンができます。コピー後は Label の Text と Button の OnSelect を変えるだけで別ボタンになります。プログレスバーは外側コンテナ（背景色・角丸）に内側コンテナ（進捗色）を入れ、内側の Width を Parent.Width * varSubmitted / varAll のように動的に設定する構造です。
ドロップシャドウとFillPortionsでカードUIに奥行きを出す
DropShadow プロパティは None / Light / Regular / Semibold / Bold の5段階があります。カード外枠のコンテナにシャドウを設定し、内部のレイアウト用コンテナは必ず DropShadow.None にします。両方に設定すると境界線のように影が二重になって視認性が下がります。これは地味に気づきにくい落とし穴で、私も最初しばらく原因がわからなかったです。
実装事例。KPIカード・SVGグラフ・ステータスギャラリー
コンテナの使い方を理解したら、実際のダッシュボード実装に応用できます。KPIカードは外側コンテナ（DropShadow・BorderRadius）→内側AutoLayout垂直コンテナ（Padding）→Label群という3層構造が基本形です。3枚均等レイアウトなら水平AutoLayoutコンテナの中で各カードに FillPortions: 1 を設定します。
SVGグラフは "data:image/svg+xml," & EncodeUrl("...SVGコード...") のパターンで Image コントロールに表示します。棒グラフなら LookUp でカウントを取得して棒の長さを動的計算し、ドーナツグラフなら stroke-dasharray と stroke-dashoffset で円弧を描きます。コンテナと組み合わせることで、レイアウト内にグラフを美しく収められます。
ギャラリーでステータスを色分けするには、Count > 0 を条件に Color / Fill / Text を切り替える If 式を使います。ColorFade を使えば ColorFade(Self.Color, 70%) でテキスト色と背景色を自動的に対応させられるので、色の一貫性を保ちながらコード量を減らせます。
開発者UX。命名規則とYAML共有
コントロールが200件を超えると、ツリービューの検索だけでは追えなくなります。命名規則を決めておくことが大切です。推奨プレフィックスは cnt（コンテナ）/ lbl（ラベル）/ btn（ボタン）/ col（ギャラリー）/ img（イメージ）/ rec（レクタングル）。さらに cntBI_1stL（BI領域の1行目・左）のように場所と階層番号を含めると、構造が名前から読めるようになります。
Power Apps Studio のコンテナ右クリック → コードのコピーで YAML 形式のコードが取得できます。別画面・別アプリに貼り付けると構造ごと再現されます。旧来のグループでは子コントロールを1つずつ選択して再配置する必要がありましたが、コンテナなら親を1つコピーするだけで子も全員ついてきます。Slack や Notion にYAMLを貼り付けてチームで共有するワークフローを使えば、デザインの属人化も防げます。
このピラー記事で紹介したコンテナ設計の各テーマは、それぞれ詳細な解説記事に分けています。UI/UX設計の全体的な考え方と合わせて読むと、コンテナをどういう文脈で使うべきかの判断がより明確になります。
まとめ
コンテナ設計は、Power Apps 開発のUIクオリティを一段引き上げる技術です。最初は概念の理解に時間がかかりますが、仕切り板1枚の問い・フォルダ構造のアナロジー・プロパティの一元管理という3つの考え方を体得すれば、どんな画面でも同じプロセスで設計できるようになります。
市民開発とはこういう地道な設計の積み重ねだと、私はつくづく感じています。コードの書き方より先に、どう分割してどう関係を定義するかを考える習慣を身につけると、開発スピードも保守性も大きく変わります。
