アプリ開発の調査にかかる
時間を削減したい
内製化支援サービス
アプリを自分たちで
作成できるようになりたい
DX人材育成プログラム
プロに開発を依頼したい
アプリ開発導入支援サービス
機能拡張サービス
X-SP Feature
デザイン拡張サービス
X-SP Design
モダン化から運用管理までサポート
構築支援サービス
ダークモード機能やテーマカラー変更機能ってありますよね。
白を基調とした清潔感のあるデザインや、暗い色をベースにした目に優しいデザインなど…
ユーザーの好みや環境で選べる、あったらﾁｮｯﾄｳﾚｼｲそんな機能。
今となってはいろんなアプリやWebサイト、OSにも搭載されていますし、
近年では色覚多様性に配慮したカラーユニバーサルデザインが求められる場面もあるかもしれません。
今回はそういったテーマカラーを選択できる機能をPower Appsで作成したアプリに実装してみたいと思います。
動作イメージ
アーティサンでは、Power Apps を用いたアプリ開発のご支援や、
企業様の内製化サポートも行っております。
「自社でも Power Apps を活用したい」「設計から相談したい」という方は、
以下のサービスもぜひご覧ください。
目次
1. まずはアプリの画面を用意
今回はMicrosoftより提供されているカレンダーテンプレートに実装していきます。
皆さんもそれぞれ任意のアプリ画面をご用意ください。
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プロパティとは?
アプリ全体で利用可能な変数や関数を定義することができるプロパティです。
このプロパティで定義した値はアプリ内すべての画面から参照できるので、
今回のテーマカラーのように各画面から共通で使用したい値などを定義する場合に適しています。
今回は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
ColorSetbtnThemeSelect.Fill
ThisItem.PrimarybtnThemeSelect.BorderColor
ThisItem.AccentボタンのHoverやPressしたときの色も設定してあげると、実際にボタンを押したときの見栄えもいいですね。
btnThemeSelect.HoverFill
ThisItem.PrimarybtnThemeSelect.HoverBorderColor
ThisItem.SecondarybtnThemeSelect.PressFill
ThisItem.PrimarybtnThemeSelect.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 の画面設計、機能追加、内製化支援などを通じて、
企業様のアプリ活用をトータルでサポートしています。
「自社に合わせたアプリを作りたい」「プロに相談しながら進めたい」など、
どんな段階でもお気軽にご相談ください。
それでは！
【こちらも合わせて読みたい】
こんにちは。アーティサン株式会社の伊礼（いれい）です。