@tomada(とまだ｜『Claude Codeで作って学ぶ』著者（増山友司）)

【個人開発】リリース1ヶ月で月5万円(理論値)のサービスを作ったのでノウハウを全公開してみる（Next.js / Rails）

467

Last updated at 2026-08-16Posted at 2025-03-17

こんにちは、とまだです。

みなさん、個人開発はしていますか？

そして個人開発をしている方は 個人開発アプリで一発あてて月収 xx 万円 を夢見ていたりしませんか？

私も夢見る一人なのですが、特に「集客」や「マネタイズ」の方法に悩んでいる方も多いのではないでしょうか。

今回は、私が個人開発した Learning Next というサービスがあります。

こちらが軌道に乗ってきたので、開発の背景から技術的な工夫まで、赤裸々にお話ししたいと思います。

この記事を読んだらわかること

この記事は、個人でサービスを作ってみたい人、特に 集客やマネタイズの方法に悩んでいる人 に向けて、以下のような内容をお伝えします。

リリース 1 ヶ月での成果（理論値）
個人開発の Web アプリで集客を増やすための工夫
SEO 対策のポイント
マネタイズの考え方
ユーザー目線での UI/UX 改善
プロの Web エンジニアが個人開発するときに意識していること

自分のためのメモという意味合いもありますが、他にも個人開発をしている方にとって参考になる情報があれば幸いです！

簡単に自己紹介

フリーランスの Web エンジニアをやっています「とまだ」です。

開発においてはフロントエンドからバックエンド、インフラにクラウドまでフルスタックに何でもやっています。

あまり細かくは書きませんが、本業では月間 500 万 PV 以上のサイトのフロント・バックエンド開発や、SEO 対策など幅広く対応しています。

また、ありがたいことに、RSpec x Rails の講座で Udemy 公式の ベストセラー をいただいており、プログラミング教育にも力を入れています。

Udemy プロフィール

そんな私が現場や個人で培ってきたノウハウを詰め込みまくったサービスについて、「考え方」や「ノウハウ」の観点でご紹介します！

リリース 1 ヶ月での成果（理論値）

まずはマネタイズの成果から

まずは、マネタイズの成果からお伝えしましょう。

1 ヶ月での収益は、5 万円/月 （理論値）です。

「理論値」という言い方から分かる通り、実際にはこの金額を得ることはできていません（大げさ太郎でごめんなさい）。

2025 年 2 月に正式リリースしてマネタイズを開始してから、最高の 1 日報酬が 1,620 円 でしたので、31 日で約 5 万円 という計算です。

ただ、最高瞬間風速とはいえ「ドメイン評価は激弱」「個別の宣伝なし」の中、Google 検索流入だけで成果が出たのは、自分でも驚きです。

後述しますが、SEO 対策 といった工夫を重ねた結果、検索エンジンからの流入が増え、それが収益につながったと考えられます。

どうやって収益を得ているのか？

Learning Next では「Udemy 講座のアフィリエイト」、つまり紹介した講座が購入された際に報酬を得る仕組みを導入しています。

サービスとしては LinkShare を利用しており、購入数や金額に応じて報酬が発生します。

Udemy アフィリエイトを選んだ理由

Udemy は、プログラミングをはじめとする幅広いジャンルの講座が揃っていることが強いところです。

さらに、何より自分が Udemy を使って学び続けてきた経験があるので、信頼性が高いと感じていました。

このあたりは技術ブログの方でも使っているので、使い方を含め自信があったため、マネタイズの軸として選びました。

なぜこのサービスを作ろうと思ったのか

ではここで、一番大事な「モチベーション」についてお話しします。

未経験からエンジニアになれたことからの思い

私自身、プログラミング学習の多くを Udemy に頼ってきました。

プログラミング未経験からエンジニアになる際や、今でも新しい技術を学ぶときには、Udemy の講座を利用することが多いです。

ただ、Amazon で買い物するときもそうですが、 ハズレを引きたくはない ので講座選びにはかなり慎重になりますよね。

Udemy には 5 点満点の評価や受講生数から「ざっくり」と良さはわかるものの、 「自分に合った講座」を見つけるのは難しい と感じていました。

たとえば、タイトルには「入門」と書いてあるのに、実際には少し学んでないと難しい内容だったりします。

また、講座の内容が古くなっていたり、講師の説明が分かりづらかったりすると、学習効率が落ちてしまいます。

しかし、特にプログラング初心者だと説明文からはそうしたポイントがわかりにくいですよね...。

悩みを解決するサービスがあればいいなあ〜

そうした自分の悩みを解決するために、 「講座選びの難しさ」 に着目しました。

表層的な「人気度」や「星評価」だけでなく、 「実際に受講した人の声」 をもとに「講座の良し悪し」を客観的に評価するサービスを作ろうと思い立ちました。

レビューには、受講者の「生の声」が詰まっていますからね。

ただ、そのレビューをただ載せるだけではなく、 AI を使って自動で分析・要約 することで、多くのレビューを一気に把握できるようにしました。

なぜ「AI を使ったレビュー分析」なのか

まずモチベーションとしては AI でナウいことをやりたかった というのがあります。

が、真面目に理由を付けるなら、以下のようなメリットがあるからです。

多くのレビューを一気に把握できる
自動化により、継続的な分析が可能
個人開発でも大量のデータを処理できる
客観的な評価基準を設けられる

特に、人気度や受講生数に左右されることなく、機械的にレビューを分析することで、 客観的な評価基準 を設けられるのが大きなメリットです。

AI と言っても Claude の API を使っているだけはありますが、普段から自然言語処理に興味があったので、これを機に実際に使ってみたかったというのもあります。

また、副業でプロンプトエンジニアリングの教育業務もしているので、持っている知識を自分のアプリに活かしてみたかったというのもあります。

では、次に実際にどのようなサービスを作ったのか、その特徴や工夫についてお話しします！

Learning Next の特徴

さて、ここからは Learning Next の特徴や工夫についてお話しします。

個人開発のノウハウというよりは、サービスとして こだわったポイント について紹介しますので、考え方の参考にしていただければと思います。

AI を活用したレビュー分析

Learning Next では、Udemy 上にある大量のレビューを Claude の API を使って自動で分析・分類しています。
具体的には、各講座に対して投稿されている数十件以上ものレビューをまとめて投げかけ、ポジティブな面、ネガティブな面、そして「どういう人に向いているのか」を要約させる仕組みをつくりました。

例：【Udemy レビュー】現役シリコンバレーエンジニアが教える Python 3 入門

これにより、「レビュー全文を読み込む手間」や「単なる星評価だけではわからないリアルな声」を、要点だけピックアップして把握できます。

特にネガティブ面は、学習者にとって重要な情報ですので、これを自動で抽出できるのは大きなメリットですね。

「音声が少し聞き取りにくい」「前提知識が想像以上に必要だった」など、受講して初めて気づくようなポイントを事前に知れるので、講座選びの参考になるかと思います。

4 つの評価軸でスコアリング

レビュー分析の結果を、私は以下の 4 つの観点でスコア化しています。
単に「総合評価」という一括りではなく、それぞれの講座の強み弱みを 数値として比較できるようにした のがポイントです。

こちらは、現役シリコンバレーエンジニアが教える Python 3 入門のレビュー内容をもとに AI で分析した結果です。

わかりやすさ（10 点満点）
- 初心者が理解しやすい構成かどうか
- 講師の説明が丁寧か、コード例が理解しやすいか
実践力（10 点満点）
- 実務に直結するようなプロジェクトがあるか
- 応用力や最新トレンドに対応しているか
サポート体制（10 点満点）
- 講師の質問対応は丁寧で早いか
- コミュニティや学習フォーラムが活発か
教材品質（10 点満点）
- 動画や音声のクオリティ
- 補助資料、ダウンロード可能なリソースの充実度

受講したい講座を選ぶとき、自分が最も重視する部分は人によって違いますよね。

「まったくの初心者なので、わかりやすさを最優先したい」「現場で使えるスキルをとにかく身につけたい」など、ニーズは多種多様かと思います。

こうしたニーズに合わせて評価項目を参考にできるようにしました。

（レーダーチャート実装したいなあ...）

柔軟な検索・フィルタリング

講座を探すときのキーワードや条件は、人によってさまざまですよね。
そこで、Learning Next ではカテゴリやトピックを細かく設定し、絞り込み検索をサクサクできるようにしています。

トピック別の Udemy 講座

フィルタリング機能

また、キーワード検索もできるので、特定の講座を探すときにも便利です。

網羅的な情報を載せるサイトこそ、ユーザーが求める情報を素早く見つけられるようにすることが大事だと考えています。

よく、フィルタリングはできても「特定の講座が見つけにくい」という声を聞きますので、そのあたりにも配慮しています。

学習ロードマップの提供

これは講座のレビュー分析とは直接関係はありませんが、プログラミング学習を始める人にとっては「次に何を学べばいいのか」がわかりにくいことがありますよね。

また、検索キーワードのボリュームを見ていると「React 学習ロードマップ」といった検索が多いことがわかっています。

そのため、 Learning Next では「フロントエンドエンジニアになりたい」「バックエンドエンジニアになりたい」といった目標に合わせた学習ロードマップを提供しています。

【目的・職種別】未経験からエンジニアを目指すためのおすすめ学習ロードマップ

こちらは一例です。

こだわりとしては、一口に「バックエンドエンジニアになりたい」といっても言語やフレームワークは様々ですので、それに合わせたロードマップを提供しています。

僭越ながら、私はバックエンドやフロントエンド、インフラにクラウドと幅広い技術を使えるので、経験を活かしてロードマップを作成しました。

もちろん、自分の知識ではカバーし切れていない分野もあります。

そのあたりは技術・市場調査をしつつ、ChatGPT / Claude の力で一部修正して、できるだけ幅広い分野で情報を提供できるようにしています。

いかにして集客するか？SEO 対策のポイント

ここでは、Google 検索からの流入を増やすための SEO 対策 についてお話しします。

なぜ SEO が重要なのか

SEO とは簡単に言うと「Google 検索で上位に表示されるようにするための対策」です。

個人開発をしていると、「せっかく作ったサービスをどうやって多くの人に見つけてもらうか」が大きな課題になります。

がんばって作ったのに誰も使ってくれない... という経験をした方もいるのではないでしょうか？

そのため、継続的に人を呼び込むには、検索エンジンで上位に表示される工夫が欠かせません。

このような対策を SEO（Search Engine Optimization） といいますが、当サイトでは SEO 対策にかなり力を入れています。

業務の中で覚えてきた SEO 対策のノウハウを活かし、サイト内の構造やコンテンツ、メタデータなどを最適化しています。

他の個人開発者にも役立ちそうなところをいくつか紹介しておきます！

検索キーワードの調査
構造化データの設定
メタデータの設定
パンくずリストの実装
Core Web Vitals の最適化
ページ読み込み速度の最適化
モバイルフレンドリー対応

それぞれ、考え方や使ったツールを紹介しますので、参考にしてみてください。

SEO 対策の成果

色んな SEO 対策を行った結果、ほぼ宣伝なし＆新規ドメインであるにもかかわらず、 Google 検索からの流入が増加 し続けています。

これは本当に すごーく頑張った成果 だと思っていますが、具体的にどのような工夫をしたかを紹介します。

特別なことはしておらず、色んな観点で 地道な SEO 対策 を行った結果ですので、皆さんの個人開発でも参考になるかと思います！

検索キーワードの調査

まず、考え方からですが、 検索キーワードの調査 が一番大事だと考えています。

なりふり構わず「自分が好きなアプリ」を作っても、残念ながら需要がなければ、検索エンジンからの流入が少ない場合があります。

そのため、ユーザーが検索するキーワードのボリュームを調査し、それに合わせたコンテンツを提供することが大事です。

このあたりは日常業務や技術ブログでの経験が活かした部分ですが、ラッコキーワードというツールを使っています。

たとえば、ラッコキーワードを使うと、あるキーワードに対してどれくらいの検索ボリューム だったり、競合サイトの強さなどがわかります。

Learning Next においては「Udemy Python おすすめ」や「React 学習ロードマップ」など、プログラミング学習に関するキーワードの検索上位を狙ってコンテンツを作成しています。

ただし、ユーザーの需要が多いキーワードは競合も多いため、ラッコキーワードの 「SEO 難易度」 という指標を参考にしています。

他にも実際にキーワードで検索したときに、 大企業や大手 Web サイトが上位に表示されている場合は、正直個人では勝ち目が薄いので避ける 方がベターです。

これから Web アプリやサイトを立ち上げる方は、数個の検索キーワードについて Google 検索上位を狙う という目標を持つと、具体的な方向性が見えてくるかもしれませんね。

構造化データの設定

ブログやコースの一覧ページなどは、Google などの検索エンジンが理解しやすい形で 構造化データ（JSON-LD） を埋め込んでいます。

皆さんも Google 検索をしたとき、検索結果に「星評価」や「料金」が表示されていることがありますよね。

必ず表示されるわけではないですが、表示されると情報が充実し、ユーザーがクリックしやすくなります。

Learning Next でも、コース一覧や講座詳細ページに構造化データを設定しています。

結果的に、クリック率が上がり、検索エンジンからの流入が増えることが期待できます。

参考：Google 検索における構造化データのマークアップの概要

↑ 公式ドキュメントながら、わかりやすい解説がされているので、SEO 対策に興味がある方はぜひ参考にしてみてください。

なお、構造化データは Google のボットがサイトをクロールする際に、ページの内容を理解しやすくするためのものです。

そのため、作ったデータ形式にミスがあると認識されなくなってしまうので、リッチリザルトテストというツールを使って、正しく構造化データが設定されているか確認することをおすすめします。

デプロイした URL を貼ってもいいですし、ブラウザ上からデベロッパーツールで確認したソースコードを貼り付けてもチェックできます。

なお、Google Search Console に登録しておくと、構造化データのエラーがあった場合に通知が来るので、ミスを見逃しにくくなります。

メタデータの最適化

次に メタデータの最適化 についてです。

メタデータとは簡単にいうと、検索エンジンに表示される「タイトル」や「説明文（メタディスクリプション）」のことです。

他にも、X (Twitter) や OGP (Facebook) といったメタデータもあり、これらを最適化することで、検索結果や SNS でのシェア時に表示される情報をコントロールできます。

デベロッパーツールでページの要素を見たときに <meta xxx> と表示されている情報のことですね。

タイトルや説明文が検索結果に出たときにユーザーに興味を持ってもらえるよう、設定しておくのがおすすめです。

参考：メタタグ（meta タグ）とは？SEO への影響と重要な 7 つのタグの最適化について解説

Learning Next ではページごとに動的に（固定ではない形で）メタデータを設定できるようにしていますが、面倒だったら固定でもいいかなとも思っています。

パンくずリストの実装

訪問者がサイト内でどの位置にいるのかを示すために、パンくずリスト も実装しています。

パンくずとは、サイトの階層構造を示すリンクのことです。

たとえば ホーム > Udemy講座 > 講座詳細 > 講座名 のように設定し、サイト内の現在地をユーザーに教えるために使えます。

これがあるとユーザーが使いやすいだけでなく、サイトの構造を Google のボットが認識しやすくなるので、SEO にも効果的です。

こうした小さな工夫の積み重ねが、最終的には検索エンジンに好まれるサイトへとつながると思っています。

個人開発だからこそ、細かいところまで自分のペースで作り込めるのが醍醐味ですね。

参考：パンくずリストとは？種類・設置方法・SEO メリットを解説

Core Web Vitals の最適化

ここ数年、Google は Core Web Vitals という指標を重視しています。

すごーく簡単に言うと、 ユーザーにとって使いやすいページかどうか を測る指標です。

参考：Core Web Vitals と Google 検索の検索結果について

たとえば、以下のような指標があります。

ページの読み込み速度
初期表示までの時間
ページのレイアウトの安定性（ロード完了後にコンテンツがどれだけ動くか）

どれもこれもユーザー体験に直結する指標であり、Google では検索結果に表示されるページのランキングにも影響を与えるとされていますので、ここは重要なポイントです。

試しに、自分のサイトを PageSpeed Insights でチェックしてみると、どの部分が改善の余地があるかがわかります。

たとえば、フロントエンドエンジニア(React)を目指す学習ロードマップというページで見てみると、以下のような情報が出ます。

はっきりと合格か 不合格 かが出るので、意外とわかりやすいものです。

開発中であるなどの理由でローカルでしか動かせないのであれば、**LightHouse という Chrome の拡張機能、またはデベロッパーツールからもチェックできます。

参考：Lighthouse とは？Google 公式 SEO ツールの機能と改善法を解説！
参考：Lighthouse の概要

中身としては PageSpeed Insights とほぼ同じです。

別なページで計測してみました。

ちなみに「パフォーマンス」という項目もいくつかの指標に分かれており、Learning Next の一部ページだと FCP(Fist Contentful Paint) という指標が黄色信号になっていますね。

これは「初期表示までの時間」を示す指標で、ユーザーが最初のコンテンツを見るまでの時間が長いと、その間に離脱率が上がる可能性があるため、改善が必要とわかります。

リリース後、丸々 1 ヶ月ぐらい はこれら Core Web Vitals の指標を改善するために努力しました。

正直、機能追加やコンテンツ作成より、この作業が一番時間がかかりましたが、その分検索エンジンからの流入が増えたので、やってよかったと思っています。

なお、Google Search Console にサイトを登録しておくと、問題があるページを教えてくれるので、こちらもおすすめです。

ちなみに Vercel だと、1 つパッケージを入れるだけで、実際にユーザーアクセスに基づき、ページごとに継続監視できます。

React や Next.js で開発している方は、入れてみるといいでしょう。

参考：vercel の Web Analytics を Next.js のプロジェクトに導入する

ページ読み込み速度の最適化

Core Web Vitals の一部にもなっている「ページの読み込み速度」ですが、これはユーザー体験に直結する指標です。

ページが遅いと、ユーザーは離脱してしまう可能性が高まりますので、できる限り速くすることが大事なのは言うまでもありません。

Learning Next では大量のデータを扱う中、以下のような工夫をしてページ読み込み速度を向上させています。

優先的に表示したいコンテンツだけ最初に読み込む
初期表示で見える範囲だけ最初に読み込む
キャッシュを活用して再読み込み時の速度を向上させる
Next.js の SSG を使って事前にページを生成しておく

特に、コンテンツの読み込みを遅延 させることで、初期表示までの時間を短縮する工夫が効果的だったと思います。

難しく聞こえるかもしれませんが、言うなれば「ちょっとずつ表示させる」工夫です。

参考：【初学者向け】React 超簡単なパフォーマンス改善方法

JavaScript の知識が必要になりますが、React や Next.js などのフレームワークを使うと、このあたりの最適化が比較的簡単にできるのでおすすめです。

ただし、適当に実装すると、 読み込み完了時に画面が崩れる などの問題が発生することもあり、結果的に UI/UX が悪化することもあるので、慎重に対応することが大事です。

そのため、読み込み中にも要素の高さを確保する CSS を適用したり、読み込み中のアニメーションを表示するなど、ユーザーに対してわかりやすい対応を心がけています。

参考：CLS とは？スコアが悪化する 3 つの原因と改善方法 3 選

モバイルフレンドリー対応

最後に、地味に意識しておきたいのが モバイルフレンドリー対応 です。

簡単に言うと、「スマホでも快適に閲覧できるようにする」ということです。

Google では 2018 年から、モバイルファーストインデックスという指標を導入しており、スマホで快適に閲覧できるかどうかが検索順位に影響を与えるようになっています。

参考：モバイルファーストインデックスの展開

昨今、スマホで閲覧する人も多いので、モバイルフレンドリー対応は必須と言えるでしょう。

（自分が何年も前に Ruby on Rails で作ったポートフォリオは、今思えばスマホでは文字が小さく、メニューもまともに操作できないような状態でした...）

具体的な考え方などは、Google 公式を参考にしています。

参考：モバイルサイトとモバイルファーストインデックスに関するおすすめの方法

慣れていない方は、まずは レスポンシブデザイン だけでも始めるといいかもしれません。

これは、スマホやタブレットなど、さまざまなデバイスに対応できるデザインのことです。

たとえば、Learning Next では、パソコンとスマホで一部表示が変わるように設定しています。

また、スマホ特有の操作性を考慮してこだわったポイントがあるので、参考になればと思い詳しくご紹介します。

アコーディオンでスペースを有効活用

あまり長い文章が最初から表示されると、スマホ画面ではスクロールが必要になります。

その場合、スクロールが面倒になる上、全貌がわからず離脱される可能性があるため、アコーディオンを使って折りたたみ表示にしています。

アコーディオンが閉じている時：

アコーディオンを開いた時：

フローティングアクションボタンでスムーズな移動

先述の通り、あまりにも長いページだとスクロールが面倒になります。

そのため、一部のページでは「フローティングアクションボタン」という、右下に固定されたボタンを設置しています。

押すと、このように目次が開き、スマホでも快適に移動できるようになっています。

こういった、ユーザーの操作をちょっと便利にする機能も、モバイルフレンドリー対応の一環として取り入れています。

また、最初からあえて出さず、スクロールして一定以上移動したときに表示されるボタンもあります。

初期表示時：

スクロール後：

これは、ある程度コンテンツを読んでから行なって欲しいアクションを促すための工夫です。

最初から「見てみて！」とアピールするとうるさく、敬遠されてしまうかもしれません。

そのため、興味を持ってコンテンツを読み、スクロールしてくれたユーザーにだけ表示されるようにしています。

サイドバーをドロワーにして縦長画面に合わせる

Udemy 講座をトピック別に検索する際、パソコンではサイドバーに「受講生数」「評価」などでのフィルタや、ソート機能を表示しています。

しかし、スマホで同じく横に表示したり、常時表示するとスペースを占有してしまうので、押すと開く ドロワーメニュー にしています。

折りたたみにも通ずるところですが、ドロワーメニューはスマホ画面に合わせて、スペースを有効活用できるのでおすすめです。

（ただし、ドロワーメニューは使いすぎるとユーザーが見落とす可能性もあるので、使いどころを考える必要があります）

運用コストはどうなってる？

Web アプリは自分で環境を用意してあげる必要があるので、運用コストも気になるところですよね。

本アプリはメインは Next.js で構築しているため、 Vercel でデプロイしています。

データベースには Supabase の無料プランを使っています。

参考：Supabase とは？主な機能や Firebase との違い、使い方を解説

無料プランだと自動バックアップが無いなど制限はあるものの、そこは自分でバックアップを取るなどの対応をすれば問題ないと判断しました。

ちなみに、Vercel は Pro プラン を使い、月額 $20 ほどのコストがかかっています。

参考：Vercel Pricing

趣味で使う分には無料の Hobby プランでも十分ですが、収益化するアプリには使えない規約があるため、Pro プランを選択しました。

それでも、月額 $20 は十分にコストを取り戻せる範囲だと考えているので、今後も継続していく予定です。

また、一部 API には Ruby on Rails を使っているため Render.com でデプロイしています。

Neon という無料データベースと組み合わせ、無料で運用できているので、バックエンドにはコストがかかっていません。

参考：【2025年版】Render.comとNeonでRailsアプリを無料デプロイする方法

おわりに

個人開発は、アイデアを形にする楽しさや、自分のペースで作業できる自由さがあります。

しかし、一方で 誰も使ってくれない... という、新たな課題も抱えることがあります。

それでも SEO 対策 などの工夫をすることで、検索エンジンからの流入を増やすことができることが分かったかと思います。

好評であれば、よりノウハウを詳しく解説したり、他の個人開発者の方にも活かせるような情報を提供していきたいと考えています！

サービスに関するフィードバックや感想は大歓迎です！

X (Twitter) や、Qiita のコメントなどでお知らせいただけると嬉しいです。

最後までお読みいただき、ありがとうございました！

参考になるところがあれば、ぜひ「いいね」やシェアをしていただけると嬉しいです！！！！！！

付録：今まで学んできた中で特に役立った Udemy 講座

せっかくなので、未経験からのエンジニア転職〜個人開発までに使ってきた Udemy 講座（のレビュー分析）を紹介します。

ここまでのレベルに至るまでに特に役立った、おすすめの講座だけをピックアップしています。

全部を受講する必要はないですが、自分に足りない部分を補うために、必要な講座を選んでいただくと良いかもしれません。

ちょっと宣伝：オリジナル Udemy 講座のクーポン配布中！

本業のかたわら プログラミングスクールのメンターとして数百名を指導 してきました。

そんな中、「もっと多くの人にプログラミングを学んでもらいたい」 という思いから、オリジナルの Udemy 講座を作成しています。

それぞれ 1,500 円 で受講できるクーポンを配布していますので、ぜひご利用ください！

当サイト限定！オリジナル Udemy 講座の特別割引クーポン一覧

467

490

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up