LPのCTAボタン、何回変えたと思ってる。
昨日1日で、LPのセクションを丸ごと組み直し、画像11枚をAI生成に差し替え、収益シミュレーターまで全構築した。
コミットは35件。
外注なら1ヶ月かかる作業を、1日で終わらせた。
1人でSaaSを作るなら、このスピードが最低条件だ。
ただ、マウスを握る右手は腱鞘炎寸前だ。
AI開発は、コードを書く時間よりAIと喧嘩する時間の方が長い。
「Claude Code」に指示を出しては、出てきたクソコードを突き返す。
その無限ループが、最終的にこのスピードを生み出す。
※この記事は、Claude Codeで1人開発しているSNS運用SaaS「ThreadPost」の開発日記です。
SNS運用を自動化しませんか？
ThreadPostなら、投稿作成・画像生成・スケジュール管理までAIがサポート。
1日でLPとシミュレーターを全構築した全貌
今週はランディングページと収益シミュレーターの構築に全振りした。
結果として、総コミット35件、新機能4件を叩き出した。
バグ修正はゼロだ。
AIへの指示出しを繰り返す泥臭いループを経て、複雑な報酬構造を直感的なチップUIへと昇華させた。
これが1人開発のスピードだ。
ただし、コーヒーの消費量は普段の3倍になった。
LPはプロダクトの顔だ。
ここで手を抜けば、どんなに良い機能を作っても誰にも使われない。
だからこそ、UIの細部まで徹底的にこだわった。
収益シミュレーターのUI刷新劇
収益シミュレーターのUIをチェックボックスのグリッドで実装すれば、ユーザーは直感的に選べるはずだ。
だから僕は、「Claude Code」にそのまま実装を投げた。
「add income simulator with chart and toridori support」というコミットで、PR案件やグラフを追加した。
最初は順調に見えた。
SVGの折れ線グラフを描画し、ストック型と単発型の収益推移を視覚的に区別した。
収益モデルの違いを視覚化して、ユーザーの理解度を上げる。
一般的なSaaSのコンバージョンシミュレーターは、複雑な計算式を隠蔽し、シンプルな入力だけを求める。
僕はそれに倣い、フォロワー数と成長率のスライダーを実装した。
しかし、スマホで確認した瞬間、絶望した。
画面が情報過多で埋め尽くされ、何が何だか分からない惨状になっていた。
モバイル環境では、画面の物理的制約が厳しい。
チェックボックスの羅列は認知負荷を上げる。
モバイル画面で選択肢が5つを超えると、ユーザーは迷う。
チェックボックスが10個並んだ画面の直帰率は、通常70%を超えると言われている。
ユーザーは複雑な画面を見た瞬間、考えることを放棄してブラウザの戻るボタンを押す。
特にSaaSのLPにおいて、シミュレーターはコンバージョンの要だ。
ここで離脱されるのは、穴の空いたバケツに水を注ぐようなものだ。
しんたろー:
画面の半分が四角い箱で埋まってる。ユーザーはこれを見て「よし、シミュレーションしよう」とは思わない。離脱率90%の未来が見えた。
僕は即座にUIを全差し替えした。
「improve income simulator UI」を実行し、チェックボックスをコンパクトなチップ形式に変更した。
選択状態を緑色で明確に表示し、ストック型のラベルもチップ内に統合した。
「replace checkbox grid with compact chip-style selector」というコミットで、画面占有率を大幅に削減できた。
ただし、CSSの微調整で1時間溶かした。
選択肢が多いと離脱される。
チップUIは、タッチターゲットを確保しつつ視覚的なノイズを減らす。
Appleのガイドラインもタップ領域の確保を求めている。
指でタップしやすい44ピクセル以上の領域を確保しつつ、余白を削る。
これが現代のモバイルUIの基本だ。
さらに、シミュレーションの精度にもこだわった。
「enhance income simulator with plan/rank selection and disclaimer」で、コンバージョン率を0.03%という現実的なラインに設定した。
甘い予測はクレームの元だ。
あえて低めの数値を提示して、現実的なロードマップを見せる。
ユーザーは馬鹿じゃない。
非現実的な右肩上がりのグラフを見せられても、胡散臭いと思われるだけだ。
CVR0.03%って低く見えるけど、これがリアル。0.5%とか夢みたいな数字入れると後でクレームになるやつだ。
並行して、LPの構成も根本から見直した。
「LP大幅改修 - セクション順序最適化 & 差別化訴求強化」というコミットで、セクションの順序を丸ごと組み替えた。
課題提起の直後にHowItWorksを配置した。
収益化ガイドの導線を追加した。
運用代行とのコスト比較セクションを新設した。
業種別の悩みと解決策のコンテンツを最適化した。
ランディングページのセクション順序は、コンバージョン率に直結する。
一般的なSaaSのLPは、課題提起から解決策まで2画面以内に収める。
ユーザーの集中力は8秒しか持たないと言われている。
結論を後回しにする構成は、痛手になる。
最初のスクロールで「自分に関係がある」と思わせなければ、その先は読まれない。
また、「ぽすたまタウンセクションでコミュニティ価値を強調」というコミットも入れた。
単なる機能紹介から、コミュニティとしての価値訴求へピボットした。
機能だけで釣るとすぐ解約される。
コミュニティへの帰属意識がチャーンレートを下げる。
ツールは代替可能だが、コミュニティは代替できない。
LPの画像も一新した。
「LP画像をAI生成画像に全面差し替え（Gemini 3 Pro、全11枚）」というコミットで、11枚の画像をAI生成に置き換えた。
Gemini 3 Proを使って全12画像の生成スクリプトを定義した。
背景画像5枚を一気に生成した。
問題提起カード4枚を新規で作成した。
Before/Afterの比較画像2枚を差し替えた。
AI開発は魔法じゃない。
指示して、確認して、直す泥臭い作業だ。
「Claude Code」が「CTAボタン追加しました」と返してくる度に、「いや場所が違う」「コピーが違う」とツッコミを入れた。
僕がこれを1人でやれてる理由の半分は、AIへのツッコミを我慢しないことだ。
5回連続で同じタイトルを出してきた時は、例文を消した。
毎回違うのが出た。
紹介コードのトラッキング泥沼
紹介コードをURLパラメータで渡せば、あとはCookieで保持してLINE登録ボタンまで引き継ぐだけでいいはずだった。
「LP全リンクに紹介コード(ref)を付与」というコミットで、サクッと終わらせるつもりだった。
しかし、現実は甘くなかった。
ページ遷移やYouTubeセクションを経由する間に、Cookieが消滅した。
動的URLの生成が追いつかず、紹介コードが「空」になるバグが頻発した。
セッションをまたいでパラメータを保持するのは泥沼だ。
SPAのルーティングと外部への遷移が絡み合うと、状態管理は一気に複雑になる。
Claude、お前さぁ…。Cookieに頼ればいいって言ったのそっちじゃん。ITPの厳格化を完全に舐めてた。
ブラウザのCookieポリシーは厳しい。
特にSafariのITP環境下では、Cookieへの依存は痛手になる。
2024年のデータでは、モバイルトラフィックの約半数がSafariを経由していると言われている。
サードパーティCookieの廃止だけでなく、ファーストパーティCookieの寿命も制限されている。
ITP対策を怠れば、アフィリエイトや紹介プログラムの半数がトラッキング漏れを起こす。
一般的なアフィリエイトプログラムにおいて、トラッキング漏れによる成果の未承認率は10〜15%に達する。
1件1万円の報酬なら、100件で10万〜15万円の損失だ。
これはSaaSの成長にとって痛手になる。
ユーザーが紹介してくれたのに報酬が支払われなければ、一瞬で信用を失う。
「紹介コード(ref)のトラッキング強化」というコミットで、DBのスキーマから見直した。
activity_logsにref_codeカラムを追加した。
TrackingProviderでURLのパラメータを取得・送信した。
Track APIでref_codeを受け取りDBに記録した。
認証コールバック開始時のref情報を詳細にログ出力した。
これだけの仕組みを作っても、ブラウザの壁には勝てなかった。
Safariだけでなく、Braveなどのプライバシー重視ブラウザも普及している。
もはや、フロントエンドのCookieだけでユーザーを追跡する設計自体が時代遅れだ。
サーバーサイドでのトラッキングや、URLパラメータの引き回しなど、複数の手段を組み合わせる必要がある。
「LINE登録ボタンで紹介コードを引き継ぐよう修正」というコミットに辿り着くまでに、何度も心が折れかけた。
僕はCookie依存から、各CTAコンポーネントでURLパラメータを動的に取得・保持するロジックへ変更した。
これで、追跡漏れをゼロにできた。
ただし、コードはスパゲッティ状態だ。
AIは「とりあえず動くコード」を書くのは得意だ。
しかし、エッジケースやブラウザの仕様差異までは考慮してくれない。
AIの「とりあえずCookieで」という提案にそのまま乗った僕のコードがクソだった。
結局、泥臭くデバッグするしかない。
AIの皮肉なジョーク
AIに「CTAボタンをLINE登録に変えて」と指示した。
AIが気を利かせて全セクションのボタンを緑色にしたが、そのうちの1つが背景色と同化して完全に消滅した。
「ボタンを消すのが一番のコンバージョン対策」というAIの皮肉なジョークかと思った。
視認性のテストは人間がやらないとダメだ。
ここまで読んだあなたに
今なら無料で全機能をお試しいただけます。設定後はAIが投稿案を毎日生成。確認して選ぶだけ。
数字で振り返るAI開発の暴力的なスピード
今日の開発を数字で振り返る。
| 項目 | 今日の数字 | 比較対象 |
|------|----------|--------|
| LP構築・改修速度 | 1日 | 制作会社なら見積もり段階で1週間、実装で1ヶ月 |
| コスト削減率 | 97% | 一般的な運用代行サービスの月額費用 |
| 総コミット数 | 35件 | 先週の平均は1日10件 |
「ThreadPost」の運用コストは、一般的なSNS運用代行と比較して97%削減されている。
一般的な運用代行は月20〜50万円かかる。
AI自動化による人件費の圧縮と、ツール利用料のみのミニマム運用がこれを可能にした。
1人でこのスピードとコスト感を実現できる。
ただし、休日は消滅した。
まだ動いていない機能
MEO用のLPも別で1本追加した。
Framer Motionによるスクロールアニメーションも入れた。
しかし、紹介コードのトラッキングがMEO側のLPで完全に動作しているかは、まだデータが足りない。
トラッキング漏れがないか、明日以降の数字が気になる。
完璧なトラッキングなど存在しない。
常に監視して、漏れを見つけたら塞ぐ。
その繰り返しだ。
FAQ
なぜLINEファースト戦略に振り切ったのか？
メールアドレスよりLINEの方が開封率が圧倒的に高いからだ。
メールの到達率問題やスパムフィルタを回避し、プッシュ通知による高いエンゲージメントを維持できる。
LTV最大化には必須の戦略だ。
SafariのITP環境下でトラッキング漏れを防ぐには？
Cookieへの依存を完全に捨てることだ。
各CTAコンポーネントでURLパラメータを動的に取得し、保持するロジックを組む。
これで追跡漏れをゼロにできる。
1日で35コミットを出すためのAIへの指示のコツは？
AIへのツッコミを我慢しないことだ。
5回連続で同じタイトルを出してきたら、例文を消してやり直させる。
泥臭いラリーが最終的なスピードを生む。
まとめ
泥臭いツッコミの応酬が、プロダクトの解像度を上げる。
この記事が参考になったら、ThreadPostを試してみませんか？
投稿作成・画像生成・スケジュール管理まで、AIがサポートします。
ThreadPostをもっと知る
関連記事
Claude Codeに全任せした結果、AIの完璧な嘘で本番環境が崩壊した話。
AIに「バグなし」と言われ即システム全停止。Claude Codeと歩む1人開発の限界と現実
Claude Codeに任せたらスマホ表示を消された。AIに勝てない人間特有の執着とは。
AIの自分語りにブチ切れ。プロンプトを捨ててコードで強制排除した話（Claude Code開発日記）
AIにウィットを求めたら炎上寸前の過激な投稿を生成された。Claude Codeとの共同開発は地獄だ。
