Bolt.new とは
Bolt.new とは、StackBlitz社が提供する、ブラウザ上で動くAI全スタック開発環境です。URLを開くだけでNode.jsの実行環境が起動し、テキストで指示するだけでフロントエンド・バックエンドを含むWebアプリケーションをゼロから作れます。インストール作業も開発環境のセットアップも不要で、「アイデアを思いついた瞬間から動くものを作れる」のが最大の特徴です。
2024年に公開されて話題になり、主にプロトタイプ用途・デモ制作・初心者向けの学習ツールとして普及しています。
主な特徴
ブラウザ完結の実行環境。 Bolt.newはブラウザ内でWebContainersという技術を使い、Node.jsランタイムを実行します。ローカルPCへのインストールは不要で、タブを開くだけで即座に開発を始められます。生成したコードはブラウザ内で実際に動作確認でき、ファイル保存・依存パッケージのインストールもすべてブラウザ上で完結します。
AIによるフルスタック生成。 「ToDoアプリを作って」「ログイン機能付きのダッシュボードを作って」といった指示を入力すると、AIがHTML・CSS・JavaScript(またはReact/Vue)・APIエンドポイントを含むプロジェクト全体を生成します。バックエンドのAPI実装まで含めたフルスタック生成ができる点は、フロントエンドのUI生成に特化したv0との違いです。
コードのエクスポート機能。 生成したプロジェクトはZIPファイルとしてダウンロードでき、ローカル環境やGitHubに移して継続開発できます。プロトタイプとして使った後、本格的な実装に移行する際もコードを捨てずに活用できます。
AEO対応の課題
Bolt.newはプロトタイプ速度を最優先に設計されているため、AEO(AI Engine Optimization)に必要な要素が生成コードに含まれないケースがほとんどです。
構造化データが含まれない。 Bolt.newが生成するWebアプリには、JSON-LD形式のArticleスキーマ・FAQPageスキーマ・BreadcrumbListスキーマが自動で追加されません。AI検索エンジンに引用・参照されるためには、これらの構造化データを別途手動で実装する必要があります。
メタタグが不完全。 OGPタグ(og:title・og:description・og:image)やTwitter Cardの設定が生成コードに含まれないか、プレースホルダーのままになっていることが多いです。
著者情報・E-E-A-Tシグナルがない。 E-E-A-T(実体験・専門性・権威性・信頼性)を示すための著者ページ・著者ボックス・Person スキーマは、Bolt.newの生成コードには含まれません。
v0・CursorとBolt.newの使い分け
| ツール | 強み | AEO対応 |
|---|---|---|
| Bolt.new | フルスタック生成・ブラウザ完結 | 別途実装必要 |
| v0 | React/Next.jsのUI生成に特化 | メタデータは手動追加 |
| Cursor AI | ファイル横断編集・本番向け実装 | 自動化しやすい |
プロトタイプを素早く作る→Bolt.new、UIコンポーネントを作る→v0、本番AEO対応まで仕上げる→Cursor AIという流れで使い分けるのが一般的です。
バイブコーディングとの関係
Bolt.newはバイブコーディングの入門として最も手軽なツールの1つです。コードを書いたことがない人でも、ブラウザとテキスト入力だけで動くWebアプリを作れます。ただし「コードを読まない・理解しない」スタイルで本番サービスを構築すると、AEO対応の抜け漏れが生じやすいため、プロトタイプ以上の品質が求められる場合はコードを把握できるエンジニアの関与が必要です。
日本のWebサイトへの影響
日本のWebサイトへの影響。 Bolt.newはアイデア検証・プロトタイプ制作の速度を劇的に上げるツールです。日本国内でも「まずBolt.newでプロトを作ってステークホルダーに見せる」というワークフローが広まっています。ただし、Bolt.newで作ったサイトをそのまま本番公開するケースでは、AEO対応が後回しになる危険があります。公開前にAEOチェックリスト(構造化データ・メタタグ・E-E-A-T)を必ず確認し、GEO対応の実装を忘れずに追加してください。