ChatGPTとCodexを使ってWebアプリを作成・公開した体験記事のイメージ画像

AI・便利ツール

ChatGPTとCodexでアプリを作ってみた!プログラミング未経験でもWebアプリを公開できた話

本ページは広告が含まれています。

先日、ChatGPTとCodex Cloudを使ってWebアプリの開発を始めました。

 

プログラミングの知識はほとんどない僕ですが、今回は実際にフリマの売上や利益を管理するWebアプリ「ウリミル(URIMIRU)」を作り、一般公開するところまで進められました。

 

率直に言うと、開発中はわからないことばかり。ほとんどAIに任せっきりでした。それでも、とりあえず使える形のものができたのは驚きです。

 

今回は実際に作ったアプリの内容と、プログラミング未経験の僕がChatGPTとCodexに任せてみた感想を紹介します。

 

かつきちです。Twitterもやってます。  【レビューなどの依頼はこちら】

結論|プログラミング未経験でも、使えるWebアプリができた

いきなり結論ですが、想像していたよりもずっと簡単でした。

 

もちろん、僕が簡単だと感じたのは、自分でコードを書く部分をAIに任せられたからです。GitHubやCodex、Cloudflareなど初めて触るサービスも多く、「今、何をしているの?」と聞きながら進める場面は何度もありました。

 

それでも、最初に「どんなソフトを作りたいのか」というコンセプトを自分で考えて、必要な機能をChatGPTに伝えていくと、形になるところまで進められました。

 

今回は最初の1本なので、これですべて完成というわけではありません。今後の改善や実際の利用を通じた確認は必要ですが、少なくとも「自分のアイデアを動くWebアプリにできる」という手応えは十分に感じています。

 

今回作ったのは、フリマ利益管理アプリ「ウリミル」

ウリミルの主な機能を紹介するイメージ図。商品登録、売却管理、利益計算、期間別集計、CSV出力・バックアップ
ウリミルの主な機能をイメージ化した図解。実際の画面・数値ではありません。

今回作ったウリミルは、メルカリやYahoo!フリマ、ラクマなどで売った商品の売上や利益をまとめて管理できるWebアプリです。

 

フリマアプリで商品を売っていると、売上は確認できても、仕入れ代や送料、手数料を差し引くと実際いくら残ったのかわからなくなることがあります。

 

そういう数字をもっと手軽に把握できるものが欲しくて、今回のアプリを考えました。

 

実際に動作するウリミルのトップ画面。利益レポートと商品一覧を確認できる
ウリミルの実際の画面。撮影時点では商品未登録のため集計は0円です。

ウリミルでできること

  • 商品を登録:出品前に商品名や仕入れ金額などを記録できる
  • 売却を管理:「出品中」から「売却済み」に変更して、売れた日や金額を記録できる
  • 利益を集計:売上から仕入れ代、送料、販売手数料などを差し引いた利益を確認できる
  • 期間別に確認:今週・今月・今年などの売上や利益をまとめて見られる
  • 販売先別に確認:メルカリ、Yahoo!フリマ、ラクマなどの販売先ごとに集計できる
  • バックアップ:JSON形式で保存・復元したり、CSVでデータを出力できる

 

データは基本的に使っているブラウザの中に保存する仕組みなので、アカウント登録なしで使える形にしています。

 

ただし、端末間で自動同期されるわけではなく、ブラウザのデータを削除すると記録が消える可能性があります。継続して使う場合はバックアップを取っておく必要があります。

 

実際のアプリはこちらから確認できます。

 

ウリミルを無料で使ってみる

※無料・アカウント登録不要。データは利用中のブラウザに保存されるため、定期的にバックアップしてください。

 

アプリはどうやって作った?ChatGPT・Codex・GitHubの役割

アイデアを考える、ChatGPTと相談する、Codexで実装とテスト、公開して使うというAIアプリ開発の4ステップ
ChatGPTとCodexによるアプリ開発の流れ(イメージ図)

今回、僕が主に使ったのはChatGPT、Codex Cloud、GitHubの3つです。最後にWebアプリを公開するため、Cloudflare Pagesも利用しました。

 

最初はそれぞれの違いすらよくわかっていませんでしたが、使ってみると役割は意外とシンプルでした。

 

サービス今回の役割
ChatGPT作りたい機能や画面のイメージを相談し、仕様を整理
Codex Cloudプログラムの実装、テスト、修正作業を進める
GitHubコードや変更履歴を保存し、変更内容を反映
Cloudflare Pages完成したWebアプリをインターネット上に公開

 

大まかな流れは、コンセプトを考える → ChatGPTと仕様を整理する → Codexに作ってもらう → 結果を確認する → 公開するという感じです。

 

CodexからはPull Request(変更を取り込むための提案)が作られ、内容をGitHubに反映しました。僕自身、仕組みを完全に理解できているわけではありませんが、まずは一連の流れを体験できたことが大きかったです。

 

実際にやってみた感想|任せっきりでも形になった

Codex Cloudでの実際のウリミル開発作業記録。テストと画面修正の報告内容
Codex Cloudの作業結果。アカウント名やプロジェクト名の写る領域を除外しています。

わからないことは多かったけど、とにかく簡単だった

今回の開発を振り返ると、正直、ほとんど任せっきりでした。

 

初めて聞く専門用語も多く、何をしているのかわからないことばかり。それでも、ChatGPTに「これは何?」「次は何をしたらいい?」と聞けば、少しずつ先に進めました。

 

コードを自分で書いていないので、仕組みを理解したうえで開発したとは言えません。それでも、自分が考えた機能を備えたWebアプリが実際に動いたのは、かなり面白い体験でした。

 

一番大切なのは、ソフトのコンセプトを考えることかもしれない

今回やってみて強く感じたのが、「こんなソフトが欲しい」というアイデアを考えられることの大切さです。

 

何を記録したいのか、どんな画面が見やすいのか、どんな操作ができたら便利なのか。そこを自分で考えて伝えられれば、実際のプログラムはAIにかなり任せられると感じました。

 

もちろん、複雑なシステムや個人情報を扱うサービスは話が別で、設計や安全性、動作確認も重要です。ただ、今回のような小規模な管理ツールなら、プログラミング経験がなくても挑戦する価値は十分にあると思います。

 

2回目はもう少しうまく作れそう

もうひとつ感じたのが、1回作ってみると、次に何をすればいいのかが見えてくるということです。

 

最初はGitHubもCodexもCloudflareもよくわかっていなかったので、毎回「これは何?」という状態でした。

 

でも、コンセプトを考えて、必要な機能を決めて、AIに実装をお願いして、確認して公開する。この大まかな流れは一度経験できました。

 

次は最初から画面イメージや必要な機能、完成の判断基準をもう少し整理してからお願いすれば、今回よりスムーズに進められそうです。

 

AIに任せる開発で気になったこと・注意点

簡単だった一方で、AIに任せたからといって、すべてを理解できるわけではないという点は感じました。

 

特に、完成したように見えても、不具合がないか、計算結果が合っているか、スマホで操作しやすいかなどは実際に確認する必要があります。今回は基本機能の実装と自動テストを進めましたが、日常的に使いながら確認したい部分はまだあります。

 

  • 仕様をはっきりさせる:「いい感じに作って」だけでは、必要な機能が抜ける可能性がある
  • 結果を自分でも確かめる:利益計算やデータ保存など、大切な部分は実際に操作して確認する
  • データの扱いを確認する:今回はブラウザ内保存なので、バックアップや端末変更時に注意する
  • 公開や課金の判断は自分でする:外部サービスへの公開や有料機能の利用を勝手に進めない

 

特に仕事で使うシステムや、利用者の個人情報を扱うアプリとなると、今回とは別のレベルでセキュリティや運用を考える必要があります。

 

まずは個人で使える小さなツールから作ってみるのが、初心者には取り組みやすいと感じました。

 

開発や公開にかかった費用は?

今回は、もともと利用していたChatGPTのプランでCodexを使い、GitHubとCloudflare Pagesを組み合わせて開発・公開しました。

 

Cloudflare Pagesは無料プランで公開しています。今回のアプリでは新たに有料サーバーを契約する必要はありませんでした。

 

ただし、ChatGPTの利用料金が不要になるわけではありません。また、Codexにはプランに応じた利用上限があり、Cloudflareの無料枠にも制限があります。サービスの料金体系は今後変わる可能性があります。

 

今回は小規模なWebアプリだったので追加のサーバー費用をかけずに済みましたが、使う機能や規模によって必要な費用は変わると思います。

 

まとめ|アイデアがあれば、まずはAIで作ってみる価値がある

今回は、プログラミング未経験の僕がChatGPTとCodex Cloudを使って、フリマ利益管理アプリ「ウリミル」を作った体験を紹介しました。

 

開発中はわからないことばかりで、実際のプログラムはほとんどAI任せでした。それでも、自分で考えたコンセプトから、使えるWebアプリを公開するところまで進められたのは大きな収穫です。

 

そして何より、1回やってみたことで開発の流れがつかめました。2回目は今回よりもう少し上手に作れそうな気がしています。

 

「こんな管理ツールがあったら便利なのに」と思ったことがある人は、まずChatGPTに相談して、小さなものから作ってみると面白いと思います。

今回作ったウリミルは、以下のボタンから無料で試せます。

ウリミルを無料で使ってみる

 

最初の設定や、Codex Cloudで開発を始めるまでの手順は、こちらの記事で詳しく紹介しています。

紺色のシンプルなデザインで、ChatGPTとCodex Cloudを使ったAIアプリ開発を紹介するアイキャッチ画像
前編Codex Cloudの使い方|プログラミング未経験がChatGPTとアプリ開発を始めた手順

続きを見る

 

※掲載した内容は2026年11月8日時点の開発体験です。実装機能や公開環境は今後変更する可能性があります。

ガジェット

2026/11/8

ポーリングレートとは?1000Hz/8000Hzの違いと最適設定|マウス・キーボード・コントローラー

【実機レビュー】VITURE Pro 2はどう?映像・装着感・Proとの違いを徹底検証

ガジェット

2026/10/29

【実機レビュー】VITURE Pro 2はどう?映像・装着感・Proとの違いを徹底検証

【実機レビュー】Notta Memo Proを使って検証!文字起こし・AI要約の精度や前モデルとの違い

ガジェット

2026/11/3

【実機レビュー】Notta Memo Proを使って検証!文字起こし・AI要約の精度や前モデルとの違い

RingConn Gen 3レビュー|サブスク不要で睡眠管理もできるスマートリング

ガジェット

2026/6/17

RingConn Gen 3レビュー|サブスク不要で睡眠管理もできるスマートリング

Notta Memo Type-Cレビュー|AI文字起こし・要約・話者識別が便利な薄型ボイスレコーダー

ガジェット

2026/7/7

Notta Memo Type-Cレビュー|AI文字起こし・要約・話者識別が便利な薄型ボイスレコーダー


【実機レビュー】Notta Memo Proを使って検証!文字起こし・AI要約の精度や前モデルとの違い
参考【実機レビュー】Notta Memo Proを使って検証!文字起こし・AI要約の精度や前モデルとの違い

続きを見る


Notta Memo Type-Cレビュー|AI文字起こし・要約・話者識別が便利な薄型ボイスレコーダー
参考Notta Memo Type-Cレビュー|AI文字起こし・要約・話者識別が便利な薄型ボイスレコーダー

続きを見る

-AI・便利ツール