bolt.newは、プログラミングの知識がなくても、簡単にアプリを作れるAIです。
大学入試にプログラミングの科目が追加されたため、プログラミングがどのようなものか知りたい人が増えています。
この記事では、bolt.newでできる3つのことや、実際に生成したアプリを画像付きで紹介します。
bolt.newの使い方や、生成したアプリを使うことができるので、ぜひ最後までご覧ください。
bolt.newとは？
bolt.newとは、テキストで指示するだけで、簡単にアプリを作れるAIです。
これまでアプリを作るには、プログラマーがプログラミング言語を駆使して作成していました。
ぼーしかし、bolt.newの登場により、プログラミングができない人でも、アプリを作れるようになったのです。
例えば、bolt.newに「カレンダーを作ってください」と指示をすると、すぐにコードを自動生成してくれます。
また、「休みの日は赤色で表示してください」「〇〇年〇月のカレンダーを作ってください」などの細かな指示も可能です。
他の生成AIとの違い
テキストからコードを生成できるサービスは他にもありますが、bolt.newの特徴は、「フルスタック開発」ができる点です。
一般的にアプリを作成する際は、コーディングやデバック・デプロイなどの各作業に担当がいます。
ぼーしかし、bolt.newは、アプリ開発のすべての作業を完結できます。
bolt.newでフルスタック開発をすれば、複数の担当者を用意する必要がなくリソースの効率化ができるでしょう。
bolt.newで何ができる？できること3つ
bolt.newは、テキストからアプリの生成や、幅広いフレームワークでの開発が可能です。
ここでは、bolt.newでできる3つのことを解説します。
1.テキストからアプリを生成
bolt.newのメイン機能が、テキストからアプリを生成することです。
ChatGPTに質問をするのと同じように、bolt.newに作りたいアプリを伝えれば、自動でコードを入力して作成してくれます。
bolt.newが作成したアプリは、ブラウザ上でプレビューが可能です。
ぼーローカル環境の構築が不要なので、アプリ開発に必要な時間を大幅に短縮できるでしょう。
2.幅広いフレームワークに対応
アプリ開発において、開発を効率化するフレームワークは欠かせません。
bolt.newは幅広いフレームワークに対応しているため、多くの開発現場に対応できます。
具体的には、以下のようなフレームワークに対応しています。
- React
- Next.js
- Vue.js
- Node.js
ほとんどのメジャーなフレームワークに対応しているため、あなたの開発環境にもスムーズに導入できるでしょう。
どのフレームワークを使用するかの設定は不要で、「Astroでサイトを作成して」などテキストで指示をするだけです。
ぼーまた、どのフレームワークを利用するか指示をしない場合は、AIが自動で最適なフレームワークを選んでくれます。
3.アプリを簡単に公開できる
一般的にアプリを開発した後は、デプロイをする必要があります。
デプロイをするには、環境構築やネットワークの知識が必要です。
しかし、bolt.newはワンクリックするだけで、選択したホスティングサービスにアップロードできます。
アプリが公開されるとURLが表示されるため、すぐに誰でもアクセスできる状態になります。
ぼーアプリの生成だけでなく、スピーディーに公開できるのは、bolt.newの強みといえるでしょう。
bolt.newの料金体系
| プラン名 | 料金 | 特徴 |
|---|---|---|
| Personal | 0ドル | ・生成可能回数が少ない ・bolt.newの基本的な機能を利用可能 |
| Pro | 18ドル/月（年払い） 20ドル/月（月払い） | ・月1,000万トークンまで利用可能 ・外部APIにアクセス可能 |
| Teams | 29ドル/月（年払い） 35ドル/月（月払い） | ・月1,000万トークンまで利用可能 ・チーム管理機能付き ・メールサポートあり |
| Enterprise＆Self-hosted | 要問い合わせ | ・プライベートnpmパッケージを利用可能 ・セルフホスト、オンプレミス、VPC のインストール オプション ・カスタムSSO統合 |
ぼーbolt.newの料金体系は、上記のように4種類に分けられます。
Personalは生成できるアプリの量が少ないため、個人で試しに使ってみるのに向いています。
Personalでお試しをして本格的に使いそうなら、生成量の制限が大幅に緩和されるProプランに移行しましょう。
企業でチームとして利用するのであれば、Teamsプランがおすすめです。Teamsプランでは、複数のメンバーが同時に作業できます。
Enterprise＆Self-hostedプランは、大企業や特別なセキュリティのような個別の使用条件がある企業向けです。
bolt.newの始め方
bolt.newを使い始めるには、アカウントを作成してログインする必要があります。
ここでは、bolt.newの始め方を画像付きで解説します。
アカウントを持っていない場合は、「Don’t have an account?Create one here.」をクリックしてください。
E-mailとユーザーネーム・パスワードを入力して新しくアカウントを作成します。Githubのアカウントでも作成可能です。
アカウントの作成が完了したら、ログイン画面に戻りE-mailとパスワードを入力します。「Sing In」をクリックすればログインが完了して、bolt newを使える状態になります。
bolt.newでアプリを作る方法
bolt.newはテキストで指示をするだけでアプリを生成できます。ここでは、bolt.newでアプリを作る方法を画像付きで解説します。
トップページにプロンプト入力欄があります。この入力欄にどのようなアプリを作りたいのか記入します。
今回は例として、「押しても何も起きないボタン」を作ってみました。入力欄の「→」をクリックすると、AIがアプリを作り始めます。
プロンプト
入力したプロンプトから、AIが自動でコードを生成してくれます。画面上部の「コード」をクリックすると、生成されたコードを確認可能です。
コードを確認したら、実際にしっかりと動くのか確認しましょう。動作確認は「プレビュー」をクリックします。
プレビューをクリックすると、AIが生成したアプリが表示されます。今回は押しても何も起きないボタンが表示されました。
ぼークリックしても何も起きないので、指示通りのアプリが作成されたといえるでしょう。
実際に使ってみた！bolt.newで作成したアプリを紹介
ここでは、実際にbolt.newで生成したアプリを紹介します。
テトリス
まずは、bolt.newにテトリスを作ってもらいました。
テトリスは落ちてくるブロック（テトリミノ）を消すシンプルなゲームです。しかし、プログラミングで作ろうとすると、落下のスピードや回転など、細かな指定が必要となります。
プロンプト
簡単な指示しか与えていませんが、操作方法やスコアなど分かりやすく表示されています。
ぼーわずか1分ほどで、テトリスが完成しました。
しかし、実際にプレイしてみると、ブロックが回転せずプレイできませんでした。
アプリに変更を加えたい場合は、追加で指示をします。
追加プロンプト
ぼーこの追加のプロンプトで指示を出したら、回転機能が加わり、問題なく遊べるようになりました。
こちらのURLでこのテトリスをプレイ可能です。
https://aquamarine-fenglisu-edf05f.netlify.app
デジタル時計
次にデジタル時計を作ってみます。
WindowsやiOSにも時計機能は付いていますが、毎日使うからこそ、こだわりたい人も多いのではないでしょうか。
ぼーbolt.newを使って、自分好みの時計を作れるか試してみましょう。
プロンプト
シンプルで時間を確認しやすい時計ができました。
ぼー時間は正確に表示されているので、実際に時計として使えます。
ただ、少しシンプル過ぎるので、目覚まし機能を追加してみます。
bolt.newが生成したアプリを修正するには、追加で指示を与えるだけです。
プロンプト
ぼー指示通りにアラーム機能が追加されました。
ここまでの操作で、プログラミングの知識はまったく必要ないので、誰でもアラーム機能付きの時計を作り出せます。
ただ、毎日使うものなので、デザインがシンプル過ぎて飽きるのではないかと思いました。
もう少し、カッコいいデザインにしてみましょう。
プロンプト
ぼー全体的に陰影ができて、立体的なデザインになりました。
陰影の他にも、色を変えたり、字体を変えたりと、さまざまなカスタマイズが簡単にできます。
この時計は、以下のURLでチェックできます。
https://wondrous-druid-83a5a7.netlify.app
ECサイト
bolt.newはアプリだけでなく、ECサイトの制作も可能です。
ぼー自社でWebサイトを作成したい場合は、デザインの参考になるので試してみましょう。
プロンプト
ぼーわずか数秒で、ECサイトのひな型が完成しました。
ECサイトのタイトルやキャッチフレーズもbolt.newが考えてくれます。
bolt.newを使いこなすポイント
bolt.newは、誰にでもアプリを作れる便利なサービスです。
ぼーしかし、上手に使いこなすには、ちょっとしたポイントがあります。
重要なのは、一回の指示で完璧なアプリを作ろうとしないことです。
この記事で生成した時計のように、複数回の指示を与えることで、イメージ通りのアプリが出来上がります。
ぼーまずはシンプルな機能のアプリを作り、少しずつ機能を追加していきましょう。
bolt.newを使いこなすための、もう一つのコツは、参考画像で指示をすることです。
bolt.newは、画像をアップロードして、画像のデザインを参考にできます。
例えば、オシャレな部屋の画像をアップロードすれば、「この画像のような雰囲気のWebサイトを作成して」と指示が可能です。
ぼーデザインの知識がない人でも、簡単にオシャレなアプリやWebサイトを制作できます。
アプリのアイディアには自信があっても、「デザインを考えるのが苦手だな」と感じる人は、画像を参考にする機能を使ってみましょう。
bolt.newに関するよくある質問
bolt.newに関するよくある質問について回答します。
bolt.newは日本語に対応している？
bolt.newは、日本語に対応しています。
日本語でプロンプトを入力すれば、日本語のアプリを生成してくれます。
bolt.newの安全性は？
bolt.newを運営する「StackBlitz社」は、オンライン開発環境（IDE）を提供する企業として実績があります。これまで、情報漏えいやユーザーデータの悪用などの安全性に関する問題は発生していません。
そのため、bolt.newも安全性が高いといえるでしょう。
ただし、ユーザーが入力したプロンプトは、AIの学習に使われます。プロンプトに個人情報や会社の機密情報は入力しないでください。
bolt.newは商用利用できる？
bolt.newは、加入しているプランにより、商用利用の可否が異なります。
プランごとの商用利用の可否は、以下の通りです。
- Personalプラン：商用利用できない
- Proプラン：商用利用できない
- Teamsプラン：商用利用できる
- Enterprise＆Self-hostedプラン：商用利用できる
商用利用が認められていないプランで商用利用すると、利用の差し止めやアカウントの削除をされる可能性があります。商用利用するのであれば、上位プランに加入しましょう
まとめ
bolt.newとは、テキストで指示をするだけで、AIがアプリやWebサイトを生成してくれるサービスです。
アプリやWebサイトを生成するだけでなく、内容の修正や公開まで一貫しておこなえるのがbolt.newの特徴です。
ぼーまた、幅広いフレームワークに対応しているため、さまざまな開発環境への対応もできます。
bolt.newには有料プランもありますが、無料で利用できるPersonalプランもあります。
無料でも十分にアプリの生成ができるため、プログラミング経験のない人でも気軽に試せます。
今回、bolt.newを使って作成したアプリやECサイトを参考にして、あなたも手軽にアプリを作成してみてください。