AIAI実践ログ

Bolt.new

ブラウザ上でAIがコードを書いてWebアプリを即デプロイできるツール。プログラミングなしでWebサービスが作れる

軽く検証日本語なし

このツールでできること

「○○のWebアプリを作って」とテキストで指示するだけで、AIがコードを書いてブラウザ上で動作するWebアプリを即座に生成・デプロイしてくれます。HTML・CSS・JavaScriptから始まり、React・Next.jsアプリも作れます。アイデアを数分でプロトタイプに変換できます。

主な機能

  • テキスト指示からWebアプリの自動生成(React・Next.js・Vue等対応)
  • ブラウザ上でリアルタイムプレビュー
  • コードの自動修正・改善(エラーが出たらAIが自動で直す)
  • Netlifyへの1クリックデプロイ
  • GitHub連携でコードの保存・管理

基本の使い方

指示を書く:「Todoアプリを作って。タスクの追加・完了・削除ができて、ローカルストレージに保存される」と具体的に指示する

リアルタイムで確認:AIがコードを書きながら右側にプレビューが表示される。途中で「ここを変えて」と追加指示できる

デプロイして公開:「Deploy」ボタンを押すとNetlifyに自動デプロイしてURLが発行される。そのURLをそのまま共有できる

こんな場面で使える

  • 副業のポートフォリオ:自分のサービス・実績紹介ページをコーディングなしで作る
  • サービスのLPを高速作成:ランディングページの初稿を数時間で作ってフィードバックをもらう
  • ツールのプロトタイプ:「計算ツール」「スケジューラー」などの便利ツールを自分用に作る
  • Coconala・クラウドワークスの実績:依頼を受ける前に「こんなものが作れます」と実際に動くものを見せる

料金・プラン

| プラン | 内容 | 価格 |
|--------|------|------|
| 無料 | 月150クレジット(小規模アプリ数本分) | 無料 |
| Pro | 月1,000クレジット・プライベートプロジェクト | 月20ドル |

クレジットはAIのトークン使用量に基づく消費。シンプルなアプリなら無料の範囲でも十分試せる。

使いこなすコツ

  • 最初から複雑なアプリを作ろうとしない。まず「ボタンを押したらアラートが出るページ」など小さいものから始めて、機能を追加していく
  • 英語で指示した方がAIの精度が高い。日本語でも動くが、英語プロンプトの方がより正確なコードが出る傾向がある
  • エラーが出たときは「このエラーを直して」と貼り付けるだけでAIが自動修正してくれる。デバッグの知識が不要

活用例はこれから拡充予定です

ログインすると、使ってみた感想・コツ・注意点を追記できます

ログインすると追記できます。アカウント作成はこちら

コメント0

ログインするとコメントできます。アカウント作成はこちら

まだコメントはありません。最初のコメントを書いてみましょう。