• 作成日 : 2026年7月13日

Bolt.newの使い方とは？プロンプト作成・活用例・注意点を解説

Bolt.newは、プロンプトを入力するだけでWebサイトやアプリの作成、編集、公開まで進められるAI開発ツールです。ブラウザ上で使えるため、開発環境の準備に不慣れな初心者でも試しやすい一方、生成されたコードや画面を確認しながら修正する視点も欠かせません。

この記事では、Bolt.newの使い方、プロンプト作成のコツ、料金プラン、利用時の注意点などを解説します。

Bolt.newとはどのようなツール？

Bolt.newは、文章で作りたいものを指示し、ブラウザ上でWebサイトやフルスタックアプリを生成・実行・編集・公開できるAI搭載の開発エージェントです。ローカル環境を構築せずに使えるため、初心者でも試しやすい点が特徴です。

ブラウザだけで開発を進められる

Bolt.newは、PCにNode.jsやエディタを入れなくても、ブラウザ上で開発作業を始められます。初心者にとっては、環境構築でつまずきにくい点が大きな利点です。

通常のWeb開発では、エディタ、ターミナル、パッケージ管理、ローカルサーバー、Git、デプロイ先などを個別に準備します。一方、Bolt.newでは、プロンプト入力欄、コード編集、プレビュー、実行環境がまとまっているため、最初の学習負担を抑えられます。

ノーコードではなくAI支援型の開発ツール

Bolt.newは、完全なノーコードツールではなく、AIがコード作成や修正を支援する開発環境です。画面操作だけで完結するツールではなく、プロンプトで要件を伝えながらアプリを組み立てます。

「ノーコード感覚で使える」と表現される場合もありますが、実際にはコードが生成され、そのコードをもとにサイトやアプリが動きます。そのため、使い方の中心は、AIに任せる部分と人が確認する部分を分けることです。デザイン案、画面構成、簡単なWebアプリの試作には向いていますが、会員情報、決済、業務データ、社内システムなどを扱う場合は、セキュリティや運用設計の確認が欠かせません。

作れるものはWebサイトやアプリが中心

Bolt.newで作りやすいのは、ランディングページ、Webサイト、管理画面、簡単なSaaS風アプリ、フォーム付きページ、プロトタイプなどです。JavaScript系のフレームワークやライブラリを使う開発と相性があります。

公式GitHubでは、Vite、Next.jsなどのnpmツールやライブラリを扱えること、Node.jsサーバーを実行できること、外部APIと連携できることが示されています。見た目だけのページだけでなく、バックエンドやデータ処理を含むアプリにも対応しやすい設計です。

参考:Bolt｜HelpCenter

参考:Bolt.new｜GitHub

Bolt.newの使い方は？

Bolt.newの基本的な使い方は、ログイン、作りたいものの入力、生成結果の確認、追加修正、公開という流れです。最初から複雑な機能を詰め込まず、小さく作ってから広げると失敗しにくくなります。

Bolt.newのQuickStartでは、ペットの名前を選ぶWebアプリを例に、プロンプト入力、サインイン、生成、プレビュー、修正、公開までの流れが紹介されています。無料プランの利用量にも関わるため、初心者は「一度で完璧に作る」よりも「最初に骨組みを作る」進め方が現実的です。

アカウント作成後にプロンプトを入力する

Bolt.newを使う最初の操作は、Bolt.newを開き、チャットボックスに作りたいWebサイトやアプリの内容を入力することです。Google、GitHub、メールでのサインインに対応しており、QuickStartではクレジットカードなしで始められる流れが示されています。

最初のプロンプトでは、作りたいものの種類、利用者、画面数、必要な機能、デザインの雰囲気をまとめて伝えます。たとえば「個人事業主向けの請求書管理アプリを作成してください。ログイン機能、請求書一覧、作成フォーム、ステータス管理を含めてください」のように書くと、AIが構成を理解しやすくなります。曖昧に「便利なアプリを作って」と伝えると、期待と違う方向に進む可能性があります。

生成された画面をプレビューで確認する

Bolt.newでは、生成されたWebサイトやアプリをプレビュー画面で確認できます。見た目だけでなく、ボタン、フォーム、ログイン、保存、画面遷移などの動作確認を行うことが大切です。

AIが作った画面は、一見すると完成しているように見えても、細部に不整合が残る場合があります。たとえば、フォームの入力チェックが弱い、スマートフォン表示が崩れる、エラーメッセージが不自然、データ保存の仕様が曖昧といった問題です。確認時は、通常の使い方だけでなく、空欄送信、長い文字列、戻る操作、複数回クリックなども試すと、修正すべき点を見つけやすくなります。

修正指示を追加して完成度を高める

Bolt.newでは、生成後にチャットで修正指示を出し、デザインや機能を調整できます。QuickStartでも、生成後にアプリ名を変更する修正例が示されています。

修正指示では、「もっと良くして」ではなく、「トップページの見出しを短くする」「スマホ表示でカードを1列にする」「送信ボタンを押した後に完了メッセージを出す」のように、対象と変更内容を分けて伝えると精度が上がります。複数の修正を一度に依頼する場合は、デザイン変更、機能変更、文言修正を混ぜすぎないほうが安全です。AIが複数ファイルを同時に編集するため、意図しない副作用が起きる場合もあります。

Bolt.newでプロンプトを書くコツは？

Bolt.newで成果物の質を上げるには、目的、利用者、機能、画面構成、技術指定、デザイン条件を明確に書くことです。AIに丸投げするより、要件を整理してから入力したほうが、修正回数を減らせます。

最初に完成形ではなく土台を作る

Bolt.newでは、最初の指示で完成品を作ろうとせず、画面構成と主要機能の土台から作ると安定します。複雑な認証、決済、外部API連携を最初から詰め込むと、修正範囲が広がりやすくなります。

たとえば、予約管理アプリを作る場合、最初は「予約一覧」「予約登録フォーム」「予約詳細」の3画面だけを作ります。その後に、ログイン、通知、カレンダー表示、メール送信、権限管理などを段階的に追加します。この進め方なら、どの追加機能で不具合が起きたのかを追いやすくなります。

技術指定は必要な範囲で書く

Bolt.newに技術スタックを指定すると、希望に近い構成で生成されやすくなります。React、Next.js、Vite、Tailwind CSS、shadcn/uiなどを使いたい場合は、最初のプロンプトに含めます。

一方で、初心者が理解していない技術名を並べすぎると、後から修正が難しくなります。学習目的なら、まずは一般的なReactベースのシンプルな構成で作り、必要に応じてライブラリを足すほうが扱いやすいです。技術指定をする場合は、「ReactとTailwind CSSで、スマートフォン表示に対応したシンプルな管理画面を作成してください」のように、目的とセットで書くと伝わりやすくなります。

修正依頼は対象と変更内容を分ける

Bolt.newで修正する際は、「どの画面の」「どの要素を」「どう変えるか」を明確にします。画面名、ボタン名、フォーム名、文言、色、余白、動作条件を分けて伝えると、AIが編集対象を特定しやすくなります。

悪い例は、「全体的にいい感じにして」「もっとプロっぽくして」のような指示です。良い例は、「トップページのヒーローエリアに、サービスの強みが3つ伝わるカードを追加してください。各カードは見出し、説明文、アイコン風の要素で構成してください」のような指示です。SEO記事、LP、業務アプリでは、文言や導線の意図も合わせて伝えると精度が上がります。

Bolt.newの料金プランは？

Bolt.newには、Free、Pro、Teams、Enterpriseの4つの料金プランがあります。無料で試せるFreeプランから、個人利用向けのPro、チーム利用向けのTeams、大規模組織向けのEnterpriseまで用意されています。料金や利用条件は変更される可能性があるため、導入前には公式のPricingページで最新情報を確認してください。

Bolt.newで作ったサイトやアプリは公開できる？

Bolt.newで作ったプロジェクトは、Bolt hostingを使って公開できます。無料の.bolt.hostサブドメインで公開でき、外部アカウントを別途用意せずにサイトを公開できる仕組みがあります。

Bolt hostingで公開する

Bolt hostingは、Bolt.new内で作成したファイルを公開URLに反映する仕組みです。サーバー設定や外部ホスティングサービスの準備を省きやすいため、初心者でも公開まで進めやすいです。

公開後は、URLを共有して他の人に確認してもらえます。LP、ポートフォリオ、検証用アプリ、社内向けの試作画面などを短時間で見せたい場合に便利です。

FreeユーザーとProユーザーのどちらも.bolt.hostドメインで公開でき、カスタムドメインはProユーザー向けと説明されています。

Netlifyにも公開できる

Bolt.newは、Bolt hostingのほかにNetlifyへの公開にも対応しています。新規プロジェクトはBolt hostingが標準ですが、Netlifyアカウントと接続してNetlify hostingを選ぶこともできます。

Netlifyを使う場合は、Boltの設定画面からNetlifyアカウントを接続し、ホスティングプロバイダーとしてNetlifyを選択して公開します。すでにBolt hostingで公開済みのプロジェクトをNetlifyに切り替える際には制約があるため、公開先をどちらにするかは初期段階で決めておくほうが無難です。

Bolt.newの活用例は？

Bolt.newは、Webサイト、プロトタイプ、キャンペーンページ、事業アイデア検証用のアプリなどに活用できます。

プロトタイプ作成

Bolt.newは、アイデアを短時間で画面化するプロトタイプ作成に向いています。プロダクト担当者が仮説検証用の画面を作り、チームで確認する用途と相性があります。

新しいSaaSの管理画面、予約システム、問い合わせ管理、診断ツール、社内申請フォームなどを、まず動く形にできます。完成品として使う前に、ユーザー導線、必要な入力項目、画面遷移、見せ方を確認できます。企画書だけでは伝わりにくい案も、実際に触れる画面にすると議論しやすくなります。

ランディングページ作成

Bolt.newは、キャンペーンページやサービス紹介ページの作成にも使えます。マーケター向けの用途として、キャンペーンページを短時間で作成し、SEOやホスティングを含めて扱える点が紹介されています。

LP作成では、ファーストビュー、課題提起、機能紹介、導入メリット、料金、FAQ、問い合わせフォームなどの構成をプロンプトで指定します。AIに任せるだけでは訴求が弱くなる場合があるため、ターゲット、競合との差別化、CVポイント、禁止表現、ブランドトーンを入力しておくと実務に近いページになります。

起業家や小規模チームのMVP作成

Bolt.newは、起業家や小規模チームがMVPを作る用途にも向いています。起業家がランディングページからプロダクトまで一つの流れで作れます。

MVPでは、最初から大規模な機能を作るより、ユーザー登録、主要画面、申込フォーム、簡単な管理画面などに絞ります。Bolt.newで作ったものをそのまま本番サービスにするかどうかは別判断ですが、ユーザーに見せる試作品を早く作る手段として使えます。

Bolt.newを使う際の注意点は？

Bolt.newを使う際は、AI生成物の正確性、セキュリティ、保守性、利用料金を確認する必要があります。完成したように見える画面をそのまま公開・運用しない姿勢が大切です。

AIの生成結果をそのまま信用しない

Bolt.newで生成されたコードや画面は、人が確認してから使う前提で扱います。見た目が整っていても、仕様の抜けや動作不良が残る可能性があります。

確認すべき点は、画面表示、入力チェック、データ保存、エラー処理、認証、権限、外部サービス連携です。AIは作業を速くしますが、最終的な責任や公開判断を代わりに引き受けるわけではありません。

個人情報や機密情報の入力に注意する

Bolt.newでアプリを作る際は、顧客情報、社員情報、APIキー、パスワード、社内資料などを安易に入力しないようにします。試作段階では、架空データやダミーデータを使うほうが安全です。

AI開発ツールでは、プロンプト、生成コード、外部連携、公開URL、データベース設定が絡みます。意図せず公開されたり、コード内に秘密情報が残ったりすると、情報漏えいにつながるおそれがあります。業務利用では、入力してよい情報、保存してよい情報、公開してよい範囲を社内で決めてから使うほうが適しています。

複雑な業務システムは専門家の確認を入れる

Bolt.newは、試作や小規模アプリには便利ですが、複雑な業務システムを丸ごと任せる用途には注意が必要です。決済、会員管理、医療、金融、個人情報管理、社内基幹システムでは、専門的な設計が欠かせません。

AIが作ったアプリは、短時間で動く形になる一方、長期運用、権限管理、監査ログ、障害対応、バックアップ、法令対応まで十分に設計されているとは限りません。本番利用を考える場合は、要件定義、設計レビュー、セキュリティレビュー、運用設計を分けて確認します。

Bolt.newの使い方を理解して小さく作り始めよう

Bolt.newの使い方は、プロンプトで作りたいものを伝え、生成された画面を確認し、修正を重ね、必要に応じて公開する流れです。ブラウザだけでWebサイトやアプリ開発を進められるため、初心者でも試しやすい一方、AIの出力をそのまま本番利用するのは危険です。Bolt.newの始め方を覚えたら、まずは小さなLPやプロトタイプから作り、表示、動作、セキュリティを確認しながら活用範囲を広げるとよいでしょう。

• 監修：高萩雄空輝（ITエンジニア/IT・AIメディアライター/SEOコンサルタント）

  ITエンジニアとして、Javaによる業務アプリケーション開発やデータベースの保守・運用に従事。その後、IT分野の知見を基盤として、AI・機械学習・生成AI分野を専門的に学習し、SEOコンサルタント／Webライターとして独立。専門性を生かし、大手プログラミングスクールにて、トレンドや最新情報を反映したIT技術・AIに関する記名記事を多数執筆している。現在は、ITとAIの基礎理解を前提としたファクトチェックや表現の妥当性検証、過度な自動化を避けたAI活用設計を強みとし、生成AI活用記事の監修や品質基準の策定も行っている。