UI/UX設計

どこがエラーか一目でわかる！Power Appsで未入力項目の枠線を赤く光らせるUX改善

どこがエラーか一目でわかる！Power Appsで未入力項目の枠線を赤く光らせるUX改善

送信してからエラーに気づく。これがユーザーにとって最もストレスの高いUXのひとつです。どの項目が問題なのかを送信前に一目でわかるように、Power Appsでは枠線の色や背景色を動的に変えることができます。入力ミス防止の設計全体についてはPower Apps入力ミス防止ガイドでまとめているので、UX設計の全体像と合わせて確認してください。

この記事では、BorderColorとFillプロパティをIsBlankやIsMatchと組み合わせて、未入力・不正入力を視覚的にフィードバックする方法を解説します。

視覚フィードバックがUXを変える理由

ユーザーが10項目のフォームを入力し終えて送信ボタンを押したとき、画面上部に小さく未入力の項目があります、と出るだけでは、どこを直せばいいか分かりません。探すのに時間がかかり、ストレスが溜まります。最悪の場合、何度試してもどこが問題か気づけず離脱につながります。

対して、問題のある入力欄そのものの枠線が赤くなっていれば、どこを直せばいいかが一目瞭然です。これがリアルタイムの視覚フィードバックの価値です。社内アプリでも、使われないアプリと使われるアプリの差はこういったUXの細部に出ることが多いと思っています。

BorderColorで枠線を動的に変える

テキスト入力コントロールのBorderColorプロパティは、通常RGBA値や色定数で固定設定されています。これをIf関数で条件付きの式にすることで、入力状態に応じて枠線の色を切り替えられます。

未入力時に赤枠を表示する基本パターン

最もシンプルな実装は、IsBlankで未入力を検知して赤枠にするパターンです。テキスト入力コントロールのBorderColorプロパティに次の式を設定します。

If(
    IsBlank(TextInput_Name.Text),
    Color.Red,
    Color.Black
)

空欄のときは赤、何か入力されていれば黒になります。ただしこのままでは、画面を開いた瞬間からすべての必須フィールドが赤くなっており、ユーザーを萎えさせます。

送信ボタンを押したあとだけエラーを表示する

最初から赤くするのではなく、送信ボタンを押したあとにだけエラーを表示するのが実用的です。varFormSubmittedという変数を用意し、送信ボタンのOnSelectで最初にtrueにします。そのフラグが立っているときだけ、バリデーションが発動する設計です。必須チェックとエラーメッセージの作り方でも同じ変数パターンを解説しているので合わせて確認してください。

If(
    And(varFormSubmitted, IsBlank(TextInput_Name.Text)),
    Color.Red,
    Color.Black
)

送信ボタンのOnSelectプロパティの先頭に UpdateContext({varFormSubmitted: true}) を入れておけば、ボタンを押した瞬間にエラーが可視化されます。フォームが正常に保存されたタイミング（OnSuccess等）でfalseに戻すのを忘れないようにしてください。

Fillプロパティで背景色も変える

枠線だけでなく、入力フィールドの背景色（Fillプロパティ）も変えることで、より目立つエラー表示ができます。ただし、真っ赤な背景にすると視覚的に強烈すぎるので、薄いピンクや薄い赤にするのが現場では使いやすいです。

If(
    And(varFormSubmitted, IsBlank(TextInput_Name.Text)),
    RGBA(255, 220, 220, 1),
    Color.White
)

枠線が赤くなるだけより、背景も薄赤になることでエラー箇所がより直感的に伝わります。特に高齢のユーザーが多い職場や、色覚のバリエーションがある環境では、枠線の色だけに頼らず背景色やアイコンも組み合わせることを意識しています。

IsMatchで形式チェックの枠線制御をする

未入力チェックだけでなく、入力形式（メールアドレス・電話番号・郵便番号など）が正しいかをリアルタイムで枠線に反映させることもできます。

メールアドレスの形式チェックをBorderColorに組み込む例です。

If(
    Or(
        IsBlank(TextInput_Email.Text),
        IsMatch(TextInput_Email.Text, Match.Email)
    ),
    Color.Black,
    Color.Red
)

空欄または正しいメール形式のときは黒枠、何か入力されているのに形式が間違っているときだけ赤枠にしています。空欄を黒枠扱いにするのは、入力前からエラーを出さないためです。

モダンコントロールのValidationStateを使う

モダンコントロールのテキスト入力には、ValidationStateプロパティという専用の設定があります。Errorを設定すると自動的に赤枠が付き、Noneにすると通常の状態に戻ります。

If(
    And(varFormSubmitted, IsBlank(Self.Value)),
    "Error",
    "None"
)

ValidationStateを使うと、エラー時のスタイリングをPower Appsが自動で処理してくれます。カスタムのRGBA値を書かなくて済むため、コードがすっきりします。エラーメッセージのTextプロパティには、Parent.Error（フォームの標準エラー）と組み合わせることで既存のバリデーションと共存できます。

送信ボタンをすべての条件がクリアされるまでDisabledにする

視覚フィードバックと合わせて、すべての必須フィールドが正しく入力されるまで送信ボタンを押せないようにするとより安全です。複数フィールドの条件をOr関数でまとめ、ひとつでも問題があればDisabledにします。

If(
    Or(
        IsBlank(TextInput_Name.Text),
        Not(IsMatch(TextInput_Email.Text, Match.Email)),
        IsBlank(TextInput_Tel.Text)
    ),
    DisplayMode.Disabled,
    DisplayMode.Edit
)

この設計を再利用しやすくするには、App.FormulasにNamed Formulaとして条件をまとめておく方法もあります。コンテナの設計思想と同様、UI設計全体の中で再利用性を意識することが長期的なメンテナンスコストを下げます。

まとめ

BorderColorとFillプロパティをIsBlankやIsMatchの結果と連動させることで、どの項目に問題があるかをユーザーが一目で把握できるフォームになります。送信してから気づくのではなく、入力中に気づける設計が、ユーザーのストレスを下げてデータ品質を上げます。

見た目の工夫に見えますが、実際には入力ミスを防ぐ実用的な仕組みです。市民開発とは、こういった地道な配慮の積み重ねだと思っています。

この記事を書いた人
守屋 祐輔
守屋 祐輔
物流会社の非エンジニアサラリーマン。Power Platformを独学で学び、営業職からDX担当に職務変更し、社内ツールを作っています。個人事業のデザイン業務にもPower Platformを活用し、市民開発.comの運営者として、アプリ開発やDX推進の経験を発信中。

Xでフォローしよう