はじめに

こんにちは。ヨウセイです。ワンランク上のおっさんは見た目をサクッと調整できるー。
ということで、最近は有識者の方々とお会い出来たりと刺激を受け、久しぶりに自分なりに気づいた点やおもってることを投稿しようと思います。
※2023.4.29時点のバージョン：3.23043.16の内容で記載しています

キャンバスアプリの見た目について

そのままデフォで作っていくと、ちょっとおしゃれ感に欠けたり、サイズが微妙だったりと感じます。何個か作っていくとさらにバリエーションがなくなってきます。
社内で使う業務アプリは機能がメインなのでデザイン（見た目）は後回しになりがちな気がします。（使いやすいデザイン設計という点は重要ですが）
が、それほど時間をかけずにある程度見た目を調整できるのでそのあたりを。

★新しい見た目のモダンコントロール（Fluent UI）もプレビューされてます。こちらについては別の記事で書こうかと。
この記事では、普通のキャンバスアプリの従来のコントロールを前提に記載してます。

デフォルトって

普通に作成を始めると青いやつになりますね。こんな感じの。
※一番上はヘッダとして四角形を色変えたやつにラベルを作ってます。フォームは割愛で各コントロールをサンプルとして追加

これで別にいいんですが、デフォなので、世にサンプルであふれた見た目という感じがしてしまいます。。いいんですが。
たとえば色味を黒っぽくしたい、あったかくしたい場合、企業のコーポレートカラーを取り込んだ感じにしたいとヘッダや背景をかえてもコントロールは青のままだとちょっとなーとなります。

そのままでヘッダと背景を赤っぽくした場合

そこで、まずは「テーマ」を調整します。そうすると、これらがガラっと合わせて変わってくれます。

テーマを変更する

テーマを開くと色々出てきます。
★最新バージョンだとこのテーマもさらに増えてるとMVPのアキラさんとやまさんがやっている配信で教えてくれてました。さらにもっと選べまるようになりますねー

標準とOfficeでそれぞれカラーテーマ異なるのが数種あるのでイメージに近いのを選択する

赤っぽいのにする
ちょっと赤すぎたので背景を薄めに変更。ヘッダとはあいますね。

ローズ
アバンギャルドですね。黒ベースなので背景も黒にヘッダも合わせる

明るい（グレー）にする
グレーは合いやすいので気に入ってます。

これらはボタン押したときの背景色とかもちゃんと変えてくれます。
また、カラーパターンもテーマに合わせて変わってますので、テーマにそったカラーを選べるようになります。（カスタムで選べば同じですが用意されたものからさくっと選ぶほうが楽ですよね）

★後々で変更すると一部のカスタムしたもの（ボタンや図形のホバー色とか）がテーマに沿って変更されてくれちゃう場合があります。ので、調整するのは最初のころにやるか、後でやるにしても想定外のところが変わってないかはチェックしたほうがいいですね。

モダンコントロール（Fluent UI）のテーマの対応
新しいモダンコントロールでは現在テーマには対応してませんでした。変えてもそのままです。※右側がモダンコントロール

こちらについては公式ブログでも今後対応していく予定とあったのでそのうちに対応するのかもしれませんね。期待しましょうー。

所感

テーマである程度バリエーションを持たせて調整が出来ます。それだけだとパターンが限られてくるので、さらにボタンやアイコンなども好みに合わせてカスタム調整するのがよりよいと思います。
各コントロールの色変えはもちろん直でできます。が押した際の色、ホバー時の色、枠線などなども調整しないとなので思ったより手間がかかる場合も。まあそれほどではないですし、作ったやつをコピーして使えば統一感だせると思います。

その他の方法として、最初に各属性の変数を用意してOnStartで色を指定してそれをコントロールのプロパティに変数指定しておいて。とすると、変数の値を変えれば一括で色変えが出来ます。が、これを作るのが手間ｗ後々変更の可能性がある場合はこちらがいいかもしれませんがケースバイケースですかね。ちなみに最初に変数を読み込んで色変えしようとすると読み込み前が真っ黒になるので自分的には好みではない。サクッと見た目調整という点でも今回の趣向にはあわないですね。

おわりに

今回は特にワンランク上ではなかったですね。
次は「キャンバスのデフォのフォントのサイズでかくね？」と思っているので、その辺の楽な調整方法（自己流）を書いてみようかと。あと新しいコントロールがらみなどのデザイン（見た目）まわりについて書こうと思います。