Power Apps の UIデザインって、ぶっちゃけどうっすか？

いやね、Power Apps ってすごくステキなツールだと思うんすよ。
すごく簡単にWebアプリが作れるし。ホントに、生産性爆上がりっすよ。
大好きなんですけど。
ですけどね・・・。

大きな声では言えないですが、正直、UIが微妙だなーって。昔から思ってて。
おそらく、ユニバーサルデザインとか、視覚障害のある方への配慮とか、そういったことだとは思うんですよ。
でも、もうちょっとナントカなんねーのかなぁ、と。

Fluent UI とは

だって、Microsft にも Fluent UI っていう、それっぽいものがあるらしいじゃないっすか。
せっかくなんで、今流行りの Bing チャットに聞いてやりましたよ。

Fluent UI とは、Microsoft が提唱するデザインシステムのことです。
Fluent UI は、見た目だけでなく、革新的なUIやユーザー体験を変えることを目指しています。
Fluent UI は、Microsoft TeamsやWindows 365などの製品にも使われています。

簡単に言うと、良い感じの UI って事だと思うんですが、これを Power Apps で使いたいんですよ。

Power Apps で Fluent UI を使う方法

そんなわけで、Power Apps で Fluent UI を使う方法です。
なんか、個人的にすごく「解せぬ」って話なので、今後のバージョンアップでこの方法は使えなくなる可能性があると思います。
簡単に言うと、
「Teams版の Power Apps で貼り付けたオブジェクトを、Web版の Power Apps にコピペする」
ってことで出来ます。

手順１）

Teams版 Power Apps にオブジェクトを貼り付ける（この例では「テキストボックス」と「日付の選択」）

手順２）

上記で貼り付けたオブジェクトを選択して「Ctrl+C」でコピーして、Web版の Power Apps にペースト

以上です。

ほらね、こんなにオシャレに・・・あれ？

良い感じで貼り付けできたので、ドヤって記事を終わろうとしたんだけど、カレンダーコントロールの月選択が微妙にズレている。
これ、４列で表示しようとして、明らかになんかやらかしてるじゃん。

Teams版でも同じだ。ぐぬぬ・・・。そのうち改善されるとは思うんだけどさぁ・・・。

結論

まぁ、あれだ。
信じて待っていれば、そのうちオシャレになるんじゃないっすか。

参考資料

追記 (2023/03/07)

Creator Kit をインストするとコンポーネントが使えるようになります。
ただ、単体のアプリで使う場合は前述のコピペの方がラクかも。