嘘だろ。Claude Codeに丸投げしたらSaaSの顔が1日で完成した。

AIに丸投げしたら1日でSaaSの顔が揃った

※この記事は、Claude Codeで1人開発しているSNS運用SaaS「ThreadPost」の開発日記です。

SaaSは機能だけ作っても公開できない。

プライバシーポリシー、特商法、利用規約、ヘッダー、フッター、CTAセクション。

全部の「顔」が必要で、これが地味にキツい。

開発者にとって、自分が作った最高の機能を早く世に出したいという思いは強い。

しかし、決済代行会社の審査という巨大な壁が立ちはだかる。

StripeやPaddleは、法的ページが1つでも欠けていると容赦なく審査を落とす。

Claude Codeに「全部作って」と投げたら、1日で揃ってしまった。

嘘だろ。

UIから法的ページまで全自動生成

SaaSの開発において、コア機能の実装は全体の半分に過ぎない。

残りの半分は、ユーザーを迎え入れるための「顔」の構築だ。

ランディングページ、利用規約、プライバシーポリシー、特定商取引法に基づく表記。

これらがないと、StripeやPaddleなどの決済代行サービスの審査すら通らない。

2024年のSaaS業界では、決済インフラのコンプライアンス要件が年々厳しくなっている。

マネーロンダリング対策や消費者保護の観点から、運営者の実態が厳しく問われる。

個人開発でも企業と同じ法的ページが要る。

僕はこれまで、この作業をずっと後回しにしていた。

面倒くさい。

「ランディングページと法的ページを追加」

Claude Codeに指示を出した。

法的ページ全部作って、ヘッダーのメニューも実装して、と順番に投げ続けた。

正直、AIがどこまで日本の法律に合わせたページを作れるか半信半疑だった。

ターミナル上でAIがNext.jsのApp Routerのディレクトリ構造をスキャンし始めた。

数分後、「legal」「terms」「privacy」のルーティングが自動生成された。

中身のテキストも、日本のSaaS標準に準拠したフォーマットで埋め尽くされていた。

免責事項、準拠法、管轄裁判所。

弁護士が書いたような堅苦しい文章が、一瞬で生成された。

しんたろー:
特商法のページに僕の事業所住所まで勝手に入ってた。どこから拾ってきたんだよ。ちょっと怖いな。

「法的ページを完成・事業者情報を追加」

企業なら法務チェックを含めて2週間かかる工程だ。

僕はコーヒーを飲んでいただけだ。

法務部門との不毛なやり取りも、外部の弁護士への高額な相談料も必要ない。

UIの調整もAIに丸投げした。

「ランディングページにスクロールアニメーション追加＆デザイン改善」

Framer Motionを使ったアニメーションの実装だ。

現代のSaaSのLPにおいて、リッチなアニメーションは必須要件になっている。

静的なページでは、ユーザーの滞在時間が極端に短くなる。

手動でやると、スクロール位置の検知やコンポーネントの再レンダリング制御で沼にハマる。

Intersection Observer APIを直接叩いて、要素が画面に入ったタイミングを計算するのは骨が折れる。

AIはProblem、Solution、Features、Pricingの各セクションに順次表示エフェクトを適用した。

0.1秒から0.4秒の遅延を持たせたスライドインアニメーションだ。

ブラウザをリロードすると、プロのデザイナーが作ったような滑らかな動きが実装されていた。

ただし、最初はスクロールがカクついて酔いそうになった。

アニメーションのイージング関数を少し調整して、自然な動きに落ち着かせた。

ダークモードの対応も一瞬だった。

「ダークモード永続化とCTAセクションの視認性を改善」

Tailwind CSSのダークモードクラスは、手作業で設定すると必ずどこかで漏れが発生する。

テキストは白くなったのに、背景が白のままで文字が読めない。

そんな初歩的なバグが、本番環境で頻発する。

AIはThemeToggleを「next-themes」に統合し、「localStorage」で状態を永続化させた。

「CTAセクションのライト/ダークモード配色を反転」

背景色とテキストカラーのコントラスト比を自動計算し、両モードで視認性を確保した。

ライトモードでは青背景に白文字。

ダークモードでは白背景に黒文字。

何十個ものコンポーネントのクラス名が一瞬で書き換わった。

おかげでGitの差分が爆発してレビューを諦めた。

しんたろー:
1日で35コミット。僕がやったのはプロンプト打ってコーヒー飲んでただけ。楽すぎて逆に不安になるわ。

認証機能の実装も進めた。

「認証機能とダッシュボードUIを実装」

メールパスワード認証、Google OAuth認証、メール確認フロー、日本語エラーメッセージ。

これらを一気に実装している。

認証機能はSaaSの心臓部だ。

セッション管理、JWTトークンの発行、OAuthプロバイダーとの連携。

これらを手動で実装すると、セキュリティの脆弱性を生むリスクが高い。

クロスサイトスクリプティングやCSRF攻撃への対策も考慮しなければならない。

AIはSupabase Authのベストプラクティスに則り、セキュアな認証フローを自動生成した。

ダッシュボードUIもレスポンシブ対応で実装された。

モバイルヘッダーのハンバーガーメニューも完璧に動く。

スマホで確認しても、レイアウトの崩れは一切なかった。

ヘッダーとユーザーメニューの実装も終わらせた。

「ヘッダーとユーザーメニューを完全実装」

ユーザーアバター、名前表示、通知アイコン、未読バッジ。

ユーザーメニューのドロップダウン。これらも全てAIが実装した。

状態管理にはZustandを使い、コンポーネント間のデータの受け渡しもスムーズだ。

フッターの統一も行った。

「AnimatedFooterで全ページのフッターを統一」

全8ページで「Footer」を「AnimatedFooter」に置き換えた。

これで修正漏れがなくなる。

コピーライトの年号を毎年手動で更新する手間も省けた。

SEO最適化も忘れない。

「SEO最適化とバッジデザイン改善」

タイトルタグ、メタディスクリプション、OGP、Twitter Cardの設定。

Next.jsのMetadata APIを使って、各ページに適切なSEOタグを埋め込んだ。

検索エンジンからの流入を増やすための基本的な施策だ。

架空の人物に実在感を持たせる泥沼

LPの仕上げとして、導入事例のセクションを作ることにした。

SaaSのコンバージョン率は、社会的証明の有無で数字が跳ねる。

実際のユーザーの声や成功事例を掲載すれば、信頼感が増すはずだ。

誰も使っていないツールに、クレジットカードの番号を入力するユーザーはいない。

「improve monetization guide for beginners」

初心者向けの収益化ガイドを追加した。

月5万円というコピーを月500円からに変更した。

ハードルを下げて、まずは無料トライアルに誘導するためだ。

いきなり高額なプランを提示しても、ユーザーは逃げてしまう。

ここからが泥沼だった。

成功事例のペルソナ設定だ。

「correct success story amounts and add referral method examples」

具体的な紹介方法を追加したが、名前がA.Sさんのようなイニシャルだった。

Webマーケティングにおいて、ペルソナの具体性は信頼の根幹だ。

イニシャル表記は、2010年代の情報商材LPで多用された手法だ。

現代のユーザーはこれを見ると直感的に嘘だと見抜く。

「あ、これサクラだな」と思われた瞬間、LPの離脱率は100%に近づく。

「change success story names from initials to natural Japanese names」

下の名前に変更した。

あかりさん、たくやさん、まさきさん。

今度は情報商材のLP感が凄まじい。

キラキラした若者が、スマホ一つで月収100万円稼いでいるような胡散臭さが出た。

「change success story names to surnames for authenticity」

苗字に変更した。

鈴木さん、田中さん、佐藤さん。

汎用的すぎて実在感が薄い。

フリー素材の画像に「田中さん（30代・会社員）」と書かれているような安っぽさだ。

「update success story names and fix card layout wrapping」

望月、柴田、内田に変更した。

少し珍しい苗字にすることで、実在感を演出した。

クラスに1人か2人いるくらいの、絶妙なラインを狙った。

さらに「enhance success stories with avatars and realistic timeline」

AIでアバター画像を生成して配置した。

ようやく実在するユーザーっぽくなった。

背景に少し生活感のあるオフィスやカフェを写り込ませることで、リアリティを底上げした。

しんたろー:
名前を3回変えてアバターまで生成した。架空の人物に実在感を持たせるために3時間使った。僕は何の仕事をしているんだ。

コピーライティングも修正した。

「change Hero copy from 月500円 to 毎月5,940円 for consistency」

具体的な数字に修正した。

3人紹介で17,820円という計算式も明記した。

月500円より毎月5,940円。

3人紹介で17,820円。

具体的な数字を並べた方がリアルだ。

端数のある数字は、適当に作った数字ではないという印象を与える。

サクラ感との戦い

成功事例を載せれば売れるはずだと意気揚々とイニシャルで掲載した。

あまりに偽物っぽすぎて、逆にユーザーが怪しいツールと警戒して離脱した。

結局、名前を3回変え、アバターまで生成して架空の人物をいかに実在させるかという謎のクリエイティブ作業に半日費やした。

コードを書くより、人間の心理をハックする方がよっぽど疲れる。

AIは完璧なコードを吐き出すが、人間の微妙な感情の機微までは理解してくれない。

「胡散臭い」という感覚は、人間にしか分からない領域だ。

今日の数字

| 項目 | 今回の数字 | 比較対象 |

|---|---|---|

| 総コミット数 | 35件 | 先週の1日平均は8件 |

| 新機能追加 | 4件 | 過去の自分なら1週間分 |

| LP実装期間 | 1日 | 企業なら最低2週間 |

AIによるコード生成速度は、手動実装と比較して約10倍の効率。

エンジニアの時給を5,000円と仮定すると、1週間分の工数約20万円を数時間のAI対話コスト数ドルで代替した計算だ。

ただし、ペルソナの命名に3時間かかった。

この3時間は、エンジニアリングの観点から見れば完全に無駄な時間だ。

しかし、マーケティングの観点から見れば、最も重要な投資だった。

API連携とエッジケースの挙動

「ランディングページの最適化とThreads API認証対応」で会社概要に技術提供者セクションを追加した。

ただ、本番環境でのAPI連携テストはまだ完了していない。

スケジュール制限ダイアログのRLSポリシーも追加したが、エッジケースでの挙動が気になる。

明日またAIと格闘することになる。

完璧なLPができても、裏側のシステムが動かなければただのハリボテだ。

よくある質問

Q: AIに法的ページを作らせる時のプロンプトのコツは？

「日本のSaaS標準に準拠して」と指定するだけだ。

Stripeの審査を通すための必須項目をAIは学習している。

ただし、自社の住所や連絡先は後から手動で確認しないと架空のビル名になる。

Q: Framer Motionのアニメーション実装で気をつけることは？

遅延時間を0.1秒から0.4秒の間に収めることだ。

それ以上長くすると、ユーザーは表示を待てずにスクロールしてしまう。

AIはたまに1秒以上の過剰なエフェクトを付けるので修正が要る。

Q: コスト対効果は実際のところどうなの？

今回かかったAPI代は数ドルだ。

手動で実装していれば確実に1週間は潰れていた。

浮いた時間を次の機能開発やマーケティングに全振りできる。

今日の振り返り

SaaSの顔を1日で作ってしまったが、架空の人物の命名に一番悩んだ1日だった。

UIも法的ページも揃ったので、あとは中身を磨くだけだ。

👉 ThreadPostでSNS運用を自動化する