「AIにアプリを作ってもらいたい。でも、作ったファイルをどこへ置けばいいか分からない」という人向けに、作成から公開までを一本の流れで説明します。ここでは、AIを相談相手、GitHubをファイルの保管場所、ロリポップ！デプロイナウをWeb公開の担当として使います。公式案内では、AIエージェントからのコマンド公開、GitHub連携、ブラウザへのフォルダのドラッグ＆ドロップに対応しています。
まず3つの役割を理解する
- AI：画面や処理の案を出し、ファイルを作る手伝いをする
- GitHub：アプリのファイルと変更履歴を保存する
- ロリポップ！デプロイナウ：GitHubやアプリのフォルダを、インターネット上で見られる状態にする
AIだけでは、他の人が見られるURLは自動で用意されません。GitHubに保存し、デプロイナウへつなぐことで、「作ったものを残す」と「公開する」を分けられます。
今回は練習ルールとして「1日1デプロイプロジェクト」にします。1日に複数のアプリを作り始めると、どれが最新版か、どのURLを人に見せるかが分かりにくくなるためです。サービスの料金・上限とは別の、初心者が迷わないための作業ルールです。
1. AIに小さなアプリを依頼する
最初から大きなサービスを頼まず、1画面のアプリにします。例えば次のように依頼します。
初心者向けに、ブラウザで動く買い物メモを作ってください。
入力欄、追加ボタン、一覧表示、削除ボタンを用意してください。
まずはHTML、CSS、JavaScriptだけで作り、必要なファイル名と役割も説明してください。
外部サービスやログイン機能は使わず、完成条件を3つ書いてください。
返ってきた内容は、そのまま信じず、次を確認します。
- どのファイルを作るのか
- ブラウザで開く入口が
index.htmlなのか - 入力、追加、削除が実際に動くのか
- パスワードやAPIキーを本文に書いていないか
「動くものを作る」だけでなく、「何が完成したら終わりか」を先に決めるのがポイントです。
2. GitHubに保存する
GitHubで新しいリポジトリを作り、AIが作ったファイルをアップロードします。リポジトリ名は shopping-memo のように、内容が分かる短い名前にします。公開設定は、個人情報や秘密情報がないサンプルならPublicでも構いませんが、迷う場合はPrivateにします。
最低限、次の構成にします。
shopping-memo/
├── index.html
├── style.css
└── script.js
GitHubの画面でファイルを追加したら、保存メッセージには変更内容を書きます。例えば 買い物メモの最初の画面を追加 です。この保存操作がコミットです。難しく考えず、「その時点の変更に名前を付けて保存する」と理解すれば十分です。
3. ロリポップ！デプロイナウとGitHubをつなぐ
ロリポップ！デプロイナウでGitHub連携を選び、対象リポジトリを指定します。初回は、GitHubへの接続許可、プロジェクト名、公開対象のブランチ、ビルド設定を確認します。プロジェクト名は公開URLの一部になるため、個人情報を入れず、内容が分かる短い名前にします。公式案内のURL形式は https://プロジェクト名.lolipop-now.app です。
設定で迷ったら、まずは次の考え方にします。
- 静的なHTML/CSS/JavaScriptなら、HTMLファイルの場所を最初に確認する
- Next.jsやNuxtなどを使う場合は、AIに「ビルドコマンドと出力先」を説明させる
- 本番公開前に、ローカル画面でボタンや入力を確認する
- GitHub連携を使わない場合は、公開画面へアプリのフォルダをドラッグ＆ドロップする方法もある
GitHub連携では、pushをきっかけに自動デプロイできます。設定後にGitHubのActions画面やデプロイナウの履歴を開き、処理が成功したかを確認します。1日1プロジェクトのルールでは、まず1つのリポジトリ・1つの公開URLに集中し、修正は同じプロジェクトへ反映します。
4. 公開URLを確認する
デプロイナウのデプロイが成功しても、確認を省略しません。発行された公開URLを開き、次を順番に試します。
- 画面が表示される
- 入力欄へ文字を入れられる
- 追加ボタンで一覧に表示される
- 削除ボタンで対象だけ消える
- スマートフォン幅でも読める
失敗したら、まずブラウザの表示、次にデプロイナウのビルド結果、最後にGitHubのファイル名とパスを見ます。画面が真っ白なら入口ファイルの場所、ボタンが動かなければJavaScriptの読み込み先を確認します。
5. 修正して再公開する
AIに「ボタンを青くして、入力欄を大きくして」と頼み、変更されたファイルだけを確認します。GitHubへ保存すると、連携設定により再デプロイが始まります。変更前の状態へ戻せるよう、コミットメッセージは 入力欄の見た目を改善 のように具体的にします。1日1プロジェクトなら、修正のたびに新しい公開先を作らず、同じURLで更新します。
まとめ
初心者が覚える順番は、AIで作る、GitHubに保存する、ロリポップ！デプロイナウで公開する、URLで動作確認する、の4段階です。AIに全部任せるのではなく、完成条件と公開前の確認項目を自分で持つと安心です。最初は1日1デプロイプロジェクト、1画面の小さなアプリから始め、成功したら同じプロジェクトへ機能を一つずつ増やしてください。