「STUDIOの月額、地味に痛い」と思ったら読むnote — Claude Code × Cloudflareで年¥1,500運用に切り替えた全手順

2026.04.17

STUDIOで作ったサイトを運用している個人事業主・小規模店舗・スタジオ・事務所の方へ。更新頻度がそこまで高くないなら、サブスクを払い続ける必要はもうありません。 私は実際にこの構成でSTUDIOのプランを解約できました。同じように「月額がじわじわ痛い」と感じている人に向けて、丸ごと手順を公開します。

この内容をそのままClaude Codeに読み込ませるとStudio卒業の知識がインストールされるので、読まないでもOKです。（笑）

この記事で分かること

STUDIOの現行プランで、あなたが年間いくら払っているか
代わりに使う「Claude Code × GitHub × Cloudflare」がなぜ実質無料なのか
STUDIOから何を吸い出せばClaude Codeで再現できるのか（マニュアル）
Google Workspace経由で取ったドメインの切り替え手順
年間コストが**¥60,000 → ¥1,500**になった実例

読了時間：約15分。技術の知識がなくても読めるように書きました。

まず結論：こういう人は今すぐ移行を検討していい

以下に当てはまるなら、本記事の構成でSTUDIOを解約しても困りません。

サイトの更新は月1〜数回以下
ページ数は10ページ以下
月間アクセスは数百〜数千程度
お問い合わせはメール送信 or LINE誘導で足りる
予約システムや複雑なCMSは使っていない、または外部サービス（STORES予約など）に逃がせる
自分で（または頼める人が）ChatGPT/Claudeに日本語で指示できる

「デザインが完成していて、あとは文章と画像を時々差し替えるだけ」のフェーズに入っているサイトは、STUDIOの高機能がもはや過剰です。

STUDIOの料金、年額でいくら払っていますか？

2024年12月のプラン改定後、STUDIOの有料プランは以下の4つです（年払い月額換算）。

プラン月額（年払い）年間コスト主な用途Mini¥590¥7,0802ページ+404、独自ドメインありPersonal¥1,190¥14,280個人サイト標準、150ページ・CMS 5Business¥4,980¥59,760中小企業サイト、CMS 10Business Plus¥9,980¥119,760大規模、CMS 30

（月払いだとさらに2〜3割高くなります）

多くの個人・スタジオの方は Personal か Business を契約しているはずです。つまり年間 ¥14,000〜¥60,000 を永続的に支払っている状態。10年使うと Business で約60万円、Personal でも約14万円です。

一方、これから紹介する構成の年額は、ドメイン代だけの約¥1,500です。

移行先の構成＝ Claude Code × GitHub × Cloudflare

難しい話をシンプルにすると、こういう仕組みです。

① Claude Codeに日本語で指示してHTML/CSSを書かせる
     ↓
② GitHubにコードを置く（無料）
     ↓
③ Cloudflareが世界中に配信する（無料枠内）
     ↓
    独自ドメインで公開（年¥1,500前後）

なぜSTUDIOの代わりになるのか

Cloudflare：世界300都市以上にエッジ拠点があるCDN。表示速度はむしろ速くなる
GitHub：コードの保管庫。バックアップ兼バージョン管理
Claude Code：「プロフィールの2段落目を書き換えて」と日本語で言えば直してくれる

つまり更新作業のUIが「STUDIOの編集画面」から「Claudeへのチャット」に変わるだけ。慣れてしまえばSTUDIOより速く直せます。

Cloudflareの料金を正確に知っておく

「無料」とだけ言うと不安になる方が多いので、2026年時点の公式料金を事実として載せておきます。

Workers（今回使うホスティング）

FreePaid月額$0$5〜動的リクエスト10万/日1,000万/月込み静的ファイル（HTML/CSS/画像）へのリクエスト無料・無制限無料・無制限

**重要ポイント：静的ファイルへのアクセスは、無料プランでも「リクエスト数にカウントされない」**と公式ドキュメントに明記されています。つまり今回のような静的HPなら、アクセスが月100万回来ても¥0です。

Pages（もう一つの選択肢）

Free月額$0帯域（データ転送量）無制限月間ビルド回数500回ファイル数上限20,000個カスタムドメインプロジェクトあたり100個

Workers と Pages の違いは、将来サーバー処理を足す可能性があるならWorkers、純粋な静的サイトで割り切るならPages。個人HPならどちらでも無料枠で十分です。

Registrar（ドメイン登録）

Cloudflareでドメインを取ると、卸値そのままの原価で売ってくれます（マークアップ0円、利益を乗せない方針）。

TLD年額の目安.com約 $10.44（約¥1,600）.net約 $12.18.org約 $10.44.dev / .app$10前後.jpやや高め（レジストリ価格が高いため）

他社の「初年度¥1円、2年目から¥3,980」のような値付けがなく、ずっと原価。更新で値上げされません。

付属して無料になるもの

SSL証明書（自動発行・自動更新）
DNS ホスティング
DDoS保護（無料プランでも無制限）
グローバルCDN

つまり**「ホスティング ¥0、SSL ¥0、CDN ¥0、DDoS対策 ¥0、ドメインのみ年¥1,600」**。

コスト比較の最終形

項目STUDIO PersonalSTUDIO Business移行後ホスティング¥14,280/年¥59,760/年¥0ドメインプランに含むプランに含む約¥1,600/年SSL込み込み¥0CDN込み込み¥0年間合計¥14,280¥59,760約¥1,60010年合計約14万円約60万円約1.6万円

Businessで10年使うと差額58万円以上。ここに投資回収したほうが絶対に健全です。

移行の全体像

Phase 1. STUDIOから情報を吸い出す（半日〜1日）
Phase 2. 開発環境をセットアップ（初回30分）
Phase 3. Claude Codeで再構築（半日〜1日）
Phase 4. Cloudflareにデプロイ（30分）
Phase 5. ドメインをCloudflareに繋ぐ（10分〜数日）
Phase 6. STUDIOを解約

以下、順番に解説します。

Phase 1 — STUDIOから情報を引き出すマニュアル

ここが一番大事です。 Claude Codeに書かせるにしても、元ネタがないと再現できません。STUDIOはデータのエクスポート機能が限定的なので、**「人間の目と手で吸い出してドキュメント化する」**作業を事前にやりきる必要があります。

以下のリストを上から埋めていき、そのままClaude Codeに貼り付ければ再現できます。

1-1. サイトマップ（URLと役割）

STUDIOの公開済みサイトをブラウザで開き、全ページを踏んでURLを書き出します。

/           → トップ
/profile    → プロフィール
/service    → サービス・料金
/contact    → お問い合わせ
/testimonials → お客様の声
/legal      → 特商法・利用規約・プライバシー
（ブログは外部blogサービスへのリンク）

ナビメニューとフッターの項目順も書き出しておきます（全ページで統一するため）。

1-2. 各ページの本文（全文コピペ）

STUDIOエディタで各ページを開き、テキストを全部コピペしてMarkdownに貼ります。

見出しレベル（H1/H2/H3）も「見出し1」「見出し2」とメモ
改行位置まで含めてコピペ
ページごとにファイルを分ける：page_profile.md, page_service.md...

1-3. 画像を原寸でダウンロード

STUDIOは画像を最適化して配信するので、公開ページから落とすと解像度が落ちています。

方法A（推奨）：STUDIOエディタから書き出す

エディタで画像を選択 → 「アセット」タブ
オリジナルファイルをダウンロード

方法B：公開ページからブラウザで取得

Chrome DevTools → Network → img フィルタ
ページをスクロールして全画像を読み込ませる
各画像URLを右クリック → 「Open in new tab」→ 保存

命名ルールを先に決めるのがコツ：

images/
  hero_01.webp 〜 hero_08.webp   (ヒーローカルーセル)
  profile_main.webp               (プロフィール写真)
  service_card_1.webp 〜 4        (サービスカード)
  testimonial_01.webp 〜 12       (お客様の声)
  office_bg.jpg                   (事務所写真)

1-4. 完成サイトの全画面スクリーンショット（忘れがち・最重要）

テキストと画像素材だけを渡すと、Claude Codeはレイアウトの余白・文字サイズ・装飾のバランスまでSTUDIO版を再現できません。ここを埋めるのが「完成サイトをそのまま画像で保存しておく」ことです。

取り方：FireShotでページ全体（フルスクロール）をキャプチャ

FireShot（Chrome/Firefox/Edge拡張、無料）を入れる
右上のアイコン → 「ページ全体をキャプチャ」 を選ぶと、スクロール込みの縦長1枚に保存される
代替：Chrome DevToolsの Ctrl+Shift+P → Capture full size screenshot、GoFullPage など

取るべき組み合わせ

ページPC表示スマホ表示トップ○○プロフィール○○サービス○○お問い合わせ○○お客様の声○○法務ページ○—

スマホ表示はDevToolsのレスポンシブモード（iPhone 12 Pro等）にしてからFireShotで撮ればOK。

Claude Codeへの渡し方

撮ったPNGをリポジトリのreference/フォルダに置いて、

reference/top_pc.pngとreference/top_mobile.pngがSTUDIO版のトップページの見た目です。現在のindex.htmlをこのスクショに合わせてください。特にヒーローの高さと、サービスカードの余白を寄せてほしい。

のように画像を添付しながら指示すると、Claude Codeが画像を読んでピクセル単位で寄せていってくれます。文字だけで「余白をもう少し詰めて」と言うより10倍速いです。

副次的メリット：STUDIO解約後の「原本」になる

STUDIOを解約すると、当然元サイトは消えます。あとから「元ってどうだったっけ？」と確認したくなっても戻せません。FireShotのフルキャプチャは、解約後の永久保存版の参照資料として残ります。

コツ

キャプチャ前にページをスクロールして、遅延読込の画像をすべて読み込ませておく
カルーセル（画像スライダー）は各スライドを手動で送って1枚ずつ撮る
ホバー時の色変化は、発生させた状態でキャプチャ
reference/フォルダはリポジトリにコミットして残す（将来の自分が助かる）

1-5. デザイン情報（色・フォント・余白）

項目確認場所メインフォントSTUDIOで本文を選択→右パネル日本語フォント同上アイコンセットFont Awesome か自前かを確認ベースカラー「デザイン → カラー」から16進数font-weight本文の実測値（300か400かで印象が変わる）ブレークポイント現サイトをブラウザで縮めて確認（例：1140px以下で挙動変化）

1-6. リンク一覧

SNS（X, Instagram, LINE公式URL）
外部ブログ
問い合わせ先メールアドレス
Googleアナリティクス測定ID（引き継ぐ場合）

1-7. SEO情報

各ページの<title>（STUDIOの「ページ設定 → SEO」）
meta description
OGP画像

1-8. フォーム設定

項目名（お名前、メール、内容など）
送信先メールアドレス
必須/任意の区別
STUDIOのフォーム機能は使えなくなるので → FormSubmit（無料）に置き換えればOK

1-9. 法務ページは一字一句コピペで

特商法・利用規約・プライバシーポリシーは絶対に書き換えないでそのまま持っていきます。Markdown化してClaude CodeにHTML化してもらうのが安全。

Phase 2 — 環境セットアップ（初回30分）

2-1. 必要なアカウント（すべて無料で作れます）

GitHub（github.com）
Cloudflare（cloudflare.com）
Anthropicアカウント＋Claude Pro/Maxプラン（Claude Code用）

2-2. ローカルにインストールするもの

# Node.js（LTS版）
# → https://nodejs.org から
node -v   # v20以上を確認

# Git
# → https://git-scm.com から

# GitHub CLI（Windowsなら）
winget install --id GitHub.cli
gh auth login

# Cloudflare Wrangler（Workers CLI）
npm install -g wrangler
wrangler login

# Claude Code 本体
npm install -g @anthropic-ai/claude-code
claude   # 初回はログインフロー

2-3. GitHubリポジトリを作成

mkdir hp && cd hp
git init
gh repo create <あなたのユーザー名>/hp --private --source=. --remote=origin

Phase 3 — Claude Codeで再構築（半日〜1日）

cd hp
claude

起動したら、Phase 1で集めた情報を一気に渡します。最初のプロンプト例：

以下の仕様で、純粋なHTML+CSSだけのスタジオサイトを作ってほしい。フレームワークは使わず、画像はimages/配下に置く前提。

【サイトマップ】（1-1をコピペ）【本文】docs/以下にMarkdownで入れてあります【カラー・フォント】（1-5）【リンク】（1-6）【SEO】（1-7）【参考】reference/にSTUDIO版のフルスクショ（PC・モバイル）を入れてあります。この見た目にできるだけ忠実に再現してください。まずはindex.htmlから。順にサブページを作ってください。

あとはClaude Codeが質問を返してきたら答えるだけ。1ページずつコミットして進めてもらいます。

微調整のコツ

「ここの余白がSTUDIO版より広い」といった修正は、該当箇所のスクショを貼って伝える
reference/のスクショとnpx wrangler devのローカル表示を並べて見比べる
2〜3日細かい調整をすれば、見分けがつかないレベルになります

Phase 4 — Cloudflareにデプロイ（30分）

今回はCloudflare Workers の Static Assetsを使います（Pagesでも可）。

4-1. wrangler.jsoncを置く

リポジトリ直下に、これだけの設定ファイルを作成：

{
  "$schema": "node_modules/wrangler/config-schema.json",
  "name": "hp",
  "compatibility_date": "2026-04-15",
  "observability": { "enabled": true },
  "assets": { "directory": "." },
  "compatibility_flags": ["nodejs_compat"]
}

ポイント：

assets.directory: "."でリポジトリ直下をまるごと静的配信
name: "hp"がWorkersのプロジェクト名（hp.<あなたのサブドメイン>.workers.devで配信される）

4-2. .gitignoreを置く

.wrangler
.dev.vars*
!.dev.vars.example
.env*
!.env.example

4-3. ローカルでプレビュー

npx wrangler dev
# → http://localhost:8787 で確認

4-4. 本番デプロイ

npx wrangler deploy

初回だけhp.<サブドメイン>.workers.devが発行されるので、ブラウザで開いて確認します。

4-5. GitHubと自動デプロイを連携する（推奨）

Cloudflareダッシュボードで：

Workers & Pages → hp → Settings → Build → Connect to Git
GitHub連携を承認し、hpリポジトリを選択
Deploy commandにnpx wrangler deployを入れる
masterブランチへのpushで自動デプロイ

以降、Claude Codeがgit pushした瞬間に本番へ反映されます。「チャットで指示→本番反映」が10秒で完結する運用に。

Phase 5 — ドメインをCloudflareに繋ぐ

Google Workspaceでドメインを買った場合、**実態はSquarespace Domains（旧Google Domains、2024年7月にSquarespaceへ事業譲渡）**で管理されています。Cloudflareに繋ぐ方法は2通り。

方法作業量コストオススメ度A. ネームサーバーだけCloudflareに向ける10分Squarespaceの更新料そのまますぐ動かしたい人向けB. ドメイン自体をCloudflareに移管5〜7日Cloudflareの原価に下がる長期運用なら

5-0. 作業前の必須準備：DNSレコードを控える

最重要。 Google Workspaceでメール（例：yuka@example.com）を使っている場合、DNSを切り替えるとGmailが届かなくなる事故が起きえます。

Squarespace Domains（domains.squarespace.comへGoogle Workspace管理者で入れます）にログイン
対象ドメイン → DNSタブ
画面全体をFireShotでキャプチャ。特に：
- MXレコード（Gmail配信用）… smtp.google.com系
- TXTレコード（SPF, DKIM, DMARC）
- CNAMEレコード（Google Workspace検証用）
Cloudflare側に同じものを入れ直す、と覚えておく

5-A. ネームサーバーだけCloudflareに向ける（最短ルート）

所要時間：10分（反映まで数十分〜24時間）

Cloudflareにドメインを追加
- ダッシュボード → Websites → Add a site
- 対象ドメインを入力
- Freeプランを選択
- 既存DNSレコードが自動スキャンされる → MX・TXTが漏れていないか必ず確認（漏れていれば手動追加）
Cloudflareが提示する2つのネームサーバーをメモ
- 例：aisha.ns.cloudflare.com / tom.ns.cloudflare.com
Squarespace側でネームサーバー変更
- Squarespace Domains → 対象ドメイン → DNS → Nameservers
- Custom nameserversを選択
- Cloudflareの2つのNSを入力 → Save
反映待ち（通常1〜数時間、最大24時間）
- Cloudflare側のステータスがActiveになればOK
Workersにカスタムドメインを紐付け
- Workers & Pages → hp → Settings → Domains & Routes → Add → Custom Domain
- 対象ドメインとwwwサブドメインを追加
- SSL証明書が自動発行（数分〜数十分）
確認
- ブラウザでhttps://<あなたのドメイン>を開いて新サイト表示
- Gmailに自分宛テスト送信 → 受信できることを必ず確認

このルートでもCloudflareのFreeプラン全機能（CDN/SSL/DDoS保護）が有効になります。

5-B. ドメインごとCloudflareに移管（長期運用向け）

所要時間：5〜7日

上記「方法A」を先に完了させておく
Squarespace側でロック解除＋移管コード取得
- Squarespace Domains → 対象ドメイン → Registration
- Domain LockをOFF
- ページ下部のRequest transfer codeをクリック
- 24時間以内にメールで**移管コード（EPPコード）**が届く
Cloudflare側で移管を開始
- ダッシュボード → Domain Registration → Transfer Domains
- 対象ドメインと移管コードを入力
- 1年分の更新料を支払う（原価。.comなら約$10.44）→ この支払いで1年更新が加算されるので実質損はなし
Squarespaceから承認メールが届く → 承認
5〜7日で完了。以降の更新料はCloudflare原価に

5-C. 新規ドメインを取る場合

これから新規でドメインを取るなら、最初からCloudflare Registrarで取得するのが一番安いです。

domains.cloudflare.comで希望ドメインを検索
原価で表示される
カートに入れて支払い
自動的に自分のCloudflareアカウントに追加される
そのままWorkersに紐付け可能

メールをGoogle Workspaceで運用する場合は、CloudflareのDNSタブでMXレコードを手動追加すればOK（Google Workspace管理画面に案内がある5つのMXをコピペ）。

5-D. よくあるトラブル

症状原因対処サイトは見えるがメールが届かないMX/TXTレコードが消えた事前キャプチャからCloudflareのDNSに復元ERR_SSL_PROTOCOL_ERRORSSL証明書の発行前10〜30分待ついつまでもActiveにならないNS変更が反映中最大24時間待つ移管がキャンセルされたDomain Lockが解除されていない再度ロック解除でやり直し

Phase 6 — STUDIO解約

新サイトで全ページの表示・リンク・フォーム送信を確認
問題なければSTUDIO側のプランを解約、または無料プランに降格
（任意）STUDIOの管理画面のキャプチャを保存しておく

年間¥14,000〜¥60,000のランニングコストが、ここで消えます。

移行後の運用フロー — Claude Codeに日本語で話しかけるだけ

文章を変えたいとき

cd hp
claude

起動して、

プロフィールページの自己紹介文の2段落目、「2015年に〜」の部分を「2016年に〜」に直して、語尾も「〜しました」に統一して

と日本語で指示するだけ。Claude Codeが対象ファイルを特定 → 編集 → コミット → pushまで自動。pushされた瞬間にCloudflareが本番反映。

画像を差し替えたいとき

新しい画像をimages/に同名で上書き（または新ファイル名で追加）
Claude Codeに「トップのヒーロー3枚目をhero_new.webpに差し替えて」と指示

全ページ一括変更

メールアドレスやナビメニューの変更は、Claude CodeのGrep+Editが圧倒的に速いです。「事務所メールを新アドレスに一括変更」などはワンショットで完了。

よくある不安への回答

Q. コードが書けないけど大丈夫？ A. 大丈夫です。書くのはClaude Code。あなたは「この文章を直して」「画像を差し替えて」と日本語で指示するだけ。STUDIOの編集画面を触るのと手間は変わりません。

Q. STUDIOのフォーム機能が使えなくなる A. FormSubmitという完全無料のサービスに差し替え可能。HTMLの<form action="...">を書き換えるだけで、メールに送信内容が届きます。Claude Codeに「FormSubmitでフォーム作って」と言えば全部やってくれます。

Q. STUDIOのCMS（ブログ機能）を使っている A. 記事が数十本以上あるならこの移行は向きません。ブログはnote / はてなブログ / WordPress.com無料プランなどに逃がし、HPからリンクするのが現実的です。

Q. デザインが崩れないか不安 A. 最初は微妙なズレが出ます。でもFireShotのフルスクショをClaude Codeに見せながら指示すれば直ります。2〜3日の調整で、見分けがつかないレベルになります。

Q. Cloudflareの無料枠を超えたら？ A. 静的ファイルへのリクエストは無料プランでも無制限。動的機能を使わない限り、超えることはまずありません。

Q. STUDIOがサービス終了したら？ A. コードはGitHubに自分のものとして残っているので、STUDIO本体が消えてもサイトは動き続けます。 移行したことで、むしろ事業継続性が上がります。

Q. メールは大丈夫？ A. Phase 5-0でMX・TXTレコードを必ず控えて、Cloudflare側のDNSに同じものを入れ直せばGoogle Workspaceのメールはそのまま動きます。切り替え直後に自分宛にテストメールを送って確認しましょう。

最終コスト比較

項目STUDIO PersonalSTUDIO Business移行後（NSのみ変更）移行後（Cloudflare移管）ホスティング¥14,280/年¥59,760/年¥0¥0ドメインプラン込みプラン込みSquarespace価格 ¥2,000〜3,000約¥1,600/年（.com原価）SSL込み込み¥0¥0CDN込み込み¥0¥0年間合計¥14,280¥59,760約¥2,500約¥1,60010年合計約14万円約60万円約2.5万円約1.6万円

Business契約の方がCloudflare移管まで完遂すると、10年で約58万円の節約になります。

まとめ — 払わなくていいサブスクは、止めよう

STUDIOは素晴らしいサービスです。でも**「デザインを作る」フェーズと「サイトを維持する」フェーズでは必要な機能が違います。** 完成したサイトを維持するだけなら、月額¥1,190〜¥4,980は明らかにオーバースペック。

この記事の構成に移行すると、

年間**¥14,000〜¥60,000のランニングコストが¥1,600前後**に
更新はClaude Codeに日本語で話しかけるだけ
表示速度はCloudflareのグローバルエッジでむしろ速くなる
コードはGitHubに残るので、STUDIOが万一なくなっても自分のサイトは生き続ける

私は実際にこの構成でSTUDIOを解約しました。同じように「維持費がじわじわ痛い」と感じている方の背中を、この記事が押せれば嬉しいです。

参考リンク（一次情報）

ここまで読んでいただきありがとうございました。実際にやってみて分からないところは、Claude Codeに本記事のURLごと貼って「この手順の◯番目でつまずいた」と聞けば、だいたい解決します。

同じ悩みを持つ誰かの役に立ちますように。

この記事は note にも掲載しています：note で読む