はじめに
個人開発でもWebアプリを収益化できる時代です。最も手軽な方法のひとつが Google AdSense の導入ですが、ただ登録するだけでは審査に通らないケースも多いです。この記事では、Vueなどで開発した個人Webアプリを対象に、広告を出すための ToDoリスト を紹介します。
Webアプリ収益化の基本フロー
AdSenseを利用するメリット
- 自動で最適な広告が配信される
- アクセス数に応じて収益が発生する
- 技術的ハードルが比較的低い
審査を突破するために必要なもの
- ログイン不要で読める公開ページ
- プライバシーポリシー・利用規約・お問い合わせ
- 独自性あるコンテンツ（アプリ説明・画像・FAQなど）
個人開発WebアプリのToDoリスト
1. 公開ページの用意
審査用クローラーはログインできないため、認証必須のアプリしかないと「コンテンツゼロ」と見なされます。そこで、次のような公開ページを用意しましょう。
- ホームページ（アプリ概要＋スクリーンショット＋「Googleでスタート」ボタン）
- プライバシーポリシー（Google認証・保存データの扱いを明記）
- 利用規約（禁止行為・免責）
- お問い合わせページ（フォームやメールリンク）
読者
えっ、アプリは全部ログイン後の画面なんだけど大丈夫？
ごりら
審査用に「公開ページ」を別で作ればOK！アプリ紹介や使い方を載せて、そこからログインに誘導する構成にすれば安心だよ。
2. 認証とアプリ本体の分離
ルーティングを工夫し、/ や /about などは公開、/app はログイン必須とする設計がおすすめです。Vue Routerでmeta情報を使って、未認証ユーザーは公開トップへリダイレクトする仕組みを導入しましょう。
// router.js
import { createRouter, createWebHistory } from 'vue-router'
import { getCurrentUser } from './auth' // Firebase Auth など
const routes = [
{ path: '/', component: () => import('./pages/Home.vue'), meta: { public: true } },
{ path: '/about', component: () => import('./pages/About.vue'), meta: { public: true } },
{ path: '/privacy', component: () => import('./pages/Privacy.vue'), meta: { public: true } },
{ path: '/terms', component: () => import('./pages/Terms.vue'), meta: { public: true } },
{ path: '/app', component: () => import('./pages/App.vue') } // 認証必須
]
const router = createRouter({ history: createWebHistory(), routes })
router.beforeEach(async (to) => {
if (to.meta.public) return true
const user = await getCurrentUser()
return user ? true : { path: '/' }
})
export default router
3. AdSense準備
- サイトをAdSenseに登録
- ads.txtをドメイン直下に配置
<head>にAdSenseスクリプトを追加- レスポンシブ広告をホームや結果ページに配置
<!-- headに追加 -->
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-XXXX" crossorigin="anonymous"></script>
<!-- 広告配置例 -->
<div style="min-height: 280px">
<ins class="adsbygoogle"
style="display:block"
data-ad-client="ca-pub-XXXX"
data-ad-slot="YYYY"
data-ad-format="auto"
data-full-width-responsive="true"></ins>
</div>
<script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
4. SEOとクローラ対策
- 各公開ページに
<title>とmeta descriptionを設定 - 公開ページ合計で1000文字以上のコンテンツを用意
- 可能ならSSGやプレレンダーを導入し、クローラーに確実に読ませる
5. 品質管理
- ページ速度とCLS（広告配置でレイアウトが崩れないように）を改善
- 広告クリックを促す表現は禁止
- 自分や知人で広告をクリックしない
6. プライバシーポリシーと利用規約の雛形
公開ページに配置する際のベース文例です。アプリに合わせてカスタマイズしてください。
プライバシーポリシー（例）
当サイトでは、Googleアカウントを利用したログイン機能を提供しています。
取得する情報はユーザーの基本プロフィール（メールアドレスなど）であり、記録データの保存・共有機能に利用します。
取得した情報は本人の同意なく第三者へ提供することはありません。
ユーザーはいつでも記録データを削除可能です。削除を希望する場合は、お問い合わせフォームよりご連絡ください。
利用規約（例）
本サービスは、個人の記録管理を目的としています。
ユーザーは本サービスを不正に利用しないものとします。
当サービスの利用によって発生した損害について、運営者は一切の責任を負いません。
本規約は予告なく変更される場合があります。
7. 審査と改善
まず申請して、不足があれば指摘に合わせて修正します。特にプライバシーポリシーには「保存データ」「保持期間」「削除方法」を必ず明記しましょう。
まとめ
個人開発のWebアプリでも、きちんと公開ページと規約を整えれば、AdSenseによる広告収益化は十分可能です。ポイントは「審査が読める公開コンテンツを準備する」こと。まずは最低限のページを用意して申請し、改善を繰り返していきましょう。
コメント