Article

Webリニューアルの費用相場:予算策定とコスト削減のポイント

高田晃太郎
Webリニューアルの費用相場:予算策定とコスト削減のポイント

国内外の調査を総合すると、企業サイトのWebリニューアルの周期は平均3〜5年¹、予算超過リスクは範囲管理が甘い場合に顕著に高まるという傾向があります。編集や運用の現場で何度も見てきたのは、見積の分解が甘いほどブレ幅が大きくなるという事実です。単にベンダーの見積が高い・安いではなく、要件の粒度、非機能要求(セキュリティや性能など機能以外の品質)、移行の前提といった“見えにくいコスト”が結果を左右します。特にコンテンツ移行と内部統制の承認プロセスを軽く見積もると、後半の工数が雪だるま式に増えます。だからこそ、費用相場を語るときは価格帯の暗記ではなく、何にいくら掛かるのかを分解して理解し、意思決定のための比較軸を持つことが重要です。この記事では、CTOやエンジニアリングマネージャーが取締役会や事業部と同じ言語で議論できるよう、費用相場、算定式、TCO・ROIの試算、そして実務で効くコスト削減の打ち手を、現場の感覚と数字の両面から整理します。

Webリニューアル費用相場の実像と前提条件:金額は“式”で決まる

まず前提を揃えます。Webリニューアル費用の大枠は総額=人月単価×総工数+外部費用(撮影・翻訳・計測等)+ライセンス・インフラ+検証環境という式で表せます。ここで言う人月単価は1人が1カ月フル稼働する費用感で、上流から実装までを含む都市圏ベースで120〜180万円のレンジが現実的です。要件定義や情報設計などの上流比率が高いほど平均単価は上がります。ニアショアや実装中心の体制に寄せれば90〜140万円に下げられる一方、プロジェクトの不確実性が高い案件では、上流に経験者を厚く配置したほうが結果的に総工数を圧縮できることも珍しくありません²。

規模感別に帯を示すと、小規模なコーポレートサイトでテンプレートが少なく既存CMSの延長に収まるなら200〜600万円が見えやすい水準です。中規模でテンプレートが10〜20程度、ページ数が100〜300、検索や絞り込みといったUI複雑度が中程度の場合は300〜800万円がメドになります。ここに多言語やヘッドレスCMS、認証連携、複雑な投稿フローが入ると一気に跳ねて800万円〜2,500万円。マーケットプレイスや会員基盤と深く連携し、ゼロダウンタイムの切替やWCAG 2.1 AA順守、SOC 2やISMS前提のセキュリティ統制が必要な領域になると3,000万円超も起こり得ます。金額が広く振れる理由は、見栄えではなく非機能要求と移行の難しさが主要因だからです³。

工数をもう少し解像度高く見ます。情報設計と要件定義で全体の10〜20%、デザインとコンポーネント設計で20〜30%、フロント実装とCMS構築で30〜40%、バックエンド連携や検索基盤があればさらに10〜20%、QAとUAT、アクセシビリティ検証で10〜20%、そしてPMOとコミュニケーションで10〜15%を見込みます。職種横断で並列化すれば、12〜24週間のスケジュールで走る構成が一般的です。見落とされがちなのがコンテンツ移行で、既存ページを整形し構造化するだけでも1ページあたり10〜25分、外注単価を4,000〜8,000円/時と置くと、200ページで概算13〜33万円、図表やCTA差し替えを伴えば倍増します。媒体の質を保つための編集ディレクションが入れば、移行コストはさらに膨らみます。

CMSとホスティング、ライセンスの読み(ヘッドレスCMS/インフラ/セキュリティ)

CMSはオープンソースのセルフホストか、SaaS/ヘッドレスかで費用構造が変わります。セルフホストは初期費が実装寄りに乗り、運用でインフラとセキュリティの手当が必要です。ヘッドレスは月額数万円〜数十万円のライセンスに加えて配信量に応じた課金が発生しますが、編集体験やワークフロー、マルチブランド展開では優位に働きます⁴。ホスティングはCDN(コンテンツ配信網)やWAF(Webアプリケーションファイアウォール)、Bot対策をセットで考えるべきで、DDoS緩和や国別配信を前提にすると月額が数万円からスタートし、トラフィックと機能で逓増します。パフォーマンスをKPIに置くなら、画像最適化やエッジキャッシュ、SSR/ISRの戦略がSLAに直結するため、ここへの投資は売上影響のある“変動費”と捉えるのが現実的です。実際にLCP(Largest Contentful Paint)の短縮がコンバージョン改善に結びついた事例も報告されています⁵。

工数の見える化が相場感を作る(見積精度の鍵)

相場は市場が決めるというより、WBSの粒度が決めます。同じ“テンプレート10”でも、検索結果、一覧、詳細、比較、フォーム、サンクス、モーダル、バリエーションの有無で実装量は倍々ゲームです。デザイン一式という曖昧な言い回しも危険で、ブレークポイントの数、テーマのバリエーション、ダークモード、コンポーネントの状態数が工数の真因です。ベンダーと見積の根拠を対話するなら、1テンプレート当たりの実装時間、1コンポーネント当たりの状態数、ラウンドトリップの回数といった生産性指標で会話をするのが有効です。

予算策定のフレーム:KPIから逆算してTCO・ROIで語る

経営と握るべき順序は、先にKPI、次にスコープ、最後にコストです。例えば採用サイトなら応募完了数と候補者の質、B2Bのリード獲得ならMQLからSQLへの転換効率、ECならLTVとチャネル別の粗利率。ここで**“ページを綺麗にする”ではなく“数値を改善するために何をやるか”**を明示すると、施策の優先度が自然に定まります。スコープの手触りを持つには、核となる体験をMVP(最小実用プロダクト)で定義し、ローンチに乗せる範囲と次フェーズへ送る範囲を線引きします。非機能要求は後付けが高くつくため、SLO(サービス目標)、アクセシビリティ、セキュリティ統制、監査要件を最初からコスト化しておきます。

事前合意に効くのがTCO(Total Cost of Ownership:総保有コスト)の視点です。初期費だけでなく、保守・運用・ライセンス・インフラ・測定・改善の継続費を3年で積み上げます。例えば初期費が1,200万円、保守と継続改善が月額40〜120万円、ライセンスと配信が月額10〜30万円だと、年額は600〜1,800万円、3年TCOは2,640〜5,520万円になります。ここに社内運用の人件費を含めるかどうかは企業によりますが、少なくとも経営会議では**“初期費が高いか安いか”ではなく“3年で必要な投資と回収の絵姿”**で語るべきです。

回収の根拠づけにはROI(Return on Investment:投資対効果)の簡易モデルが役立ちます。月間セッションが50万、コンバージョン率が1.2%から1.6%に改善、平均単価が9,000円という仮説を置くと、増加分は50万×0.004×9,000で月間1,800万円、年換算で2.16億円のインクリメンタル売上です。もちろん全てがUI改善の寄与ではないため、媒体ミックスやキャンペーンの影響を除いたアトリビューション設計が必要ですが、定量モデルを先に置くと、施策の優先度とダッシュボード設計が一気に明瞭になります。パフォーマンスKPIをLCP2.5秒以下、CLS(Cumulative Layout Shift)0.1以下、INP(Interaction to Next Paint)200ms以下と具体指標に落とせば、画像最適化やCritical CSS、Edgeキャッシュの投資が営業利益にどう寄与するかも説明しやすくなります⁵。

アクセシビリティ、セキュリティ、計測は“後回しが一番高い”

WCAG 2.1 AA(国際的なウェブアクセシビリティ指針)の順守、認証や個人情報の扱い、Cookie同意の設計、同意管理プラットフォームの導入、タグ設計やサーバーサイド計測など、後から差し込むほど設計のやり直しが発生します。色コントラストやキーボード操作性はデザインの初期決定に強く依存し、計測もデータレイヤーとイベント命名の一貫性が生命線です。セキュリティではWAFやCSP(コンテンツセキュリティポリシー)、ヘッダ強化、SAST/DAST(静的/動的解析)をCIに組み込む準備を初期から整え、依存ライブラリの脆弱性監視を運用予算に含めておきます。これらは見積の“雑費”ではなく、KPI達成に不可欠な基盤投資だと認識して、あらかじめ費目を立てておきましょう。

コスト削減の具体策:品質を落とさずに“賢く削る”(コスト最適化)

削減は値切りではありません。高い効果に資源を集中し、低い効果は後に回す意思決定です。最初に効くのはスコープの彫り込みで、MVPに必要な画面とテンプレートを限定し、ローンチ後のバックログに回す範囲を明確にします。テンプレートは横展開可能なデザインシステムに寄せ、バリエーションの乱立を抑えます。コンポーネント単位で状態を定義し、デザインと実装の言語を合わせると、手戻りが劇的に減ります。Figmaのコンポーネントとデザイントークンを初期から整備し、Storybookと結び付けてドキュメント化すれば、ステークホルダー合意のスピードが上がり、結果として工数を圧縮できます。

コンテンツ移行は自動化の余地が大きい領域です。旧CMSのエクスポートを正規化し、変換マッピングを定義して新スキーマへ投入するだけで、手作業の工数を半分以下に圧縮できることがあります。正規表現やHTMLクリーニング、画像の一括最適化を織り込めば、品質も安定します。全移行を外部委託せず、優先度の低い長尾ページは社内で進めるなどのハイブリッド運用も、費用対効果が高い打ち手です。

アーキテクチャ面の選択も効きます。ヘッドレス採用時はAPI連携の優先度を決め、初期はCRMやMAのコアな連携に絞り、残りはWebhookとバッチで受ける構えが現実的です。サーバーはマネージドを基本にし、CDNとWAFをセットで調達することで、プラットフォーム運用の人件費と障害リスクを圧縮します。テストはリスクベースで配分し、クリティカルパスのE2Eを厚く、その他はVisual RegressionとLintで守る。CI/CDを整え、プレビュー環境を誰でも触れるようにすると、レビューの待ち時間が消え、プロジェクトのカレンダーロスが減ります。

機能の選び方も影響します。フォームは独自実装よりも信頼できるSaaSを活用し、認証もIdP(アイデンティティプロバイダ)を用いてゼロから作らない。検索は要件が複雑でなければホスト型をまず使い、スコアリングのカスタムやパイプラインが必要になったら自前に切り替える。画像最適化や配信はビルド時に潰し、ランタイムの負荷とコストを抑える。こうした判断の一つひとつが、品質を落とさずに費用を削る最短路になります。

よくある失敗パターンを先回りで潰す(Webリニューアルの落とし穴)

無料テーマを前提に高度なUIを足していくと、結局はテーマの制約を迂回する工数が積み上がり、ゼロから作るより高くつくことがあります。逆にすべてを独自開発に振ると、保守性と人材確保で詰みやすい。データ移行を後回しにすると、UATの後半で“本当の難しさ”が露呈して手戻りが出ます。組織面ではステークホルダーの合意形成を軽視するのが最大の落とし穴で、承認の定義とスケジュールへの組み込みができていないと、意思決定の遅延がそのまま費用に跳ね返ります。多言語対応やアクセシビリティも後付けが一番高価なので、最初から設計に織り込むのが鉄則です。

ベンダー選定と見積比較:同じ物差しで測る(RFPと評価基準)

見積比較のコツは、同じ前提で“同じもの”を比べることです。スコープの定義にユースケースと非機能を含め、含む・含まないを明記して、仮説でよいので移行方針と計測のやり方まで書き切ります。これができるRFPであれば、ベンダー間の差は生産性と品質保証の設計に集約しやすい。見積は粒度を揃え、テンプレートあたりの工数、コンポーネント数、ラウンド回数、UATサイクル数、バグ修正の定義、無償改修期間といった比較可能な指標で会話します。セキュリティ要件は責任分界とSLA、ログの保全、監査対応の可否まで踏み込むべきで、監視・障害一次対応の有無も総額に効くポイントです。

チーム体制はスキルミックスが重要です。上流に強いリードが入っているか、デザインシステムやアクセシビリティの実績があるか、パフォーマンスチューニングの手札を持っているか。実物の成果物として、情報設計のアウトライン、CMSスキーマの設計例、コンポーネントのドキュメントを見せてもらうと、工程間の整合性が判断できます。参考事例のヒアリングは華やかなUIではなく、移行や承認プロセスの泥臭い話を尋ねるのが本質に迫る近道です。契約は準委任をベースにしつつも、明確なマイルストーンと検収定義、チェンジコントロールの手順を合意し、予備費と優先度づけを透明にしておくと、スコープ変動時の軋轢が減ります。見積精度を高めるための事前ディスカバリーに数十万円の小規模契約を置くのも、全体の無駄を減らす有効な投資です。

まとめ:数字で語り、段階で進め、TCO/ROIで学習を回す

費用は相場表で覚えるものではなく、要件と非機能と移行の三点で決まります。だからこそ、KPIから逆算してMVPを定め、3年のTCOとROIで経営に語り、リスクの高い領域を先に潰す計画で進めるのが、最短で成果に辿り着く道です。もし今、予算の根拠がページ数や“全面刷新”という言葉に寄っているなら、WBSと数値モデルに言い換えるだけで、議論の質は一段上がります。

最初の一歩は小さくても構いません。現状のテンプレートとコンポーネントを棚卸しし、移行の難所と非機能の抜けをメモに起こして、MVPの画面群を仮置きしてみてください。可能なら簡易のROI計算を手元で回し、経営と対話する材料を整えましょう。次に読むべきは、パフォーマンスの実装観点と、ヘッドレスやデザインシステムの選定論点です。あなたのチームの次の一手が、最小の投資で最大の効果を生むことを願っています。

参考文献

  1. LeProJet. 企業サイトのリニューアル周期調査(日経225構成企業, 2021年). https://www.leprojet.co.jp/sales/archives/1380
  2. HBLAB. システムエンジニアの人月単価の相場は?職種別・スキル別の目安. https://hblab.co.jp/blog/cost-engineer-per-month/
  3. Ferret One. コーポレートサイトのリニューアル費用相場と内訳. https://ferret-one.com/blog/web-renewal-cost
  4. LeadGrid. CMSの月額費用相場は?SaaS/ヘッドレスの料金レンジ. https://goleadgrid.com/blog/cms-monthly-fee
  5. web.dev. Renault: Improving Core Web Vitals increased conversions. https://web.dev/case-studies/renault