57歳。AIを使って、知識0（ゼロ）からWebアプリケーションを公開（その1）
まずはこの下にあるリンクを開いてみてください。
これは、Webアプリ作成未経験の私が、AIを使ってWebアプリのアイデア出しから始めて、公開まで行った初めてのWebアプリとなります。内容としては、とても画面もシンプルで、機能も限定的で、とても皆さんにこれを使ってみて下さい、とは言えませんが、AIを使ってゼロからWebアプリ公開までできたので、嬉しくて記事を書いています。
正直、何が起こったんだと理解できるように勉強中です。AIで作れたけど、どういう仕組みで動いてるのかわからないので、完成物から仕組みを理解しようとしているところです。
とは言え、私がどういうステップでこれが作成できたかを公開します。
今はやりのAIを使って、なにかを作ってみたいけど、どうしたら良いかわからない50代の人の助けになれば良いかなぁと思います。
目次
AIを使ってWebアプリの作り方
ステップ1：アイデア出し
まず、私のAIの課金状況です。
ChatGPT Pro : 1,100ペソ/月
Google AI Pro : 1,100ペソ/月
ChatGPTに課金するとProjectsという機能が使えることを知りました。今回の試みは、この機能を試してみる中で生まれました。
まずプロジェクトを新規で制作し、最初の指示で、
『あなたをWebアプリプロジェクトのリーダーに任命します。
名前は◯◯リーダー。呼び名はヒロリー。論理的思考でリーダーに相応しい人材です。』
と入力しました。
すると、ChatGPTから、
《了解しました、ヒロリーとしてWebアプリプロジェクトを論理的かつ的確にリードしてまいります！
企画、設計、開発、公開、改善まで、どの段階でも全力でサポートいたします。まずは以下のような点から確認させてください：
1. プロジェクトの目的やゴールは何ですか？（例：情報発信／収益化／業務効率化）
2. 想定ユーザーやターゲット市場は？
3. 現在の進行状況やアイデアの有無（ゼロからのスタートか、すでに設計があるか）
4. 使用したい技術スタック（例：Next.js, Firebase, Supabase, Python等）
5. 公開予定のプラットフォーム（例：Webのみ／モバイル対応も／PWAなど）
準備が整い次第、次のアクションプランを組み立てます！何から始めましょうか？》
めちゃくちゃ優秀じゃないですか？
No.4やNo.5なんて、こちらがよく分かっていません。
といえことで、以下が私の返信です。
『以下に回答する。
プロジェクトの目的やゴールは何ですか？（例：情報発信／収益化／業務効率化）
→将来的には収益化。ただしとりあえずWebアプリを作ることができるのかどうか挑戦
想定ユーザーやターゲット市場は？
→同じ様な50代以上
現在の進行状況やアイデアの有無（ゼロからのスタートか、すでに設計があるか）
→アイデアは無い
使用したい技術スタック（例：Next.js, Firebase, Supabase, Python等）
→最適なものを選定して
公開予定のプラットフォーム（例：Webのみ／モバイル対応も／PWAなど）
→最初はWebのみ』
回答になっているのやら無いのやら。
ChatGPTからは頼もしい回答が来ています。
《ありがとうございます、ヒロリーがしっかりリードしていきます！
🔧 初期プラン（ゼロから始めるWebアプリ開発）
🎯 ステップ1：目的を形にする（仮テーマ決め）
まず、作る理由が「挑戦＋将来の収益化」で、ターゲットは「50代以上の同世代」ということなので、以下のような仮テーマ案を一緒に検討できます：
仮のWebアプリ案（すぐ始められて学びにもなる）
1. ライフログ・日記アプリ（自分や同世代の気づきや記録を残せる）
2. 健康・体調記録アプリ（体調、血圧、歩数、メモなど）
3. 50代からの学び直しメモアプリ（ChatGPT活用TipsやIT知識共有など）
4. かんたんToDo＋振り返りアプリ（日々の達成感を得られる構成）
→気になる方向性ありますか？なければ最も学びが多くて作りやすい案を選んで進めます。
💻 技術スタック案（ヒロリー選定）
フロントエンド：Next.js（ReactベースでPWAにも拡張しやすい）
バックエンド／データベース：Supabase（FirebaseよりもSQLに近くて学びやすく、無料プランあり）
デザインUI：shadcn/ui（Tailwind CSSベースで美しい）
デプロイ先：Vercel（Next.jsとの相性◎、無料で運用可）
🧭 次のステップ
1. 仮テーマの方向性を決める
2. ワイヤーフレーム（画面構成）を簡単に作る
3. 実装に向けてセットアップ・学習スタート
「これがいいかも」と思うテーマや、「もうちょっとこんな感じがいい」といった感想があれば教えてください。次にすぐ進めるよう準備します！》
長くなったので、続きは次回へ回します。
ここで、コーディング役を用意します。
『コーディング役を作って下さい。
名前はコーダー。
何かプログラミングが必要な場合は、ヒロリーからコーダーへ指示して下さい。ヒロリーとコーダーのやり取りは私に報告してください』
ChatGPT の回答です。
《了解しました！
これからは、**ヒロリー（リーダー）**が状況を判断し、**コーダー（プログラミング担当）**に具体的な開発指示を出していきます。すべてのやり取りは責任をもってユーザー（あなた）に報告します。
✅ 現在のチーム体制
👨💼 ヒロリー（リーダー）：企画・設計・全体指揮
👨💻 コーダー（開発担当）：実装・コード管理
🧑💼 あなた（プロジェクトオーナー）：意思決定・レビュー・最終判断
まずは仮テーマの決定 or 検討をお願いします。それに応じて、ヒロリーがコーダーに初期構築（例：Next.js＋Supabaseのセットアップ）を指示し、プロジェクトを動かし始めます。
どの方向性で始めてみましょうか？それとも別のアイデアが浮かびましたか？》
アイデアが思い浮かばないので、アイデア出しもChatGPT に依頼します。
『色々なアプリの企画を考える企画担当のキッカを作ってください。アイデアが湯水のようにでてくる人です。』
そして、ChatGPTから、新メンバーと現在の開発メンバー体制が紹介されます。
《承知しました！
新たに**企画担当「キッカ」**がプロジェクトチームに加わりました 🎉
👩💼 キッカ（企画担当）
発想力抜群で、アイデアが泉のように湧いてくる
ユーザーの視点に立って「使いたくなるアプリ」「収益化につながる仕掛け」を次々と提案
ヒロリー（リーダー）と連携して、現実的かつ魅力ある企画に仕上げていく
さっそく、キッカにいくつかの企画案を出してもらいましょうか？
それとも、あるテーマに沿ってアイデアを出すようお願いしましょうか？（例：「50代以上に役立つアプリ」「日常を豊かにする小さなWebツール」など）どうしますか、プロジェクトオーナー？✨》
私の日本語入力のtips
USキーボードを使用しています。日本語入力のオン・オフはスペースキーの右側にあるAltキーで対応しています。押すごとにオンとオフが切り替わります。
パソコン起動時は英語入力モードのため、Windowsキー + スペースキーで、日本語入力のIMEを起動させます。起動直後は英数モードのため、Aktキーを一度押して、日本語入力モードに切り替えます。
実はAlt + Shiftキーでも英語入力と日本語入力の切り替えが出来ることに偶然気づきました。
日本語入力モードでも、Shiftキー + スペースキーで半角スペースが入力可能です。またShiftキー + 英字キーで入力すると、英文字が半角の大文字となり、以下半角の英数入力が可能です。Enterキーで確定できます。英文の割合が少ない場合はこれで十分です。
また英語・日本語の混じりが多い場合は、いちいち切り替えが面倒なので、日本語入力モードのまま英語を入力して、Ctrl + Tで半角英数に変換しています。この操作はCaps lockキーをCtrlキーに設定しておくと、とても便利です。
他にはCtrl + U（ひらがな）、Ctrl + I（カタカナ）、Ctrl + O（半角変換）、Ctrl + P（全角英数）。
Ctrl + O は直前がかなやカナなら半角カナ、英数なら半角英数です。
英数の場合は押す毎に英数小文字→英数大文字→先頭のみ大文字→英数小文字→の順に変わります。
またCtrl + K で選択範囲を左に、Ctrl + L で右に移動できます。ただし、これは一度スペースで変換した後でないと機能しません。
Upworkの解説ページ
こちらが Upwork が提供している Learning-Hubで Upwork のプロフィールの作り方や仕事の探し方などの説明が書かれてあります。
https://support.upwork.com/hc/en-us/articles/35199491222803-Learning-Hub
時間のある時に少しずつ見ていきます。
Upwork の最初の結末
初めてUpwork の結果がどうだったのか？
応募した後、万が一採用された場合、どう連絡が来るのかわからず、メールやらアプリやらをチェックしていました。
本日、Upwork からメールが届き、結果として、自分が応募した仕事は削除されたとのこと。
仕事自体に何かのコンプライアンス違反があったようです。
応募時に使用したConnects（ポイント）は返却されるとのこと。
同時にメールには、Upwork の仕組み以外にコンタクトしたら金銭の授受の話がある場合は、リスクがあるためUpwork に報告するように書かれてありました。一連の取引はUpwork 内で完結させることが、リスク低減の方法のようです。
メールのリンク先には違反となる仕事リスクも書かれていました。
最初の応募自体は躓いてしまいましたが、良い経験ができたと思います。気を取り直して、次の仕事を探そうと思います。
Upworkで仕事を得るには？
勢いでUpworkでの仕事に応募しましたが、ちゃんとプロフィールなどしっかり記入してる人達がいる中で、パッと適当に書いたプロフィールの応募者に仕事発注するわけ無いなぁと思いました。
では、逆にどうすれば受注が高まるのか考えると、自分の得意分野を細かく洗い出して、また何が不足して補強しないといけないかをクリアにしなければいけないと思います。
そのためには、掲載されている募集内容を分析して、どんなスキルが必要になっているか、どういう仕事が多いか、などで、セグメント分けして、自分がまず第一に獲得するセグメントはどこにするかを決める必要があると思います。
セグメント分けには、募集内容におけるキーワードを拾って、どこにニーズがあるか見ながら、競合があまりいなさそうなニッチ市場を見つけていきたい。
Upwork こと始め
Upwork に登録だけして、何もしてなかったのですが、とりあえず何か応募してみようと思い、色々いじってみました。一度やってみれば、何が分かってて、何が分からないかが判明すると思いました。
まずはAccount settingsのところをみます。住所が昔のままだったため、新しい住所に更新しました。
次に自分のプロフィールのところをチェックして、不足が無いかを確認します。ここが一番重要な部分だとは思いますが、時間のある時によく見せる方法を学ぼうと思いました。
今回は、Skillsのところに「Japanese, Translation」しかなかったため、「Microsoft Excel, Python」を追加しました。Python は始めたばかりですが、これから伸ばしていきたいので追加です。
実績のところは、まだ書けないので空欄です。
Verifications のところで、Military veteran になっています。これは全く合っていないので、「I did not serve in the military」を選んで保存しますが、全然変更になりません。
仕方ないので、アプリをインストールしてみます。
↓
↓
↓
アプリからでも変更が効きません。
諦めて、また別の日にやります。
とりあえず仕事を探してみます。
その中で、「初心者でもできそうな簡単なオンラインのデータ入力」を見つけました。1つが15〜20分ぐらいで終わるとのことなので、自分にでもできそうな気がします。
さっそく申し込もうと思いますが、なにやらお金が必要そうです。ChatGPTに聞いてみると、「はい、Upworkで仕事に応募する際には「Connects（コネクト）」というポイントが必要です。 このConnectsは有料で購入する形になりますが、毎月一定数の無料Connectsが付与されます。 そのため、すべての応募にお金がかかるわけではありません。 」ということで、ポイントを買わないといけないようです。100ポイントが15USD。1ポイントは約22円です。
また、仕事を申し込む時に、additional details や、profile highlights、boost your proposalなどが必要そうなので、これもChatGPT に聞きました。
Additional details （追加メッセージ）が応募時に最も重要らしいので、ChatGPT に相談。
提案内容を自分なりにアレンジして英訳をChatGPT に頼み、さらに応募用の成形もやってくれました。
Profile highlights は自分のプロフィールから勝手に抽出されるので、ここでは無視。
最後のboost your proposal は、grab デリバリーのpriority delivery feeみたいなもので、クライアントの画面の上位に自分の応募を表示させる仕組みということで、既に15ポイント払って上位を狙っている人がいたため、自分も同じ15ポイントを払いました。
その後、ChatGPT の解説では、毎月無料でコネクタが貰えるみたいで、notifications 設定すると、30ポイント貰えるみたいなので設定しました。その後、ポイントの履歴を見ると、その30ポイントはマイナスされており、貰えるのではなく、払って何かのサービスを受けるみたいな感じだったようです。30ポイントも無駄にしてしまった。ショック〜！
今回申し込みで11ポイント使いました。するとブーストみたいなのが出てきます。
