BackOps

自社サイト（backops.jp）をClaude Codeで内製（事例）

制作費30万〜100万円を月額¥250にした事例。Astro + Cloudflare Pages で構築、半日で公開。

内製サイト構築のイメージ。コードと配信構造を抽象化したイラスト

AIでバックオフィス自動化を専門にしている mzohya です。 経理・EC・業務ワークフローの自動化を実装事例ベースで発信しています。 今回は、自分の事業サイト（backops.jp）を Claude Code で内製した話。

開業を控えて、こんな悩み、ありませんか？

  • ホームページを作りたいが、制作会社に見積を取ったら 30万〜100万円
  • ノーコードツールも調べたが、月額が気になるし、結局できることに限りがある
  • 自分で書く選択肢もあるが、Web開発の経験は浅い
  • そもそもどれが自分に合っているか判断軸が分からない

私自身、自分の事業を始めるタイミングでまったく同じ状況に直面しました。 最終的に選んだのが「Claude Code に頼んで自分で書く」でした。月額¥250、半日で公開、その後の運用も楽。

その判断軸と実装の流れを、再現性のある形で残します。

結論

  • 自社サイト（LP・お問い合わせ・記事ブログ機能）を、Claude Code とペアプロで構築
  • 月額コスト ¥250（ドメインのみ、ホスティング・フォーム・分析は無料枠）
  • 初稿〜公開まで 半日、その後の機能追加も都度1時間程度
  • ノーコードツール（Wix・STUDIO・ペライチ）を選ばなかった理由と、自分でコードを書く判断

なぜ内製したか

開業時、最初は「ノーコードで早く出そう」と Wix や STUDIO を見た。実際それで十分なケースは多い。

ただ、自分の事業（バックオフィス自動化）に当てはめると、引っかかることが3つあった。

1. 「自分で手を動かして自動化する人」という看板の整合性

「業務自動化を AI で実現できますよ」と提案する側が、自分のサイトはノーコードで他人任せ、というのが何となく弱い。

サイトそのものが、自分の手の動かし方を示すサンプルになる方が、提案時の説得力が違う。

2. 月額コストの構造

10年運用したときの総額で比較すると、差が見えてくる。

  • 制作会社に外注 + 月額保守: 初期30万〜100万円 + 月額¥5,000〜¥20,000 → 10年総額 96万〜340万円
  • ノーコード（中位プラン）: 初期¥0 + 月額¥3,000 → 10年総額 36万円
  • 自作（今回）: ドメイン¥3,000/年 + 月額¥0 → 10年総額 3万円

10倍〜100倍の差。事業初期にこの差は意味が大きい。

自作の内訳：

  • ドメイン（.jp）: 約¥250/月
  • Cloudflare Pages: ¥0
  • Formspree（フォーム）: ¥0（無料枠で十分）
  • GA4・Search Console: ¥0
  • 合計: ¥250/月

3. 細部のコントロール

  • 文章の改行位置、余白、色、フォント
  • 構造化データ、サイトマップ、noindex
  • お問い合わせフォームの送信先・フィールド
  • お問い合わせ完了ページの設計

ノーコード系で頑張っても限界が出てくる。コードなら全部自由。

3つの選択肢、どれを選ぶべきか

開業時のサイト作成は、現実的に以下3択に集約されます。それぞれ向き不向きがあるので、判断軸を整理。

1. 制作会社に外注

  • 初期費用: 30万〜100万円
  • 月額ランニング: ¥0〜数千円（保守契約による）
  • 公開までの時間: 1〜3ヶ月
  • デザインの自由度: 高い
  • 細部のコントロール: 高い（要相談）
  • 更新: 都度依頼
  • 学習コスト: 不要
  • 必要な技術理解: 不要

2. ノーコード（Wix / STUDIO / ペライチ等）

  • 初期費用: ¥0
  • 月額ランニング: ¥1,500〜¥4,000
  • 公開までの時間: 数時間〜1日
  • デザインの自由度: 中（テンプレ依存）
  • 細部のコントロール: 限定的
  • 更新: 自分で簡単
  • 学習コスト: ほぼ不要
  • 必要な技術理解: 不要

3. コードを自分で書く（今回）

  • 初期費用: ドメイン年¥3,000程度
  • 月額ランニング: ¥250（ドメインのみ）
  • 公開までの時間: 半日〜1日（AI併用時）
  • デザインの自由度: 高い
  • 細部のコントロール: 完全に自由（SEO・noindex・フォーム挙動すべて）
  • 更新: コードを書く＋コミット
  • 学習コスト: あり（AI併用で大幅軽減）
  • 必要な技術理解: 基本的な HTML/CSS, Git

どれが向くか

  • 外注が向く人: 自分の時間を1円も使いたくない、ブランド要件が複雑、規模が大きい
  • ノーコードが向く人: とにかく早く・安く始めたい、技術に触りたくない、運用も短期想定
  • コードを書くのが向く人: 長期運用、細部にこだわりたい、自分の事業に「自分の手の動かし方」を見せたい

私の事業は 「業務自動化の支援」。「AI使えば自分で書けますよ」と提案する以上、自分のサイトもその実例である方が説得力がある。だから3択目を選びました。

技術選定

なるべくシンプルに。

  • 静的サイトジェネレータ: Astro 6 — MDXで記事、Markdownでコンテンツ管理、ビルドが速い
  • スタイリング: Tailwind v4 — デザイン書き換えが速い、クラス名で完結
  • 記事フォーマット: MDX — Markdown + コンポーネント埋め込み
  • ホスティング: Cloudflare Pages — 無料、CDN内蔵、自動デプロイ
  • お問い合わせ: Formspree — 無料枠でメール転送、送信完了ページを自前で用意可能
  • 分析: GA4 + Search Console — 無料、定番
  • ドメイン: お名前.com（.jp） — 慣れているだけ

選ばなかったもの

  • WordPress: メンテ・セキュリティのコストが見合わない
  • Next.js: SSGメインなら Astro の方が軽い
  • STUDIO/Wix: 上記の通り

デザイン方針: 静かな信頼感

「経理・バックオフィス」を扱う以上、デザインは派手にしない。意識した3点：

  1. 低彩度のパステル（ベージュ・セージグリーン・ダスティブルー系）
  2. 余白を大きく取る
  3. 装飾を最小化（影・グラデーション・絵文字を控える）

このトーンを Claude Code に「静かな信頼感、低彩度、装飾控えめで」と伝えると、Tailwind のクラスをこの方針に揃えてくれる。shadow-2xl や bg-gradient-to-r を多用したコードを出してきたら方針確認、という運用。

実装の流れ

Step 1: Astro プロジェクト初期化

npm create astro@latest backops -- --template minimal
cd backops
npm install @astrojs/sitemap @astrojs/mdx @tailwindcss/vite

Step 2: ページ構造の設計

最初は最小構成：

src/pages/
  index.astro        # LP（Hero + 課題 + サービス + 事例 + CTA）
  about.astro        # 自己紹介
  contact.astro      # お問い合わせ
  contact/thanks.astro  # 送信完了
  privacy.astro      # プライバシーポリシー
  disclaimer.astro   # 免責事項
  posts/
    index.astro      # 記事一覧
    [...slug].astro  # 記事詳細

Step 3: コンテンツ整理

LP の構造：

  1. Hero: 1行のキャッチコピー + サブコピー + CTA
  2. お困りごと: 想定読者の悩み3つ
  3. 発信テーマ: 強み（経理）と関連業務
  4. 最新の知見・事例: 直近3記事をカードで
  5. X フォロー誘導: コミュニティ形成

ここを Claude Code に下書きしてもらい、文言を自分で詰める。

Step 4: コンテンツ運用設計

  • 記事: MDX で src/content/blog/ に配置、content.config.ts でスキーマ定義
  • タグ: 自動生成、/tags/[slug] で一覧
  • ヒーロー画像: 各記事フォルダに同梱

Step 5: SEO・分析

  • サイトマップ: @astrojs/sitemap 自動生成
  • OG画像・canonical・JSON-LD: SEOコンポーネントで一元管理
  • GA4: gtag.js を BaseLayout に埋め込み
  • Search Console: ドメインプロパティで登録、サイトマップ送信

Step 6: フォーム連携

Formspree の無料プランで：

  • 送信先メールアドレスだけ設定
  • POST先 URL を contact フォームに貼る
  • 送信後の遷移先を /contact/thanks/ に指定
  • スパム対策（reCAPTCHA や hCaptcha）も設定可能

Step 7: デプロイ

GitHub に push → Cloudflare Pages の自動連携でビルド・公開。

ドメイン（backops.jp）を Cloudflare DNS に追加して終了。

ハマりどころ（公開後の SEO 系）

公開してから2週間、Search Console で警告がいくつか出た。一つずつ対処。

ハマり1: Cloudflare Pages の trailing slash 問題

Astro はディレクトリ形式（/contact/index.html）で出力。Cloudflare Pages はそれを /contact/ で配信し、/contact（slashなし）には 308 を返す。

これが Search Console から「ページにリダイレクトがあります」警告として上がってくる。

対処：

// astro.config.mjs
export default defineConfig({
  trailingSlash: 'always',  // sitemap・canonical・配信URL を統一
  // ...
});

これで内部リンクと sitemap がすべて trailing slash 付きで揃う。Google からの警告は次回クロール時に消える。

ハマり2: 「クロール済み - インデックス未登録」警告

Search Console から、/disclaimer/ /privacy/ /contact/thanks/ などが「クロールしたけど検索結果には載せない」扱いに。

これらの法務・確認系ページは、そもそも検索結果に出る必要がない。Google は気を利かせて自動判定してくれているが、こちらから明示する方がクリーン。

対処：BaseLayout に noindex プロパティを追加し、該当ページで明示的に noindex 化。

---
// BaseLayout.astro（抜粋）
interface Props {
  noindex?: boolean;
  // ...
}
---
<head>
  {props.noindex && <meta name="robots" content="noindex, nofollow" />}
</head>
<!-- privacy.astro -->
<BaseLayout title="プライバシーポリシー" description="..." noindex={true}>

加えて、サイトマップからも除外：

sitemap({
  filter: (page) =>
    !page.includes('/contact/thanks') &&
    !page.includes('/disclaimer') &&
    !page.includes('/privacy'),
}),

ハマり3: 過去の URL 構造の名残（404 警告）

サイト構造を変えたとき（例: /categories/ を廃止して /tags/ に統一）、Google が古い URL（/categories/usecase など）をクロールして 404 を返す。

これは時間が経てば Google が自然にインデックスから削除する。慌てず放置でOK。

コスト（実績）

実際に運用してみての月額：

  • .jp ドメイン: 約¥250/月
  • Cloudflare Pages: ¥0
  • Formspree: ¥0
  • GitHub: ¥0（Public・Private いずれも無料枠で完結）
  • 合計: ¥250/月

ドメインは年契約なので、初期費用とも言える。それ以外はランニング¥0。

公開後のメンテナンス所感

頻度高め:

  • 記事追加（MDX 1ファイル足してコミット → 自動デプロイ）
  • LP の文言調整（コピーを少し変えて push）

頻度低め:

  • スキーマ変更（content.config.ts に項目追加）
  • 新ページ追加

ほぼ発生しない:

  • セキュリティパッチ対応（静的サイトなので攻撃対象が少ない）
  • バックアップ（Git で完結）

WordPress 時代と比較して、明らかに楽。

Claude Code とのペアプロ所感

このサイト構築でも、SP-API 自動化と同じく Claude Code の存在は大きかった。

特に効いたところ:

  • Astro + Tailwind の組み合わせ: 知らなくても「Astro でMDXブログ + Tailwind v4」と言えば一発で構成が出てくる
  • デザインの方向性決め: 「静かな信頼感、低彩度」のような抽象的な指示を、具体的なクラス名（bg-slate-50, text-slate-600, font-medium）に変換してくれる
  • SEO・メタ情報の漏れ防止: 「OG画像、canonical、JSON-LD、サイトマップ、Search Console、GA4」と並べると一気に揃えてくれる
  • 公開後の警告対応: Search Console の警告画面を共有するだけで、原因特定と修正案を出してくれる

自分が関与する必要があった部分:

  • キャッチコピー・本文: ここは事業者の言葉でしか書けない
  • どのページを置くか・置かないか: 経営判断
  • デザイン方針: 「静かな信頼感」のような言語化は人間の仕事
  • 公開タイミング・告知の意思決定

AI ペアプロは「コードを書く速い手」+「Web開発のベストプラクティス集」を足したような感覚。 方針と意思決定は人間に残しつつ、それ以外を高速で進められる。

まとめ

  • 自社サイトは、Claude Code と Astro で月額¥250・半日で公開できる
  • ノーコードを選ばない理由は「自分の手の動かし方をサイトで示す」「コスト構造」「細部のコントロール」の3つ
  • 公開後の SEO 警告は、trailing slash 統一・noindex 化・404 放置で対処可能

こういうサイトを、自社でもやりたい方へ

「事業のサイトを自分で持ちたい」「ノーコードからコード製のサイトに切り替えたい」「公開後のSEO警告に困っている」という方の相談を受け付けています。

BackOps では、Claude Code を活用した以下のような自動化・サイト制作を専門に扱っています：

  • Astro + Cloudflare Pages による 静的サイト構築
  • Amazon SP-API、楽天市場API などの EC 自動化
  • MoneyForward / freee 連携の 経理自動化
  • Notion / Slack を起点とした 業務ワークフロー構築

お問い合わせ からお気軽にどうぞ。

#事例 #サイト制作 #Astro #Cloudflare #内製化