Claude Code×Astroでコーポレートサイトを作り直す──テンプレート単位の工程表と、更新する人で変わる見積もりの計算例

黒字化の外科医｜Web制作会社の「実務改善」経営参謀

2026年11月2日 07:21

この記事は、Claude Code×Astroでコーポレートサイトを作り直す案件を、テンプレート単位の工程で見積もり、粗利を残して受ける方法を扱います。

「軽くて速いサイトに作り直したい」は、要件ではない

「今のサイトは重いので、新しい技術で作り直してほしい」

コーポレートサイトの作り直しは、こう依頼されることが増えました。
けれど「速い」は結果であって、範囲ではありません。ページ数で見積もると、同じ形のページが多い会社でも、形がばらばらな会社でも、同じ金額になってしまいます。

Claude Codeは速く書けますが、何を何種類つくるか決めないと、修正の往復が増えます。

Astroでの作り直しとは、ページを「テンプレートの種類」に分け、動く部品だけにJavaScriptを載せる設計の仕事である

黒字化の外科医です。Astroでの作り直しを、粗利の残る案件にする工程の分け方を解剖します。

テンプレートで分けるべき理由は、三つあります。

第一に、Astroは「動かない部分」を最初から軽くする仕組みだから。
公式ドキュメントでは、Astroはコンポーネントを既定でHTMLとCSSに描画し、クライアント側のJavaScriptを自動で取り除くと説明しています（Astro公式ドキュメント、2026年11月2日確認）。動かしたい部品にだけ `client:load` や `client:visible` などの指定を付けます。どの部品を動かすかが、設計の中心になります。

第二に、工数はページ数ではなく、テンプレートの種類で決まるから。
トップ、下層の汎用、お知らせ一覧、詳細、採用、問い合わせ。種類が決まれば、残りは流し込みの作業です。流し込みは、Claude Codeに任せやすい作業でもあります。

第三に、「誰が更新するか」で構成が変わるから。
社内のエンジニアがMarkdownで更新するなら、Astroのコンテンツコレクションで足ります。総務の担当者が更新するなら、CMSとの連携が必要です。ここを決めずに受けると、納品の直前に構成が変わります。

公式ドキュメントで確かめた、Astroの事実

以下は、Astro公式ドキュメントで確かめた範囲です（2026年11月2日確認）。

コンポーネントは既定でHTMLとCSSになり、`client:*` の指定を付けた部品だけがJavaScriptを読み込む
`server:defer` を付けると、その部品だけを後から描画する「サーバーアイランド」にできる
コンテンツコレクションは、ローカルのMarkdownやJSONを読み込み、Zodのスキーマで項目を検査して型を作れる。独自のローダーで、CMSやAPIから取得することもできる
Cloudflare、Netlify、Node、Vercelなどのアダプターがあり、表示のたびに描画する構成にもできる
Astro公式のドキュメント用MCPサーバーがあり、`claude mcp add --transport http astro-docs https://mcp.docs.astro.build/mcp` でClaude Codeに追加できる

今すぐ試せる：既存サイトをテンプレートの種類に分けるプロンプト

私はWeb制作会社のディレクターです。既存のコーポレートサイトをAstroで作り直します。
次のページ一覧から、テンプレートの種類と工数の見積もりの材料を作ってください。

【前提】
・既存サイトのページ一覧（URLと、ページの名前）：〔貼り付け〕
・更新する人：〔社内のエンジニア／総務の担当者／制作会社に依頼〕
・動きが必要な部品：〔スライダー、絞り込み、フォーム など〕

1. ページを、レイアウトが同じものごとにまとめ、テンプレートの種類を名前を付けて出す。
2. 各テンプレートに、該当するページの数を書く。
3. JavaScriptが必要な部品を、テンプレートごとに書き出す。
4. 「更新する人」から、Markdown管理かCMS連携かの案を、理由とともに出す。
5. 判断に迷うページを、顧客への質問として書き出す。

推測で決めた箇所には「要確認」と書くこと。

作り直し工場：工程表と見積もりの型

見積もりの計算例

（例：時間単価8,000円、全20ページ、テンプレート6種類）
設計（テンプレートの分類、部品の一覧）　 10時間
テンプレートの実装　6種類 × 8時間　　　 48時間
原稿と画像の流し込み　20ページ × 1時間　 20時間
問い合わせフォームの連携　　　　　　　　　6時間
表示と動作の確認、修正　　　　　　　　　 10時間
合計　　　　　　　　　　　　　　　　　　 94時間 × 8,000円 ＝ 752,000円

ページが40に増えても、テンプレートが同じ6種類なら、増えるのは流し込みの20時間だけです。
ページ数ではなく、テンプレートの種類で見積もる意味がここにあります。

更新する人で変わる追加の工程

社内のエンジニアがMarkdownで更新
　→ コンテンツコレクションとスキーマ、更新手順書
総務の担当者が管理画面で更新
　→ CMSの導入（スキーマ設計、権限、公開時の再ビルド）を別の工程で見積もる
制作会社が更新を代行
　→ 更新の月額（本数と、1本あたりの時間）を保守契約に書く

CMSと組み合わせる場合の範囲と見積もりは、こちらで扱いました。

▶

Claude Codeに任せる工程と、人が見る工程

【任せやすい】
・決まったテンプレートへの原稿の流し込み
・コンテンツコレクションのスキーマの下書き
・旧サイトのURLと新サイトのURLの対応表の下書き

【人が見る】
・どの部品にJavaScriptを載せるかの判断
・表示の崩れと、スマートフォンでの見え方
・フォームの送信先と、個人情報の扱い
・公開の判断

URLが変わる作り直しは、検索の評価を落とさない手順が要ります。

▶ サイト移行のリダイレクトとSEO、「少しずつ移す」を誤解しない──中身は段階で入れ替え、URLは一度で変える。Google検索セントラルで確かめた手順、URL対応表の型、転送の工数の計算例

構造的なリスク

逆説を指摘しておきます。

Astroで作り直すと、表示はたしかに軽くなります。
けれど、顧客が本当に困っていたのが「更新しにくい」ことなら、速さは解決になりません。作り直しの理由を一つずつ聞き、技術ではなく困りごとに合わせて構成を決めてください。

▶ 脱WordPressの判断基準、「流行り」や「好み」で移らない──ノーコード・静的サイト・ヘッドレスと比べる6つの物差しと、3年の総費用の計算例

よくあるQ&A

Q. WordPressから移すとき、ブログ記事はどうするか？

本数と、本文の中の画像や埋め込みの扱いで工数が変わります。移行のスクリプトはClaude Codeで書けますが、崩れた記事の手直しは、本数で別に見積もります。

Q. 速くなることを、成果として約束してよいか？

計測の値は、画像や外部のタグでも変わります。約束するのは「直した項目と、前後の計測の記録を渡すこと」までにします。

Q. 社内にAstroを書ける人がいない。

テンプレートの数が少ない案件から始めてください。最初の1件の工数の実績が、次の見積もりの物差しになります。

最後に

Astroでの作り直しの値段は、ページ数ではなく、テンプレートの種類と「誰が更新するか」で決まります。

動く部品と更新の方法を先に決めてから見積もった会社だけが、速く書ける時代にも、作り直しの案件で粗利を残せるのです。

これまでの記事は、メンバーシップ「黒字化オペ室」でまとめて読めます。月額1,980円、記事2本分の金額です。詳しくはプロフィールから。

#Web制作会社 #Astro #ClaudeCode #コーポレートサイト #リニューアル #見積もり #制作会社経営 #中小企業 #Jamstack #受託開発