AIアプリ開発とは、ここではAIにコードを書かせてアプリを作ることを指し、作りたいアプリの画面やルールを文章で説明して、AIにプログラムを書いてもらいながら完成させる進め方です。自分で一行ずつコードを書く代わりに、AIが書いた結果を動かして確かめ、「ここが違う」と伝えて直してもらいます。プログラミングの経験がある人にとっては作業時間の短縮になり、経験がない人でも、小さなアプリなら自分で作れるようになります。
AIプログラミングツールの3つのタイプ
- コード補完型：エディタの中で、書きかけのコードの続きをAIが提案します。プログラマーが速く書くための道具です。
- エディタ・ターミナル型：エディタ内のチャットやターミナルから「この機能を追加して」と頼むと、複数のファイルをまとめて書き換えます。エディタのCursorや、ターミナルで動くClaude Codeなどがあり、コードを読める人向けです。
- ブラウザ完結型：ブラウザで文章を送るだけで、画面、サーバー、公開までを一通り用意します。VibeDream、Lovable、Boltなどがあり、プログラミング経験がなくても始められます。
どれが正解というわけではなく、コードを自分で管理したいか、とにかく動くものを早く見たいかで選びます。コードを読める人がエディタ・ターミナル型を使う方法は、英語の記事Claude Code for beginnersで紹介しています。
うまく作れるプロンプトの書き方
AIは書かれていないことを推測で埋めます。推測が外れると、それらしいけれど使えないアプリができあがります。最初のプロンプトには、次の4つを必ず入れましょう。
- 誰が使うか：「小学生の子どもがいる家庭」のように具体的に
- 画面の名前：「今日の宿題」「ごほうびシール」「保護者の設定」など
- 保存するデータ：何を記録して、次に開いたときにも残しておくか
- ルール：計算の仕方、できること、できないことを普通の文章で
VibeDreamでは、New Projectを押してDirect Promptを選び、次のような文章を貼り付けます。画面は現在英語ですが、プロンプトは日本語で書けます。
小学生の宿題と、ごほうびシールを管理する家庭向けのWebアプリを作ってください。
画面は「今日の宿題」「ごほうびシール」「保護者の設定」の3つです。
子どもは今日の宿題にチェックを入れると、シールが1枚もらえます。
シールが10枚たまったら、保護者が決めたごほうびを表示してください。
保護者の設定は4桁の暗証番号で守り、宿題の項目とごほうびの内容を変えられるようにしてください。
子どもでも読めるように、ひらがな多めの大きな文字で、明るい色にしてください。
エラーと思いどおりでない動きの直し方
- 例を添えて伝える：「シールが9枚のときにチェックしたら、ごほうびが出るはずなのに出ません」のように、具体的な数字で説明すると、AIが自分の答えを確かめやすくなります。
- エラー文はそのまま貼る：画面に出たエラーをコピーしてチャットに貼り、「このボタンを押したときに出ます」と添えます。
- 直し方を変える：同じ頼み方で2回失敗したら、欲しい動きを最初から説明し直します。
- 1回に1つだけ直す：まとめて頼むと、どの変更で壊れたのか分からなくなります。
そのまま使えるプロンプトの例は、英語の記事vibe coding promptsにまとめています。
AIが書いたコードとの付き合い方
AIが書くのは本物のコードです。VibeDreamでは、アプリはReactの画面とFastAPIのサーバーで作られ、ゲームはPhaserで作られます。Codeタブですべてのファイルを読めるので、学びたい人はAIが何をしたのかを確かめながら進められます。ZIPでダウンロードしたり、自分のGitHubリポジトリに同期したりして、ほかの開発環境で続きを書くこともできます。
完成したら、Put it onlineを押せば1〜3分ほどで名前.vibedreams.ai のアドレスでHTTPS付きで公開されます。1回の公開で5クレジットを使います。
AIアプリ開発で気をつけたいこと
- APIキーなどの秘密の値は、チャットやコードに書かず、プロジェクトのSettingsタブに入れます。サーバー側だけで読み込まれます。
- ログインやデータの保存はAIに頼めばアプリの中に作ってくれます。チャットの下のAdd loginやAdd databaseをタップすれば、メールとパスワードのログインやデータベースもワンタップで使えます。
- 決済が必要なら、自分のStripeアカウントをアプリにつなぎます。
- 知らない人に使ってもらう前に、入力欄に変な値を入れたり、ログインせずに管理画面を開いたりして、壊れないかを試します。
考え方の土台になるバイブコーディングについては、バイブコーディングとはで詳しく説明しています。VibeDreamの料金は月49ドルで60クレジットのAll Access Miniからで、詳しくは料金ページで確認できます。