こんにちは、バックエンドエンジニアの前田です。
正月お餅を食べすぎたので、体重が跳ね上がっていないか心配です。
さて今回は、bolt.new に対して、画面イメージを元に、どこまで画面生成を簡単に行えるか、試してみました。
画面のレイアウトがあっても、イメージしづらい部分はありますが、実際に動く画面を素早く作れるならイメージもしやすいと思います。
bolt.newに関しては、以下を参考にしてください。
acro-engineer.hatenablog.com
1. 今回生成する画面について
図書館での本の一覧や登録削除、貸し借りを想定するWebアプリ「図書管理システム」のフロントエンド部分を生成させます。
具体的には、PowerPointなどのお絵描きツールで作成した以下の4枚の画面イメージ画像をbolt.newに渡し、同じレイアウトの画面を持つアプリを生成してもらうことを目標にします。
達成したいことは、以下です。
- ヘッダーやサイドメニュー、ボタンなどの基本的なレイアウトを再現すること
- テキストボックス、プルダウン、チェックボックスなどを再現すること
- 色を認識し、同じ色で画面を生成すること
また、今回は画面（フロントエンド）のみの生成で、言語はTypeScript、フレームワークはReactを用いて生成してみます。
2. 画面イメージを元に、画面を生成させる
一枚ずつ画面イメージを指定して、細かい機能の説明はプロンプトで指示し、生成させていきます。
2.1. 図書検索画面と新規追加ポップアップの生成
まずは、図書検索画面と新規追加機能を生成させるために「図書検索画面」、「新規追加ポップアップ」の画面イメージ画像と、以下のようなプロンプトを入力しました。
画像をもとに、図書管理システムを作成してください。
以下の要件を満たすようにしてください。# 要件
・画像のような基本画面を作成すること。
・あとで機能追加するため、サイドメニューは画像に準拠すること。
・「新規作成」ボタンを押した際、画像のようなポップアップが出るようにすること。
・図書検索画面は基本的に、検索にしか使わない想定のため、検索する前は、本を一覧で出す必要はない。
・検索後の機能については、後で指定するため、現状は何も実装しなくて良い。
結果は以下のような画面になりました。
以下のことを確認できました。
- ヘッダー、サイドメニュー、新規追加ボタンが存在する
- テキストボックス、プルダウン、チェックリストが再現されている
- 色が指定した通りの色になっている
いくつか修正したい内容があったため、以下のプロンプトで修正させました。
以下の点を修正してください。
1. ヘッダーを「図書管理システム」に変更すること。
また、図書管理システムっぽいアイコンを追加すること。
2. 「サイドメニュー」文字は削除すること。
3. 「新規作成」のポップアップにキャンセルボタンを追加すること。
以下の画像のヘッダーの赤枠で囲っている部分の文字の修正とアイコンの追加、矢印で示した部分から「サイドメニュー」という文字の削除、新規追加ポップアップに赤枠で囲った部分にキャンセルボタンが追加されました。
2.2. 検索後画面の生成
上記で、達成したいことは確認できましたが、もう少し難しいレイアウトも再現してくれるか試したいため、「検索後画面」の画面イメージ画像と、以下のようなプロンプトを指定し、検索後画面を生成させました。
本を検索した後は、画像のような検索された図書一覧画面に遷移するようにしてください。
要件は以下です。# 要件
・検索ボタンを押すまで、登録された本を表示しない。
・検索画面に戻るボタンを作ること。
以下のように検索後画面が生成されました。
再現しづらいレイアウトだと思いますが、同じように再現してくれました。
2.3. 利用者一覧画面の生成
最後に、「利用者一覧画面」の画面イメージ画像と以下のようなプロンプトを指定して、サイドメニューで切り替えられるようにします。
画像のような利用者一覧画面を作成してください。
要件は以下です。# 要件
・サイドメニューの「利用者一覧」をクリックすると利用者一覧画面に遷移するようにすること。
・新規ユーザー追加ボタンを押すと、ユーザー名と電話番号を登録するポップアップを表示すること。
以下のように利用者一覧画面が生成され、サイドメニューで切り替わることも確認しました。
3. まとめ
今回はbolt.newを用いて、画面イメージ画像から画面を生成させてみました。
画面イメージ画像の作成から、実際に画面を生成させるのに、合計1時間ほどで、これらの画面を生成させることができました。
| 画面イメージの内容 | 生成結果 | |
|---|---|---|
| 基本的な画面レイアウト | ヘッダー、サイドメニュー | 画面イメージ通りに生成でき、プロンプトで指定して、ヘッダーのアイコンやサイドメニューの切り替えもできた |
| 複雑な画面レイアウト | 検索後画面で図書をカード型で表示する | ステータスを表示するタグも含めて画面イメージ通りに生成できた |
| 入力フォーム | ポップアップ、テキストボックス、プルダウン、チェックボックス、ボタン | 画面イメージ通りに生成できた |
| 画面やボタンの配色 | ヘッダーの青色や新規追加ボタンのオレンジ色 | 画面イメージ通りに生成できた |
| 画面イメージ内のコメント | チェックボックスと1冊ごとにIDを付与する | チェックボックスはイメージ通りだが、1冊ごとにIDを付与することはできなかった |
画像の中のコメントは難しい内容だと、あまり反映してくれないのかもしれません。
しかし、ほぼ画面イメージ通りに生成でき、検索や新規追加などの動作も確認できました。
今回は実際の画面を素早く作成することが目標だったため、バックエンド部分は実装していませんが、誰かに見せて説明したり、実装者のイメージを明確にしたりするには十分かと思います。
他にもbolt.newを使ってできることは多いので、どんどん利用して、効率的に開発を進めていきたいですね。
Acroquest Technologyでは、キャリア採用を行っています。
- Azure OpenAI／Amazon Bedrock等を使った生成AIソリューションの開発
- ディープラーニング等を使った自然言語／画像／音声／動画解析の研究開発
- マイクロサービス、DevOps、最新のOSSやクラウドサービスを利用する開発プロジェクト
- 書籍・雑誌等の執筆や、社内外での技術の発信・共有によるエンジニアとしての成長
少しでも上記に興味を持たれた方は、是非以下のページをご覧ください。
