今回は実際にユーザーに使われるサービスを作りたい方に向けて、大学生の頃から現在まで10個以上の個人開発のサービスを作ってきた経験から得た知見をお伝えします。

なお、単純に技術力向上が目的の場合は、この記事で紹介する「集客」や「マネタイズ」といった観点は気にする必要はありません。

まずは自分の目的を明確にすることから始めましょう！

個人開発の目的を明確にする

個人開発には大きく分けて3つの目的があります。

1. 技術的な学習

• 新しい言語やフレームワークの習得
• アーキテクチャの理解
• 技術的チャレンジ

→ この場合は以降で説明する「ユーザー獲得」や「マネタイズ」は気にする必要なし

2. ポートフォリオ作成

• 転職や就職の際のアピール
• 技術力の可視化
• コーディングスキルの証明

→ この場合も「収益化」よりも「技術の見せ方」を重視

3. サービス運営・収益化

• 実際のユーザーに使ってもらう
• 継続的な収益の獲得
• サービス運営の経験を得る

→ この場合は以降で説明する内容が重要

サービス運営から得られる学び

実際にユーザーに使われるサービスを作ると、会社員エンジニアとして働いているだけでは得られない多くの学びがあります。

これらの経験は、エンジニアとしての視野を大きく広げてくれます。

1. 収益の仕組みの理解

広告収入の仕組みについて、実際に運用してみて初めて細かい部分が見えてきました。

• インプレッション単価は季節や時間帯でかなり変動する
• クリック単価は業界によって大きく違う（金融系は高め、エンタメ系は低めなど）
• 成果報酬型広告は条件が合えば収益性が高い
• 純広告は安定収入になるけど、営業力が必要
• 動画配信型広告など新しい媒体が出てくる

正直、これらは実際にやってみないと分からないことばかりでした。

2. 運用コストの現実

サービスの運用には意外と多くのコストがかかることを、実際に運営してみて初めて実感します。

特に自分の場合、最初は「無料枠でなんとかなるだろう」と思っていたのですが、ユーザーが増えるにつれて様々なコストが発生してきました。

サーバー費用はアクセス数と比例して増加し、最初は無料枠で収まっていても、徐々にコストが発生してきました。

他にもドメイン代、データベースやストレージなどの費用が発生します。

急なアクセス増に対応するための余裕を持たせる必要がある場合は、それに伴うコストも考慮が必要です。例えば、SNSで拡散された時の一時的なアクセス増にも耐えられる設計が必要です。

3. ユーザー対応の重要性

サービスを運営する上で、ユーザーとの関係構築は重要です。

サービスを運営していくと問い合わせが発生してきます。ユーザーからのバグ報告はしっかりと受け止め、迅速に対応する必要があります。

お問い合わせに対して真摯に対応していくことでユーザー価値を届けることの大切さを学ぶことができます。

また、同じような質問が多いため、FAQ作成など効率化が必要になります。

機能要望について全ての要望に応えることはできませんが、優先順位をつけて計画的に対応することが重要です。

アイデアの見つけ方

自分の経験から言えば、最も取っ掛かりやすいのは自分自身が本当に必要としているものです。

自分が実際に困っている問題など、毎日の生活や仕事で「これ、面倒だな」と感じることをメモしておくと良いです。また、同僚や友人の愚痴や相談の中にも、サービスのタネは隠れています。

他にもよく使うサービスの「ここが使いづらい」という点も、新しいサービスのヒントになります。

アイデアが思いついたら、実際に需要があるか確認します。XなどのSNS検索で「〜できない」「〜めんどくさい」などのネガティブなキーワードで検索すると、潜在的なニーズが見つかります。

アイデアの検証ステップ

アイデアが固まったら、本格的な開発に入る前に必ず検証を行います。ここでの検証が甘いと、後々大きな手戻りの原因となります。

1. 競合分析

競合サービスの機能を一覧表にまとめ、どの機能が本当に必要とされているのかを見極めます。

例えば、私の場合は競合を全てスプレッドシートにまとめ、本当に使われている機能を洗い出しました。

差別化ポイントとして「より良い」ではなく「異なる」アプローチを見つけることが重要です。例えば、競合が機能の豊富さを売りにしているなら、あえてシンプルさを極めるという選択肢もあります。

2. ユーザーヒアリング

実際のユーザーの声を聞くことで、思い込みに気づくことができます。

知人や同僚など最初は身近な人に協力してもらいましょう。「このサービスがあったら使う？」ではなく、「現在どうやってこの問題を解決しているか」を聞くのがポイントです。

サブスクや買い切りなどの場合は「いくらなら払えるか」を具体的に聞きます。この時、「月額いくら？」ではなく「この問題を解決するためにいくらまでなら払えるか」という聞き方をすると、より正確な答えが得られます。

また「いつ」「どこで」「どんな時に」使うのかを具体的にイメージしてもらいます。これにより、見落としていた機能要件が見つかることもあります。

MVP（最小機能）の設計

ここからが実際の開発フェーズです。MVPは「必要最小限の機能を持つ製品」という意味ですが、重要なのは「最小限」であることです。

例として、以下の3つの質問全てに「YES」と答えられる機能のみを実装します。

1. 必要最低限の機能か？

「あったら便利」と「なければ困る」は明確に区別します。

例えばタスク管理アプリなら、タスクの追加・編集・削除は必須ですが、タグ付けは必ずしも最初から必要ではないです。

なくても代替可能な機能は後回し、例えば、カレンダー連携は便利ですが、最初は手動で日付を入力してもらうことで代替できます。

ヒアリングで得た情報をもとに、ユーザーが本当に必要な機能を見極めます。

2. 2週間以内に実装可能か？

開発期間が長くなると、モチベーション維持が難しくなります。

未経験の技術を使う場合は、学習時間も含めて見積もります。機能ごとに必要な作業を細かく分解し、現実的な工数を見積もります。

特に外部サービスとの連携や、初めて使う技術については、予期せぬ問題が発生する可能性を考慮します。

3. 検証可能な価値を提供できるか？

特に最初はユーザーからフィードバックが得られる機能を考慮します。

ユーザーの課題をどの程度解決できるのか、具体的に説明できる必要があります。

また、ユーザーの行動や反応を測定できる機能であることが重要です。この辺りはGoogle AnalyticsやSearch Console、Clarityなどを導入すると良いかと思います。

フィードバックをもとに、どのように改善できるかが具体的にイメージできるとなお良いです。

運用コストを考える

個人開発では、運用コストの管理が特に重要です。

最初は無料枠の範囲内で始められるサービスを選ぶと良いと思います。例えば、Vercel + Supabase、Firebase、Herokuなど。

また自動化できる部分は最大限自動化し、運用の手間を減らします。

マネタイズプランの検討

個人開発でのサービス運営でよく見かける失敗の一つが、マネタイズプランを後回しにすることです。なぜなら運用コストが発生すると赤字になり続けるので、サービス運営をすることが困難になるからです。

最低でも運営コストを稼げるくらいのマネタイズを考えておくと良いでしょう。

個人開発の開始前から以下の点を検討しておく必要があります。

1. 収益モデルの選択

サービスの性質に合わせて、適切な収益モデルを選択します。例えば以下などがあります。

広告収入

• メリット：ユーザーの金銭的負担がなく、導入が容易
• デメリット：安定した収益を得るには大量のPVが必要
• 具体例：月間10万PVで1-2万円程度の収入が目安
• 向いているサービス：情報提供系、メディア系

サブスクリプション（月額課金）

• メリット：安定した収益が見込める、売上予測がしやすい
• デメリット：継続的な価値提供が必要、解約率の管理が重要
• 具体例：月額500円×継続ユーザー100人で月5万円の収入
• 向いているサービス：ツール系、サービス系

プラットフォーム手数料

• メリット：取引規模に応じて収益が増加、ユーザー同士の取引から収益化
• デメリット：両面市場の運営が必要、初期の流動性確保が課題
• 具体例：取引額の3-15%程度を手数料として徴収
• 向いているサービス：マッチングサービス、マーケットプレイス
• 補足：出品手数料、決済手数料、プレミアム掲載料など複数の収益源を組み合わせることも

ライセンス販売

• メリット：一度の開発で複数回販売可能
• デメリット：継続的なアップデートやサポートが必要
• 具体例：永続ライセンスを1-5万円で販売
• 向いているサービス：デスクトップアプリ、専門的なツール

フリーミアム

• メリット：導入障壁が低く、優良ユーザーの囲い込みが可能
• デメリット：無料ユーザーのコスト負担、機能分けの難しさ
• 具体例：基本機能は無料、高度な機能は月額課金
• 向いているサービス：SaaS、モバイルアプリ
• 補足：無料プランと有料プランの機能差を明確に

アフィリエイト/紹介料

• メリット：初期投資が少なく、成果に応じた収益
• デメリット：提携先の選定や関係維持が重要
• 具体例：商品紹介による成果報酬、ユーザー紹介料
• 向いているサービス：情報メディア、比較サイト
• 補足：主要な収益源として、または副収入として活用可能

個人開発の場合、最初は1つのモデルからスタートして、サービスの成長に合わせて他のモデルを追加していくのがおすすめです。

例えば、最初は広告収入からスタートし、ユーザーが増えてきたらプレミアム機能を追加してサブスクリプションを導入する、といった具合です。

個人開発では、全てを完璧にする必要はないです。まずは最小限の体制を整え、サービスの成長に合わせて徐々に改善していきましょう。

特に初期は、自動化できる部分は積極的に自動化し、人的リソースはサービスの改善や新機能の開発に集中することをおすすめします。

結果はそんな重要じゃない

色々書きましたが、これらをやるのはぶっちゃけめんどくさいです。ここまでしてユーザーが集まらなかったらとか1円も稼げなかったらどうしようとかやってて思いがちですが、個人的にあまり意識しすぎない方が良いと思ってます。

これらに挑戦したこと自体に価値があり、それぞれ実践してアウトプットすることで確実に自分の経験となり、キャリアップや想定外のところで活きてきます。

つまり、やること自体、自分にプラスになっていると意識すると良いと思ってます。結果的にダメでも学びや気づきがあるので、過程を楽しむと良いと思います。

まずはやってみよう！

この記事に書いたことは、あくまでも私の経験からの「こうじゃないかな」という考えで、人によって正解は違うと思います。
正直、最初から全部完璧にやろうとする必要はありません。

この記事に書いてあることを頭の片隅に置きつつ、まずは自分で何かアクションを起こしてみることをおすすめします。

例えば、気になる技術でとりあえず何か作ってみる、小さなツールでもいいので公開してみる、広告を入れてみて収益の仕組みを体験するなど実際に動いてみると、必ず何かしらの気づきがあります。

私も最初は全然うまくいきませんでしたが、少しずつ試行錯誤する中で、だんだんコツが掴めてきました。

大事なのは、完璧を目指すことではなく、実際に動いて学びを得ること。この記事が、皆さんの最初の一歩を踏み出すきっかけになれば嬉しいです！

目的

• カードコンポーネントの画面表示を検知
• GTM経由でGA4にイベントを送信
• 表示データの分析

実装フロー

1. Vueコンポーネントで要素の表示を検知
2. dataLayerにイベントをプッシュ
3. GTMでイベントを捕捉
4. GA4にデータを送信

Vueコンポーネントの実装

import { ref, onMounted } from 'vue'

interface Props {
  items: Array<{
    id: string
    title: string
  }>
}

const props = defineProps<Props>()
const itemRefs = ref<any[]>([])

onMounted(() => {
  itemRefs.value.forEach((elementRef, index) => {
    if (!elementRef) return

    const observer = new IntersectionObserver((entries) => {
      if (entries[0].isIntersecting) {
        const item = props.items[index]
        // dataLayerにイベントをプッシュ
        window.dataLayer?.push({
          event: 'item_view',
          item_id: item.id,
          item_title: item.title,
          eventModel: {
            send_to: 'G-XXXXXXXX'
          }
        })
        observer.disconnect()
      }
    })

    observer.observe(elementRef.$el || elementRef)
  })
})
</script>

<template>
  <div>
    <div
      v-for="(item, index) in items"
      :key="item.id"
      :ref="el => itemRefs[index] = el"
    >
      <!-- カードの内容 -->
    </div>
  </div>
</template>

ref配列の使用

itemRefs配列を使って、複数のカードコンポーネントへの参照を管理しています。Vue3のref属性の動的な割り当てを活用しています。

Intersection Observer APIの設定

各カードごとに個別のObserverを作成しています。一度表示を検知したらdisconnect()で監視を停止し、重複計測を防止します。

dataLayerへのデータ送信

カードのIDとタイトルを送信し、eventModelを使って送信先のGA4を指定しています。

GTMの設定

続いて、Google Tag Managerの設定手順です。

1. 変数の設定

まずは、dataLayerから送信されたデータを受け取るための変数を設定します。

GTMの変数設定で以下の2つを作成します。

【Item ID変数の設定】
- 変数名: Item ID
- 種類: データレイヤー変数
- データレイヤー変数名: item_id

【Item Title変数の設定】
- 変数名: Item Title
- 種類: データレイヤー変数
- データレイヤー変数名: item_title

これらの変数は、後ほどGA4にデータを送信する際のパラメータとして使用します。

2. トリガーの設定

次に、イベントを検知するためのトリガーを設定します。

【トリガーの設定】
- トリガー名: Item View
- トリガータイプ: カスタムイベント
- イベント名: item_view

このトリガーは、dataLayerにプッシュされたitem_viewイベントを検知します。

3. タグの設定

最後に、GA4にデータを送信するためのタグを設定します。

【タグの設定】
- タグ名: GA4 - Item View
- タグタイプ: Google タグ
- 測定ID: G-XXXXXXXX

イベントパラメータ:
- item_id: {{Item ID}}
- item_title: {{Item Title}}

GA4での設定と分析

カスタムディメンションの設定

GA4でデータを分析するために、まずカスタムディメンションを設定する必要があります。

管理画面から以下のディメンションを作成します。

1. Item ID（イベントスコープ）
2. Item Title（イベントスコープ）

レポートの作成

探索レポートを使って、以下のように分析が可能です。

• ディメンション：Item Title
• 指標：イベントカウント
• フィルター：イベント名 = item_view

これにより、各カードの表示回数を確認できます。

デバッグのポイント

1. GTMのプレビューモード

GTMのプレビューモードでは以下を確認します。

• dataLayerにイベントが正しく送信されているか
• 変数が期待通りの値を取得できているか
• タグが正しいタイミングで発火しているか

2. GA4のデバッグビュー

GA4のデバッグビューでは

• イベントが正しく送信されているか
• パラメータが正しく設定されているか

を確認できます。

よくあるトラブルと解決方法

イベントが発火しない

• dataLayerの実装を確認
• コンソールでエラーがないか確認

パラメータが取得できない

• GTMの変数名が正しいか確認
• dataLayerの構造を確認

GA4にデータが反映されない

• 測定IDが正しいか確認
• 最大48時間の遅延を考慮

→ 実際に24時間くらいデータが反映されず、実装が間違っているのかと見直していましたが時間が経てば反映されてました

参考リンク

Google Analytics for developers  |  Google for Developers

developers.google.com

デベロッパー向け Google アナリティクス  |  Google Analytics  |  Google for Developers

developers.google.com

SEOとは

Search Engine Optimizationの略で、日本語でいう検索エンジン最適化のことです。

Googleなどの検索エンジンにWebサイトの内容を理解しやすいように最適化します。

よく言われるSEO対策とは、検索エンジンからサイトに訪れる人を増やすことで、Webサイトの検索順位を上位に表示させる施策のことを指します。

検索結果でサイトが上位表示されれば、見込み客にアプローチできたり、広告と同等、あるいはそれ以上の集客効果を得られる可能性が高まります。

検索エンジンの3つの働き

検索エンジンとは、Googleなどにキーワードを入れて該当するウェブページを検索する機能のことです。検索エンジンには以下の3つの働きがあります。

① クロール：検索エンジンの巡回システム

→ クローラーと呼ばれる巡回プログラムが世界中のWebサイトの情報を集めており、この巡回する働きをクロールと言います。

② インデックス：クローラーが集めたWebサイトのHTMLに記載された情報を格納

→ 世界中で集めたWebサイト情報を検索エンジンのDBに格納しており、検索エンジンでヒットしたキーワードに関する情報を即座に表示しています。

③ ランキング：類似サイトに比べてどの程度専門性や独自性が高いかを評価

→ Googleが独自のルールに基づいて日々アップデートしている、ランキングアルゴリズムによって決定されます。

SEO対策していないとどうなるのか

SEO対策ができてないと認知・集客において不利になります。自分のWebサイトが検索してもヒットしない、または知ってもらうための導線がないという状況になってしまいます。

例）ラーメン屋を開業したとして、お店の名前を検索してもヒットしない

→ お店を知っている人に情報提供できない

または店名のみでしか検索にヒットしない

例）ラーメン屋の名前でヒットするが、それ以外ではヒットしない

→ お店を知っている人にしか情報提供できない

理想の状態

店名でもキーワードでもお店を知ってもらえるのが理想の状態です。

例）店名ではもちろん「池袋 豚骨ラーメン」で自分のラーメン屋がヒットする

→ 検索結果で上位表示されていると、自分のお店を知らない人にも認知・集客ができる

見込み客が検索するキーワードで検索結果に上位表示されている状態を目指します。

SEO対策のメリット

認知・集客の向上

検索順位が上位に表示されることで認知・集客ができます。

広告費がかからない

リスティングなどの広告費をかけずに集客をすることができます。

継続的な集客を見込める

定期的なSEO対策の見直しや改善を行うことで、継続的な集客を見込めます。SNSでバズってその時だけしかアクセスがないといったことが少なく、安定して集客することができます。

潜在客にもアプローチしやすい

検索キーワードによっては潜在客にもアプローチすることができます。

ブランディングの向上

特定の検索キーワードの検索結果に上位表示し続けることによって、ブランドイメージを伝えることができます。

SEO対策のデメリット

成果が出るまでに時間が必要

SEO対策の効果が出るまで数ヶ月から数年単位で時間がかかります。

専門知識が必要

SEO対策するには一定専門知識が必要になります。自分で学習するまたは専門家の方に協力して対策していくことになります。

定期的なアルゴリズム変動の影響を受ける

Googleが検索順位を決定させるアルゴリズムが定期的に変更されます。その変更によってサイトの順位が大きく下がったりすると、集客やブランディングに大きく影響を受ける場合があります。

SEOの3要素

① コンテンツ要素：ユーザーのためになっているページになっているか

② 内部要素：検索ロボットが認識しやすく、訪問者にとって使いやすいWebサイトになっているか

③ 外部要素：訪問者の数や滞在時間、他のWebサイトで紹介されている数や紹介しているWebサイトの質

これらの3要素を組み合わせた数百以上の指標から検索順位が決定されます。

まとめ

SEO対策を行うことで中長期的な認知・集客が見込むことができます。

また、検索意図を考えて開発・コンテンツ作りをしていくことが大切です。

どのようなサイト構成にするとユーザーにとって使いやすいか、どのようなコンテンツがユーザーにとって有益なのかを常に考えながら作ることが必要です。