【2024年11月最新】bolt.new（ボルト）とは？使い方や料金を解説！

bolt.new（ボルト）は、ブラウザベースの開発環境を提供しているStackBlitz社が開発した、テキストのみでフルスタックアプリケーションを開発できるAIツールです。

「知識がないと難しそう」や「どうやってアプリを作るのかわからない」など疑問を持っている方もいるでしょう。

この記事では、bolt.newの主要な特徴や機能、使い方などを詳しく解説します。また、bolt.newの料金体系やアプリを作るコツも紹介しています。

記事を読めばすぐにbolt.newを使えるようになり、本格的なアプリケーションを効率的に開発できるようになります。

弊社SHIFT AIでは、bolt.newやChatGPTを活用したAI副業の始め方や、AI人材となってキャリアアップする方法などを解説する無料セミナーを無料で開催しています。

ご興味のある方は、ぜひ以下のリンクからセミナーにお申し込みください。

bolt.newとは？

本章では、bolt.newの特徴を紹介します。

• ブラウザ内でフルスタック開発が可能なAIツール
• 初心者でも使いやすい設計
• 多様なフレームワークのサポート
• ワンクリックでデプロイ可能

まずはbolt.newの基本を押さえましょう。

ブラウザ内でフルスタック開発が可能なAIツール

bolt.newは、ウェブサイトやアプリケーションの開発をこれまでにないほど簡単にするツールです。

通常のウェブ開発では、フロント（見た目）を作る部分と、バックエンド（裏側で動く仕組み）を作る部分を別々に開発する必要があります。これらをまとめて「フルスタック開発」と呼びます。bolt.newは複雑なフルスタック開発の作業をブラウザ上で一度に行えるようにしました。

たとえば、メモアプリを開発するとしましょう。bolt.newを使えば、メモを入力する画面のデザインや、保存ボタンの配置といった見た目の部分から、入力されたメモを保存したり、過去のメモを呼び出したりする裏側の仕組みまで、すべてをブラウザ上で作成できます。

bolt.newを使うことで、誰でも高度な機能が備わったアプリを開発できるため、ネットやSNSで話題となっています。

初心者でも使いやすい設計

bolt.newでは、プログラミング初心者でも自然な言葉でAIに指示を出せます。

たとえば、「青を基調としたシンプルなブログサイトを作りたい」と入力するだけで、AIがその要望に合わせたウェブサイトを提案し、必要なコードを自動生成してくれます。

また、bolt.newでは、リアルタイムで生成したアプリを確認・編集が可能です。その場で理想のプロダクトが生成されているかチェックできるため、初心者の方でも修正指示を出しやすくなります。

プログラミングの知識がなくても、簡単にアプリやサイトを構築できる点がbolt.newの強みといえます。

多様なフレームワークのサポート

bolt.newは、さまざまなウェブ開発のフレームワークをサポートしています。フレームワークとは、ウェブサイトやアプリケーションを効率よく作るための道具セットのようなものです。

bolt.newでは、React、Vue、Angular、Next.jsなど、人気のフレームワークを使用できます。これらはそれぞれ特徴があり、作りたいウェブサイトやアプリケーションの種類によって選択します。たとえば、Reactは動的で複雑なウェブアプリケーションを作るのに適しています。

試しに、「計算機アプリを作りたい」とbolt.newに伝えてみましょう。boltが自動的に最適なフレームワークを選定し、必要なコードを生成してくれるので、フレームワークの細かい設定に悩む必要がありません。

これにより、初心者でも高度なフレームワークを使った開発に挑戦できるのです。

ワンクリックでデプロイ可能

bolt.newでは、作ったウェブサイトやアプリケーションを、Netlifyというホスティングサービスに、ワンクリックでデプロイできます。「デプロイ」とは、作成したウェブサイトやアプリケーションを、実際にインターネット上で公開することを指します。

従来、この作業は複雑であるため専門的な知識が必要でした。しかし、bolt.newではこの作業が驚くほど簡単になっています。

この機能により、開発したものをすぐに世界中の人々に共有できます。個人のブログや、小規模なビジネスのウェブサイト、さらには複雑なウェブアプリケーションまで、簡単に公開できるのです。

プログラミングの知識がなくても、自分のアイデアを世界に発信できる時代が到来しました。

bolt.newは無料でも使える！｜料金と商用利用について解説

bolt.newは、個人での利用から大規模なチーム利用まで、幅広いニーズに対応できる柔軟な料金体系を提供しています。また、無料でも利用できるため、プログラミング初心者や個人開発者でも、bolt.newを気軽に試すことができます。

プラン名	価格	主な特徴	おすすめな人
Personal	$0/月	• 回数制限が厳しい •Claude 3.5 Sonnetの使用 • StackBlitz Personalの全機能	プログラミングを学び始めた人や、個人プロジェクトを始めたい人
Pro	$20/月（年払い） $18/月（月払い）	• 月間1000万トークンまで • 外部APIへのアクセス • StackBlitz Proの全機能	複雑なプロジェクトやAPI連携を使ったアプリを開発したい人
Teams	$29/メンバー/月（年払い） $35/メンバー/月（月払い）	• 月間1000万トークンまで • Eメールサポート • StackBlitz Teamsの全機能	チームで協力して開発を行う企業やグループ
Enterprise & Self-hosted	要問い合わせ	• プライベートnpmパッケージの利用 • カスタムSSO統合 • 自社ホスト、オンプレミス、VPCインストールオプション • 独自のAnthropic APIエンドポイント利用 • 専任ソリューションエンジニア • Slack、Zoom、Eメールサポート	大規模な企業や特別なセキュリティ要件がある組織

なお、TeamsもしくはEnterprise & Self-hostedプランのみ商用利用可能です。PersonalとProプランでは商用利用できない点に注意しましょう。

さらに、以下の画像のように、プランの中でも使用できるトークン数によって料金を選べます。（画像はProプランの年払い）

自分のニーズに合ったプランを選択し、効率的なアプリケーション開発を行ってみてください。

弊社SHIFT AIでは、bolt.newやChatGPTを活用したAI副業の始め方や、AI人材となってキャリアアップする方法などを解説する無料セミナーを無料で開催しています。

ご興味のある方は、ぜひ以下のリンクからセミナーにお申し込みください。

bolt.newの始め方

bolt.newで開発を行うために、アカウント登録を行いましょう。アカウント登録は以下のステップで行います。

bolt.newの使い方

bolt.newの基本的な使い方を紹介します。まずは簡単な操作を確認しましょう。

アプリを作る

bolt.newでは、プロンプトを入力するだけでアプリを生成できます。

たとえば、以下のプロンプトで、計算機アプリを作成してみましょう。

10桁の計算が可能な計算機アプリを作成してください。デザインは青と黒を基調とします。

簡単なテキストだけでアプリを作成できました。作成時間は20秒程度です。

また、アプリの機能やデザインについて、ここからチャットを繰り返すことでブラッシュアップが可能です。さらに、バグが出た場合は自分でエラー箇所を特定する「Fix Problem」ボタンを押すことで、自動的にバグ修正も行えます。

アプリをデプロイする

画面右上の「Deploy」をクリックすることで、アプリを共有できるリンクが発行されます。デプロイによって、リンクを受け取った人は誰でもプロダクトを使えるようになります。

たとえば、以下の計算機アプリをデプロイしてみましょう。

上記の計算機アプリはこちらから使用できます。デプロイした後に修正したい場合も、修正後に再デプロイ可能です。

また、Netlifyというウェブ開発プラットフォームで、作成したアプリを管理するためのリンクも発行されます。

この機能によって、業務効率化アプリや、アプリのモックアップをチーム内で簡単に共有できます。ただし、デプロイしたアプリはリンクさえあれば誰でも使えるため、個人情報や機密情報が入ったアプリは共有しないようにしましょう。

【実際に触ってみた】bolt.newで作成したアプリ

本章では、bolt.newを使って作成したアプリを5つ紹介します。どのようなアプリが作れるのか、参考にしてみてください。

①ToDoアプリ

②議事録作成アプリ

③ダークモードやスピーカーノート機能を搭載したプレゼンテーションスライド

④ログイン機能付き計算機

⑤テトリス

上記のテトリスはデプロイしているため、こちらからお試しできます。

弊社SHIFT AIでは、bolt.newやChatGPTを活用したAI副業の始め方や、AI人材となってキャリアアップする方法などを解説する無料セミナーを無料で開催しています。

ご興味のある方は、ぜひ以下のリンクからセミナーにお申し込みください。

bolt.newでアプリを作るコツ

bolt.newでアプリを作成する際には、以下のコツを意識してみましょう。

• 複数回対話を重ねる
• 参考画像をもとにデザインを作る
• エンハンス（プロンプト拡張）機能を使う

本章を参考に、bolt.newでアプリを作成してみてください。

複数回対話を重ねる

bolt.newでアプリを作る際の重要なコツは、AIとの対話を複数回重ねることです。最初の指示だけでは、理想のアプリを完成させるのは困難です。

たとえば、「メモアプリを作りたい」と指示した後、AIが生成したコードを確認し、「メモに日付を追加したい」「メモを検索する機能が欲しい」など、具体的な要望を追加していくことで、より理想に近いアプリを作成できます。

最初は基本的な機能を持つアプリを作り、そこから少しずつ機能を追加したり、デザインを調整したりすることで、自分の理想に近づけていきましょう。

参考画像をもとにデザインを作る

bolt.newでアプリを作る際、参考画像を活用することで、より魅力的なデザインを実現できます。言葉だけでデザインを説明するのは難しいですが、「このアプリのようなデザインにしたい」と具体的な画像を示すことで、AIはより正確に作成者の意図を理解できます。

たとえば、お気に入りの料理レシピアプリのスクリーンショットをAIに見せて、「この料理アプリのようなシンプルで見やすいデザインで、計算機アプリを作りたい」と指示できます。

この方法を使うことで、デザインの専門知識がなくても、見た目の良いアプリを作成できます。また、複数の参考画像を組み合わせることで、オリジナリティのあるデザインを生み出せます。

エンハンス（プロンプト拡張）機能を使う

bolt.newのエンハンス（プロンプト拡張）機能は、漠然としたアイデアを具体的な指示に変換するツールです。

この機能を使うことで、曖昧な考えをAIが理解しやすい詳細な指示に変えられます。エンハンス機能は、プロンプト入力フォーム下にある星マークをクリックすることで使用できます。

たとえば、「テトリスを作りたい」という指示にエンハンス機能を使ってみましょう。

上記のように、自動的にプロンプトを拡張してくれます。プログラミング初心者でも具体的な指示を出せるようになり、より高品質なアプリを開発できる可能性が高まります。

役割を与える

LPやアプリのデザインをブラッシュアップしたい時には、役割を与えることでプロダクトのレベルがグッと上がります。たとえば、「Appleのデザイナーとして考えて」という一文を加えただけでも効果があります。

以下は「水族館のLPを作成して」とだけプロンプトを入力したものです。

このプロンプトだけではデザイン性がなく、魅力的とは言えません。次に、「水族館のLPを作成してください。Appleのデザイナーとして考えてください。」というプロンプトで作成したLPを表示します。

このように、「Appleのデザイナーとして考えて」だけで見違える出来になりました。Apple以外にも、GoogleやMicrosoftなど、著名な企業の名前を使用してもよいでしょう。

このように、少しの工夫でプロダクトのアウトプットが変わるため、ぜひ試してみてください。

bolt.newを使ってテキストだけでアプリを作ろう！

bolt.newと似たAIツールとして、主にフロントエンド開発を得意とするv0やCreateなどもありますが、bolt.newはバックエンドも含めたフルスタック開発をブラウザだけで完結できる点が強みです。

bolt.newを活用することで、エンジニアはよりアプリ開発を効率的に、初心者の方はアイデアを具現化できるようになります。本記事を参考にbolt.newを使って、さまざまなアプリを開発してみてください。

弊社SHIFT AIでは、bolt.newをはじめとした生成AIを活用して、AI人材になるためのロードマップを解説するセミナーを定期的に開催しています。無料で参加できるため、ぜひお気軽にお申し込みください。