KeepやNotionが少し合わない人へ。自分用Webアプリを1個、公開してスマホで開くまで

最初に正直に書いておくと、僕は「Webアプリを作るぞ」と意気込んで始めたわけではありませんでした。

もともとは、Google Keepに何でも入れていました。日記、その日のタスク、買いたいもの、ふと思いついたこと。書く場所としては、本当に便利でした。

ただ、しばらく使っていると、少し困るようになりました。書くのは楽なのに、あとから見返そうとすると、目的のものがなかなか見つからない。日記とタスクと買い物メモが同じ場所に混ざっていて、「先月の振り返りだけ並べて見たい」みたいなことがしづらい。

KeepやNotionが悪い、という話ではありません。どちらも便利なのは分かっています。ただ、僕が実際に使っていたのはKeepで、見返すところが、自分の使い方とは少しだけズレていた。それで、「自分の見たい形で見られる、自分専用の小さな道具を作れないかな」と思うようになりました。

きっかけは、ChatGPTに一言聞いてみたことでした。「ChatGPTとCodexを使って、Webアプリ開発って僕でもできる？」。返ってきた答えを読みながら、最初の一歩は、思っていたより小さくできそうだと感じました。

最初に作ったのは、季節日記という小さなアプリ。その日のことを短く書いて、季節ごとに見返せる、それだけのものです。次に作ったのが、ゆるたすくという軽いタスク管理。どちらも、小さく作って、使ってみて、気になったところを直す、の繰り返しでした。

その季節日記の、いちばん最初の小さい版を、デモとして触れるようにしました。下のリンクから開けます。

季節日記デモ（架空のサンプルを入れた、展示用のデモです）：

今の季節日記は、使いながら少しずつ機能が増えました。でも、最初はこのくらいの小ささから始めています。本物の日記は入れていないので、中身は架空のサンプルです。

完成度の高いものを、最初から作ったわけではありません。この記事で目指すのも、まさにこの「最初の小ささ」に、自分の手で届くところです。

だからこの記事も、「一発で立派なサービスを作る話」ではありません。自分が毎日使う小さな道具を、自分の手元に作り始める話です。

この記事を最後まで進めると、どこまで行けるか

ゴールは、完成度の高いアプリではありません。最初の1個を、自分の手で公開して、スマホで開くところまで行くことです。

この記事に沿って進めると、次のところまで到達できます。

• ChatGPTとの相談を、作るものの形に整理する

• Codexに渡す依頼文を作る

• Codexに初期版を作ってもらう

• 自分のPC（ローカル）で動かす

• 入力・保存・一覧表示を確認する

• GitHubにコードを置く

• GitHub Pagesで公開して、公開URLを出す

• そのURLを、自分のスマホで開く

「完成させること」よりも、「最初の1個に、自分の手で到達する体験」を大事にしています。誰でも同じ時間でできる、とは言いません。ただ、条件が揃えば、初心者の方でも最初の1個に届く可能性はあります。

この記事が渡すのは、プロンプトだけではありません

正直に言うと、ChatGPTに送るプロンプトそのものは、ある程度使い慣れている人なら自分でも作れます。この記事の中心は、そこではありません。

僕自身、何個か作ってくる中で、初心者が止まりやすい場所と、そこからの戻り方が分かってきました。この記事で渡したいのは、そこです。

• 詰まったときの「復帰文」：エラーや見慣れない表示で止まったとき、そのままChatGPTに貼って状況を立て直すための文を、章ごとに用意しています。個別サポートはありませんが、自分で戻れるようにしています。

• GitHub Pages公開の「地雷マップ」：公開URLを開いたら真っ白、404、表示崩れ。初心者が一番つまずくのがここです。なぜ起きるのか、どこを直すのか（base設定など）を、先回りして書いています。

• ChatGPT・Codexの出力の「見るところ」：全部を理解しなくて大丈夫です。どこだけ見て、どの機能を削るか。要所で自分の目で判断する場所を示しています。

• 小さく始めるための順番：何を最初に入れて、何を後回しにするか。最初の1個で止まらないための順番を、実際に通った道として書いています。

「自分でもできそう」と「一人でも最後まで行ける」の間には、けっこう距離があります。その距離を、先に歩いた人間の記録で埋めるための記事です。

なお、中心になるのはこのnote本文です。別ファイルを探さなくても、本文を上から順に進められるようにしています。

まず、無料でここだけ試せます

買うかどうか迷っている方は、先にこれだけ試してみてください。ChatGPTに、次の文をそのまま送ります。

Webアプリ開発の初心者です。自分用のWebアプリを作りたいです。私との日々のチャットを通じて合いそうなアプリの案を教えてください。

この時点で、完璧なアプリ案を決める必要はありません。まずは、自分がどんなものを作りたいのか、ChatGPTと一緒にぼんやり整理してみる。それだけで大丈夫です。

ここまでが、無料で体験できる入口です。有料部分では、このときの相談ログを使って、実際にCodexへ依頼できる形に整え、最初の1個を作って公開するところまで進みます。

買う前に、正直に伝えておくこと

ここは、買ってから「思っていたのと違った」とならないための、いちばん大事なパートです。少し長いですが、読んでから判断してください。

この記事は、Webアプリ開発を幅広く学ぶ総合教材ではありません。最初の1個を、決まった構成で、公開まで通すことに絞っています。

• 作るテーマは自由に変えられます。 何を作るかは、あなたの生活や記録に合わせて変えてかまいません。

• 開発環境・技術構成・作業工程は固定します。 ここを自由にすると、記事どおりに進めなくなるためです。前提は、Windows PC / Google Chrome / ChatGPT / Codex / 必要に応じてVS Code / React・TypeScript・Vite / npm / GitHub・GitHub Pages / localStorage です。

• コードは主にCodexに書いてもらいます。 ReactやTypeScriptを自分で書ける必要はありません。ただ、この構成で進めるので、前提から外れると記事どおりに進まない可能性があります。

• ターミナルでコマンドを打つ場面があります。 むずかしいコマンドは使いませんが、初めての方には作業量はそれなりにあります。ここは正直にお伝えしておきます。

• 個別サポートのない買い切りです。 Discord、電話相談、フォーム対応、事前ヒアリングはありません。詰まったときは、用意した復帰文を使って自分で進める形になります。

• 保存はlocalStorageです。 データは使っている端末・ブラウザの中だけに残り、PCとスマホの間で自動的には同期されません。

最初の1個では、次のものは扱いません。ログイン、クラウド同期、複数ユーザー、決済、通知、外部API、AIのAPI連携、PWA化、本格的なスマホアプリ化。会社情報・顧客情報・本物の個人情報、医療・法律・金融などの高リスク領域も対象外です。これは「できない」ということではなく、「最初の1個では扱わない」という意味です。盛り込むと、公開までたどり着く前に止まりやすくなるからです。

合いそうな人

• KeepやNotionは便利だけど、自分の記録や作業の流れには少し合わない、と感じている人

• 自分用の小さなWebアプリを、まず1個作ってみたい人

• ChatGPTやCodexを使って、最初の1個に挑戦してみたい人

• 完成度よりも、まず動くものを作る体験を重視したい人

• 記事を見ながら自分で進める、買い切り教材として受け取れる人

• Windows PCで作業できる人

• ターミナルやGitHub、Codexが初めてでも、順番に試してみる気持ちがある人

合わない可能性がある人

• 完成済みのアプリが欲しい人、制作代行を求めている人

• 個別サポートを受けながら進めたい人

• ログインやクラウド同期を最初から入れたい人、商用サービスを作りたい人

• スマホアプリとしてアプリストアに出したい人

• 会社情報・顧客情報・本物の個人情報を扱いたい人

• ターミナルやGitHubの操作を一切したくない人

価格と返金について

この記事は、¥2,980 の買い切りです。個別サポートはありません。記事を見ながら、自分で進める形式です。

完成を保証するものではありません。誰でも同じ時間でできる、とも言いません。作業の中で、Codex・GitHub・ターミナルの操作が出てきます。

返金について：この記事は、noteの返金申請を受け付ける設定にしています。noteの仕様上、購入から24時間以内に返金申請ができます。ただし、申請にはnoteの審査があり、必ず返金されるものではありません。

条件が揃えば、初心者の方でも最初の1個に到達できる可能性があります。ここまで読んで「自分に合いそうだ」と思えた方に、続きを届けます。