21
12

More than 3 years have passed since last update.

#PowerApps アプリの見た目をなんとなく良くする方法7選

Last updated at Posted at 2019-12-09

概要

Power Platform Day Winter '19 のとあるセッションでの質問で見た目をどう作るのかという質問があったので、具体的なテクニックをいくつかご紹介します。(当方はデザイナーではありませんのであしからず)
https://power-platform.connpass.com/event/149834/

テクニック

色を統一する

Power Apps に限りませんが、大体白、黒+ 3 色程度決めれば何とかなります。
特にビジネスアプリケーションなので、会社のブランドカラーから選ぶとよいかもしれません。

文字の大きさ、位置を統一する

こちらも Power Apps に限った話ではありませんが、見た目の良いアプリデザインの基本ですね。

テーマを利用する

手っ取り早く全体のイメージを変えたい場合はテーマ変更ツールやリボンからテーマを選択して利用するといいと思います。
image.png

こちらも併せてご活用ください。
https://github.com/microsoft/powerapps-tools

画像コントロールをうまく使う

具体的な例を1つご紹介します。
image.png

iOS 通知をイメージした見た目です。
右が背景の白に対して画像を配置し、左は四角アイコンで作成しています。
何となく統一感がある気がします。
Imageに白い画像を指定しているわけではなく、Image を指定せずに背景色白を入れ、 Radius を指定して角丸にしています。
因みにボタンの色コードは以下になります。

RGBA(1,124,254, 1) // Primary
RGBA(220,220,220, 1) // gray

ギャラリーかデータテーブルか

パフォーマンスや機能が必要ない場合は データテーブル、そうでない場合はギャラリーを選択してください。

アイコンを組み合わせる

具体的な例を1つご紹介します。
image.png

カメラ系の画面で使えそうなアイコンの組み合わせです。
全て、アイコンコントロールを利用して作成されています。

パクる (オマージュする)

いいな!って思う見た目のアプリをパクって オマージュしましょう。
Power Apps で 動きはともかく見た目で作れないものはありません。

まとめ

以上手軽にできるテクニック 7 選でした。
ただし、やはり張り切った見た目でも使いにくければしょうがないので、使うユーザー自身が作るか、ユーザーインタビューをして、使いやすいアプリを作りましょう。

今回作成したサンプルはこちらです。
サンプルをDL

21
12
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
21
12