手書きで書いたイメージが簡単にアプリにできる!Power Appsのエクスプレスデザイン機能を使ってみた

2022.06.23
手書きで書いたイメージが簡単にアプリにできる!Power Appsのエクスプレスデザイン機能を使ってみた

こんにちは。MS開発部の三浦です。

今回は、Microsoft Build 2022(5月25日、26日)で公開された、Power Appsの新機能で登場したエクスプレスデザイン機能についてご紹介したいと思います。(2022年6月現在プレビュー機能です。)

※この機能は現在、プレビュー機能ですので不具合や変更が含まれる可能性があります。

エクスプレスデザイン機能について調べてみた

Power Appsのホームを見ていたら、いつの間にかプレビューとついた機能が公開されていること、皆さん気づいていたでしょうか?
エクスプレスデザイン_導入
「おや?このプレビューはなんだ?」と気になり調べてみたところ、「エクスプレスデザイン機能」というもののようです。エクスプレスデザインとは何なのか、公式のドキュメントを読んでいると、以下の機能であることが分かりました。

エクスプレスデザイン機能とは

イラストやパワポ等で作成した画像、FigmaなどのWebデザイン作成ツールで作成した画面から、キャンバスアプリの画面に変換して即座にアプリ作成することが出来る機能。これにはAIを使用しており、ローコードアプリ開発をより促進させることができる。

「画像から簡単にアプリを作成することが出来る機能」これだけ聞いたらとても魅力的に思います!コードの知識やロジックを考える必要が減るのはありがたいですよね。
プレビュー機能なので、多少変わることがあるかもしれませんが、せっかくなので使っていきたいと思います。

公式が提供しているエクスプレスデザイン機能についてはこちらをご確認下さい。
New: turn images and designs into apps using AI-powered express design
簡易設計 (プレビュー)

実際に使ってみた

実際に操作して検証してみました。

①手書きのフォームを用意します。
手書きフォーム

②Power Appsの画面を開き、サイドバーから「+作成」を選択します。「画像(プレビュー)」>「次へ」をクリックしキャンバスアプリを作成します。
画像から作成する_1
画像から作成する_2

③名前、画像、ファイルのアップロード、形式の設定を行ったら「次へ」をクリックします。
アプリの設定を行う

④コンポーネント割り当て画面で、フォームの内容にそれぞれコンポーネントを割り当てます。(画像がガタガタですが、これについては後述で説明します。)ガイダンスに沿って割り当てを行ったら「次へ」をクリックします。
コンポーネントを割り当てる

画面上をドラックすると、新規でコンポーネントを追加することができます。
コンポーネントを追加する

⑤新規でテーブルを作成する場合は「Dataverseに新しいテーブルを作成する」を、フォームだけ作成したい場合は「後で確認する」を選択し、「次へ」をクリックします。
今回は、フォームがどのように作られるかを確認する為なので、「後で確認する」を選択しています。
Dataverseを作成する_1

Dataverseのテーブルを作成する際も、コンポーネントの割り当てと同様に画面上で列を作成、割り当てをすることが出来ます。
Dataverseを作成する

⑥出来たフォーム(アプリ)がこちらです!(・・・何とも言えないですね笑)
作成されたアプリ
一応、対応したコンポーネントが指定されており、タイトルやラベルの内容をAIで判断してテキストとして入力済みになっているようです。文字を識別して自動で入力してあるのは画期的ですね。

先程の④の説明であった画面のコンポーネントがガタガタの件ですが、これはおそらく背景画面の白さが影響しています。「画像のヒント」にも記載があるように背景が明るく設定されている画像の方が好ましいようです。
注意事項

実際に先ほどの画像を明るくしたものと比較すると、背景を明るくした画像の方がコンポーネントの配置も、文字の内容もしっかり反映しています。

作成_背景が暗い場合

作成:背景が暗い場合


作成_背景が明るい場合

作成:背景が明るい場合

今回は、手書きで書いたフォームを使ってアプリ作成をやってみましたが、Power PointやFigmaを使用できる場合は、そちらで画面を作成したほうがうまくいく可能性が高いと思います。
また、サンプルとしてPower Apps上ですでに用意された画像からフォームを作成することも確認できました。

サンプルからアプリを作成

サンプルからアプリを作成

まとめ

以上、エクスプレスデザイン機能の紹介でした。
手書きでアプリを作成する場合は、画像加工アプリなどを使って背景をより白く明るくする必要があるようです。
AIを使用している為、デザイン面ではやはり自身で作りこんだアプリよりは劣ってしまう感じがありますが、簡単な入力フォームやイメージを画面上に起こすことができるのは良い機能に感じます。
今後のブラッシュアップに期待して、活用できる場面があったら使っていきたいです。

他のPower Appsの機能や使い方については以下の記事をご参考ください。
【Power Apps】コンポーネント(共通部品化)についてのご紹介
社会人1年目がPower Platform・Power Appsについて調べてみた
【Power Apps】Power Apps ポータルとは?作成方法について解説

今回はここで失礼します。

以上、最後までご愛読いただき
ありがとうございました。

お問い合わせは、
以下のフォームへご連絡ください。

お問い合わせ

PAGETOP