プログラミング未経験でも、AIを使えばSaaSアプリが作れる時代です。この記事では、Claude Codeに日本語で指示を出しながら、ユーザー認証・Stripe月額決済・Render公開まで備えた本格的なWebアプリを1日で作る手順をすべて公開しています。コードが読めなくても大丈夫です。プロンプト例と手順を順番に実行するだけで、あなたも今日から「作れる側」になれます。

作ったものの概要

今回作ったのは月額980円のサブスクリプション制SaaSです。有料会員専用のダッシュボードを持ち、決済はStripeで処理します。

機能一覧

ユーザー登録: メールアドレスとパスワードで新規アカウントを作成できます
ログイン・ログアウト: セッション管理を使った安全な認証機能
Stripe月額決済: クレジットカードで月額980円のサブスクリプションに申し込める
Webhook処理: 決済完了後に自動でユーザー権限をアップグレードする
会員限定ダッシュボード: 有料会員だけがアクセスできる専用ページ
Renderでの公開: 無料プランでインターネット公開できる

使った技術スタック

カテゴリ技術・ツール役割 Webフレームワーク Flask（Python）アプリの骨格データベース SQLite + Flask-SQLAlchemy ユーザー情報の保存認証 Flask-Login + Werkzeug ログイン・セッション管理決済 Stripe 月額課金の処理デプロイ Render インターネット公開 AIアシスタント Claude Code コード生成・デバッグ

環境構築（無料公開部分）

Pythonのインストール

Windowsの手順

https://www.python.org/downloads/ からインストーラーをダウンロード
「Add python.exe to PATH」に必ずチェックを入れる（忘れると後でエラーになります）
「Install Now」をクリック

Macの手順

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"
brew install python

copy

インストール確認

python --version
# Python 3.x.x と表示されれば成功

copy

VSCodeのインストール

https://code.visualstudio.com/ からダウンロード → 起動後に「Python」拡張機能（Microsoft製）をインストール

Claude Codeの準備

npm install -g @anthropic-ai/claude-code

copy

プロジェクトフォルダで claude と入力すればチャットが始まります。日本語で話しかけるだけです。

ここから先は有料コンテンツです