プロンプトが苦手なら、手描きイラストからWebアプリを作ればいい！

　今や当たり前の存在になってきたスマホやパソコンで使えるAIツール。まだ本格的に触れたことがない人でも、便利に使いこなすためのヒントをお届けします。

　AIコーディングで高度なアプリも作成できるようになりました。でも、そのアプリのイメージをプロンプト（テキスト）で伝えるのは意外と大変。だったら、手描きした絵を読み込ませて作ってもらうのはどうでしょうか。

思い描くものをイラストにして渡すだけ

　Google Geminiでは、プロンプトで細かく指示してWebアプリを作ってもらうこともできますが、手描きした絵を添付すると、それに沿った画面レイアウトや要素などをもとに作ってもらえます。

　まず作りたいアプリをイメージしたイラストをペイントなどの画像作成ソフトで作成し、それをGeminiのプロンプト入力欄にドラッグ＆ドロップします。「＋」ボタンから「Canvas」を選び、「このイラストをアプリにして」のように指示するだけでOKです。

「ペイント」アプリで雑な画面レイアウトを作成

「＋」ボタンから「Canvas」を選ぶ

Geminiのプロンプト入力欄にドロップしてアプリ作成を指示

　反対に手描きイラストだと伝えにくい動き、各部の役割などはプロンプトで簡単に補足しておくと、より望みのものに近いアプリができあがるでしょう。

イイ感じにアレンジされ、公開も可能

　今回試しに作成したのはタイマーアプリですが、イラストで描いたのはボタン4つと時間を表示する部分のみ。しかも線だけの白黒です。念のため各部がどういう役割をもつのかをプロンプトで説明しておきました。

　結果、スタート・ストップボタンが色分けされ、さらにボタンタップ時の軽快な効果音まで付いたものが完成。元のイラストのレイアウトはしっかり守りつつ、見栄えのするデザインと心地良い使い勝手に仕上げてくれました。

完成したタイマーアプリ。色と効果音が付いた

任意の時間設定も問題なく可能

　できあがったアプリは、プログラムコードをダウンロードするか、Google SitesのWebアプリにすることができます。Google Sitesを選ぶと自分の他の端末からもアクセスできますし、公開・共有すれば他のユーザーにも使ってもらえます。

　AIエージェントに言葉で指示するのが苦手だったり、なかなか思い通りのアプリにならなかったりする場合は、ラフな手描きイラストからアプリ作りを始めてみてはいかがでしょうか。

同じアカウントのGoogleドライブに作成したアプリが追加される。スマホでも利用でき、公開すれば他の人も使用可