GUIDE ・ 図解つき

ウェブサイト・アプリを作って
お金を生み出すしくみ

Cloudflare・GitHub・Claude(生成AI)を使って、
「作る → 公開する → 広める → 収益化する」までの一連の流れを、
小学生でもわかるように図解で説明します。かかる費用の一覧つき。

🤖 📦 ☁️ 💰

この記事の目次

  1. まずは全体像(お店にたとえると)
  2. 登場する道具(キャラクター)紹介
  3. 作って公開するまでの5ステップ
  4. お金を生む「6つの仕掛け」
  5. 宣伝して広める(お客さんの集め方)
  6. 結局いくらかかるの?(費用一覧)
  7. AIに投げるプロンプト集(コピペOK)
  8. これからの進め方(ロードマップ)
  9. よくある質問
01

まずは全体像。
「インターネットのお店」にたとえてみよう

むずかしい言葉がいっぱい出てきますが、じつは「お店を1つ作る」のと同じです。まずはこの図で、だれが何の役をするのかをイメージしてください。

🤖 作る人(職人)
Claude / 生成AI
おねがいすると
お店(プログラム)を
作ってくれる
📦 しまう場所(倉庫)
GitHub
作ったものを
安全にしまって
管理する箱
☁️ お店を出す土地
Cloudflare
世界中の人が
見にこられる場所に
お店をならべる
💰 お金が入るしくみ
広告・決済など
お客さんが来て
広告や買い物で
お金が生まれる
ひとことで言うと

AIがお店を作り、GitHubがそれをしまい、Cloudflareが世界に見せて、広告や決済でお金が入る。この4つがぐるっとつながっているだけ、と覚えればOKです。

02

登場する道具(キャラクター)を
ひとりずつ紹介

それぞれの道具が「何屋さんなのか」を、身近なものにたとえて紹介します。名前は今おぼえなくて大丈夫です。

🤖Claude / 生成AI
= 何でも作れる「魔法の職人さん」

「こういうサイトを作って」と日本語でお願いすると、プログラム(お店の中身)を書いてくれます。ChatGPTやGeminiなど、他のAIでも同じことができます。

お金:無料でも使える。もっと使うなら月 約3,000円〜(Proプラン)
📦GitHub(ギットハブ)
= 作品をしまう「頑丈な宝箱」

作ったプログラムをネット上に保存する場所。「いつ・どこを変えたか」の記録も残るので、まちがえても前の状態に戻せます。Cloudflareと自動でつながります。

お金:基本ずっと無料
☁️Cloudflare(クラウドフレア)
= お店を出す「世界一等地の土地」

Pagesで作ったサイトを世界に公開し、Workersで「会員だけ見られる」などの賢い動きを追加できます。速くて、世界中どこからでも見られます。

お金:個人なら無料枠で十分。使い込むと月 約750円〜
🏷️ドメイン
= お店の「住所・名前」

example.com のような、あなただけの住所。無料の住所(〇〇.pages.dev)でも始められますが、自分の名前の住所があると本格的でカッコいい。

お金:1年で 約1,500円〜(なくても始められる)
💳Stripe(ストライプ)
= お店の「レジ・お会計係」

クレジットカードでの支払いを、安全に受け取る仕組み。「月額会員」「1回だけ購入」など、いろいろなお金の受け取り方ができます。

お金:登録は無料。売れたときだけ約3.6%の手数料
📣Google AdSense
= お店にはる「広告ポスター」

サイトに広告を貼ると、見られたりクリックされたりするたびに、少しずつお金がもらえる仕組み。お客さんが多いほど、もらえるお金が増えます。

お金:登録・利用は無料(審査あり)
03

作って公開するまでの
5ステップ

実際の流れはこの5つだけ。プログラムの知識がなくても、AIにお願いしながら1つずつ進められます。

1

アイデアを決める 💡

「どんな困りごとを解決するサイト・アプリか」を1行で決めます。ここがいちばん大事。小さくてOK。

例:「毎日ひとつ、健康の豆知識が読めるアプリ」「昔の偉人の名言でクイズができるゲーム」
2

AIに作ってもらう 🤖

ClaudeなどのAIに「こういうサイトを作って」とお願いします。できあがったコードをコピーして、パソコンに保存します。うまくいかない所は「ここをこう直して」と会話しながら直します。

この記事の「07 プロンプト集」に、そのままコピペで使えるお願い文を用意しています。
3

GitHubにしまう 📦

作ったファイルをGitHubの箱(リポジトリ)に入れます。これで作品が安全に保管され、次の公開ステップと自動でつながります。

4

Cloudflareで世界に公開 ☁️

CloudflareにGitHubの箱をつなぐと、あなたのサイトがインターネット上に出て、世界中の人が見られるようになります。次からはGitHubを更新するだけで、サイトも自動で新しくなります。

ここまでで、かかったお金は0円でも可能。もう「自分のサイトを持っている人」です!
5

お金を生む仕掛けをつける 💰

公開できたら、広告を貼ったり、有料の会員機能をつけたりして、収益化します。仕掛けの種類は次の章でくわしく説明します。

04

お金を生む「6つの仕掛け」

サイトからお金が生まれる方法はいくつもあります。代表的な6つを、むずかしさ(★の数)と一緒に紹介します。1つだけでなく、組み合わせてもOKです。

📣

① 広告を貼る

サイトに広告を表示して、見られたりクリックされるたびに少しずつお金がもらえます。いちばん始めやすい方法。

使う道具:Google AdSense
むずかしさ ★☆☆元手 0円
🔁

② 月額会員(サブスク)

「毎月◯円で、特別なコンテンツが見放題」という会員制。安定して続くお金になりやすいのが強み。

使う道具:Stripe + Cloudflare Workers
むずかしさ ★★★手数料 3.6%
🛒

③ デジタル商品を売る

電子書籍・テンプレート・音楽・イラストなど、データの商品を1回売り切りで販売します。在庫がいらないのが利点。

使う道具:Stripe(決済リンク)
むずかしさ ★★☆手数料 3.6%
🔗

④ アフィリエイト

「この商品いいよ」と紹介し、あなたのリンク経由で買われたら紹介料がもらえる仕組み。記事やレビューと相性◎。

使う道具:Amazonアソシエイト 等
むずかしさ ★☆☆元手 0円
🎁

⑤ 投げ銭・応援

作品を気に入った人が「応援」としてお金を送れるボタンを置きます。ファンとの距離が近い作り手向け。

使う道具:Stripe / 各種サービス
むずかしさ ★☆☆元手 0円
💼

⑥ 実績にして仕事を得る

作ったサイト自体を「ポートフォリオ(実績集)」にして、「あなたにも作って」という制作の依頼につなげます。単価がいちばん大きくなりやすい。

使う道具:このポートフォリオそのもの
むずかしさ ★★☆単価 大
おすすめの順番

最初は ①広告 と ④アフィリエイト(どちらも元手0円)から。人が集まってきたら ②サブスク や ③商品販売 に広げ、実力がついたら ⑥仕事の受注 へ、と階段をのぼるのが王道です。

05

宣伝して広める。
お客さんの集め方(ここが一番大事!)

じつは、収益化でいちばん差がつくのは「作る力」より「知ってもらう力」です。どんなに良いサイトも、知られなければこの世に無いのと同じ。作ったら必ず「広める」までがワンセットです。

🎯 お客さんは、この順番でファンになる

👀 ステップ1
知る
存在を
知ってもらう
💡 ステップ2
気になる
「おもしろそう」と
興味をもつ
🖱️ ステップ3
見にくる
実際に
サイトを訪れる
❤️ ステップ4
好きになる
また来たい
ファンになる
📣 ステップ5
人に広める
友だちに
おすすめしてくれる
ポイント

宣伝とは、この矢印のいちばん左「知る」を増やすこと。左が増えれば、自然と右のファンや紹介も増えていきます。だから、まずは「知ってもらう」動きを毎日ちょっとずつ。

🚀 まず最初にやる宣伝(ぜんぶ元手0円ですぐできる)

お金をかける前に、まずこの6つ。「作りました!」と声をあげるだけで、最初のお客さんは十分に呼べます。

🙋① 身近な人に伝える
= 最初の10人が宝物

まずは家族・友だち・知り合いに「これ作ったよ、見て!」と直接シェア。最初の応援団が、感想や改善のヒントをくれます。ここが全部のスタート地点。

📱② 自分のSNSで投稿
= 一番強い無料の拡声器

X(旧Twitter)・Instagram・Facebook・TikTokなどで発表。「何ができるか」だけでなく「なぜ作ったか」も一緒に書くと、共感されて広がりやすくなります。

🛠️③ 作る過程を見せる
= 完成品より人が集まる

「今こういうの作ってます」「ここで苦戦中」など、制作の裏側を発信。応援したくなる人が集まり、完成前からファンがつくことも。

💬④ 仲間の集まる場で共有
= 興味がぴったり合う人へ

note・Qiita・Zenn・Reddit・Discordなど、テーマの近い人が集まる場所で紹介。関心が合う人に届くので、少人数でも反応が濃いのが特長。

🔍⑤ 検索から来てもらう(SEO)
= 24時間はたらく看板

ページのタイトルと説明文に「探されそうな言葉」を入れておくと、GoogleやYouTubeの検索から人が来ます。一度整えれば、寝ている間もお客さんが来ます。

📋⑥ 紹介サイトに載せる
= 人が集まる場所に出す

アプリ・サービスのまとめサイトや、募集中のギャラリーに登録・投稿。すでに人が集まっている場所を借りて、一気に知ってもらいます。

📈 そこから「拡販」していく5ステップ

最初の宣伝で反応が出てきたら、次はそれを大きく育てます。この順番でOK。

1

反応を見て改善する 🔎

どの投稿が伸びたか、どのページがよく見られたかを観察。「刺さった言い方」を見つけて、そこを伸ばします。数字は正直な先生。

見る数字の例:投稿の「いいね」数/サイトの訪問者数/どこから来たか
2

コツコツ続けて発信する 🔁

宣伝は1回では届きません。週2〜3回など、無理のないペースで続けるのが勝ち。1回でやめず「続けた人」だけが伸びていきます。

3

クチコミが生まれる仕掛けを置く 🗣️

サイトに「シェアボタン」や「友だちに教える」ボタンを設置。お客さん自身が宣伝してくれると、コストをかけずに輪が広がります。

AIに「このページにXとLINEのシェアボタンを付けて」と頼めば、すぐ追加できます。
4

少額の広告を試す 💴

無料の宣伝で手ごたえが出たら、1日数百円からSNS広告を試します。反応が良かったところ「だけ」お金を足すのが、失敗しないコツ。

5

人に紹介してもらう 🤝

発信力のある人にレビューを頼んだり、「紹介したら報酬」の仕組み(アフィリエイト)を用意して、自分の代わりに広めてくれる仲間を増やします。

最初の宣伝でいちばん大事なコツ

「たくさんの人」より「ぴったりの1人」を狙う。 1000人にスルーされるより、10人に届けて2人が本気で喜ぶ方がずっと価値があります。投稿するたびに「この言葉を、どんな1人に届けたいか」を思い浮かべて書きましょう。それが結局、いちばん速く広がります。

06

結局いくらかかるの?

結論から言うと、0円で始めて、うまくいってから少しずつお金をかけるのが正解です。下の表は、月ごとの目安(1ドル=約150円で計算)です。

道具 役割 無料で始める 本格的にやる(月あたり)
Claude / 生成AI 作る職人 0円(無料版) (Pro)
GitHub 保存する箱 0円 0円(個人はずっと無料)
Cloudflare Pages / Workers 公開する土地 0円 (Workers有料)
ドメイン 住所・名前 0円(無料の住所を使う) (年1,500円ほどを月割)
Stripe レジ・決済 0円 売れた分のだけ
Google AdSense 広告 0円 0円
合計 — 0円 でスタート可能 月 約 4,000円 + 売上の手数料
たとえ話

お小づかい0円でも「お店ごっこ」を始められて、お客さんが増えてから、ちょっといい看板(ドメイン)やレジ(決済)を足していく——というイメージです。最初から全部そろえる必要はまったくありません。

07

AIに投げるプロンプト集
(Claude・ChatGPT・Geminiなど、どのAIでもOK)

下の文章をコピーして、そのままAIに貼り付けるだけ。〈 〉の中を、あなたのアイデアに置きかえて使ってください。「コピー」ボタンでコピーできます。

① サイトをゼロから作ってもらう
あなたはプロのWebエンジニア兼デザイナーです。
以下の条件で、1枚のHTMLファイル(HTML/CSS/JavaScriptを1つにまとめたもの)を作ってください。

- 目的:〈毎日ひとつ健康の豆知識が読めるサイト〉
- ターゲット:〈健康に興味のある30〜50代〉
- デザイン:スマホでも見やすく、シンプルで上品に
- 必要な機能:〈ボタンを押すと今日の豆知識が表示される〉
- 追加でおすすめの機能があれば提案もしてください

まず全体の構成を説明し、そのあと完成したコードをすべて出力してください。
② 公開のやり方を教えてもらう
作ったHTMLファイルを、GitHubに保存してCloudflare Pagesで
インターネットに無料公開したいです。

プログラミング初心者にもわかるように、
1つずつ順番に、クリックする場所まで具体的に教えてください。
専門用語が出てきたら、そのつど一言で説明を添えてください。
③ 収益化の作戦を相談する
次のサイトを収益化したいです。
- サイト内容:〈   〉
- 現在の1日の訪問者数:〈だいたい○人〉

このサイトに合う収益化の方法を、
「始めやすい順」に3つ提案してください。
それぞれ「必要な準備・かかる費用・想定できる月の収入」も、
初心者向けに具体的に教えてください。
④ 会員だけ見られる機能をつける
Cloudflare Workers と Stripe を使って、
「月額500円を払った会員だけが見られるページ」を
作りたいです。

全体の仕組みを図でイメージできるように説明したうえで、
必要な手順と、Workers側のコードのサンプルを、
初心者にもわかるコメント付きで書いてください。
⑤ 宣伝用のSNS投稿文を作ってもらう
次のサイト(アプリ)を宣伝したいです。
- 内容:〈   〉
- 届けたい人:〈   〉
- サイトのURL:〈   〉

これを広めるためのSNS投稿文を、
X(Twitter)用・Instagram用・Facebook用に1つずつ、
つい見たくなるように作ってください。
それぞれ、おすすめのハッシュタグも5個ずつ付けてください。
上達のコツ

AIは1回で完ぺきを目指さず、会話でだんだん良くしていくのがコツ。「もっとかわいくして」「スマホで文字が小さいから大きく」など、感想を伝えるだけで直してくれます。遠慮せずに何度もお願いしましょう。

08

これからの進め方(ロードマップ)

あせらず、この順番でレベルを上げていきましょう。多くの人が、まず「Lv.1を最後までやりきる」ことでコツをつかみます。

LV.1 ・ 今日

1つ作って公開

小さなサイトをAIと作り、Cloudflareで公開して「作れた!」を体験する。費用0円。

LV.2 ・ 1か月目

お客さんを呼ぶ

SNSで発信したり、内容を増やして、見にきてくれる人を増やす。広告も貼ってみる。

LV.3 ・ 3か月目

本格収益化

ドメインを取り、サブスクや商品販売に挑戦。数字を見ながら改善する。

LV.4 ・ その先

仕事にする

作品を実績にして制作を受注。複数のサイトを育て、収入の柱を増やす。

09

よくある質問

プログラミングが全くできなくても大丈夫?

大丈夫です。今はAIがコードを書いてくれるので、あなたの仕事は「何を作りたいかを言葉で伝えること」と「できたものを試して感想を返すこと」。この2つができれば始められます。

本当に0円で始められるの?

はい。AIの無料版・GitHub・Cloudflare・AdSenseはすべて無料枠があります。ドメインや決済は「お金を稼げるようになってから」足せばよいので、スタート時点の出費は0円で問題ありません。

どのくらいで稼げるようになる?

人によりますが、収益化は「作ること」より「見にきてくれる人を増やすこと」が9割です。最初の数か月は種まきの期間。1つのサイトに固執せず、いくつか作って反応の良いものを育てるのが近道です。

ClaudeとChatGPT、どっちを使えばいい?

この記事の作り方は、どのAIでも通用します。長めのコードを一気に書いてもらう用途ではClaudeが得意ですが、まずは今使えるものでOK。慣れてきたら両方使って、良い方を選びましょう。

子ども(未成年)でもお金を受け取れる?

広告や決済サービスの多くは、契約に年齢の条件があります。未成年の場合は保護者の名義・同意が必要になることが多いので、収益化の前におうちの人と相談してください。作って公開するところまでは、だれでも楽しめます。

FOR YOU

「読んだけど、自分でやる時間はない」
という方へ

サイト制作・資料作成・リサーチ・デザイン・動画まで、この記事の作り手が代わりにお引き受けします。 「こんなの作れる?」の段階でも大丈夫。初回のご相談・お見積りは無料です。

できること・料金を見る 相談してみる