AIでアプリ作成Bolt.newの使い方ガイド!料金や日本語プロンプトの方法も紹介

「Bolt.new」は、普段使う言葉でイメージを伝えるだけで、AIが自動でWebアプリを生成してくれるブラウザ完結型の開発ツールです。プログラミング未経験でも思いついたアイデアを簡単にアプリとして形にできることから、革新的なツールとして注目されています。

一方で、既存のAIコーディングツールとの違いや、日本語だけで開発から公開まで本当に完結するのか、商用利用が可能なのかなど、疑問を抱く方も少なくありません。

本記事では、Bolt.newの基本機能から料金プラン、具体的な使い方、実際に作成できるアプリの例、商用利用の可否までをわかりやすく解説します

Bolt.newの特徴を知ることで、アプリ開発を業務効率化や副業のレベルアップに生かせるでしょう。

アプリ開発の効率を高めたい方や、初心者でも開発に挑戦したい方はぜひ参考にしてみてください。 

日本最大級のAI活用セミナー

『AIスキルアカデミー』

  • ChatGTPの活用方法を無料で解説
  • たった2.5時間のセミナーで一気に取得
  • セミナー参加者全員が豪華特典GET
  • 1万円分のnoteもプレゼント

今なら豪華特典がGETできる

目次

Bolt.new(Bolt AI)とは?

Bolt.newは、オンライン開発環境サービス「StackBlitz」を提供しているStackBlitz社が開発した、ブラウザだけでWebアプリの開発が完結するAI開発プラットフォームです。

アプリのイメージを自然な言葉で指示するだけで、AIがフロントエンド、バックエンド、データベースを含むフルスタックのWebアプリを自動生成してくれます。

ここでは、Bolt.newが備えている次の3つの特徴について詳しく解説します。

  •  ブラウザだけでフルスタック開発ができるAI開発プラットフォーム
  •  日本語で指示するだけでアプリを自動生成
  •  ノーコードとコードどちらも扱えるハイブリッド型の新世代ツール

ブラウザだけでフルスタック開発ができるAI開発プラットフォーム

Bolt.newの最大の特徴は、StackBlitzが持つWebContainers技術を基盤とし、ブラウザ上でNode.jsを使ったアプリの開発環境が構築できる点です。

従来の開発では、エディタの準備からランタイム設定、パッケージ管理ツールの導入まで、数多くの手順を経てようやく開発環境が整いました。Bolt.newではこれらの作業を省略でき、ブラウザを開いてログインすればすぐにアプリ開発をスタートできます。

フロントエンドのUI開発からバックエンドの処理、外部サービスとの連携を含むフルスタック構成まで、すべてを一つのブラウザ画面内で完結できます。

Bolt.newを活用すれば、自宅のパソコンが高スペックでなくても、インターネット環境さえあれば本格的なアプリ開発が可能です。

日本語で指示するだけでアプリを自動生成

Bolt.newのもう一つの大きな魅力は、日本語で指示するだけでアプリ開発を進められる点です。

たとえば「ログイン機能付きのタスク管理アプリを作成して」「ポートフォリオサイトを作りたい」といった形で日本語の文章を入力すると、AIが指示を解釈し、必要なファイル構成やコードを自動で生成します。

生成されたアプリはすぐにプレビュー画面で動作を確認できるため、「指示を出す」「動作を確かめる」「修正を依頼する」といった流れを短いサイクルで回せます

プログラミングの知識がなくてもアイデアをそのまま形にでき、初心者でもアプリ開発のスピードは格段に向上するでしょう。

ノーコード+コードどちらも扱えるハイブリッド型の新世代ツール

Bolt.newは完全なノーコードツールではなく、AIが生成したコードをユーザー自身が編集できる点も特徴です。

まずはAIに大枠となる構造やデザインを自動生成してもらい、細かなデザイン調整やロジックの追加はエディタで自分の手を加える、といった使い方ができます

これにより、プログラミング未経験者は自然言語だけで開発の全体像を体感でき、経験者は単純作業をAIに任せてより高度な部分に集中できるようになります。

初心者からプロのエンジニアまで、Bolt.newは幅広い利用者層にとって扱いやすいハイブリッド型の開発環境といえるでしょう。

Bolt.new が「すごい」と言われる5つの理由

Bolt.newが多くの開発者やクリエイターから注目される理由は、従来の開発プロセスを根本から変える革新的な機能を備えているからです。

ここでは、Bolt.newがとくに評価されている次の5つのポイントを紹介します。

  •  ブラウザ上だけでアプリ開発が完結
  •  テキスト指示だけでアプリ構築(UIも自動生成)
  •  フレームワークや言語を幅広くサポート
  •  ワンクリックでデプロイ
  •  初心者でも使いやすいUIとプロンプト補助

ブラウザ上だけでアプリ開発が完結

従来のアプリ開発ではエディタの準備やサーバー設定、データベース構築など多くの下準備が必要でしたが、Bolt.newを使えばこれらを省いてブラウザ上で完結できます

コードの記述、実行、プレビュー、デザインの調整、公開といった流れを画面を切り替えることなく進められるため、環境構築に悩まされることなく開発そのものに集中できます。

テキスト指示だけでアプリ構築(UIも自動生成)

Bolt.newは、画面のチャット欄に「シンプルなToDoアプリを作って」と指示するだけで、AIがコード一式を自動生成し、すぐにプレビュー上で動作するアプリを表示してくれます。

ボタンや入力フォームなどのユーザーインターフェース(UI)も同時に自動生成されるため、画面設計に不慣れな方でも実用的なアプリを短時間で形にできます

修正したい点が出てきた場合も、「背景を落ち着いた色に変えて」「スマホでも見やすいレイアウトに変更して」と自然な文章で指示を出せば、AIがコードを自動で書き換え、すぐに反映可能です。

Bolt.newを使えば、専門エンジニアにチャットで依頼しているような感覚でアプリ開発が進められます。

フレームワークや言語を幅広くサポート

Bolt.newは、Next.jsやReact、Vueなど、現代のWeb開発で広く使われているフレームワークに対応しています。

プロンプトで「Next.jsを使って」「Vueで作成して」と伝えるだけで、希望する技術スタックにあわせたプロジェクトが自動生成されます

さらに、Supabaseとの連携にも対応しているため、「認証付きのアプリにしてほしい」「ユーザーごとのデータを保存したい」といった要求にスムーズに対応できるのも強みです。

ログイン機能付きのタスク管理アプリや、会員制のダッシュボードなど、データベースや認証が必要なアプリでも少ない手間で構築できます。

ワンクリックでデプロイ

完成したアプリをインターネット上に公開する際に求められるデプロイ作業も、Bolt.newならワンクリックで完了します。

デプロイ作業は本来サーバーの知識や複雑な設定が必要ですが、画面の「Deploy」ボタンをクリックするだけでNetlifyのようなホスティングサービスと連携し、自動でアプリが公開されます

公開するとアクセスURLが発行され、そのリンクを共有するだけで誰でもスマホやPCからアプリを試せるため、知識がなくても簡単に公開できる点が大きな強みです。

初心者でも使いやすいUIとプロンプト補助

AIへの指示の出し方に自信がない方のために、Bolt.newにはプロンプトの入力補助機能が用意されています。

短い指示文を入力して「Enhance prompt」ボタンを押すと、AIが内容を補い、より具体的で効果的なプロンプトに書き直してくれます

また、作りたいアプリのイメージ画像をアップロードし、「これと同じようなデザインにして」と伝えることも可能です。

言葉だけでは説明しにくい雰囲気やレイアウトのイメージも視覚的に共有できるため、プログラミングの知識が少ないデザイナーにとっても取り組みやすいツールです。

Bolt.newの料金プラン

Bolt.newには、学習や試用に適した無料プランから、本格的な開発やチーム利用に向けた有料プランまで、複数の料金プランが用意されています

ここでは、代表的なプランの違いと選び方の目安を解説します。

無料プラン

これからBolt.newを試してみたい方に向けて、無料の「Free」プランが提供されています。

Freeプランでは、基本的なアプリ生成機能やプレビュー機能は利用できますが、AIとの対話に用いるトークン量に制限があります

簡単なプロトタイプ作成や、Bolt.newの操作感をつかむには十分な範囲ですが、長時間の開発や大規模なアプリを作る場合には制限に達しやすくなるため注意が必要です。

まずはFreeプランでどの程度のことができるかを試し、物足りなさを感じてきたタイミングで有料プランを検討するとよいでしょう。

有料プラン

より自由度の高い開発を目指す場合は、有料の「Pro」プランやチーム向けの「Teams」プランが選択肢になります。

有料プランでは、利用可能なトークン量が大幅に増えるほか、外部APIとの連携、プライベートプロジェクトの作成、高度な生産性向上機能などが利用可能です。

プラン名料金特徴
Pro$20/月(年払い)$18/月(月払い)・月1000万トークンまで
・外部APIへのアクセス
・StackBlitzProのすべての機能
・より高度なプロジェクトやAPIを組み込んだアプリを作りたい方におすすめ
Teams$29/メンバー/月(年払い)$35/メンバー/月(月払い)・月1000万トークンまで
・Eメールでのサポート
・StackBlitzTeamsのすべての機能
・チームでの共同開発をおこなう企業やグループ向け

クライアントワークや自社サービスの開発など、日常的にBolt.newを使ってアプリを作る予定がある場合は、有料プランへの加入を前提に検討した方がストレスなく運用できます。

Bolt.newの始め方

Bolt.newはブラウザさえあれば利用できるため、始め方も非常に簡単です。特別なソフトのインストールや複雑な設定は必要なく、すぐに作業を始められます。

基本的な手順は次のとおりです。

  •  公式サイトで「Get Started」をクリック
  •  GitHubアカウントまたはメールアドレスで登録
  •  新しいプロジェクトを作成、チャットで指示を入力

それぞれのステップを具体的に解説します。

1:公式サイトで「Get Started」をクリック

まず、Bolt.newの公式サイトにアクセスし、トップページに表示されている「Get Started」ボタンをクリックします

2:メール or GitHubアカウントで登録

次に、表示された画面でGitHubアカウント連携かメールアドレスでの登録方法を選択します

GitHubで登録する場合は画面の指示に従って認証をおこない、メールアドレスで登録する場合は必要事項を入力して届いたメールから認証を完了します。

3:新しいプロジェクトを作成

登録が完了するとダッシュボード画面が開きます。チャット入力欄に作りたいアプリのイメージを伝えると、すぐに開発を始められます。

Bolt.newの使い方

アカウントの準備が整ったら、実際にアプリを作成してみましょう。Bolt.newでの開発は、対話を中心とした次のような流れで進みます。

  • 作りたいアプリを文章で指示する
  • UI・機能の修正をチャットで依頼する
  • コードエディタで手動編集も可能
  • ワンクリックでデプロイする

それぞれのステップについて説明します。

ステップ1:作りたいアプリを文章で指示する

まず、画面のチャット欄に「ログイン機能付きのタスク管理アプリを作成して」「三択クイズが遊べるゲームを作りたい」など、アプリの内容を自然な文章で入力します

送信するとAIがコード生成を開始し、数秒から数分でプレビューエリアに動作するアプリが表示されます。

ステップ2:UI・機能の修正もチャットで依頼

続いて、気になる点があれば「ボタンの色を落ち着いた色に変えて」「スマートフォンでも見やすいようにレイアウトを調整して」といった形で追加の指示を出します

AIがコードを更新し、その結果がすぐにプレビューに反映されるため、理想のアプリに近づくまで何度でも修正を繰り返せます。

ステップ3:コードエディタで手動編集も可能

Bolt.newは、AIが生成したコードをユーザー自身がそのまま編集できる点も特徴です

画面左側のファイル一覧から編集したいファイルを選び、コードエディタで直接編集できます。

AIの生成結果を細かく調整したいときや、独自のロジックを追加したいときに便利で、「ここは自分の手で整えたい」と考えるエンジニアにも使いやすい機能といえます。

ステップ4:ワンクリックでデプロイ

アプリが完成したら「Deploy」ボタンをクリックするだけでインターネット上に公開されます

公開後に発行されたURLを友人に送ったり、SNSでシェアしたりするだけで、誰でもアプリを試せるようになります。

Bolt.newで実際に作れるアプリ例

Bolt.newでは、簡易的なアプリから高度な実用アプリまで、幅広いアプリを作成できます。

実際に作れる例としては、「タスク管理アプリ」「ランディングページ」「ブログサイト」「クイズゲーム」「天気情報アプリ」「ダッシュボード画面」などがあげられます

さらに、次のような外部サービスやAPIを活用した実用的なアプリの試作も可能です。

  • Next.jsとSupabaseを組みあわせた認証付きToDo管理アプリ
  • ReactとTailwind CSSで作るポートフォリオサイト
  • 公開APIと連携したレシピ検索アプリ

学習用のミニアプリから、副業や起業に使える本格アプリまで、アイデア次第で幅広く開発できる点がBolt.newの大きな強みです。

Bolt.newのよくある質問(FAQ)

Bolt.newは、初心者から経験者まで幅広いユーザーに利用されているAI開発ツールですが、「プログラミング未経験でも使えるのか」「商用利用は問題ないのか」「外部サービスに連携できるのか」といった疑問を持つ方も多くいます。

ここでは、Bolt.newに関するよくある質問について回答します。

プログラミング未経験でも使える?

プログラミング未経験でも、基本的なアプリ作成であれば日本語の指示だけで完結するため、コードが書けなくても問題なく使えます

ただし、機能を複雑にしたりエラーに対処したりする際は、Webの基礎知識があるほどスムーズに作業できます。

商用利用はどこまで可能?

Bolt.newで作成したアプリを商用利用する際は、利用プランや時期によって条件が変わる可能性があり、とくに無料プランでは商用利用に制限が設けられる場合があります

商用利用を前提とする場合は、公式サイトで最新の利用規約やライセンス条件を必ず確認し、必要に応じてProやTeamsプランなど有料プランを選ぶようにしましょう。

作ったアプリを外部サービスに連携できる?

Bolt.newで作成したアプリは外部サービスと連携可能です。

Supabaseや外部APIにも対応しているため、ログイン機能やデータ保存を備えた実用アプリも開発できます。

バックエンド構築の負担を軽減しつつ、ユーザー登録やデータ管理を伴うアプリを作れる点は、ほかのノーコード系ツールにはない大きな魅力といえるでしょう。

まとめ

Bolt.newは、AIを活用してフルスタックアプリを簡単に作れる革新的なAI開発プラットフォームです。

従来のサービスと違い、Webブラウザだけで開発、編集、リアルタイム検証、デプロイまで完了できる点が大きな魅力です。

手間のかかる環境構築が不要で、ブラウザさえあればすぐに開発を始められるため、プログラミング初心者から経験者まで幅広く活用できるツールといえます。

一方で、大規模なコード改修やエディタとの高度な連携が必要な場合は、ほかのツールのほうが適しているケースもあります。

まずは無料プランからBolt.newを試し、必要に応じて有料プランへのアップグレードやほかのツールとの併用も検討するとよいでしょう。

※本記事は可能な限り正確な情報を記載しておりますが、内容の正確性や安全性を保証するものではありません。
※本サイトと提携する企業のPR情報が含まれます。

目次