ホームページリニューアルの費用相場と見積もり内訳、予算の組み方
はじめに
「ホームページをリニューアルしたいけど、いくらかかるか分からない」
経営者の方からよく聞く悩みです。Web制作会社に見積もりを取ると、50万円と言われることもあれば300万円と言われることもある。なぜこんなに差があるのか、どこにお金をかけるべきなのか、判断がつかない——。
この記事では、制作会社側の視点から、見積もりの内訳と相場感をお伝えします。予算申請や社内稟議の根拠としてもお使いいただける内容を目指しました。
この記事のまとめ
- 制作費用の相場は30万〜300万円以上と幅広い。差が出る理由を理解することが大切
- 金額差を生む主な要素は「ページ数」「デザイン」「機能」「撮影・ライティング」「ディレクション範囲」
- 安すぎる見積もりは要注意。後から追加費用で結局同額になるケースも
- 制作費だけでなく「運用・維持費」も予算に組み込むべき
- 見積もり段階で「何が含まれていて、何が別料金か」を必ず確認する
ホームページ制作費用の相場感
まず、ざっくりとした相場をお伝えします。これは一般的な目安であり、要件によって変動します。
.pp-budget p { margin-top: 0 !important; }
/* ヘッダー */ .pp-budget-header { margin-bottom: 2em; text-align: center; }
.pp-budget-en { font-size: 0.7em; font-weight: 700 !important; letter-spacing: 0.18em; text-transform: uppercase; color: #EB9B6F; margin-bottom: 0.5em; }
.pp-budget-title { font-size: 1.25em; font-weight: 700 !important; color: #3A2804; line-height: 1.4; }
/* ゾーン縦積み */ .pp-budget-zones { display: flex; flex-direction: column; gap: 1em; }
.pp-budget-zone { background: rgb(255 255 255 / 0.12); border: 1px solid rgb(255 255 255 / 0.55); border-radius: 12px; box-shadow: 0 4px 12px rgb(58 40 4 / 0.12), 0 1px 3px rgb(58 40 4 / 0.08), inset 0 0 20px rgb(255 255 255 / 0.25); padding: 1.4em 1.5em; }
/* 中規模（製造業に多い）だけやや大きく */ .pp-budget-zone-medium { padding: 1.8em 1.5em; }
.pp-budget-zone-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 1em; margin-bottom: 1em; padding-bottom: 0.75em; border-bottom: 1px solid rgb(58 40 4 / 0.1); flex-wrap: wrap; }
.pp-budget-zone-label { font-size: 0.68em; font-weight: 700 !important; letter-spacing: 0.12em; text-transform: uppercase; color: #EB9B6F; margin-bottom: 0.3em; }
.pp-budget-zone-name { font-size: 1em; font-weight: 700 !important; color: #3A2804; }
.pp-budget-zone-price { font-size: 1.5em; font-weight: 700 !important; color: #3A2804; text-align: right; white-space: nowrap; }
.pp-budget-zone-price-unit { font-size: 0.55em; font-weight: 400 !important; color: #766156; }
.pp-budget-features { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 0.4em 1.25em; }
.pp-budget-features li { font-size: 0.88em; color: #766156; line-height: 1.6; padding-left: 0.9em; position: relative; }
.pp-budget-features li::before { content: ”; position: absolute; left: 0; top: 0.6em; width: 0.3em; height: 0.3em; border-radius: 50%; background: rgb(58 40 4 / 0.25); }
/* 中規模タグ：アクセントは1箇所だけ */ .pp-budget-mfg-tag { display: inline-block; background: rgb(235 155 111 / 0.15); border: 1px solid rgb(235 155 111 / 0.4); color: #EB9B6F; font-size: 0.78em; font-weight: 700 !important; padding: 0.3em 0.85em; border-radius: 20px; margin-top: 0.85em; }
/* 注記 */ .pp-budget-note { margin-top: 1.5em; font-size: 0.78em; color: #766156; line-height: 1.8; }
/* フッター */ .pp-budget-footer { margin-top: 1.75em; padding-top: 1.25em; border-top: 1px solid rgb(58 40 4 / 0.1); text-align: right; }
.pp-budget-logo { font-size: 0.72em; font-weight: 700 !important; letter-spacing: 0.18em; color: #EB9B6F; }
/* PC表示 */ @container (min-width: 599px) { .pp-budget { padding: 3em 2.75em; }
.pp-budget-title {
font-size: 1.4em;
}
.pp-budget-zones {
gap: 1.25em;
}
.pp-budget-zone-price {
font-size: 1.75em;
}
.pp-budget-features li {
font-size: 0.92em;
}}
Website Renewal Cost Guide
ホームページ制作費用の相場
<div class="pp-budget-zone pp-budget-zone-small">
<div class="pp-budget-zone-header">
<div>
<p class="pp-budget-zone-label">Small</p>
<p class="pp-budget-zone-name">小規模サイト</p>
</div>
<p class="pp-budget-zone-price">30〜80<span class="pp-budget-zone-price-unit">万円</span></p>
</div>
<ul class="pp-budget-features">
<li>5〜10ページ程度</li>
<li>会社概要・サービス紹介</li>
<li>お知らせ・問い合わせ</li>
<li>テンプレートベースも可</li>
</ul>
</div>
<div class="pp-budget-zone pp-budget-zone-medium">
<div class="pp-budget-zone-header">
<div>
<p class="pp-budget-zone-label">Medium</p>
<p class="pp-budget-zone-name">中規模サイト</p>
</div>
<p class="pp-budget-zone-price">80〜200<span class="pp-budget-zone-price-unit">万円</span></p>
</div>
<ul class="pp-budget-features">
<li>10〜30ページ程度</li>
<li>オリジナルデザイン</li>
<li>CMS導入・スマホ対応</li>
<li>撮影・ライティング込み</li>
</ul>
<span class="pp-budget-mfg-tag">製造業の中小企業に多い</span>
</div>
<div class="pp-budget-zone pp-budget-zone-large">
<div class="pp-budget-zone-header">
<div>
<p class="pp-budget-zone-label">Large</p>
<p class="pp-budget-zone-name">大規模サイト</p>
</div>
<p class="pp-budget-zone-price">200〜500<span class="pp-budget-zone-price-unit">万円〜</span></p>
</div>
<ul class="pp-budget-features">
<li>30ページ以上</li>
<li>会員機能・予約システム</li>
<li>EC・多言語対応</li>
<li>複数サービス統合</li>
</ul>
</div>
※ 上記は一般的な目安です。要件により変動します。
※ 運用・保守費用は別途かかります。
小規模サイト（5〜10ページ程度）
30万〜80万円
会社概要、サービス紹介、お知らせ、問い合わせフォーム程度のシンプルな構成。テンプレートベースのデザインで、自社更新機能（CMS）なしの場合は下限に近くなります。CMSを導入し、オリジナルデザインで作る場合は上限に近づきます。
中規模サイト（10〜30ページ程度）
80万〜200万円
複数の事業やサービスを紹介する企業サイト、採用情報も充実させたい場合など。オリジナルデザイン、CMS導入、レスポンシブ対応（スマホ対応）が標準的に含まれます。撮影やライティングを依頼すると上限に近づきます。
製造業の中小企業であれば、このあたりの価格帯が多い印象です。会社概要、製品・技術紹介、設備紹介、採用情報、お知らせといった構成が一般的です。
大規模サイト（30ページ以上、複雑な機能あり）
200万〜500万円以上
会員機能、予約システム、ECサイト、多言語対応など、複雑な機能を持つサイト。大企業のコーポレートサイトや、複数のサービスサイトを統合するようなプロジェクトも該当します。
見積もりの内訳、何にいくらかかるのか
.pp-cost p { margin-top: 0 !important; }
/* ヘッダー */ .pp-cost-header { margin-bottom: 2em; }
.pp-cost-en { font-size: 0.7em; font-weight: 700 !important; letter-spacing: 0.18em; text-transform: uppercase; text-align: center; color: #EB9B6F; margin-bottom: 0.5em; }
.pp-cost-title { font-size: 1.25em; font-weight: 700 !important; color: #3A2804; line-height: 1.4; margin-bottom: 0.5em; text-align: center; }
.pp-cost-subtitle { font-size: 0.85em; color: #766156; line-height: 1.7; }
/* セクション共通 */ .pp-cost-section { background: rgb(255 255 255 / 0.12); border: 1px solid rgb(255 255 255 / 0.55); border-radius: 12px; box-shadow: 0 4px 12px rgb(58 40 4 / 0.12), 0 1px 3px rgb(58 40 4 / 0.08), inset 0 0 20px rgb(255 255 255 / 0.25); padding: 1.4em 1.5em; position: relative; }
/* 運用費セクションだけ大きく（重要度が高い） */ .pp-cost-section-running { padding: 1.8em 1.5em; }
.pp-cost-section-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1em; margin-bottom: 1em; padding-bottom: 0.75em; border-bottom: 1px solid rgb(58 40 4 / 0.1); flex-wrap: wrap; }
.pp-cost-section-label { font-size: 0.68em; font-weight: 700 !important; letter-spacing: 0.12em; text-transform: uppercase; color: #EB9B6F; margin-bottom: 0.3em; }
.pp-cost-section-name { font-size: 1em; font-weight: 700 !important; color: #3A2804; }
.pp-cost-timing { text-align: right; }
.pp-cost-timing-label { font-size: 0.68em; color: #766156; margin-bottom: 0.2em; }
.pp-cost-timing-value { font-size: 0.82em; font-weight: 700 !important; color: #3A2804; }
/* 見落としバッジ：運用費セクションのみ */ .pp-cost-badge { position: absolute; top: -0.85em; right: 1.25em; background: #EB9B6F; color: #fff; font-size: 0.72em; font-weight: 700 !important; padding: 0.25em 0.75em; border-radius: 20px; letter-spacing: 0.05em; }
/* 項目リスト */ .pp-cost-items { display: flex; flex-direction: column; gap: 0.6em; }
.pp-cost-item { display: flex; gap: 0.75em; align-items: flex-start; }
.pp-cost-item-label { font-size: 0.88em; font-weight: 700 !important; color: #3A2804; white-space: nowrap; padding-top: 0.05em; }
.pp-cost-item-desc { font-size: 0.85em; color: #766156; line-height: 1.55; }
.pp-cost-item-price { font-size: 0.8em; font-weight: 700 !important; color: #EB9B6F; margin-top: 0.2em; }
/* コネクター */ .pp-cost-connector { text-align: center; padding: 0.6em 0; font-size: 0.8em; color: #766156; letter-spacing: 0.05em; }
/* まとめボックス */ .pp-cost-summary { background: rgb(255 255 255 / 0.12); border: 1px solid rgb(255 255 255 / 0.55); border-radius: 12px; box-shadow: 0 4px 12px rgb(58 40 4 / 0.12), 0 1px 3px rgb(58 40 4 / 0.08), inset 0 0 20px rgb(255 255 255 / 0.25); padding: 1.25em 1.5em; margin-top: 1.25em; }
.pp-cost-summary-title { font-size: 0.82em; font-weight: 700 !important; color: #EB9B6F; margin-bottom: 0.5em; }
.pp-cost-summary-text { font-size: 0.85em; color: #766156; line-height: 1.8; }
.pp-cost-summary-text strong { color: #3A2804; font-weight: 700 !important; }
/* フッター */ .pp-cost-footer { margin-top: 1.75em; padding-top: 1.25em; border-top: 1px solid rgb(58 40 4 / 0.1); text-align: right; }
.pp-cost-logo { font-size: 0.72em; font-weight: 700 !important; letter-spacing: 0.18em; color: #EB9B6F; }
/* PC表示 */ @container (min-width: 599px) { .pp-cost { padding: 3em 2.75em; }
.pp-cost-title {
font-size: 1.4em;
}
.pp-cost-item-label {
font-size: 0.92em;
}
.pp-cost-item-desc {
font-size: 0.88em;
}}
Total Cost Structure
ホームページ予算の全体像
制作費（初期費用）だけで予算を組んでいませんか？
公開後にかかる「運用費」も忘れずに。
Initial Cost
制作費（初期費用）
発生タイミング
公開時に一括
ページ制作
トップページ、会社概要、サービス紹介など
デザイン
テンプレート or オリジナルで大きく変動
機能開発
CMS（コンテンツ管理システム）、フォーム、予約システムなど
撮影・ライティング
プロに依頼すると仕上がりが変わる
▼ 公開後も続く ▼
Running Cost
運用費（ランニングコスト）
発生タイミング
毎月 or 毎年
サーバー・ドメイン
サイトを公開し続けるための基盤
年間 1〜3万円
WordPress保守
セキュリティ更新・バックアップ
月額 5,000〜3万円
更新代行
お知らせ投稿、内容修正など
都度 or 月額契約
予算策定のポイント
制作費だけで予算を組むと、公開後に「想定外の出費」が発生します。特にWordPress保守は、セキュリティの観点から必須です。被害に遭ってからでは、復旧費用と機会損失で何倍もの出費になります。
「50万と300万、なぜこんなに差が出るのか」——その答えは、見積もりの内訳を見れば分かります。
ページ数
単純にページ数が増えれば工数が増えます。ただし、「1ページいくら」の単純計算にはなりません。似た構成のページが増える場合と、1ページごとに設計が必要な場合では、工数が全く違います。
デザイン
ここで大きな差が出ます。
テンプレートベース：既存のデザインテンプレートをカスタマイズ。費用を抑えられる反面、他社と似た印象になることも。
オリジナルデザイン：自社のブランドや強みに合わせてゼロから設計。トップページのデザイン、下層ページのデザイン、スマホ版のデザインと、それぞれ工数がかかります。
機能
CMS（Contents Management System）：WordPressなどを導入し、自社でお知らせやブログを更新できるようにする機能。導入自体は標準的になっていますが、カスタマイズの度合いで費用が変わります。
その他の機能：問い合わせフォーム、資料請求フォーム、予約システム、会員機能、検索機能など。機能が増えるほど開発工数が増えます。
撮影・ライティング
意外と見落とされがちですが、ここにお金をかけると仕上がりが大きく変わります。
撮影：社屋、製品、スタッフの写真をプロに依頼。素材写真で済ませるか、オリジナル撮影するかで印象が全く違います。
製造業の場合、工場や設備の写真は特に重要です。「どんな設備があるのか」「現場の雰囲気はどうか」は、取引先も求職者も気にするポイント。スマホで撮った写真をそのまま使っているサイトも見かけますが、技術力や品質へのこだわりを伝えたいなら、ここはケチらない方がいいです。
ライティング：原稿を自社で用意するか、プロに依頼するか。「社長挨拶を書いてください」と言われても、なかなか筆が進まないもの。取材・ライティングを依頼すると、この負担がなくなります。
ディレクション費
制作会社の担当者が、要件整理、スケジュール管理、クライアントとのやり取り、社内調整を行う費用です。全体の10〜20%程度が相場です。
「ディレクション費って何？」と思う方もいるかもしれませんが、ここを削ると、やり取りがスムーズに進まなくなったり、認識のズレが発生したりします。プロジェクトを円滑に進めるための必要経費です。
「安すぎる見積もり」の落とし穴
相見積もりを取ると、極端に安い見積もりを提示されることがあります。その場合は注意が必要です。
後から追加費用で結局同額になる
契約時の見積もりは安かったのに、始まってみると「これは別料金です」「この修正は追加費用がかかります」と次々に請求が来る。結果として、相見積もりで高かった会社と同額、あるいはそれ以上になるケースがあります。
私がクライアントから聞いた話では、追加費用への不信感から契約解消を求めたものの、すでに締結済みのため返金されなかったというケースもありました。
何が「含まれていない」のかを確認する
安い見積もりには理由があります。以下の項目が別料金になっていないか、確認してください。
- スマホ対応（レスポンシブデザイン）
- SSL証明書（https化）
- CMS導入・初期設定
- 問い合わせフォーム設置
- 修正対応（回数制限があるか）
- 公開後のサポート
- サーバー・ドメインの取得代行
「含まれていると思っていた」と後で気づくと、追加費用の交渉力もなくなってしまいます。
製造業であれば、製品カタログや設備紹介ページが必要なケースも多いはずです。「トップページと会社概要だけ」の見積もりになっていないか、自社に必要なコンテンツが含まれているかも確認しましょう。
見落としがちな「運用・維持費」
制作費（初期費用）だけで予算を組むと、公開後に困ることになります。
サーバー・ドメイン費用
年間1〜3万円程度。制作会社が代行取得している場合は、月額費用に含まれていることもあります。
WordPress保守費用
WordPressは世界で最も使われているCMSですが、その分、攻撃対象にもなりやすいシステムです。本体やプラグインのアップデート、セキュリティ監視、定期的なバックアップといった保守作業が必要です。
「ハッキングされてから相談」では遅い。私がセキュリティの話をすると「そこまで必要ですか？」と言われることもありますが、被害に遭ってから対応すると、復旧費用と機会損失で何倍もの出費になります。
保守費用の相場は月額5,000円〜3万円程度。サイトの規模や保守内容によって変わります。
更新代行費用
自社で更新できる体制がない場合、制作会社に更新を依頼することになります。都度依頼だと割高になるため、月額の更新サポート契約を結ぶケースが多いです。
見積もり段階で確認すべきこと
「これくらいはやってくれると思っていた」「言わなくても分かると思っていた」——この認識のズレがトラブルの原因になります。
見積もりを受け取ったら、以下の点を確認してください。
何が含まれていて、何が別料金か
先述の「安い見積もりの落とし穴」で挙げた項目を、一つずつ確認しましょう。曖昧な場合は「これは見積もりに含まれていますか？」と聞いてください。
修正回数の上限
デザイン確認時、コーディング後など、各段階で修正回数が決まっている場合があります。上限を超えると追加費用になるのか、事前に確認しておくとトラブルを防げます。
納品後のサポート範囲
公開後に「ここを直したい」「表示がおかしい」となったとき、どこまで対応してもらえるのか。保守契約を結ばない場合、対応してもらえないこともあります。
素材や原稿は誰が用意するのか
写真、テキスト原稿、ロゴデータなど、制作に必要な素材を誰が用意するのか。自社で用意する前提なのに準備できていないと、スケジュールが遅延します。
まとめ：予算を組むときのチェックポイント
最後に、予算策定時に確認すべきポイントを整理します。
制作費（初期費用）
- 自社の規模・要件に合った相場感を把握したか
- 見積もりの内訳を理解したか
- 安すぎる見積もりの「含まれていないもの」を確認したか
運用・維持費（ランニングコスト）
- サーバー・ドメイン費用を把握したか
- WordPress保守の必要性を理解したか
- 更新体制（自社 or 外注）を決めたか
見積もり確認
- 何が含まれていて、何が別料金か明確か
- 修正回数、納品後サポートの範囲は確認したか
- 素材・原稿の準備担当は決まっているか
「失敗しない依頼の仕方」については、ホームページリニューアルで失敗しない依頼の仕方と制作会社に伝えるべきことで詳しくお伝えしています。制作会社に何をどう伝えれば、認識のズレなくプロジェクトを進められるのか。発注側・制作側の両方を経験した視点から解説しました。
予算感について「自社の場合はどのくらいが妥当か知りたい」という方は、お気軽にご相談ください。要件をヒアリングした上で、概算の目安をお伝えすることも可能です。