AIでアプリを作る全体の流れ（5ステップ）

公開：2026年10月11日 ／ 書いた人：ゆう

プログラミングの経験がない人が、ChatGPT や Claude に頼んで小さなアプリを作り、インターネットに公開するまでの流れです。最初の1本は「小さく作って、とにかく公開する」がいちばんの近道です。

ステップ1：作るものを小さく決める

最初のアプリは、次の3つを満たすものがおすすめです。

たとえば、習慣チェック表、暗記カード、家計のミニ帳、ToDo リスト、簡単な診断やクイズなどです。どれにするか迷ったら、最初のアプリ診断で自分に合うものを探せます。

ステップ2：AIに「計画だけ」を出してもらう

いきなり「作って」と頼むと、AI は大きくて複雑なものを作りがちです。まずは作り方の計画だけを出してもらい、内容を確認してから「OK」を出します。

【〇〇】を作りたいです。まだコードは書かないでください。

条件：
・1つの HTML ファイルだけで動く
・機能は3つだけ：【①】【②】【③】
・スマホで使いやすいデザイン
・私はプログラミング初心者です

まず作り方の計画だけを出してください。
私が「OK」と言ったら、コードを書いてください。

指示文の考え方はAIへの指示文の書き方でくわしく説明しています。

ステップ3：コードを書いてもらい、パソコンで動かす

  1. 計画に問題がなければ「OKです。コードを省略せずに全部出してください」と送る
  2. パソコンのメモ帳（Mac は「テキストエディット」を標準テキストにして）を開き、コードを全部貼りつける
  3. index.html という名前で保存する（文字コードを選べるときは UTF-8）
  4. 保存したファイルをダブルクリックすると、ブラウザでアプリが開く

ステップ4：動かないところを直す

最初から完ぺきに動くことは多くありません。「動きません、直して」だけでは直りにくいので、何をしたか・どうなったか・どうしてほしいか・エラーの全文を送ります。くわしくはAIのコードが動かないときの聞き方へ。

ステップ5：無料で公開する

1つの HTML ファイルで作っていれば、ファイルを置くだけで公開できるサービスがあります。サービスごとの違いは無料で公開する方法の比較にまとめました。

どれくらい時間がかかる？

運営者が最初の診断アプリを作ったときの目安です（AI とのやりとりを含みます）。

作業時間（だいたい）
何を作るか決める（作り直しを含む）10分
第1版を作る20分
スマホで動作確認10分
結果がかたよっていないかの確認5分
公開15分

作るものや慣れによって大きく変わります。最初はこの数倍かかっても普通です。

よくある失敗

運営者の有料記事

診断アプリを例に、ここで紹介した流れを指示文10個つきでくわしくまとめています。

AIで診断アプリを作って公開する全手順（note・980円）