このレッスンでやること
前回でアプリはデプロイ完了しました。今回は、公開後に「入れておいたほうがいい」サービス・設定を 5つ紹介していきます。どれもClaude Codeと一緒に使うと効果が高いものばかりです。
1. Google Search Console
SEO、つまりGoogle検索に自分のアプリを表示させるためのGoogle公式サービスです。初めての方は「今すぐ開始」ボタンから始められます。サイト登録やTXTレコードでの所有者確認など初期設定が必要ですが、手順に従うだけで組み込めます。
導入するとGoogleの検索データベースにページを インデックス(登録)できるようになり、SEO対策によって順位を上げていけるスタートラインに立てます。
サイトマップとrobots.txtもセットで
サイトマップはサイト内のページ構成を一覧化した「地図」です。Search Consoleに読み込ませると、通常より早くGoogleにインデックスされます。Next.jsなら sitemap.ts ファイルで生成できます。
robots.txtは「サイトマップはここ」「ここはインデックスしないで」という指示書です。サイトマップとセットで登録しましょう。
Claude Codeへの依頼例:
sitemap.ts と robots.ts を Next.js で作成してください2. Google Analytics
アクティブユーザー数、リアルタイム訪問者、閲覧ページなどを可視化するアナリティクスサービスです。例えば「どのページで離脱されているか」といったファネル分析が可能で、アプリ改善の負り不可欠ツールになります。
さらにMCPサーバーも提供されているため、Claude Codeと連携して「ファネル分析して」と依頼するだけでボトルネックを提示してくれるようになります。データドリブンなアプリ改善が可能になるため、本格運用するなら必須です。
PostHog という選択肢も
Google Analytics以外にも、PostHogというサービスもあります。こちらも同様にボタンタップやページ遷移を詳細に記録できます。同様にMCPサーバーもあるので、Claude Codeとの連携も可能です。導入も比較的簡単なので、試してみる価値はあります。
3. カスタムドメイン
Vercelにデプロイしたたばかりだと、URLは xxxxx.vercel.app というサブドメインになります。これを自分で選んだドメイン(例: yourname.com)にしようというのがカスタムドメイン設定です。
購入サービス
- Vercel Domains: Vercel プロジェクト画面 → Domains タブ → Buy で購入できる。購入と同時にプロジェクトと紐付けされるのが便利。初年度安いセールもある(8〉.99ドルなど)
- Cloudflare Registrar: もうひとつの選択肢。こちらも安め。Vercelとの連携も比較的簡単
カスタムドメインはブランドイメージコストに加え、SEO面でもサブドメインより圧倒的に有利です。月額で1000円未満のコストなので、本格的に運用するなら事業投資として購入をおすすめします。
4. OGP画像設定
OGP画像はSNSでURLをシェアしたときに表示されるプレビュー画像です。設定していると、X(旧Twitter)などでURLを貼るだけで自動的に画像とタイトルが表示されるため、拡散されやすくなります。
Claude Codeに「OGP画像をこれに設定して」と依頼すれば自動でコードを更新してくれます。反映されているか確認したい場合は、Vercelの「Open Graph」ツール(Deployments → Open Graph)でプレビューできます。
5. Favicon設定
Faviconはブラウザタブに表示される小さいアイコンです。これを設定しないとVercelの初期ロゴのままになってしまいます。
ロゴ画像を作って、Claude Codeに「Faviconを設定して」と依頼すればOKです。SEO効果もあり、ブランディングにもつながります。
まとめ
アプリデプロイ後に最低限設定したいのは以上の5つです。
- Google Search Console(+サイトマップとrobots.txt)
- Google Analytics または PostHog
- カスタムドメイン
- OGP画像
- Favicon
これらに加え、障害検知のための通知システムなども併せて導入するとより安全な運用が可能になります。
次のステップ
次の動画では、このアプリを今後アップデートしていく際のGitHubのブランチ運用方法について解説していきます。