本記事で紹介するAIツール「Bolt」は、日本語で作りたい内容を入力するだけでAIがそのコードやUIを生成してくれるサービスです。
例えば「簡単なWebアプリケーションを作ってください。」と入力することで、下記のようなアプリを自動生成してくれます。
https://astounding-caramel-6ab408.netlify.app/
そこで今回はAIツール「Bolt」の特徴や使い方、料金プランについて詳しく解説します。
AIツール「Bolt」とは
Boltは日本語や英語などの自然言語で指示することで、AIがコードを生成してアプリケーションを開発してくれるプラットフォームです。簡単なプロンプトから必要なファイル構造やコードを生成できるのが特徴。プレビュー機能を用いて実際の画面や挙動も確認できます。
たとえば「電卓を作って」と指示すると、電卓作成に必要なコードを自動生成し手プレビュー画面で表示できます。プレビュー画面を操作して実際に電卓を触ることも可能です。
このようにプログラミング知識がない方でも、簡単にアプリやWebサイトを作成できるのがBoltの特徴です。
Boltでできること
Boltを使うことでできることは下記の通りです。
テキストからコードやアプリケーションを自動生成
Boltはユーザーが入力したテキストに基づいてコードやアプリケーションを即座に生成します。簡単な指示でコードが作成され、アプリ開発の手間を大幅に削減します。
作ったWebサービスをプロンプトで修正できる
生成したアプリの修正はテキスト指示だけで可能です。デザイン変更や機能追加も短時間で行え、開発効率が大幅に向上します。
作ったサービスを一般公開できる
完成したサービスはリンクを共有して簡単に公開可能です。公開後もプロンプトでの修正が可能で、スムーズに改善を続けられます。
AIツール「Bolt」の料金プラン
Boltには大きく無料プランと有料プランの2種類あります。その具体的な内容は下記の通りです。
| プラン名 | 概要 | 料金（1人あたり） | 特徴 |
|---|---|---|---|
| Personal | 初めて利用する個人向け | 無料（月額0円） |
|
| Pro | 生産性を高めたい個人向け | 月額9ドル |
|
| Teams | チームで作業効率を 向上させたい方向け |
|
|
| Enterprise & Self-hosted |
ビジネス向けの カスタマイズ可能プラン |
要問い合わせ |
Boltは無料で利用できますが、上記のように一部制限があります。たとえば無料プランで複雑なアプリケーションを作ろうとすると、出力情報が多すぎてエラーを起こすことがあります。
そのため無料プランで物足りない方は、利用できるトークン（単語や語句の一部、句読点など）数が多い有料プランの検討もおすすめです。
AIツール「Bolt」の使い方
Boltの使い方について、アカウント登録方法と簡単なWebアプリケーションを作る方法の2ステップに分けて紹介します。
Boltのアカウント登録方法
はじめにBoltの公式ページへアクセスします。
Boltの公式URL：https://bolt.new/
Boltより
トップページの右上にある「Get Started」をクリックします。
Boltより
ログイン画面が表示されますがアカウントを持っていないので、画面下部にある「Don’t i have an account Create one here」というリンクをクリックして下さい。
Boltより
するとアカウント作成画面が表示されます。Githubアカウントかメールアドレスのいずれかで作成できるので、任意の方法を選択しましょう。
Boltより
アカウントを作成したあとは再度トップ画面から「Get Started」をクリックし、上記画面からログインします。
Boltより
上記のように右上が空欄で、左下のアイコンをクリックすると自身のアカウントが表示されていればログイン成功です。
BoltでWebアプリケーションを作る方法
Boltより
アカウントを作成したので、では実際に日本語だけでWebアプリケーションを作ってみます。画面中央にある入力欄へ作りたいアプリケーションの内容を入力しましょう。
今回は「ログインページを搭載した、シンプルなWebアプリケーションを作ってください。」と入力して実行します。
Boltより
すると上記のようにAIがプログラムを書いてくれます。画面右が生成されているコードで、左がAIとのチャット欄です。
Boltより
Webアプリケーションが完成すると、画面右上にある「Preview」リンクをクリックしてUI画面を確認できます。上記のようにシンプルではありますが、ログイン画面から始まるWebアプリケーションを生成できました。
ただ、ログイン画面は実装されているものの、ユーザーのアカウントを登録する画面がありません。このように新しい機能を追加したいは、画面左のチャット欄へ「アカウント作成画面も追加してください。」と入力するだけで機能を実装できます。
Boltより
ログイン画面の下部に新規登録欄へ誘導するリンクが導入されました。
Boltより
リンクをクリックすると新規登録画面が表示されます。実際にメールアドレスとパスワードを入力して登録してみます。
Boltより
登録した内容でログインすると、上記の画面が表示されました。このように登録会員のみ利用できるWebアプリケーションを日本語だけで作成できます。
Boltより
また、画面右上にある「Deploy」ボタンをクリックすると、作成したWebアプリケーションを一般公開することも可能。実際に第三者が利用できる環境まで作成できるのがBoltの魅力です。
Boltより
Deployを押すと、チャット欄に「Deploy URL:」という欄が表示されます。こちらが先ほど作成したWebアプリケーションのURLになります。
※上記コンテンツの内容やソースコードはAIで確認・デバッグしておりますが、間違いやエラー、脆弱性などがある場合は、コメントよりご報告いただけますと幸いです。
ITやプログラミングに関するコラム
パソコンのキーボード操作一覧表【Windows編】
FeloとCanvaが連携！数分で高品質プレゼンを作成・編集可能に。具体的な使い方を詳しく解説
テキストを音声化できるスマホアプリ「Reader by ElevenLabs」を使ってみた。
ポータブルAIボイスレコーダー「PLAUD NotePin」の評判は？具体的な機能やPLAUD Noteとの違い
停滞する日本経済とIT後進国の現実。IT技術の理解から始まるAI活用の可能性
