アーティサン株式会社
  1. TOP
  2. ブログ
  3. Power Apps：テーマカラー変更機能を実装しよう
  • Power Apps
  • Power Platform

Power Apps：テーマカラー変更機能を実装しよう

こんにちは。アーティサン株式会社の伊礼（いれい）です。

この記事を書いた人
伊礼圭吾

伊礼 圭吾いれい けいご

得意領域

Power Platform全般 Power Apps Dataverse Copilot Studio

Power Platformの設計・開発・コンサルティングを担当しています。既存システムからの移行検証や、Power Platformの特性に合わせた再設計はお任せください！

保有資格

PL-200 PL-400 PL-600
社員インタビューを読む → 著者のその他記事一覧を読む →

ダークモード機能やテーマカラー変更機能ってありますよね。

白を基調とした清潔感のあるデザインや、暗い色をベースにした目に優しいデザインなど…
ユーザーの好みや環境で選べる、あったらﾁｮｯﾄｳﾚｼｲそんな機能。

今となってはいろんなアプリやWebサイト、OSにも搭載されていますし、
近年では色覚多様性に配慮したカラーユニバーサルデザインが求められる場面もあるかもしれません。

今回はそういったテーマカラーを選択できる機能をPower Appsで作成したアプリに実装してみたいと思います。

動作イメージ

Videotogif (2)

アーティサンでは、Power Apps を用いたアプリ開発のご支援や、 企業様の内製化サポートも行っております。
「自社でも Power Apps を活用したい」「設計から相談したい」という方は、 以下のサービスもぜひご覧ください。

 

1. まずはアプリの画面を用意

今回はMicrosoftより提供されているカレンダーテンプレートに実装していきます。
皆さんもそれぞれ任意のアプリ画面をご用意ください。

Power Appsカレンダーテンプレート画面

 

2. App.Formulasにカラーセットを設定

最初にAppのFormulasプロパティにカラーセットを記述していきます。

カラーセットは以下のように記述していきます。

  • App.Formulas

MainTheme = {
    Primary: RGBA( 0,144, 168, 1),
    Secondary: RGBA(229, 244, 245, 1),
    Accent: RGBA(225, 70, 72,1),
    Background: RGBA(255, 255, 255, 1),
    Text: RGBA(51, 51, 51, 1),
    Border: RGBA(51, 51, 51, 1)
};

Formulasプロパティとは?

アプリ全体で利用可能な変数や関数を定義することができるプロパティです。
このプロパティで定義した値はアプリ内すべての画面から参照できるので、
今回のテーマカラーのように各画面から共通で使用したい値などを定義する場合に適しています。

参考：Formulasプロパティ : Microsoft Learn

今回はWebアプリケーションでも主要なカラーセットをもとに定義しています。

  • Primary (プライマリカラー)
    デザイン全体の主軸となる基本色。ブランドや製品のイメージを強調し、ユーザーの印象に残る色

  • Secondary (セカンダリカラー)
    プライマリカラーを補完し、追加の視覚的なアクセントを提供する

  • Accent (アクセントカラー)
    目立たせたい要素やユーザーの目を引きたいポイントに使用される色

  • Background (背景色)
    ページや画面全体のバックグラウンドとして使用される色

  • Text (テキストカラー)
    主に平文などに使用される色。バックグラウンドカラーとコントラストのある色が選ばれやすい

  • Border (ボーダーカラー)
    枠線などに使用される色

これらのカラー以外にもアプリによっては、サブテキストやホバーなどのカラーを定義することもあります。

今回は上記の6項目で、複数のテーマを作成してみましょう。

  • App.Formulas

//アーティサン公式サイトをイメージしたテーマ
MainTheme = {
    Primary: RGBA( 0,144, 168, 1),
    Secondary: RGBA(229, 244, 245, 1),
    Accent: RGBA(225, 70, 72,1),
    Background: RGBA(255, 255, 255, 1),
    Text: RGBA(51, 51, 51, 1),
    Border: RGBA(51, 51, 51, 1)
};

//ダークモードのテーマ
DarkModeTheme = {
    Primary: RGBA(33, 33, 33, 1),
    Secondary: RGBA(55, 55, 55, 1),
    Accent: RGBA(100, 181, 246, 1),
    Background: RGBA(18, 18, 18, 1),
    Text: RGBA(255, 255, 255, 1),
    Border: RGBA(90, 90, 90, 1)
};

//夕焼けのような優しいオレンジのテーマ
SunsetTheme = {
    Primary: RGBA(255, 140, 105, 1),
    Secondary: RGBA(255, 221, 178, 1),
    Accent: RGBA(255, 183, 147, 1),
    Background: RGBA(245, 230, 215, 1),
    Text: RGBA(60, 40, 40, 1),
    Border: RGBA(204, 102, 102, 1)
};

各テーマのカラーセットの記述が完了したら、App.Formulasの最後に次の式を追加しましょう。

  • App.Formulas

ColorSet = [MainTheme,DarkModeTheme,SunsetTheme];

これにより、各テーマがColorSetテーブルに格納されます。

 

Power Apps のカスタマイズでお困りですか？
画面デザインの最適化やテーマ構築など、アーティサンでは実践的な内製化支援を行っています。
「こういう機能を自社アプリにも取り入れたい」という場合は、以下のサービスをご活用ください。

3. テーマ変更用の各種オブジェクトを作成

ユーザーがテーマカラーを選択できる機能を実装していきます。

まずはテーマカラー選択タブを作っていきましょう。
コンテナーの中にギャラリーを配置して、その配下にボタンを格納します。

↓ツリービュー

ツリービュー

ギャラリーとボタンを配置したら、アイテムとボタンの色を設定します。

  • galColorTheme.Items

ColorSet

  • btnThemeSelect.Fill

ThisItem.Primary

  • btnThemeSelect.BorderColor

ThisItem.Accent

ボタンのHoverやPressしたときの色も設定してあげると、実際にボタンを押したときの見栄えもいいですね。

  • btnThemeSelect.HoverFill

ThisItem.Primary

  • btnThemeSelect.HoverBorderColor

ThisItem.Secondary

  • btnThemeSelect.PressFill

ThisItem.Primary

  • btnThemeSelect.PressBorderColor

ThisItem.Accent

私はこのようになりました。

動作例

配置する場所やサイズ、構成などは皆さんのアプリに合わせて調整してみてください。

続いて、先ほど追加したテーマカラー選択タブの表示、非表示を切り替える処理を記述していきます。

  • btnThemeTab.OnSelect

//テーマカラー選択タブの表示、非表示を切り替え
UpdateContext({IsThemeTabVis:!IsThemeTabVis});

bool値は否定演算子である「 ! 」を活用することで、If関数などを使わずに反転させることができます!

  • ctnThemeTab.Visible

IsThemeTabVis

この通り、アイコンをクリックすることでテーマ一覧タブの表示、非表示を切り替えることができます。

表示切替

続けて本命のテーマ入れ替え処理、といってもたったの1行です!

  • btnThemeSelect.OnSelect

//選択したテーマを反映
Set(SelectTheme,ThisItem);

これで下準備は完了です!

 

4. 各コントロールにテーマカラーを適用

ついにアプリの各コントロールにテーマカラーを適用していきます。
といっても方法はとても簡単。

各オブジェクトのFillやColor、BorderColorに対して

SelectTheme.Primary //Primaryなど任意のパラメーターを指定

といった式を設定していくだけです!

 

5. 動作確認

これらの設定を済ませることで…

完成動作

自由自在にテーマカラーを変更することができます!

もちろん定義するテーマカラーを増やすことで、より豊富なテーマカラーを実現できますし、

各テーマの項目を増やすことで、1つのテーマの中でもより詳細に各コントロールのカラー設定が可能になります。

 

おわり

今回はPower Appsにおけるテーマカラー変更機能の実装でした。

実装は非常にシンプルですが、こういう機能はアプリが目に見えて変化するのでとても楽しいですね!

ちなみに実際にアプリを構築する際のデザイン方針については、デジタル庁より提供されている デジタル庁デザインシステムβ版 が非常に参考になります。

システムにおけるカラーデザインや、アクセシビリティ要件についても分かりやすくまとめられていて、弊社でもお客様へ提供するPower Appsの画面デザインの参考とさせていただいております!
参考:カラー(概要)|デジタル庁デザインシステムβ版

Power Appsという制限の中で、ユーザーが使いやすいデザインを考えるのはすごく難しいことですが、
本記事が少しでも皆さんの参考になれれば嬉しいです!

👨‍💻 Power Apps の構築・デザインでお悩みの方へ

アーティサンでは、Power Apps の画面設計、機能追加、内製化支援などを通じて、 企業様のアプリ活用をトータルでサポートしています。
「自社に合わせたアプリを作りたい」「プロに相談しながら進めたい」など、 どんな段階でもお気軽にご相談ください。

それでは！

 

こちらも合わせて読みたい

次に見るコンテンツ