こんにちは、とまだです。
みなさん、個人開発はしていますか？
そして個人開発をしている方は 個人開発アプリで一発あてて月収xx万円 を夢見ていたりしませんか？
私も夢見る一人なのですが、特に「集客」や「マネタイズ」の方法に悩んでいる方も多いのではないでしょうか。
今回は、私が個人開発した Learning Next というサービスについてちょっと軌道に乗ってきたので、開発の背景から技術的な工夫まで、赤裸々にお話ししたいと思います。
この記事を読んだらわかること
この記事は、個人でサービスを作ってみたい人、特に 集客やマネタイズの方法に悩んでいる人 に向けて、以下のような内容をお伝えします。
- リリース1ヶ月での成果（理論値）
- 個人開発の Web アプリで集客を増やすための工夫
- SEO対策のポイント
- マネタイズの考え方
- ユーザー目線でのUI/UX改善
- プロの Web エンジニアが個人開発するときに意識していること
自分のためのメモという意味合いもありますが、他にも個人開発をしている方にとって参考になる情報があれば幸いです！
リリース1ヶ月での成果（理論値）
まずはマネタイズの成果から
まずは、マネタイズの成果からお伝えしましょう。
1ヶ月での収益は、5万円/月 （理論値）です。
「理論値」という言い方から分かる通り、実際にはこの金額を得ることはできていません（大げさ太郎でごめんなさい）。
2025年2月に正式リリースしてマネタイズを開始してから、最高の1日報酬が 1,620円 でしたので、31 日で約 5万円 という計算です。
ただ、最高瞬間風速とはいえ「ドメイン評価は激弱」「個別の宣伝なし」の中、Google 検索流入だけで成果が出たのは、自分でも驚きです。
後述しますが、SEO対策 といった工夫を重ねた結果、検索エンジンからの流入が増え、それが収益につながったと考えられます。
どうやって収益を得ているのか？
Learning Next では「Udemy講座のアフィリエイト」、つまり紹介した講座が購入された際に報酬を得る仕組みを導入しています。
サービスとしては LinkShare を利用しており、購入数や金額に応じて報酬が発生します。
Udemy アフィリエイトを選んだ理由
Udemy は、プログラミングをはじめとする幅広いジャンルの講座が揃っていることが大きな魅力です。
さらに、何より自分が Udemy を使って学び続けてきた経験があるので、信頼性が高いと感じていました。
このあたりは 技術ブログ の方でも使っているので、使い方を含め自信があったため、マネタイズの軸として選びました。
なぜこのサービスを作ろうと思ったのか
ではここで、一番大事な「モチベーション」についてお話しします。
未経験からエンジニアになれたことからの思い
私自身、プログラミング学習の多くをUdemyに頼ってきました。
プログラミング未経験からエンジニアになる際や、今でも新しい技術を学ぶときには、Udemyの講座を利用することが多いです。
ただ、Amazon で買い物するときもそうですが、 ハズレを引きたくはない ので講座選びにはかなり慎重になりますよね。
Udemy には5点満点の評価や受講生数から「ざっくり」と良さはわかるものの、 「自分に合った講座」を見つけるのは難しい と感じていました。
たとえば、タイトルには「入門」と書いてあるのに、実際はそこそこJavaScriptが書けないと厳しい内容だったりします。
また、講座の内容が古くなっていたり、講師の説明が分かりづらかったりすると、学習効率が落ちてしまいます。
しかし、特にプログラング初心者だと説明文からはそうしたポイントがわかりにくいですよね。
悩みを解決するサービスがあればいいなあ〜
そうした自分の悩みを解決するために、 「講座選びの難しさ」 に着目しました。
そこで人気度だとか、星評価だけでなく、 「実際に受講した人の声」 をもとに「講座の良し悪し」を客観的に評価するサービスを作ろうと思い立ちました。
やはり、実際に受講した人の声は貴重な意見ですので、 「自分に合った講座」を見つけるのに役立つ と考えたからです。
ただ、そのレビューをただ載せるだけではなく、 AI を使って自動で分析・要約 することで、多くのレビューを一気に把握できるようにしました。
なぜ「AIを使ったレビュー分析」なのか
まずモチベーションとしては AI でナウいことをやりたかった というのがあります。
が、真面目に理由を付けるなら、以下のようなメリットがあるからです。
- 多くのレビューを一気に把握できる
- 客観的な評価基準を設けられる
- 自動化により、継続的な分析が可能
- 個人開発でも大量のデータを処理できる
AI と言っても Claude のAPIを使っているだけはありますが、普段から自然言語処理に興味があったので、これを機に実際に使ってみたかったというのもあります。
また、副業でプロンプトエンジニアリングの教育業務もしているので、持っている知識を自分のアプリに活かしてみたかったというのもあります。
では、モチベーションを持ってサービスを作り始めた経緯についてはここまでにして、次に実際にどのようなサービスを作ったのか、その特徴や工夫についてお話しします！
Learning Next の特徴
さて、ここからは Learning Next の特徴や工夫についてお話しします。
個人開発のノウハウというよりは、サービスとして こだわったポイント について紹介しますので、考え方の参考にしていただければと思います。
AIを活用したレビュー分析
Learning Next では、Udemy上にある大量のレビューを Claude のAPIを使って自動で分析・分類しています。
具体的には、各講座に対して投稿されている数十件以上ものレビューをまとめて投げかけ、ポジティブな面、ネガティブな面、そして「どういう人に向いているのか」を要約させる仕組みをつくりました。
レビューからの要約例：
これにより、「レビュー全文を読み込む手間」や「単なる星評価だけではわからないリアルな声」を、要点だけピックアップして把握できます。
特にネガティブ面は、学習者にとって重要な情報ですので、これを自動で抽出できるのは大きなメリットですね。
「音声が少し聞き取りにくい」「前提知識が想像以上に必要だった」など、受講して初めて気づくようなポイントを事前に知れるので、講座選びの参考になります。
改善点を示す例：
4つの評価軸でスコアリング
レビュー分析の結果を、私は以下の4つの観点でスコア化しています。
単に「総合評価」という一括りではなく、それぞれの講座の強み弱みを 数値として比較できるようにした のがポイントです。
-
わかりやすさ（10点満点）
- 初心者がつまずきにくい構成かどうか
- 講師の説明が丁寧か、コード例が理解しやすいか
-
実践力（10点満点）
- 実務に直結するようなプロジェクトがあるか
- 応用力や最新トレンドに対応しているか
-
サポート体制（10点満点）
- 講師の質問対応は丁寧で早いか
- コミュニティや学習フォーラムが活発か
-
教材品質（10点満点）
- 動画や音声のクオリティ
- 補助資料、ダウンロード可能なリソースの充実度
受講したい講座を選ぶとき、自分が最も重視する部分は人によって違います。
「まったくの初心者なので、わかりやすさを最優先したい」「現場で使えるスキルをとにかく身につけたい」など、ニーズは多種多様です。
こうしたニーズに合わせて評価項目を参考にできるようにしました。
スコアリングの例：
（レーダーチャート実装したい）
柔軟な検索・フィルタリング
講座を探すときのキーワードや条件は、人によってさまざまですよね。
そこで、Learning Next ではカテゴリやトピックを細かく設定し、絞り込み検索をサクサクできるようにしています。
- カテゴリ別の検索（Web開発、モバイル開発、データサイエンス...）
- トピック別の検索（React、Python、AWS...）
- 人気の講座、評価の高い講座などでの絞り込み
- キーワード検索
検索画面の例：
絞り込みはユーザーのニーズに合わせて柔軟に変更できるようにしているので、自分に合った講座を見つけやすいのが特徴です。
網羅的な情報を載せるサイトこそ、ユーザーが求める情報を素早く見つけられるようにすることが大事だと考えています。
学習ロードマップの提供
これは講座のレビュー分析とは直接関係はありませんが、プログラミング学習を始める人にとっては「次に何を学べばいいのか」がわかりにくいことがありますよね。
また、検索キーワードのボリュームを見ていると「React 学習 ロードマップ」といった検索が多いことがわかっています。
そのため、 Learning Next では「フロントエンドエンジニアになりたい」「バックエンドエンジニアになりたい」といった目標に合わせた学習ロードマップを提供しています。
学習ロードマップの例：
僭越ながら、私はバックエンドやフロントエンド、インフラにクラウドと幅広い技術を使えるので、経験を活かしてロードマップを作成しました。
もちろん、自分の知識ではカバーし切れていない分野もあります。
そのあたりは参考情報はもちろん、ChatGPT / Claude の力で一部修正して、できるだけ幅広い分野で情報を提供できるようにしています。
いかにして集客するか？SEO対策のポイント
ここでは、Google 検索からの流入を増やすための SEO対策 についてお話しします。
なぜSEOが重要なのか
個人開発をしていると、「せっかく作ったサービスをどうやって多くの人に見つけてもらうか」が大きな課題になります。
何か作ったことがある人なら、 作ったのに誰も使ってくれない... という経験をした方も多いのではないでしょうか。
私は宣伝をできるコミュニティを持っているわけでもなく、あまりアピールが得意ではありません。
そのため、継続的に人を呼び込むには、検索エンジンで上位に表示される工夫が欠かせません。
このような対策を SEO（Search Engine Optimization） といいますが、当サイトではSEO対策にかなり力を入れています。
業務の中で覚えてきたSEO対策のノウハウを活かし、サイト内の構造やコンテンツ、メタデータなどを最適化しています。
他の個人開発者にも役立ちそうなところをいくつか紹介しておきます！
- 検索キーワードの調査
- 構造化データの設定
- メタデータの設定
- パンくずリストの実装
- Core Web Vitalsの最適化
- ページ読み込み速度の最適化
- モバイルフレンドリー対応
それぞれ、考え方や使ったツールを紹介しますので、参考にしてみてください。
SEO対策の成果
色んな SEO対策を行った結果、ほぼ宣伝なし＆新規ドメインであるにもかかわらず、 Google検索からの流入が増加 し続けています。
これは本当に すごーく頑張った成果 だと思っていますが、具体的にどのような工夫をしたかを紹介します。
特別なことはしておらず、色んな観点で 地道なSEO対策 を行った結果ですので、皆さんの個人開発でも参考になるかと思います！
検索キーワードの調査
まず、前提から。
なりふり構わず「自分が好きなアプリ」を作っても、残念ながら需要がなければ、検索エンジンからの流入が少ない場合があります。
そのため、ユーザーが検索するキーワードのボリュームを調査し、それに合わせたコンテンツを提供することが大事です。
このあたりは日常業務や技術ブログでの経験が活かした部分ですが、 ラッコキーワード というツールを使っています。
たとえば、ラッコキーワードを使うと、あるキーワードに対してどれくらいの検索ボリューム だったり、競合サイトの強さなどがわかります。
Learning Next においては「Udemy Python おすすめ」や「React 学習 ロードマップ」など、プログラミング学習に関するキーワードの検索上位を狙ってコンテンツを作成しています。
ただし、ユーザーの需要が多いキーワードは競合も多いため、ラッコキーワードの 「SEO難易度」 という指標を参考にしています。
他にも実際にキーワードで検索したときに、大企業や大手Webサイトが上位に表示されている場合は、正直個人では勝ち目が薄いので避ける方がベターです。
（例：SAMURAI などのプログラミングスクール大手が上位に来るキーワードなどは避ける）
これから Web アプリやサイトを立ち上げる方は、数個の検索キーワードについて Google検索上位を狙う という目標を持つと、具体的な方向性が見えてくるかもしれませんね。
構造化データの設定
ブログやコースの一覧ページなどは、Googleなどの検索エンジンが理解しやすい形で 構造化データ（JSON-LD） を埋め込んでいます。
皆さんも Google 検索をしたとき、検索結果に「星評価」や「料金」が表示されていることがありますよね。
このようにすることで、検索結果に表示される情報が充実し、ユーザーがクリックしやすくなります。
構造化データが表示される例：
これは、Google が認識できるように情報を整理して伝えているからです。
（ただし、必ずしも構造化データが表示されるわけではありません）
Learning Next でも、コース一覧や講座詳細ページに構造化データを設定しています。
デベロッパーツールで確認した構造化データの例：
結果的に、クリック率が上がり、検索エンジンからの流入が増えることが期待できます。
↑公式ドキュメントながら、わかりやすい解説がされているので、SEO対策に興味がある方はぜひ参考にしてみてください。
なお、構造化データは Google のボットがサイトをクロールする際に、ページの内容を理解しやすくするためのものです。
そのため、作ったデータ形式にミスがあると認識されなくなってしまうので、リッチリザルトテスト というツールを使って、正しく構造化データが設定されているか確認することをおすすめします。
デプロイした URL を貼ってもいいですし、ブラウザ上からデベロッパーツールで確認したソースコードを貼り付けてもチェックできます。
Python 講座の分析結果ページ をリッチリザルトテストにかけた例：
メタデータの最適化
次に メタデータの最適化 についてです。
メタデータとは簡単にいうと、検索エンジンに表示される「タイトル」や「説明文（メタディスクリプション）」のことです。
他にも、X (Twitter) や OGP (Facebook) といったメタデータもあり、これらを最適化することで、検索結果や SNS でのシェア時に表示される情報をコントロールできます。
デベロッパーツールでページの要素を見たときに <meta xxx> と表示されている情報のことですね。
タイトルや説明文が検索結果に出たときにユーザーに興味を持ってもらえるよう、設定しておくのがおすすめです。
Learning Next ではページごとに動的に（固定ではない形で）メタデータを設定できるようにしていますが、面倒だったら固定でもいいかなとも思っています。
パンくずリストの実装
訪問者がサイト内でどの位置にいるのかを示すために、パンくずリスト も実装しています。
パンくずとは、サイトの階層構造を示すリンクのことです。
たとえば ホーム > Udemy講座 > 講座詳細 > 講座名 のように設定し、サイト内の現在地をユーザーに教えるために使えます。
パンくずリストの例：
これがあるとユーザーが使いやすいだけでなく、サイトの構造を Google のボットが認識しやすくなるので、SEO にも効果的です。
こうした小さな工夫の積み重ねが、最終的には検索エンジンに好まれるサイトへとつながると思っています。
個人開発だからこそ、細かいところまで自分のペースで作り込めるのが醍醐味ですね。
Core Web Vitalsの最適化
ここ数年、Google は Core Web Vitals という指標を重視しています。
すごーく簡単に言うと、 ユーザーにとって使いやすいページかどうか を測る指標です。
たとえば、以下のような指標があります。
- ページの読み込み速度
- 初期表示までの時間
- ページのレイアウトの安定性（ロード完了後にコンテンツがどれだけ動くか）
どれもこれもユーザー体験に直結する指標であり、Google では検索結果に表示されるページのランキングにも影響を与えるとされていますので、ここは重要なポイントです。
試しに、自分のサイトを PageSpeed Insights でチェックしてみると、どの部分が改善の余地があるかがわかります。
たとえば、フロントエンドエンジニア(React)を目指す学習ロードマップ というページで見てみると、以下のような情報が出ます。
はっきりと 合格 か 不合格 かが出るので、意外とわかりやすいものです。
開発中であるなどの理由でローカルでしか動かせないのであれば、**LightHouse という Chrome の拡張機能、またはデベロッパーツールからもチェックできます。
中身としては PageSpeed Insights とほぼ同じです。
別なページで計測してみました。
ちなみに「パフォーマンス」という項目もいくつかの指標に分かれており、Learning Next の一部ページだと FCP(Fist Contentful Paint) という指標が黄色信号になっていますね。
これは「初期表示までの時間」を示す指標で、ユーザーが最初のコンテンツを見るまでの時間が長いと、その間に離脱率が上がる可能性があるため、改善が必要とわかります。
リリース後、丸々1ヶ月ぐらい はこれら Core Web Vitals の指標を改善するために努力しました。
正直、機能追加やコンテンツ作成より、この作業が一番時間がかかりましたが、その分検索エンジンからの流入が増えたので、やってよかったと思っています。
ちなみに Vercel だと、1つパッケージを入れるだけで、実際にユーザーアクセスに基づき、ページごとに継続監視できます。
React や Next.js で開発している方は、入れてみるといいでしょう。
ページ読み込み速度の最適化
Core Web Vitals の一部にもなっている「ページの読み込み速度」ですが、これはユーザー体験に直結する指標です。
ページが遅いと、ユーザーは離脱してしまう可能性が高まりますので、できる限り速くすることが大事なのは言うまでもありません。
Learning Next では大量のデータを扱う中、以下のような工夫をしてページ読み込み速度を向上させています。
- 優先的に表示したいコンテンツだけ最初に読み込む
- 初期表示で見える範囲だけ最初に読み込む
- キャッシュを活用して再読み込み時の速度を向上させる
- Next.js の SSG を使って事前にページを生成しておく
特に、コンテンツの読み込みを遅延 させることで、初期表示までの時間を短縮する工夫が効果的だったと思います。
難しく聞こえるかもしれませんが、言うなれば「ちょっとずつ表示させる」工夫です。
JavaScript の知識が必要になりますが、React や Next.js などのフレームワークを使うと、このあたりの最適化が比較的簡単にできるのでおすすめです。
ただし、適当に実装すると、 読み込み完了時に画面が崩れる などの問題が発生することもあり、結果的に UI/UX が悪化することもあるので、慎重に対応することが大事です。
そのため、読み込み中にも要素の高さを確保する CSS を適用したり、読み込み中のアニメーションを表示するなど、ユーザーに対してわかりやすい対応を心がけています。
モバイルフレンドリー対応
最後に、地味に意識しておきたいのが モバイルフレンドリー対応 です。
簡単に言うと、「スマホでも快適に閲覧できるようにする」ということです。
Google では2018年から、モバイルファーストインデックスという指標を導入しており、スマホで快適に閲覧できるかどうかが検索順位に影響を与えるようになっています。
昨今、スマホで閲覧する人も多いので、モバイルフレンドリー対応は必須と言えるでしょう。
（自分が何年も前に Ruby on Rails で作ったポートフォリオは、今思えばスマホでは文字が小さく、メニューもまともに操作できないような状態でした...）
具体的な考え方などは、Google 公式を参考にしています。
慣れていない方は、まずは レスポンシブデザイン だけでも始めるといいかもしれません。
これは、スマホやタブレットなど、さまざまなデバイスに対応できるデザインのことです。
たとえば、Learning Next では、パソコンとスマホで一部表示が変わるように設定しています。
また、スマホ特有の操作性を考慮してこだわったポイントがあるので、参考になればと思い詳しくご紹介します。
アコーディオンでスペースを有効活用
あまり長い文章が最初から表示されると、スマホ画面ではスクロールが必要になります。
その場合、スクロールが面倒になる上、全貌がわからず離脱される可能性があるため、アコーディオンを使って折りたたみ表示にしています。
アコーディオンが閉じている時：
アコーディオンを開いた時：
フローティングアクションボタンでスムーズな移動
先述の通り、あまりにも長いページだとスクロールが面倒になります。
そのため、一部のページでは「フローティングアクションボタン」という、右下に固定されたボタンを設置しています。
押すと、このように目次が開き、スマホでも快適に移動できるようになっています。
こういった、ユーザーの操作をちょっと便利にする機能も、モバイルフレンドリー対応の一環として取り入れています。
また、最初からあえて出さず、スクロールして一定以上移動したときに表示されるボタンもあります。
初期表示時：
スクロール後：
これは、ある程度コンテンツを読んでから行なって欲しいアクションを促すための工夫です。
最初から「見てみて！」とアピールするとうるさく、敬遠されてしまうかもしれません。
そのため、興味を持ってコンテンツを読み、スクロールしてくれたユーザーにだけ表示されるようにしています。
サイドバーをドロワーにして縦長画面に合わせる
Udemy 講座をトピック別に検索する際、パソコンではサイドバーに「受講生数」「評価」などでのフィルタや、ソート機能を表示しています。
しかし、スマホで同じく横に表示したり、常時表示するとスペースを占有してしまうので、押すと開く ドロワーメニュー にしています。
折りたたみにも通ずるところですが、ドロワーメニューはスマホ画面に合わせて、スペースを有効活用できるのでおすすめです。
（ただし、ドロワーメニューは使いすぎるとユーザーが見落とす可能性もあるので、使いどころを考える必要があります）
運用コストはどうなってる？
Web アプリは自分で環境を用意してあげる必要があるので、運用コストも気になるところですよね。
本アプリはメインは Next.js で構築しているため、 Vercel でデプロイしています。
データベースには Supabase の無料プランを使っています。
無料プランだと自動バックアップが無いなど制限はあるものの、そこは自分でバックアップを取るなどの対応をすれば問題ないと判断しました。
ちなみに、Vercel は Proプラン を使い、月額 $20 ほどのコストがかかっています。
趣味で使う分には無料の Hobby プランでも十分ですが、収益化するアプリには使えない規約があるため、Proプランを選択しました。
それでも、月額 $20 は十分にコストを取り戻せる範囲だと考えているので、今後も継続していく予定です。
また、一部 API には Ruby on Rails を使っているため Render.com でデプロイしています。
なお、Neon と組み合わせて無料で運用できているので、そちらはコストがかかっていません。
おわりに
個人開発は、アイデアを形にする楽しさや、自分のペースで作業できる自由さがあります。
しかし、一方で 誰も使ってくれない... という、新たな課題も抱えることがあります。
それでも SEO対策 などの工夫をすることで、検索エンジンからの流入を増やすことができることが分かったかと思います。
好評であれば、よりノウハウを詳しく解説したり、他の個人開発者の方にも活かせるような情報を提供していきたいと考えています！
サービスに関するフィードバックや感想は大歓迎です。
X (Twitter) や、Qiita のコメントなどでお知らせいただけると嬉しいです。
これからも、より良いサービスに育てていくために改良を続けていきますので、どうぞよろしくお願いいたします。
そして何より、Learning Next を通じて プログラミング学習の手助け ができれば幸いです...！！！
最後までお読みいただき、ありがとうございました！
参考になるところがあれば、ぜひ「いいね」やシェアをしていただけると嬉しいです！！！！！！
今更ながら自己紹介
フリーランスのWebエンジニアをやっています「とまだ」です。
開発においてはフロントエンドからバックエンド、インフラにクラウドまでフルスタックに何でもやっています。
あまり細かくは書きませんが、本業では月間 500万 PV 以上のサイトのフロント・バックエンド開発や、SEO 対策など幅広く対応しています。
【得意な技術スタック】
Ruby on Rails / Next.js / React / Vue.js / JavaScript / TypeScript / PHP / WordPress / Python / AWS / Linux etc
また、ありがたいことに、RSpec x Rails の講座で Udemy 公式の ベストセラー をいただいた Udemy 講師でもあります。
ちょっと宣伝：オリジナル Udemy 講座のクーポン配布中！
本業のかたわら プログラミングスクールのメンターとして数百名を指導 してきました。
そんな中、「もっと多くの人にプログラミングを学んでもらいたい」 という思いから、オリジナルの Udemy 講座を作成しています。
それぞれ 1,500円 で受講できるクーポンを配布していますので、ぜひご利用ください！
