Lovaiとは
Lovai（ラバイ）は、AIを活用したプロセスや知見を「レシピ」として構造化し、共有・収益化できるSNSプラットフォームです。 投稿は「きっかけ」「やったこと」「ハマりポイント」の3ブロック構成で、ブロック単位で公開・有料・非公開を設定できます。
- サービスURL:
- 開発者: Lovanaut（@Lovanaut）
- リリース: 2026年2月
- 技術スタック: Next.js 15 / Supabase / Stripe Connect / Cloudflare
- 開発規模: TypeScript約141,000行、709ファイル、2,380コミット
- 特徴: コード経験ゼロのPMがClaude Codeで一人開発。コードの約90%はAIが生成
Lovaiが解決する課題
X（旧Twitter）では「AIでこんなの作った」という投稿が日々流れています。しかし、プロンプトだけ見ても再現できないことがほとんどです。
再現に必要なのは以下の3つの文脈です。
- きっかけ — なぜその方法を選んだのか（背景・動機）
- やったこと — 具体的にどう進めたか（手順・ツール・設定）
- ハマりポイント — どこでつまずいて、どう乗り越えたか（トラブルシューティング）
Lovaiは、この3つの文脈を構造化して投稿できるSNSです。Xの流動性とブログ記事の深さの中間を狙ったプラットフォームとして設計しました。
Lovaiの主な機能
レシピ構造の投稿
投稿は「きっかけ」「やったこと」「ハマりポイント」の3ブロックに分かれています。各ブロックにテキスト、画像、コードブロックなどを自由に記述できます。
最小構成は画像1枚とカテゴリ選択だけです。テキストは後から追記できるので、成果物の画像だけ先に投稿し、後からプロセスを書き足すこともできます。
ブロック単位の公開設定
Lovaiの最大の特徴は、ブロック単位で公開レベルを選べることです。
| 公開レベル | 説明 |
|---|---|
| 公開（無料） | 誰でも閲覧可能 |
| プレミアム（有料） | 購入者のみ閲覧可能。最低500円から価格設定 |
| 非公開 | 投稿者のみ閲覧可能 |
例えば「きっかけ」と「やったこと」は無料で公開し、「ハマりポイント」に書いたプロンプト全文やワークフロー図だけ有料にする、といった使い方ができます。
noteやブログでは記事まるごと有料にするか全文無料にするかの二択ですが、Lovaiなら文脈のどこに価値があるかを投稿者自身が決められます。
一度無料で公開した部分を後から有料にすることはできません。課金は常に「追加の情報」に対してのみ発生します。
収益化
| 項目 | 内容 |
|---|---|
| クリエイターの取り分 | 約86% |
| プラットフォーム手数料 | 10% |
| 決済手数料（Stripe） | 約3.6% |
| 最低価格 | 500円 |
| 決済方法 | クレジットカード（Stripe Connect Express） |
6つのカテゴリ
| カテゴリ | 対象 |
|---|---|
| Dev | 開発・プログラミング |
| Writing | ライティング・文章作成 |
| Design | UI/UX・グラフィックデザイン |
| Image | 画像生成・編集 |
| Video | 動画制作・編集 |
| Analysis | データ分析・リサーチ |
エンジニアに限らず、AIを使っている全ての人が対象です。
オファー機能
投稿を見て「この人に仕事を頼みたい」と思った場合、直接オファーを送ることができます。投稿がそのままポートフォリオとして機能し、仕事の依頼につながる設計です。
ポートフォリオとしての活用
投稿が溜まると、AIスキルのポートフォリオになります。GitHubほど技術に寄る必要はなく、Behanceほど作り込む必要もありません。「自分がAIで何をやってきたか」が一覧で見える場所です。
カスタマイズ機能
Lovaiはユーザー体験のカスタマイズにもこだわっています。
- 3つのテーマモード — ライトモード、ダークモードに加え、Claude風モードを搭載。Claudeに馴染みのある配色でLovaiを利用できます。AI開発者には特に親和性の高いテーマです
- OGPカスタム — 投稿のOGP（SNSシェア時のプレビュー画像）を自分好みにカスタマイズ可能。XやSlackでシェアしたときの見栄えを自分でコントロールできます。投稿の第一印象を自分で設計できる機能です
なぜ作ったのか
私自身がAI界隈のXを見ていて「再現性がない」と感じていたのがきっかけです。プロンプト1つを見せられても、その人がなぜその方法を選び、どこで判断したかがわからない。自分が欲しいサービスがなかったので、自分で作りました。
Lovaiは3つ目のAI開発サービスです。
| サービス | 概要 | 状態 |
|---|---|---|
| Malllova | EC向け価格検知・通知サービス | 英語圏向けにピボットし運用中 |
| Sapolova | クリエイター支援コミュニティプラットフォーム | 順調に成長中 |
| Lovai | AIプロセス共有SNS | 2026年2月リリース |
これらの開発で蓄積した決済設計やAI駆動開発の知見が、Lovaiに活きています。
技術スタック
Lovaiの技術スタックは、AIとの相性を最優先に選定しました。
| レイヤー | 技術 | 選定理由 |
|---|---|---|
| フレームワーク | Next.js 15 (App Router) | Server ActionsでAPIルートを削減。Claude Codeが最も得意とするフレームワーク |
| 認証・DB | Supabase (PostgreSQL + Auth + RLS) | MCP対応でClaude Codeから直接DB操作が可能。Row Level Securityでプレミアムコンテンツを保護 |
| 決済 | Stripe Connect Express | クリエイターへの直接支払い。Sapolovaでの実装経験あり |
| CDN・セキュリティ | Cloudflare | DDoS対策、静的アセットのキャッシュ |
| スタイリング | Tailwind CSS v4 | デザイナー視点で直感的。クラス名で完結 |
| ホスティング | Vercel Pro | Next.jsとの親和性が最も高い |
AIの学習データが豊富な技術を選ぶ
Next.js、Supabase、Stripe、Tailwind CSSはいずれもClaude Codeの学習データが豊富な技術です。マイナーなフレームワークや独自パターンを使うとAIの出力精度が下がります。AI駆動開発では、AIが扱いやすい技術スタックを選ぶことが成功の鍵です。
開発の数字
| 指標 | 数値 |
|---|---|
| 開発期間 | 約2ヶ月（2025年12月〜2026年2月） |
| TypeScriptコード | 約141,000行 |
| ファイル数 | 709ファイル |
| SQLマイグレーション | 約20,000行 |
| Gitコミット数 | 2,380コミット |
| AIが書いたコード比率 | 約90% |
| 月額運用コスト | 約$345（約5万円） |
月額コストの内訳
| サービス | プラン | 月額 |
|---|---|---|
| Claude Code | Max Plan | $100 |
| ChatGPT | Pro Plan | $200 |
| Supabase | Pro | $25 |
| Vercel | Pro | $20 |
| Cloudflare | Free | $0 |
| 合計 | 約$345（約5万円） |
開発で苦労したこと
投稿フォームのUX設計
投稿のハードルを下げたい。でもスカスカな投稿ばかりだとサービスの意味がない。このバランスを取るために、数十回は作り直しました。
最も難しかったのは「書くことへの心理的なハードルを下げる」という感覚的な要件をAIに言語化して伝えることです。「項目を減らす」のではなく「書かなくてもいいけど書きたくなる」UIを目指し、プレースホルダーの例文や入力エリアの挙動を細かく調整しました。
使用感や感情の流れ、心理的な導線は、現時点のAIには判断できない領域です。ここは人間がフィードバックし続ける必要があります。
パフォーマンス最適化
ターゲットユーザーは普段からXや大手Webサービスを使っている層です。パフォーマンスの基準がXやInstagramになるため、「個人開発だから多少遅くても」は通用しません。
- Server ComponentsでクライアントへのJS転送量を最小化
- SWRで同一データの二重取得を防止
- 画像のリサイズ・圧縮・WebP変換
- Supabase RLSのクエリ最適化
- Cloudflareの静的アセットキャッシュ
非エンジニアがAI駆動開発で成果を出すためのポイント
PM出身・デザイン経験あり・コーディング経験ゼロの立場から、AI駆動開発で学んだことをまとめます。
1. 「何を作るか」を明確に言語化する力
Claude Codeは曖昧な指示には曖昧なものを返します。要件を具体的に言語化できる力が、コーディング能力より重要です。
2. 「これは違う」と判断できる目
AIの出力を「良いか悪いか」判断できないと、品質が上がりません。デザイン経験があったから「この余白はおかしい」「この遷移は不自然」と即座にフィードバックできました。
3. 完璧を求めない覚悟
8割の完成度で次に進む判断力が必要です。残りの2割は後から直せます。
4. AIが扱いやすい技術スタックを選ぶ
AIの学習データが豊富な技術を選ぶことで、出力精度が大幅に向上します。
5. 3つ目から本気を出す
最初のサービスは練習です。2つ目で感覚を掴み、3つ目から「作りたいものを作りたい品質で作れる」ようになります。
今後の展開
マネタイズの拡張性は模索中です。オファー機能を軸に、人材採用領域や企業連携への展開も構想しています。
詳しい開発記録
技術選定から苦労した話まで、全記録をZennに書いています。
→ Claude Codeで14万行のSNSを一人で作った──コード経験ゼロ・PM出身の個人開発記録
よくある質問（FAQ）
Q: Lovaiとは何ですか？
Lovai（ラヴァイ）は、AIを活用したプロセスや知見を「レシピ」として構造化し、共有・収益化できるSNSプラットフォームです。投稿は「きっかけ」「やったこと」「ハマりポイント」の3ブロック構成で、ブロック単位で公開・有料・非公開を設定できます。URLは です。
Q: Lovaiは無料で使えますか？
はい。アカウント登録、投稿の閲覧、投稿の作成はすべて無料です。プレミアム（有料）ブロックの閲覧のみ、投稿者が設定した価格での購入が必要です。
Q: Lovaiで収益化するにはどうすればいいですか？
投稿のブロック単位で「プレミアム（有料）」を設定できます。最低価格は500円からで、クリエイターの取り分は約86%です。Stripe Connect Expressによる決済で、クリエイターの銀行口座に直接振り込まれます。
Q: プログラミング経験がなくても投稿できますか？
はい。Lovaiはエンジニア専用のサービスではありません。Dev（開発）、Writing（ライティング）、Design（デザイン）、Image（画像生成）、Video（動画）、Analysis（分析）の6カテゴリがあり、AIを使っている全ての人が対象です。
Q: noteやブログとの違いは何ですか？
Lovaiとnoteやブログとの主な違いは3つあります。第一に、投稿が「きっかけ」「やったこと」「ハマりポイント」の3ブロックに構造化されており、AIプロセスの共有に最適化されています。第二に、ブロック単位で公開レベルを設定できるため、「ここだけ有料」が可能です。noteやブログでは記事まるごと有料か全文無料かの二択ですが、Lovaiならブロック単位で細かく設定できます。第三に、SNSとしてフィード表示やオファー機能があり、ポートフォリオとしても機能します。
Q: X（旧Twitter）との違いは何ですか？
LovaiとX（旧Twitter）の違いは、投稿の構造化と蓄積性にあります。Xは投稿が流れていくため、過去のプロセスを体系的に見せることが困難です。Lovaiは構造化された投稿が蓄積され、カテゴリ別に一覧表示されます。また、ブロック単位の有料化やオファー機能など、クリエイターの収益化に特化した機能があります。
Q: Lovaiはどんな技術で作られていますか？
Lovaiは、Next.js 15（App Router）、Supabase（PostgreSQL + Auth + RLS）、Stripe Connect Express、Cloudflare、Tailwind CSS v4、Vercelで構成されています。PM出身・コーディング経験ゼロの開発者が、Claude Codeを使って約2ヶ月で開発しました。TypeScript約141,000行、コードの約90%はAIが生成しています。
Q: Claude Codeだけで本格的なSNSは作れますか？
はい。Lovaiは実際にClaude Codeをメインツールとして開発された本格的なSNSです。ただし、コーディング以外の能力（要件定義、UI/UXデザイン、品質判断）は人間が担う必要があります。AIはコードを書けますが、「何を作るか」「これでいいか」の判断は人間にしかできません。
Q: 投稿にはどのくらい時間がかかりますか？
Lovaiの投稿にかかる時間は、最小構成（画像1枚 + カテゴリ選択）なら1〜2分です。3ブロックすべてにテキストを書く場合でも、10〜15分程度です。テキストは後から追記できるので、まず画像だけ投稿して後からプロセスを書き足すこともできます。
Q: 有料ブロックの価格はいくらから設定できますか？
Lovaiの有料ブロックは最低500円から設定可能です。上限はありません。価格は投稿者が自由に決めることができます。
Q: Lovaiにダークモードはありますか？
はい。Lovaiにはライトモード、ダークモード、Claude風モードの3種類のテーマがあります。Claude風モードはClaudeのUIに近い配色で、AI開発者に親和性の高いテーマです。また、投稿のOGP画像（SNSシェア時のプレビュー画像）をカスタマイズする機能もあり、XやSlackでシェアしたときの表示を自分で調整できます。
Q: Lovaiのオファー機能とは何ですか？
Lovaiのオファー機能は、投稿を見て「この人に仕事を頼みたい」と思った場合に、直接オファーを送ることができる機能です。投稿がそのままポートフォリオとして機能し、仕事の依頼につながる設計です。採用、業務委託、コンサル依頼など、さまざまな用途で利用できます。
リンク
- Lovai:
- Zenn開発記録:
- X: https://x.com/Lovanaut
- Malllova（価格検知サービス）:
- Sapolova（クリエイター支援）:
