Power Apps のコンテナには DropShadow プロパティがあります。カードに影をつけることで画面に奥行きが生まれ、どこがタップ可能でどこが背景かが直感的に伝わります。ただし使い方を間違えると影が二重になったり、全体がうるさい印象になったりするので注意が必要です。
DropShadow プロパティの種類と使い分け
Power Apps のコンテナの DropShadow プロパティには5段階の設定があります。
| 設定値 | 影の強さ | 主な用途 |
|---|---|---|
| None | なし | レイアウト専用コンテナ（影不要） |
| Light | 弱い | サブカード・補足的な要素 |
| Regular | 中程度 | 標準的なカードUI |
| Semibold | やや強い | 強調したいカード・選択状態 |
| Bold | 強い | ポップアップ・モーダル的な要素 |
私のアプリでは KPIカードに Regular を使っています。Light だと影が弱すぎてカードの存在感が出ず、Semibold 以上だと3枚並べたときにくどくなりました。画面全体のトーンを見ながら Regular か Light を起点に調整するのがおすすめです。
コンテナクラスターにおけるデザイン設計の全体的な考え方はPower Apps コンテナ完全ガイドでまとめているので、DropShadow を活用する前の前提知識として目を通しておくと理解が早まります。
変数でアプリ全体のシャドウを一元管理する
角丸の変数管理と同じ発想で、DropShadow も変数で一元管理できます。App.OnStart に変数を定義し、全カードコンテナの DropShadow をその変数で参照するようにすれば、後から変更するときに1か所だけ書き換えればよくなります。
// App.OnStart に定義
Set(varDropShadowBI, DropShadow.Regular);// 各カードコンテナの DropShadow プロパティ
DropShadow: varDropShadowBIDropShadow の値は DropShadow.Regular のように列挙型で指定します。文字列や数値ではないので注意してください。変数に代入するときも DropShadow.Regular をそのまま入れれば動きます。
一元管理しておくと、例えばダークモード対応を検討したときに影の強さを画面全体で一括調整できます。角丸の一元管理についてはコンテナを使った角丸の一元管理でも同じパターンを紹介しています。DropShadow も同じ思想で管理できます。
影を付けるコンテナと付けないコンテナの判断基準
ネストされたコンテナ構造では、どのコンテナに DropShadow を設定するかが重要です。すべてのコンテナに設定してしまうと、親と子の両方に影がついて影が二重に重なって見えます。これは視覚的にうるさく、逆に品質が下がります。
判断基準はシンプルです。カードの外枠コンテナにだけ DropShadow を設定し、カード内部のレイアウト用コンテナはすべて DropShadow.None にします。
// カード外枠コンテナ（影あり）
DropShadow: varDropShadowBI
// カード内部のレイアウト用コンテナ（影なし・必ず None に）
DropShadow: DropShadow.Noneこれを意識せずに作ると、カードの中に入っているセクションコンテナにまで影がついて、カード内部に謎の陰影が発生します。私も最初にこれをやらかして、なんか変だなと思いながら原因がわからずしばらく悩みました。ネストしているコンテナが多いほどこの問題は起きやすいので、内側のコンテナは明示的に DropShadow.None を書いておく習慣をつけるといいです。
FillPortions でカードを比率で分割する
複数のカードを横並びにするとき、幅を均等に分割したい場面が多いです。ピクセル値で指定すると画面幅が変わったときに崩れるため、FillPortions プロパティを使った比率指定が便利です。
FillPortions は Auto Layout コンテナの子要素に設定するプロパティで、親コンテナの余白をどの割合で占有するかを指定します。3枚のカードを均等に並べるなら、全カードに FillPortions: 1 を設定します。
// 3枚均等配置
cntCard_3rd1: FillPortions = 1
cntCard_3rd2: FillPortions = 1
cntCard_3rd3: FillPortions = 12枚を6：4の比率にしたい場合は FillPortions: 3 と FillPortions: 2 を設定します。3と2の比率が6：4と同じになるからです。比率で指定しているので、親コンテナの幅が変わっても自動的に追従します。
// 6:4 の比率で2分割
cntCardA: FillPortions = 3
cntCardB: FillPortions = 2FillPortions を使う場合、対象のコンテナには Width プロパティに固定値や式を設定しないでください。FillPortions と Width の両方が設定されていると FillPortions が無視されます。Width はブランクのままにしておくのが基本です。
Fill と DropShadow の組み合わせ：透明コンテナの落とし穴
カード内部のレイアウト用コンテナを透明にする場合、Fill を Color.Transparent に設定します。このとき DropShadow.None を設定し忘れると、透明なコンテナにも影がついてしまい、カードの背景に謎の影が重なって見えます。
Fill=Color.Transparent と DropShadow.None はセットで設定するものだと覚えておくと事故が減ります。レイアウト専用のコンテナは見た目に関わるプロパティをすべてオフにする、という原則を持っておくと、後から原因不明の見た目のバグに悩まされにくくなります。
よくある落とし穴：すべてのコンテナに影をつけてしまう
コンテナを新規追加するたびに、デフォルトのまま DropShadow が None 以外になっていることがあります（設定によって異なります）。そのままネストしていくと、知らないうちに全コンテナに影がついて、画面がごちゃごちゃした印象になります。
これを防ぐには、コンテナを追加したら最初に DropShadow を確認する習慣をつけることです。カード外枠だけ影あり、それ以外は None。このルールを最初から徹底しておけば、後から修正して回る手間がなくなります。
DropShadow と FillPortions を組み合わせて KPI ダッシュボードカードを実装する具体例は、コンテナで KPI ダッシュボードカードを作る方法で詳しく解説する予定です。今回の内容を踏まえた上で読むとコードの意味がよりわかりやすくなります。
まとめ
DropShadow はシンプルなプロパティですが、ネスト構造と組み合わせると細かいルールが必要になります。カード外枠だけに影をつける、内側は必ず None にする、透明コンテナには None をセットで設定する。この3つを守るだけで、影が意図通りに機能するようになります。FillPortions との組み合わせで均等分割も簡単にできます。試行錯誤しながら自分のアプリに合ったデザインを見つけていきましょう。
コメント