こんにちは！アプリ構築AI生成ツールとして人気のCreate.xyz（以下「Create」）とBolt.new（以下「Bolt」）は、どちらも幅広い機能を備えていますが、それぞれ得意分野が異なります。
本記事では、CreateとBoltの特徴や機能を比較し、実際に使用した感想を詳しくご紹介します。 最後には、各ツールで作成したデモサイトも掲載していますので、ぜひ最後までお楽しみください！
1. 概要
ここでは、Create と Bolt の2つのAIツールの概要をそれぞれ紹介し、特徴や機能を簡単にまとめます。
1.1. Create
ユーザーがインターフェースや機能に関するテキストを入力することで、自動的にアプリを構築できるプラットフォームです。コーディング不要で、指示を追加したり生成された結果を修正することで、理想のアプリを簡単に作成できます。さらに、テキストに画像を添付して具体的な指示を出すことも可能です。完成したアプリはワンクリックで公開できます。
2024年9月に行われたアップデートでチャットモードが追加され、ユーザーは対話を通じてアプリを生成できるようになりました。
チャット生成では、AIとの対話形式で作業を進めるため、リアルタイムのフィードバックを受けながら試行錯誤できます。これにより、修正や方向転換が容易です。一方、プロンプト生成は、事前に用意した指示を基にアプリを構築するため、安定した結果が得られる一方で、変更を加える際にプロンプトの再修正が必要である点が課題です。しかし、最近のアップデートでチャット生成が可能になり、より柔軟に対応できるようになったため、さらに使いやすいツールとなりました。
1.2. Bolt
ブラウザ上でアプリの開発、デバッグ、デプロイまでのすべての作業を完結できるプラットフォームです。ユーザーが自然言語でアプリの要件を入力することで、フロントエンドからバックエンドまでのコードを自動生成します。AIがコード生成を補助し、プロンプトエンハンス機能によってプロンプトを具体化できるため、複雑なアプリ構築を効率的に行えます。シンプルな入力でAIがデザインを自動生成し、短時間で高品質なインターフェースを完成させることができます。生成されたコードは直接修正可能で、Netlifyにワンクリックでデプロイ可能です。このシステムはブラウザ上で完結し、使いやすさが特徴です。
1.3. 比較表
ここでは、CreateとBoltの特徴を簡単に比較した表を紹介します。
| 比較項目 | Create | Bolt |
|---|---|---|
| 開発スタイル | フロントエンド中心 | フルスタック開発 |
| 開発環境 | 主にReactを使用。ビジュアルエディタを中心とした開発環境。 | StackBlitzのWebContainers技術を利用ブラウザ内で直接Node.js環境を実行。npmやVite、Next.jsなどのツールを使用できる。 |
| デプロイ機能 | 「Publish」ボタンで簡単に公開可能。有料プランではカスタムドメインにも接続可能。 | 「Deploy」ボタンでNetlifyに接続し、公開用URLを生成。 |
| 外部APIとの連携 | API実行の機能をFunctionで作成し、作成したFunctionをPageに実装する。Function機能では安全にシークレットキーを保存可能。 | シークレットキーを利用する場合は必ず.envファイルにキーを保存するというプロンプトを送信する必要がある。外部APIをサーバーサイドで実行する場合は、Netlifyにデプロイ後、環境変数の設定が必要。 |
| コード編集 | 全てのファイルを直接修正可能 | 全てのファイルを直接修正可能。 |
| 履歴管理 | プロジェクトの履歴追跡が可能 | 履歴管理なし。 |
| エラー検出と修正 | 自動検出・修正機能なし。 | AIによるエラーの自動検出・修正。 |
| チャット回数制限 | 無料プランでは、チャットのメッセージ回数制限あり。 | 無料プランではトークン制限あり。 |
2. 実際の使用比較
次に、CreateとBoltでアプリを作成した際に感じた違いや使用感をご紹介します。
2.1. デザイン面
他の項目では実際に作成したデモ画面を使用して比較していますが、この項目では公平な比較を行うため、同じ指示文で再度デモ画面を作成し、それに基づいて比較しました。
「海外の宿泊施設予約サイトを作成してください」とだけ指示を与え、CreateとBoltで生成されたデザインや挙動を比較しました。
2.1.1. Create
Createではチャットに指示文を入力すると、下記の画面が生成されました。
作成した画面では、カレンダー表示と人数のドロップダウンが機能していました。
予約ボタンを押すと、下記のメッセージが表示されますが、その他のボタンを押しても何も実行されませんでした。この画面をベースに、必要な処理やページを追加していきます。
未入力のチェックも実装されています。
今回は簡単な指示文で画面を作成しましたが、参考にしたいサイトのスクリーンショットを画像として入力することで、そのデザインを基に画面を自動生成することができます。
2.1.2. Bolt
Boltではプロンプトに指示文を入力すると、下記の画面が生成されました。
Createと比較してデザイン性の高いサイトが生成されました。特に写真などは、イメージに合ったものが自動で表示され、デザイン性の高さが際立っていました。しかし、画像の変更をCreateと同様にプロンプト上で試みましたが、反映がうまくいかず、その際はコードを直接編集する必要があるようです。
Boltでは、日付が未設定の状態でボタンを押してもCreateと同様に動作しませんでした。この後必要な処理を実装していきます。 また、一部の画像には、ホバー時に写真が拡大するアニメーションが設定されており、視覚的なインタラクションが強調されています。
2.2. デプロイ方法
どちらのツールでも簡単にワンクリックでデプロイ可能です。次にそれぞれのデプロイ方法について紹介します。
2.2.1. Create
「Publish」をクリックすることにより、作成したサイトが公開され、ユーザーがアクセス可能になります。
公開URLとしてアプリ名などを入力して、ボタンを押します。
「View live」をクリックすると、公開した画面を見ることができます。
ポップアップ内で、各ページをオンまたはオフにすることができます。 プロジェクトに変更を加えた場合は、「Up to date」ボタンを押して更新する必要があります。
Createでは、アプリをPublicモードで発行すると、Publishしていなくてもコミュニティ内で他のユーザーと共有されます。また、そのアプリやサイトの作成に使用したプロンプトも他のユーザーが確認できるため、プロンプトに個人情報や機密情報が含まれている場合、それが外部に知られるリスクがあります。この点に注意することが必要です。（Privateモードで発行するには、Pro版へのアップグレードが必要です）
2.2.2. Bolt
画面右上の「Deploy」をクリックすると、デプロイ作業が開始されます。
作成された公開URLをクリックすると生成したアプリが表示されます。
2.3 履歴管理と制限事項
ここでは、各ツールの変更履歴管理機能と、無料プランでの制限事項について紹介します。
2.3.1 Create
Createでは、プロジェクトの変更履歴を簡単に追跡でき、過去の生成結果にスムーズに戻ることが可能です。履歴から目的のバージョンを選択し、「Restore Version」をクリックするだけで、過去の状態に即座に復元できます。この機能は、試行錯誤を重ねながらデザインや機能を改善する際に非常に役立ちます。
一方、無料プランではチャットメッセージの使用回数が1日最大50回までと制限されています。この上限に達するとチャット機能が利用できなくなるため、作業量を計画的に管理する必要があります。残り5回になると、以下のような警告メッセージが表示されます。
2.3.2. Bolt
Boltでは、生成したコードの履歴を管理する機能がありません。また、一度作業を中断すると再開時に以前のプロンプトが失われることがあります。このため、プロンプト内容を別途記録しながら作業を進めました。これにより、作業の継続性がやや制約される印象を受けました。
無料プランではトークン制限が設けられています。1日150,000トークン、月1,000,000トークンまで利用可能ですが、デプロイ時にもトークンが消費されるため、制限を超えると新しいコンテンツの生成やデプロイができなくなります。使用前にトークン残量を確認することが重要です。トークンの残量は「Settings」メニュー内の「Tokens」で確認可能です。
2.4. データベース連携
ここでは、デモサイトで使用したそれぞれのデータベースとの連携方法について紹介します。
2.4.1. Create
今回のデモサイトでは、Create と Xanoを連携しました。 APIキーなどの機密情報はFunctionのSecrets に保存します。
Xano側の設定
- Xanoの「Instances」ページで、連携したいインスタンス設定（⚙️アイコン）を選択します。
- 「Manage Instance」を開き、「Metadata API」からAPIキーを発行します。このAPIキーを安全な場所に保存してください。
Create側の設定
create側では、functionのSecretsにAPIキーを設定します。
詳しい内容については、こちらで紹介していますので参考にしてください。 blog.nocodelab.jp
また、Createでは、データベース構造を示した画像をプロンプトとして入力すると、テーブル定義を自動的に認識・設定できる点が便利だと感じました。
さらに、Create内で独自のデータベースを作成することも可能です（ベータ版機能）。
以下の手順で簡単に設定できます： 「Add-ons」>「Data」>「Create a database」をクリック。
詳しい内容については、こちらで紹介していますので参考にしてください。 blog.nocodelab.jp
2.4.2. Bolt
一方で、Boltでは独自のデータベース作成機能は提供されておらず、外部データベースとの連携が必要です。今回のデモサイトでは、BoltとSupabaseを連携しました。APIキーやURLの管理は、環境変数（.envファイル）で行います。
Supabase側の設定
Supabaseダッシュボードの「Project Settings」>「API」で、URLとAPIキーを確認します。
Bolt側の設定
サーバーサイドでSupabaseに接続するプロンプトを入力します。
プロンプト例....SupabaseのURLとAPIキーは環境変数（.envファイル）を使用して管理します。クライアントサイドではこれらの情報を露出させず、サーバーサイド経由でアクセスする仕組みを構築してください。
上記プロンプトにより、Boltが.envファイルを生成し、環境変数を活用した安全な連携が可能になります。
3. 作成したデモサイトの紹介
3.1. サイトの概要
CreateとBoltを使用して、電動バイクレンタルのサイトを作成しました。
すでに説明したように、CreateはXanoと、BoltはSupabaseと連携しています。 サイトには、ログイン／サインアップ、予約、予約確認、キャンセル、変更機能を備えています。
3.2. Create × Xano を使用したサイト
- 参考レイアウトのサイト画像をプロンプトに追加し、写真や配置などの具体的な指定が可能で、イメージ通りにアプリを構築できました。
- Page(ページ)、component(コンポーネント)、function(ファンクション）などの設定もわかりやすく、初心者でも簡単に作成を進められました。
- テーブル定義も画像をプロンプトに読み込ませることで、自動的に正確に構築されました。
- エラーが発生した際は、チャットで質問すると解決方法や修正のサポートが提供されました。
3.3. Bolt × Supabase を使用したサイト
jade-belekoy-c05a44.netlify.app
- 必要なページ構成や機能についてはプロンプトで指定し、レイアウトの細かい指示は特に行いませんでした。写真もBoltで自動設定されたものをそのまま使用しています。
- エラーは自動検出・修正機能で対応できることが多かったですが、検出されないエラーもあったため、その場合は、プロンプトで質問するか、コードを直接修正しました。
- プロンプトでエラー無料プランにはトークン制限があり、作成中に無料枠の上限に達したため、今回は有料プランに切り替えて作成しました。
4. まとめ
CreateとBoltは、日々進化を遂げているウェブアプリ、サイト作成プラットフォームです。それぞれが独自の強みを活かしながら、直感的な操作性やデザイン性、柔軟な開発環境を提供し、ユーザーの期待に応え続けています。 Createは使いやすさとデザイン変更の自由度で優れ、柔軟なカスタマイズを可能にしています。一方、Boltは自動生成される高品質なデザインが魅力で、見栄えの良いサイトを効率よく作成できました。 どちらもコードの直接編集が可能で、個々のプロジェクトのニーズに合わせた開発ができる柔軟性があるため、初心者から経験者まで幅広いユーザーにとって理想的なプラットフォームとなっています。 今後の新機能追加や改善により、これらのプラットフォームはさらにウェブアプリ、サイト制作の可能性を広げていくことと思います。
5. 関連記事
以下は関連記事です。ぜひ合わせてご参考ください！
