0
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

育休中1ヶ月・1日2時間でAI英語学習SaaSを個人開発してローンチした話【Next.js / Groq / Clerk / Supabase】

0
Posted at

英語学習歴10年・外資系勤務・TOEIC860のフロントエンドエンジニアが、子育ての合間に「自分が欲しかったツール」を作った話です。

YouTubeを見ながら、何度も一時停止していた

10年近く趣味でゆるく英語を勉強してきた。バックパッカーで海外を回り、英語話者の友人もそれなりにいる。会話はそれなりにでき、意思疎通で困ることはあまりない。

それでも、ずっと気になっていることがあった。

自分の英語、ワンパターンなんだよなあ。

"I think〜" "That's interesting" "It's important to〜"

言いたいことは伝わる。でも、海外の友人と話していると、彼らはもっとシンプルな単語しか使っていないのに、なぜかこなれた感じがある。単語の難易度の問題じゃない。「表現の選び方」が違うのだと気づいた。

YouTubeで海外のドキュメンタリーやトークショーを見るときは、知らない表現が出るたびに一時停止してメモを取っていた。

"get the hang of it" → コツをつかむ
"pull it off"       → やり遂げる
"back me up"        → 支持する

でも、見終わるころには何をメモしたか忘れている。30分の動画で10回止めると、もはや英語学習なのかメモ作業なのかわからなくなってくる。

「このメモ作業、自動でやってくれるツールがあればいいのに」

そこから開発をスタートしました。


作ったもの

LinguistLenshttps://linguistlens.app)

YouTubeや英語記事のURLを貼るだけで、AIが「本当に使える表現」を自動で抽出・解説してくれるサービスです。

YouTubeを一時停止してメモを取る、あの作業をゼロにするのがコアコンセプトです。

主な機能

  • URL入力 → 表現自動抽出:YouTubeや英語記事のURLを入れると、ネイティブの自然な表現をAIがニュアンス解説付きで抽出
  • 日本人がパッと出てこない表現一覧:レベル別に整理
  • フラッシュカード:保存した表現を使って復習
  • 文法コアイメージ解説:ネイティブの感覚で理解するための解説ページ
  • レベル別記事:AI生成の英語学習記事
  • 音声機能:例文の発音確認

ターゲットは英語中上級者。TOEIC 700点台〜のスコアは取れるけど、会話がワンパターンで伸び悩んでいる層です。初心者向け英語学習アプリに物足りなさを感じている、でもコーチングは高すぎる、という人。自分自身がそうなので、ニーズに確信はあります。


技術構成

スタック全体像

レイヤー 技術 選んだ理由
フロントエンド Next.js(App Router) Server Componentsでバンドル最小化
認証 Clerk Middlewareだけで認証ルーティング完結
DB Supabase RLSでユーザーデータ分離、管理が楽
AI Claude API(Anthropic) 解析精度が高く、構造化出力が安定
決済 Stripe(Checkout + Webhook) 個人開発の定番。最小構成で導入
インフラ Vercel Next.jsと相性◎、インフラ管理ゼロ

AIまわりで一番時間をかけた部分

表現抽出のプロンプト設計です。最初はシンプルな指示を与えていましたが、ハルシネーションが多く、存在しない表現や不自然な解説が頻繁に出てきた。

解決策は穴埋めテンプレート形式での出力拘束です。

【出力テンプレート】
表現: [抽出した表現]
意味: [日本語で一言]
コアイメージ: [視覚的なイメージを40文字以内で]
使う場面: [具体的なシーンを20文字以内で]
例文: [原文から抜粋または類似例文]

[ ]の部分だけを埋めさせる形にしたら、品質が大幅に安定しました。LLMへの指示は「自由に書いて」より「この枠を埋めて」のほうがいい、というのは他のプロダクトにも応用できる知見だと思います。

pSEO自動記事生成(GitHub Actions)

集客の自動化として、GitHub Actionsで1日2本の英語学習記事を自動生成・公開しています。

# .github/workflows/generate-articles.yml
on:
  schedule:
    - cron: '0 0 * * *'  # 毎日UTC 0:00
  workflow_dispatch:

jobs:
  generate:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - run: npm ci
      - run: npm run generate-seo-article
      - uses: stefanzweifel/git-auto-commit-action@v5

記事の内容はAIが生成し、Next.jsのSSGで静的ページとしてビルド。サーバーコストはゼロです。これをprogrammatic SEO(pSEO)として回し、オーガニック流入の土台を作っています。

Supabase RLSの設計方針

ユーザーごとのデータ分離はRLS(Row Level Security)で実現しています。方針はシンプルで:

  • すべてのテーブルにRLSを有効化
  • auth.uid() = user_id のポリシーを基本形として統一
  • サービスロールキーはサーバーサイドAPIルートでのみ使用

個人開発でここまでやる必要があるかは議論の余地がありますが、Supabaseだとダッシュボードからポチポチ設定するだけなので、コスト対効果は高いです。


子育て中1ヶ月開発のリアル

使える時間は1日最大2時間です。子どもの昼寝の隙間1時間と就寝後。まとまった時間はほぼ取れない。

これが意外にも、開発の質を上げました。

時間がないので「今日はこのコンポーネントだけ」と範囲を決めざるを得ない。実装前に設計をきちんと考える癖がつく。試行錯誤している余裕がないから、Claude Codeで設計を相談してから書き始める。

結果として、行き当たりばったりのコードが減りました。

1ヶ月で形にできた理由を振り返ると:

  1. Clerk・Supabase・Vercel で「作るべきもの以外」を全部アウトソース
  2. Claude Code + Cursor で設計とレビューをAIに任せる
  3. 自分が欲しいものを作る から仕様で迷わない

3番目が一番大きいかもしれません。ターゲットが自分自身なので、「この機能いる?」で悩む時間がほぼゼロでした。


現在地と反省

2026年3月末にローンチしました。

作ることには自信があっても、集客は苦手——これが次の山だと実感しています。個人開発あるあるな気がしますが、正直に書いておきます。

現在はpSEOで自動記事を回しつつ、オーガニック流入が育つのを待っているフェーズです。SNS運用は試みましたが自分には合わず、書いたら放置できる施策に絞る方針に落ち着きました。個人開発者が集客まで全部やるのは本当に大変です。

英語の中上級者で「YouTubeを見ているのに表現が増えない」「会話はできるのにワンパターン」という悩みを持っている方、ぜひ試してみてください。


まとめ

項目 内容
開発期間 約1ヶ月(1日2時間)
技術スタック Next.js / Clerk / Supabase / Claude API / Stripe / Vercel
ターゲット 英語中上級者(TOEIC 700点台〜)
価格 月額980円 / 年額7,800円
現状 ローンチ済み・pSEOで集客中
0
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?