このツールでできること
「○○の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が自動修正してくれる。デバッグの知識が不要
活用例はこれから拡充予定です
ログインすると、使ってみた感想・コツ・注意点を追記できます
ログインすると追記できます。アカウント作成はこちら