あなたのPowerAppsアプリ、デザインが味気なく感じたことはありませんか？
ボタンやテキストだけでは、直感的な操作が難しく、ユーザーにとって使いにくいと感じることもあるでしょう。
そこで活用したいのが「アイコン」です。
アイコンを適切に配置することで、操作を視覚的に案内し、アプリの使いやすさを飛躍的に向上させることができます。
例えば、保存や削除のアクションをテキストではなくアイコンで示すことで、より直感的なインターフェースを実現できます。
本記事では、PowerAppsのアイコンの基本的な使い方や、効果的な活用方法について解説します。
PowerAppsのアイコンとは？
PowerAppsのアイコンとは、アプリ内でボタンやナビゲーション、ステータス表示などに使用できる視覚的な要素です。
PowerAppsには多くの標準アイコンが用意されており、用途に応じて簡単に追加・カスタマイズできます。
アイコンの主な用途
- ナビゲーションボタン（例：ホーム、戻る、次へ）
- 状態表示（例：チェックマーク、警告、エラーマーク）
- アクション実行ボタン（例：保存、削除、編集）
PowerAppsでアイコンを追加する方法
1. アイコンの挿入
PowerAppsの「挿入」メニューから「アイコン」を選択すると、アプリにアイコンを追加できます。
2. プロパティの設定
アイコンの外観や動作は、以下のプロパティを変更することでカスタマイズできます。
| プロパティ | 説明 |
|---|---|
| Icon | 利用するアイコンの種類（例：Icon.Heart, Icon.Check） |
| Color | アイコンのカラー |
| Size | アイコンの大きさ（ピクセル単位） |
| OnSelect | ユーザーがクリックした際に実行されるアクション |
| Visible | アイコンの表示状態（表示/非表示）の切り替え |
| AccessibleLabel | スクリーンリーダー向けのラベル |
| DisplayMode | Edit：コントロールがユーザー入力を受け付ける View：データのみを表示する Disabled：無効状態にする |
| FocusedBorderColor | コントロールにフォーカスがある際の境界線の色 |
| FocusedBorderThickness | フォーカス状態時のコントロールの境界線の厚さ |
| Height | コントロールの上端から下端までの高さ |
| HoverFill | マウスカーソルがコントロール上にある際の背景色 |
| PressedBorderColor | コントロールが選択された際の境界線の色 |
| PressedFill | コントロール選択時の背景色 |
| TabIndex | 他のコントロール間でのキーボードナビゲーション順序 |
| Width | コントロールの左右の幅 |
| X | コントロールの左端から親コンテナー（または存在しない場合は画面の左端）までの水平距離 |
| Y | コントロールの上端から親コンテナー（または画面上端）までの垂直距離 |
3. アイコンをボタンとして使用する
アイコンをボタンのように使用する場合は、「OnSelect」プロパティにアクションを設定します。
Notify("ボタンがクリックされました", NotificationType.Information)PowerAppsのアイコン活用例
1. ナビゲーションボタンの作成
次の画面に遷移するボタンを作るには、アイコンの「OnSelect」プロパティを設定します。
Navigate(NextScreen, ScreenTransition.Fade)2. 状態表示アイコンの切り替え
条件に応じてアイコンを切り替えることで、ユーザーに状態を伝えることができます。
If(Status = "完了", Icon.Check, Icon.Warning)3. アイコンを使ったカスタムボタンの作成
ボタン代わりにアイコンを使用することで、デザインをシンプルにできます。
Patch(Tasks, ThisItem, {Status: "完了"})まとめ
PowerAppsのアイコンを活用することで、アプリのデザインを向上させ、操作性を改善できます。
適切なアイコンを選び、プロパティをカスタマイズすることで、より直感的で分かりやすいアプリを作成できます。
アイコンを活用して、より魅力的なPowerAppsアプリを作ってみましょう！
