Bolt.newの使い方｜プロンプトだけでWebアプリを作れるAI開発ツール入門

「Webアプリを作りたいけど、プログラミングの知識がない。でもAIなら何とかなるのでは？」
「コードが書けないと、ツールを作るのはエンジニアに頼むしかないのか」

そんな悩みを持つ方に知ってほしいのが「Bolt.new」です。日本語でやりたいことを説明するだけで、動作するWebアプリのコードを丸ごと生成してくれるツールです。インストール不要で、ブラウザだけで完結します。

この記事では、Bolt.newの基本的な使い方から、コピペで使えるプロンプトテンプレート、実際に業務で使える活用例まで解説します。

・Bolt.newとは何か、何ができるか
・ゼロからWebアプリを作るステップバイステップの手順
・業務で使えるプロンプトテンプレート3選
・実務でのBefore/Afterと具体的な効果
・うまくいかない時の対処法と限界

Bolt.newとは？プロンプトだけでWebアプリを作るAIツール

Bolt.newは、StackBlitzが開発したAIコーディングツールです。ブラウザ上でプロンプトを入力するだけで、ReactやVueなどのフレームワークを使ったWebアプリを即座に生成できます。

ChatGPTやClaudeとの大きな違いは、「コードが出てきた→自分でファイルに貼り付けて実行する」という手間がない点です。Bolt.newでは、生成したアプリがそのままブラウザ内でリアルタイムに動作します。

・コード不要: プロンプト（日本語対応）だけで完成したWebアプリが生成される
・ブラウザ完結: インストール不要、ブラウザで開いてすぐ使える
・リアルタイムプレビュー: 生成したアプリが即確認でき、修正も反映される
・ファイル管理: 生成されたコードはファイル単位で確認・編集できる
・デプロイ対応: Netlifyへのワンクリックデプロイも可能

料金プランの概要は以下の通りです（2026年5月時点）。

※ 最新の料金・プラン内容はBolt.new公式サイトでご確認ください。

Freeプランは月150,000トークンまで利用でき、小規模な試作であれば十分です。本格的な業務ツール制作にはBasicプランが現実的な選択肢です。

Bolt.newの始め方（ステップバイステップ）

1. アカウントを作成してログインする

bolt.newにアクセスし、「Sign In」をクリックします。GitHubアカウントまたはメールアドレスで登録できます。GitHubアカウントを持っている方はそちらでサインインするとスムーズです。

ログイン後、画面中央に大きなテキストボックスが表示されます。ここにプロンプトを入力するだけでアプリ制作が始まります。

2. 最初のアプリを作ってみる

テキストボックスに日本語でやりたいことを入力します。はじめての方は以下のシンプルなプロンプトを試してみてください。

シンプルなTodoリストアプリを作ってください。
・タスクを追加・削除できる
・完了チェックボックスがある
・見やすくシンプルなデザイン（Tailwind CSS使用）

Enterキーを押すと、AIが数十秒でReactベースのTodoアプリを生成し、右側のプレビュー画面に実際に動くアプリが表示されます。この瞬間は、コードを一行も書かずにアプリが動くことへの驚きを感じられると思います。

3. 修正・カスタマイズを依頼する

生成後、チャット欄に追加の指示を送ることでアプリをカスタマイズできます。

タスクに「優先度」（高・中・低）の選択肢を追加してください。
優先度ごとに色分けして表示してください（高=赤、中=黄色、低=灰色）。

この「指示→修正→確認」の繰り返しが、Bolt.newを使いこなすコツです。一度に多くの機能を詰め込もうとせず、シンプルな土台から少しずつ追加していくアプローチが安定します。

4. 完成したアプリをデプロイする（任意）

作ったアプリを外部に公開したい場合は、画面右上の「Deploy」ボタンからNetlifyへのデプロイが可能です。URLが自動で発行されるので、チームメンバーへの共有もすぐに行えます。

社内限定で使う場合は、生成されたコードをダウンロードして社内サーバーに置く方法もあります。

コピペで使える！Bolt.new向けプロンプトテンプレート3選

テンプレート1：日報・週報入力フォーム

毎日の日報を決まった形式でまとめたい方に。メールやSlackにそのままコピー貼り付けできます。

以下の機能を持つ日報入力フォームを作ってください。

【入力項目】
・日付（カレンダーから選択）
・本日の業務内容（テキストエリア）
・成果・進捗（テキストエリア）
・明日の予定（テキストエリア）
・特記事項（任意、テキストエリア）

【機能】
・「テキストをコピー」ボタンで入力内容をクリップボードにコピーできる
・コピー後に「コピーしました」と表示される

【デザイン】
・Tailwind CSSを使用したシンプルで見やすいデザイン
・日本語UI

このプロンプトで生成したフォームは、入力してボタンを押すだけでテキストがコピーされ、そのままメールやチャットに貼り付けられる状態になります。

テンプレート2：CSVアップロード集計ダッシュボード

ExcelやGoogleスプレッドシートのCSVをブラウザにドラッグ&ドロップするだけで即グラフ化できます。

CSVファイルをアップロードすると売上データを集計してグラフ表示する
ダッシュボードを作ってください。

【CSV形式】
・1列目: 日付（YYYY-MM-DD形式）
・2列目: 売上金額（数値）

【表示内容】
・月別売上の棒グラフ（Chart.js使用）
・総売上・月平均・最大日売上をカード形式で表示
・CSVのドラッグ&ドロップに対応

【デザイン】
・日本語UI
・シンプルで見やすいダッシュボードスタイル

Excelで毎回グラフを作り直している作業を、このダッシュボードに置き換えることができます。

テンプレート3：社内FAQ検索ツール

新人研修やヘルプデスク向けに。Notionや外部サービスを使わず、静的なWebページとして動作します。

よくある質問（FAQ）を検索できる社内ツールを作ってください。

【機能】
・検索ボックスに入力した文字でFAQをリアルタイム絞り込み
・カテゴリ（業務・システム・人事・総務）でフィルタリング
・Q&Aの展開/折りたたみ表示（アコーディオン）

【データ】
・Q&Aデータはアプリ内にJSON形式で直接記述する
・サンプルFAQを各カテゴリ3件ずつ作成して組み込む

【デザイン】
・日本語UI
・Tailwind CSSを使ったシンプルなデザイン

Q&Aデータの追加・編集はJSON部分を直接書き換えるだけで対応できます。

実務での活用例（Before/After）

Before：数値報告のたびにExcelを整形していた

週次の業績数値を報告する際、毎回Excelのフォーマットを整えてから数値を入力し、グラフを更新してメール添付——という作業に30分前後かかっていた。担当者が変わるたびにフォーマットがバラバラになる問題もあった。

After：入力して送信ボタンを押すだけで完了

Bolt.newで「数値を入力するとそのまま報告書形式で出力できるフォーム」を制作。Bolt.newにプロンプトを入力してから完成まで約15分で、以降は誰でも同じ手順で使えます。

「小さなツールを自分で作れるようになった」という感覚は、業務効率の改善だけでなく、AIへの解像度が上がるという副次効果もあります。

Bolt.newがうまくいかない時の対処法

対処法1：プロンプトを具体的に書き直す

「いい感じのダッシュボード」という曖昧な指示より、「棒グラフで月別売上を表示し、右上にカテゴリフィルターを置く」という具体的な指示の方が意図通りの出力が得られます。期待する画面の構成要素を箇条書きで列挙すると、精度が上がります。

対処法2：機能を分割して追加する

一度に多機能を詰め込もうとすると、AIが混乱して意図しない動作になることがあります。まずシンプルな土台を作り、「次にこの機能を追加してください」と段階的に指示するアプローチが安定します。

対処法3：「元に戻してください」で再試行する

気に入らない変更が加えられた場合、チャット欄に「さっきの変更を元に戻してください」と伝えることで差し戻せます。Bolt.newはチャットの履歴を保持しているため、何度でも方向を変えながら試行できます。

Bolt.newの限界を知っておく

Bolt.newは優れたツールですが、以下には対応が難しい点があります。

・外部API連携（OAuth認証が必要なもの）: SlackやSalesforceなど、認証が絡むサービスとの連携は難易度が上がります
・データの永続保存: 標準状態ではブラウザを閉じるとデータが消えます。Supabaseなどとの連携が必要です
・大規模アプリの開発: 複数の複雑な画面を持つシステム開発には向きません。試作・プロトタイプとして割り切って使うのが正解です

「業務の試作品を10分で作り、動いたら本格的な開発に投資するか判断する」というプロセスに使うのが、Bolt.newの最も効果的な活用法です。

本記事のまとめ

Bolt.newは「コードが書けないからアプリは作れない」という壁を大きく崩したツールです。業務の小さな課題を自分でツール化する体験を積み重ねると、AIの使い方への解像度も自然と上がっていきます。

なお、Bolt.newのようなAI開発ツールをLinux環境やクラウド上で動かす基礎については、姉妹サイトLinuxMaster.JPで詳しく解説しています。環境構築に興味が出てきた方はぜひ参考にしてください。