PowerApps x Daily UI #001 – Sign UP

この記事は「PowerAppsでDaily UIチャレンジ!UI100本ノックに挑戦します」の#001です。

はじめのPromptは「Sign UP」です。新しいサービスに登録するときの画面ですね。
ビジネス向けということを考えて、銀行のインターネットバンキングに登録する画面を作ってみましたが、PowerAppsで実装するケースはあまりなさそうですね…。あくまでサンプルなので、寛容に見ていただければと思います。

三七銀行(架空)のインターネットバンキング登録受付画面

こんなイメージになりました。
※三七銀行というのはもちろん架空の銀行名です。

インターネットバンキングの登録に必要なのはこのような情報でしょうか。
実際にはもっと色々聞かれるか、郵送で何かの手続きが必要な気がしますね…

  • 氏名
  • 生年月日
  • 支店番号、口座番号
  • メールアドレス

それから、どんなサービスでも必要になりそうな利用規約です。チェックボックスにチェックを入れないと「登録」ボタンが押せないようにしてあります。「利用規約のご確認はこちら」から別ページへ遷移して、規約の内容を確認できます。

デザインのエッセンス

今回は簡単にヘッダーを作ってみました!
銀行のビジュアルグランドデザインは赤・緑・青に割れているらしく、PowerAppsのテーマカラーである紫は少ないみたいです。
デザインして気づいたことをいくつか書きます。

  • PowerAppsでは現状、日本語フォントが(ほぼ)選べない
    • ビジュアルに凝ったアプリを作ろうとする場合は、画像化が必須になってしまいますね…。これはPowerAppsがフォーカスしているところを考えると仕方ないのかなと言う気もします。
  • 行間調整は大切
    • 利用規約の画面はどうしても文字がたくさん並ぶことになります。少しでも読みやすいように、行間の調整には気をつけました(行間の調整はLineHeightでできます)。
  • ロゴは激ムズ
    • ロゴが大好きでいつもいろんなロゴを眺めていますが、いざデザインしようと思うと全然思いつかないですね。ロゴデザインができる方は本当に尊敬します…。三角と七つの点で銀行の名前を表してみましたが、気づくと二分木になっていたのでデザインのセンスが壊滅的にないという事実がわかりました。センスが無。
  • キャッチコピーが激ダサ
    • ダサいけどありそうな感じかなと思います。投資信託をすごくすすめてきそう。
  • (おまけ)Adobe XD CC がめちゃくちゃに使いやすい
    • 今まで長いことmspaintちゃんを愛用していましたが、デザインするにはつらかったのでAdobeを1x年ぶりくらいにさわりました。軽い、速い、そしてめちゃくちゃに使いやすい。ちゃんとTutorialが用意されていてとてもよかったです!