はじめに
Power Appsのモダンコントロール（テキスト入力）には、未入力時にガイド文を表示する PlaceHolder プロパティがあります。便利な機能ですが、実際にアプリを開発していて一つ気になることがありました。
PlaceHolderの文字色が濃すぎるのです。
標準のPlaceHolderで表示されるヒントテキストは、入力済みのテキストと色の差が小さく、パッと見たときに「これは入力済みの値なのか、それともヒントなのか」が判別しづらいと感じました。テキスト入力ボックスの枠線との境界もわかりにくく、ユーザーにとってストレスになりかねません。
ユーザーが迷わず操作できるようにするには、ヒントテキストは入力済みテキストよりも明確に薄い色にして色のメリハリをつけることが必要でした。しかし、PlaceHolderには文字色を変更するプロパティが用意されていません。
そこで採用したのが、ラベルコントロールをテキスト入力の上に重ねるという方法です。本記事では、この実装方法を手順を追って紹介します。
本記事ではモダンコントロールの テキスト入力（TextInput） を使用しています。クラシックコントロールの場合はプロパティ名が異なります（PlaceHolder → HintText など）。
Before / After
まずは、標準のPlaceHolderプロパティで設定した場合と、今回の独自実装を比較してみます。
見た目はほぼ同じに見えますが、After（独自実装）側はColor・Font・FontSize・Alignなど、ラベルコントロールが持つすべてのプロパティを自由にカスタマイズできます。 標準のPlaceHolderではこれができません。
コントロール構成
今回のサンプルでは、以下のようなツリー構造でコントロールを配置しています。
「氏名（カナ）」の入力欄を例に、コンテナ conName の中身を見てみましょう。
| コントロール名 | 種類 | 役割 |
|---|---|---|
icnName_Clear |
アイコン | 入力値をクリアするボタン |
txtName |
テキスト入力 | ユーザーが値を入力する欄 |
lblHint_Name |
ラベル | 疑似ヒントテキスト（今回の主役） |
lblName |
ラベル | 項目名「氏名（カナ）」の表示 |
lblAfter |
ラベル | 「After」の表示 |
ポイントは、txtName（テキスト入力）の上に lblHint_Name（ラベル）を重ねて配置している点です。テキスト入力のPlaceHolderプロパティは空にしておきます。
実装手順
手順① ラベルのTextプロパティにヒント文を設定する
lblHint_Name の Text プロパティに、ヒントとして表示したい文字列を設定します。
" 例：タナカタロウ"
先頭にスペースを入れているのは、テキスト入力の内側の余白と位置を合わせるためです。実際のアプリに合わせて調整してください。
手順② Visibleプロパティで表示を切り替える
ヒントテキストは「テキスト入力が空のとき」だけ表示したいので、lblHint_Name の Visible プロパティに以下を設定します。
IsBlank(txtName.Text)
これにより、ユーザーが1文字でも入力するとラベルが非表示になり、入力値をすべて消すと再びラベルが表示されます。
クラシックコントロールの場合は IsBlank(txtName.Text) && !txtName.Focused のようにフォーカス状態も条件に含めることが多いですが、モダンコントロールでは Focused プロパティが使えないため、IsBlank のみで制御しています。
手順③ OnSelectでテキスト入力にフォーカスを移す
ラベルがテキスト入力の上に重なっているため、ユーザーがヒントテキスト部分をクリックしたときに、テキスト入力にフォーカスが移るようにします。
lblHint_Name の OnSelect プロパティに以下を設定します。
SetFocus(txtName)
これを設定しないと、ラベルがクリックを吸収してしまい、ユーザーが入力欄をクリックしたつもりなのに入力できない、というUX上の問題が起きてしまいます。
手順④ クリアアイコンでリセット対応
テキスト入力の横にクリア用のアイコン icnName_Clear を配置し、クリック時にテキスト入力の値をリセットします。
Reset(txtName)
Reset でテキスト入力の値が空になると、手順②で設定した IsBlank(txtName.Text) が true になり、ヒントラベルが再表示されます。
なぜこの方法が有効か
標準のPlaceHolderプロパティと、今回のラベル重ね方式を比較してみます。
| 項目 | PlaceHolder（標準） | ラベル重ね（独自） |
|---|---|---|
| 文字色の変更 | ❌ 不可 | ✅ Colorプロパティで自由に設定 |
| フォントサイズの変更 | ❌ 不可 | ✅ FontSizeプロパティで自由に設定 |
| フォントの変更 | ❌ 不可 | ✅ Fontプロパティで自由に設定 |
| 太字・斜体 | ❌ 不可 | ✅ FontWeight / Italicで設定 |
| 文字の配置 | ❌ 不可 | ✅ Alignプロパティで設定 |
| 実装の手軽さ | ✅ プロパティに値を入れるだけ | △ コントロール追加＋数式設定が必要 |
実装の手間は増えますが、デザインの自由度が格段に上がります。特にアプリ全体のカラーテーマに合わせたい場合や、ヒントテキストの視認性を高めたい場合に効果的です。
実装時の注意点
- ラベルのサイズと位置をテキスト入力と揃える： ラベルがテキスト入力からはみ出したり、ズレたりしないように、X / Y / Width / Height を合わせましょう。コンテナ内で配置すると管理しやすくなります。
- ラベルのPaddingに注意： テキスト入力の内側余白とラベルのテキスト開始位置がズレると不自然に見えます。Text の先頭にスペースを入れるか、PaddingLeft で調整しましょう。
-
複数のテキスト入力に適用する場合： 入力欄ごとにラベルを用意する必要があるため、コントロール数が増えます。命名規則を統一して管理しやすくしましょう（例：
lblHint_Name、lblHint_ZipCd）。
おわりに
Power Appsのモダンコントロールは見た目が洗練されている一方で、細かいスタイル調整ができない場面があります。今回紹介した「ラベルを重ねて疑似ヒントテキストを実装する」方法は、標準機能の制約をシンプルなアイデアで乗り越えるテクニックです。
やっていること自体は「ラベルを重ねて IsBlank で出し分ける」だけなので、仕組みはとてもシンプルです。同じ課題に直面している方の参考になれば幸いです。