Power Apps でコンテナを使ってレイアウトを組むとき、最初につまずくのがどこからコンテナを入れ始めるかです。この記事では、画面をセクションに分割するときの考え方を一つのシンプルな問いに落とし込んで解説します。
設計はコードより先に始まる
ワイヤーフレームで分割を決めてから手を動かす
コンテナのレイアウト設計で一番やってはいけないのは、Power Apps を開いてからその場でコンテナを置き始めることです。行き当たりばったりで作ると、途中で構造を見直したくなったときに大幅な作り直しが発生します。まず紙でもスライドでもいいので、画面に必要なセクションを書き出してから手を動かすのが正解です。
ワイヤーフレームといっても大げさなものは必要ありません。ヘッダー・フィルターエリア・一覧エリア・フッターのような大まかな区切りを四角形で描くだけで十分です。この時点でどの要素がどのグループに属するかを考えることが、コンテナ設計の核心です。
画面テンプレートを出発点にする
ゼロからコンテナ構造を組むのが難しいと感じる場合は、Power Apps の画面テンプレートを活用するのも一つの手です。新規画面を追加するときに選べる Sidebar・Header and main などのテンプレートは、最初からコンテナが適切に配置された構造になっています。これを土台にして、自分のアプリの要件に合わせてコンテナを追加・削除していく進め方は、特に慣れないうちは効果的です。
テンプレートから学べることも多く、ああ、こういう方向でコンテナを組むのかという感覚が身につきます。私もコンテナを使い始めた最初の頃はテンプレートのコンテナ構造を一段ずつ追いかけて理解しました。
方向を決めるシンプルな問い
コンテナの方向（縦か横か）を決めるときに私がいつも使っている問いが、仕切り板を1枚入れるとしたら、縦と横どちらに入れるかです。仕切り板を入れたとき、すべてのセクションが分断されずそれぞれ片側に収まる方向が、そのコンテナの正しい方向です。
たとえばヘッダー・フィルターエリア・一覧エリアが縦に積み重なっている画面なら、横に仕切り板を入れると各セクションが上下に分かれます。つまりこの画面のルートコンテナは縦方向（Vertical）です。一方、サイドメニューとメインコンテンツが左右に並んでいる画面なら、縦に仕切り板を入れると左右に分かれます。この場合は横方向（Horizontal）のコンテナが正解です。
縦分割が正解のケース
ヘッダー・検索バー・ギャラリー・フッターのように画面の要素が縦に積み重なっている場合は、ルートコンテナを Vertical（縦方向）にします。各セクションを縦に並べるので、子コンテナの追加・削除・順序変更がすべて縦方向に影響します。横方向の変更が他のセクションに波及しません。
社内で使う業務アプリの多くはこのパターンです。一覧を見てフォームに入力して保存する、というシンプルなフローのアプリは大体ヘッダーと本文が縦積みになっています。まずこのパターンから覚えておくと応用が利きます。
横分割が正解のケース
左側にナビゲーションメニュー、右側にメインコンテンツという2カラム構成の場合は、ルートコンテナを Horizontal（横方向）にします。左右のカラムがそれぞれ独立して縦に伸縮できるようになります。
タブレット向けのアプリや、画面幅が広いことを前提にしたダッシュボード系のアプリでよく使うパターンです。ナビゲーションはどの画面でも固定幅にしたい場合は Width を固定値にして、メインコンテンツ側に FillPortions を設定すれば残りの幅を自動で埋めてくれます。整列プロパティの使い方についてはコンテナの配置・整列プロパティの解説記事も参考にしてください。
どちらに仕切っても分断される場合
粒度が粗すぎるサイン
縦に仕切っても横に仕切っても、セクションが分断されてしまう場合があります。これは分割しようとしている単位が大きすぎるサインです。一段階内側の要素に対して同じ問いを繰り返してみてください。
たとえばKPIカードが横に3枚並んでいて、その下に折れ線グラフがある画面を考えます。仕切り板を縦に入れると3枚のKPIカードが分断されます。横に入れると、KPIカード群とグラフが上下に分かれます。この場合、横方向の仕切りが正しい。上段（KPIカード群全体）と下段（グラフ）を縦方向のルートコンテナで並べ、上段コンテナの中で3枚のカードを横方向に並べる、という2段階の設計になります。
共通の親を持てるかという別アプローチ
仕切り板の問いと同じことを別の角度から考える方法もあります。この要素たちは共通の親コンテナを持てるか、という問いです。ヘッダー・本文・フッターは縦に積み重なる兄弟なので、親は縦方向コンテナです。サイドメニューとメインコンテンツは横に並ぶ兄弟なので、親は横方向コンテナです。
どちらのアプローチも本質は同じで、要素の関係性から方向を決めるという考え方です。仕切り板の問いのほうが直感的に判断しやすいと感じる方もいれば、親子関係で整理したほうがしっくりくる方もいます。どちらでも答えは同じになるので、自分が使いやすい方で考えてください。
設計の手順をまとめると
ここまでの考え方を実際の作業手順に落とし込むと、次のようになります。
- 画面に必要なセクションを紙やスライドに書き出す
- 一番外側の要素群に対して、仕切り板を1枚入れるとしたら縦か横かを問う
- 答えが出たらルートコンテナの方向を決める
- 各セクションに対して同じ問いを繰り返し、内側のコンテナの方向を決める
- どちらでも分断される場合は粒度を細かくして問い直す
このプロセスを一回覚えると、どんな画面でも同じ手順で考えられます。コンテナの方向を迷うたびに仕切り板どっち？と自問するだけです。コンテナを使ったレイアウト設計全体の体系についてはPower Apps コンテナ完全ガイドにまとめているので、より深く学びたい場合はそちらも参照してください。
まとめ
コンテナのセクション設計は、どこに置くかではなくどう分類するかの問いです。分類が決まれば方向は自然に決まります。仕切り板の問いはシンプルですが、どんな複雑な画面でも同じ問いを繰り返すだけで方向が出せます。設計の前に一度立ち止まって構造を考える習慣をつけると、後からの修正が格段に減ります。地道な設計の積み重ねが、長く使えるアプリにつながります。
