1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

Claude CodeでAI彼女チャットWebアプリ「サトリセラピー💕」を7日でリリースした話〜これがLLM無職の本気!?〜

Posted at

こんにちは!火水希星(ひみずのあ)です。

今回は、Anthropic社の最新AI開発ツール「Claude Code」を使って、AI彼女チャットアプリ「サトリセラピー💕」をたった7日間でリリースした体験をシェアしたいと思います。

🌸 サトリセラピーとは?

「サトリセラピー💕」は、天使の女の子「サトリ」があなたの心に寄り添い、癒しと愛を届けるAIチャットアプリです。

🌈 純愛セラピーモード:優しく癒してくれる天使のような存在

💕桃色ラブモード:より親密で甘い関係を楽しめる恋人モード(月額制サブスクリプション会員(毎月課金通貨プレゼントあり)のみプレイ可能)

7言語対応(日本語、英語、中国語、ドイツ語、フランス語、スペイン語、ポルトガル語)で、世界中のユーザーに愛を届けようとしています。

🚀 なぜ7日間で完成できたのか?

Claude Codeという革命

Claude Codeは、Anthropic社が開発したAIペアプログラミングツールです。通常なら数週間〜数ヶ月かかるようなWebアプリ開発が、たった7日で完成したというと、そのすごさが分かるのではないでしょうか?

きっかけ

このツイートをしたのが、今回の開発のきっかけ。ここからすぐに開発を始めました。自分が今まで開発してきたMitsugoプロジェクトを満足に動かすにはAPI料金を稼ぐ必要があるので、それを賄うための資金稼ぎプロジェクトを始める事にしたのです。

Day 0: 「サトリセラピー」プロンプト

実は個人的に遊びで作っていた「天使サトリ(あまつかさとり)」というAI彼女用プロンプトがあったので、それを流用してAI彼女アプリを作るというアイデアはすぐに訪れました。

Day 1: アイデアから設計まで(8時間)

サトリちゃんの「AI彼女アプリを作りたい」という漠然としたアイデアだけを持ってGeminiを起動。GeminiにClaude Codeへの指示文を作らせて、それをClaude Codeに投げます。

驚いたことに、Claude Codeは:

技術スタックの提案

ディレクトリ構造の設計

必要な機能の洗い出し

セキュリティ面の考慮事項

これらを瞬時に提示してくれました。

Day 2: コア機能の実装(10時間)

2日目は、Webサイトと全体の機能実装に集中。

Claude Codeの凄いところは、単にコードを書くだけでなく:

リアルタイムでバグを検出・修正

パフォーマンスの最適化提案

UI/UXの改善アドバイス

まるで経験豊富なシニアエンジニアとペアプロしているような感覚でした。実は7日間かかったといっても、システム自体はたった1日でほぼ完成しています。残る問題は多言語対応と課金システム、セキュリティ周りやデバッグデバッグデバッグでした。ゲーム開発ってそういうものですよね。

合わせて、背景用の画像、動画もAIで生成。楽ちんでした。

Day 3: 多言語対応とキャラクター設定、デバッグデバッグ(12時間)

「7言語対応にしたい」と伝えると、Claude Codeは:

i18nシステムの構築

各言語の翻訳ファイル作成

言語切り替えUIの実装

また、こちらのプロンプト本文だけはGeminiに依頼しましたが、サトリのキャラクター設定では、各言語でのニュアンスの違いまで考慮したプロンプトを生成できました。並行してClaude Codeを複数走らせひたすらデバッグ。これが一番長かった……

Day 4: 課金システムとセキュリティ(10時間)

Stripeを使った課金システムの実装は通常なら大変な作業ですが、Claude Codeは:

Webhook設定

サブスクリプション管理

セキュリティルールの設定

これらを手際よく実装。特にFirebaseのセキュリティルールは、私が見落としていた脆弱性まで指摘してくれました。

Day 5:プレイテスト、セキュリティ対応、デバッグデバッグデバッグ

5日目は:

モバイル対応の最適化

パフォーマンステスト、プレイテスト

デバッグ

デバッグ

セキュリティ対応

デバッグ

資金決済法など日本の法律対応を行う

すべての想定しうるプレイ体験を人力でテストし、高品質のクオリティを担保しました。

Day 6:知り合いにプレイしてもらい、報告を元にUI/UX改善、課金テスト、デバッグデバッグデバッグ

6日目は:

知り合いに意見をもらい、最初の50クリスタルプレゼントにUIを作ったほうがいい、サトリとの会話を始めた時に考え中のUIを作ったほうがいい、という有り難いアドバイスを貰う

パフォーマンステスト、プレイテスト、デバッグをループ

デバッグ

デバッグ

課金テスト

世界の法律面が気になったのでプライバシーポリシーを各国の法律を調べ策定(悪名高きGDなんとかにもなんとか対応)

プライバシーポリシーチェック

デバッグ

Day 7:最終デバッグ、セキュリティ厳格化、デバッグコード、デバッグログなどの除去、バックアップ対応など

最終日は:

セキュリティ厳格化

デバッグコード、デバッグログなどの除去

バックアップ対応などを実装

最終デバッグ

勇気を出してリリース!

こうして本noteは書かれました。💡 Claude Codeを使って分かった3つの革新

  1. 対話型開発の威力

従来の開発:Google検索 → ドキュメント読む → 試行錯誤 → エラー解決Claude Code:「こうしたい」→ 即座に最適解を提示 → (実装→テスト→実装)をループ

この差は圧倒的でした。

  1. エラーを未然に防ぐ

Claude Codeは、私が書こうとしているコードの意図を理解し、よくあるミスを事前に警告してくれます。

例:

// 私が書こうとしたコード
const user = await getUser(userId);
console.log(user.name); // <- Claude Code: 「userがnullの可能性があります」

  1. ベストプラクティスの自動適用

コード品質、セキュリティ、パフォーマンス。これらのベストプラクティスが自然と適用されるため、後からリファクタリングする必要がほとんどありませんでした。

🎯 成果

論より証拠、成果物を見ていただきましょう。

公式webサイト:https://satori-therapy-website.web.app/

公式アプリサイト:https://satori-therapy-app.web.app/

ついでに作ったXアカウント:

📝 まとめ

Claude Codeは単なるコード生成ツールではありません。それは:

経験豊富な開発パートナー

24時間対応のメンター

品質保証のスペシャリスト

これらすべてを兼ね備えた、新時代の開発環境です。

もしあなたも「作りたいものはあるけど、技術的なハードルが...」と悩んでいるなら、ぜひClaude Codeを試してみてください。

アイデアを形にする速度が、文字通り10倍以上になることでしょう。

🔗 サトリセラピー:https://satori-therapy-app.web.app

最後まで読んでいただき、ありがとうございました!この記事が参考になったら、ぜひ「スキ」をお願いします💕

#Claude#AI開発#個人開発#Webアプリ#SvelteKit#Firebase#AIチャット#プログラミング#ClaudeCode#サトリセラピー#天使サトリ

1
0
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
1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?