NEXTSCAPE blog

株式会社ネクストスケープの社員による会社公式ブログです。ネスケラボでは、社員が日頃どのようなことに興味をもっているのか、仕事を通してどのような面白いことに取り組んでいるのかなど、会社や技術に関する情報をマイペースに紹介しています。

MENU

bolt.newでVibe Coding

はじめに

株式会社ネクストスケープ Chief Technology Office所属の小野塚です。

今回はbolt.newについて。

bolt.newこのbolt.new、クラウドベースの統合型Webアプリケーション開発環境になりまして、最近の表現であればAIアプリビルダー(公式ページではこの表現でした)、Vibe Codingツールといった方がよいかもしれません。

開発会社はアメリカ、サンフランシスコのStackBlitz社になります。

類似のツールとしてよく比べられるのはLovableでしょうか。Lovableもまだ本ブログでは扱っていないものですが、今回bolt.newの説明にあたってアプリを作りつつ、Lovableとの違いを調べてみたいと思います。

価格

まずは価格。
以下はbolt.new。

そしてLovable。


現時点(2026年3月20日時点)での価格設定であること、Googleの翻訳機能での内容となりますので正確な情報はそれぞれのサイトを直接確認いただくか、各サイトにお問い合わせください。
という但し書きはあるものの、Proプランよりもう1つ上のプランになるとBolt.newが20ドル安く、更に年契約になると最大28%節約(Proプランだと月額で25ドルから18ドル!)になりますので単純な比較はできないもののbolt.newの方がややお得かもしれませんね。

プロンプト入力欄

まずはいつもの私の記事と同様、ToDoアプリを作成してみます。
ちなみに無料プランで試しておりまして、選択できるモデルは以下のようにClaudeのみとなります。「Codex」の表示もあるのですがマウスを当てると「Comming soon」とのことでした。LovableはGeminiとGPTだったのでなかなか対照的ですね。
今回はSonnet4.5で進めたいと思います。

画像

あとは他のツールとのコネクタ設定。繋げられるツールの数はLovableがやや多い感がありますが、大事なのは「使いたい」ツールがあるかどうかなので皆さんそれぞれ確認してみてください。

画像

PlanモードのON、OFFができるようですので今回はONにしておきます。

アプリ作成

TOPページにまずはプロンプトの入力欄があるので以下の内容を入力します。
「ToDoリスト機能の仕様を作成してください。タスクの追加、完了チェック、削除機能を含めて、基本的なToDoアプリとして動作するようにしたいです。」
すると以下のような画面に切り替わり、左側でプロンプト、右側にアプリが表示されます(以下のスクショではまだこれからですが)。

画像
一通り作業が終わると以下のようにToDoアプリが画面右側に表示されます。実際にタスクを追加してみましたが問題無く動作しています。


さて、アプリが作成できたところで他の機能を見ていきたいと思います。
画面上部にメニューがありまして、まずは「Code」

画像
その名前通り、プロジェクトツリーと各ファイルが表示され、編集可能です。
Lovableでもコードは見れますが、有料プランでないと直接編集することはできません。


次にDatabase。
bolt.newは無料プランでもデータベースが作られ、そこに(必要に応じて)データが格納されます。そしてその内容をGUIで直接参照でき、クエリを実行することもできます。
以下はToDoアプリでタスクを1つ作成した状況です。

Lovableとの違い

他のLovableの違いですが、特徴的なのは以下の3つでしょうか。
【サポートされているフレームワーク】
・bolt.new:React、Vue、Next.js等
・Lovable:Reactのみ

【Figmaデザインのインポート】
・bolt.new:有り
・Lovable:無し

【画面デザイン編集】
・bolt.new:不可
・Lovable:可能

フレームワークはもちろんなのですが、画面デザインでもちょっと好みが分かれるかもしれません。
Figmaデザインからのインポートができるという点においてはFigmaユーザーとしてはbolt.newが良いのかもしれません。
逆にそれ以外の方法でbolt.newにおいてデザインを変更するにはプロンプトでの依頼になりますので、煩わしいと思う方もいるかもしれません。
ちょっとした文言変更であればLovableであれば直接変更可能ということもありまして、皆さんそれぞれどちらが良いかお試しいただければと思います。
と、書いていて思い出しましたが、文言変更であればbolt.newでも直接コードを編集すればよいので大丈夫ですね。やはりそうなると「デザイン」の変更になりますのでAIへの依頼で事足りそうな気がします。
それ以外に好みが分かれるのはやはりAIモデルでしょうか。Claudeが好きな方はbolt.new、Geminiが好きな方はLovableになるのかなと。
また数か月経つとこのあたりの違いがより顕著になってくるかもしれませんので楽しみなところです。

最後に

当社ネクストスケープはこのように生成AIを始めとした新しい技術・知識を日々取り入れており、Webサイト、スマホアプリ、Hololensアプリの開発をはじめ、CMSを利用したサイトの新規構築やリニューアルなど、お客様のニーズに幅広く対応いたします。お困りのことがございましたら、いつでもお気軽にお問い合わせください。

nextscape.net

(以下当社お問合せフォーム)

Microsoft Forms

当社では一緒に働いてくれる仲間を募集しています。是非以下のサイトよりお申込みください。

recruit.nextscape.net