月額60ドルのFramerを数時間のClaude作業でゼロコストに切り替えた——そんな実例がXで注目を集めています。

この記事でわかること:

  • Framerのコスト構造と機能制限の実態
  • ClaudeでWebサイトを再構築する流れ
  • コードを書かずに管理画面まで作れる理由
  • Vercel+Supabaseの無料枠と実際の費用感
  • この移行が向いているケースと注意点

Framerのコストが重くなる理由

Framerは視覚的なデザインツールとして完成度が高く、ポートフォリオやランディングページを短時間で公開できます。ただし継続費用がかさむ構造になっています。

2026年時点の年間プランはBasicが月額10ドル、Proが30ドル、Scaleが100ドル以上です。月額課金を選ぶとさらに割高になります。エディターを複数招待する場合はProに加えて1人あたり40ドルが追加されるため、複数サイトを運用するとすぐに月額60〜90ドル規模に達します。

CMSアイテムの上限(プランにより1,000〜10,000件)も制約です。フォーム・認証・データベース連携が必要になった瞬間、サードパーティサービスを追加するかプラットフォームの壁に突き当たります。

ClaudeでWebサイトを再構築した流れ

Xユーザーの @stanley_human は、Framerに月額60ドルを支払い続けていたサイトをClaudeで数時間かけて再構築し、Vercel上にデプロイしました。

https://x.com/stanley_human/status/2048388201312633079

流れはシンプルです。サイトの構成と見た目を言葉で説明しながらClaudeにReactまたはNext.jsのコードを生成させ、生成されたコードをGitHubリポジトリに置き、Vercelと連携します。その後はプッシュのたびに自動でビルドとデプロイが走ります。

Framerと異なり、生成されたコードは自分のものです。どのホスティングサービスにも移せますし、Framerの仕様変更や価格改定に左右されることがなくなります。

管理画面もClaudeが作った

再構築の過程でもうひとつ実現したのが、コードに触れずにページを作成・編集できる管理画面(簡易CMS)です。「コードを書かなくてもページを管理できる仕組みが欲しい」という要件を自然言語で伝えると、Claudeがデータベース設計からUIまでを含むコードを出力します。

バックエンドにはSupabaseが選ばれることが多い組み合わせです。PostgreSQLベースのデータベースと行レベルセキュリティ(RLS)による認証制御を備え、Claude Codeとの連携事例も多数あります。「顧客データに会社名も保存したい」と伝えるだけで、Claudeがマイグレーションを提案・実行するまで対話で進められます(参考)。

Vercel+Supabaseの実際のコスト

VercelのHobbyプランは永続無料です。個人プロジェクトであれば、グローバルCDN・自動CI/CD・DDoS対策を含む環境が月0円で使えます。チーム開発に移行する場合はProで月額20ドルかかりますが、それでもFramerのScale相当より低コストです。

https://vercel.com/pricing

SupabaseにはFreeプランがあり、個人サイト規模のデータベース・認証・ファイルストレージをまとめてまかなえます。スケールが必要になった段階でProプラン(月額25ドル)に移行する選択肢があります。

Framer月額60ドルと比較した場合、Vercel(無料)+Supabase(無料)の組み合わせでホスティング費用を実質ゼロにできます。

この移行が向いているケースと注意点

移行が効果的なのは、データベース・認証・カスタムフォームを追加したい場合や、複数サイトを運用していてプラットフォーム費用が積み上がっている場合です。

注意点もあります。Framerのビジュアルエディターがなくなるため、デザイン変更のたびにClaudeに指示を出してコードを更新する流れになります。アニメーションやインタラクションをそのまま移植するのは手間がかかるケースもあります。移行前にFramerのデザインデータや構成メモを手元に残しておくと、Claudeへの指示が具体的になり出力の精度が上がります。

2026年時点で、個人サイトやSaaSのマーケティングページ規模であれば、Claudeを使ったコード生成は十分実用に耐えます。ノーコードプラットフォームの「月額税」を払い続けるか、一度の移行作業でゼロコスト運用に切り替えるか——その判断材料として、この実例は参考になります。