会社情報
採用情報
お問い合わせ
Article

中小企業のための低コストWebサイトリニューアル術

高田晃太郎
中小企業のための低コストWebサイトリニューアル術

Googleの公開データでは、モバイルの読み込み時間が1秒から3秒に延びるだけで直帰率が約32%増加することが示されています¹。さらにW3Techsの調査ではWordPressが世界のWebサイトの約43%を占め、標準技術の最適化だけで到達できる改善余地が大きい現実が浮き彫りになります²。公開事例や業界レポートの範囲を踏まえると、フルリプレイスではなく構成の見直しとキャッシュ設計を組み合わせた“段階的なリニューアル”に切り替えることで、初期費用と運用費の合計を30〜70%削減できるケースも見られます。中小企業のWebサイトリニューアルで重要なのは華美な再設計ではなく、配信構造と更新プロセスの再設計です。費用対効果（ROI）を最大化する本丸はそこにあります。

コストを溶かす要因を分解し、再設計する

費用が膨らむ局面は決まっていて、テンプレートの一からの作り直し、動的CMSに依存したままの配信、そして更新フローの属人化が三大要因になります。CTO視点では、設計をやり直すよりも、壊れやすい箇所を静的化し（HTMLを事前生成して配信）、変化する部分だけを動的に保つ発想がコストを一気に圧縮します。実務ではまずPV（閲覧数）と更新頻度の高いページ群を抽出し、コアとなる数十ページを静的配信に寄せます。商品情報やお知らせのように変更がある領域はヘッドレスCMS（管理と表示を分離したCMS）で管理し、ビルド時あるいは増分再生成で差分反映させると、更新の手間を増やさずにインフラコストを落とせます。さらに画像最適化とCDN（コンテンツ配信ネットワーク）キャッシュヒット率の向上はネットワーク費用の削減に直結します。ベンダーの公開資料でも、CDNのキャッシュヒットは帯域コストとオリジン負荷の削減に有効だと説明されています³⁴。一般的な移行例でも、動的CMS直配信から静的ファイル＋エッジキャッシュに切り替えるだけで、サーバー負荷や台数を抑え、レスポンスのばらつきを小さくできたと報告されています。

段階的リニューアルで止めずに変える

止めないこともコスト戦略そのものです。トップと集客記事は現行運用のまま、下層の問い合わせ導線と製品詳細ページから静的化を始め、2〜3週間単位の小さなリリースで広げていきます。CMSのデータモデルを先に固め、旧来テンプレートから新テンプレートへのマッピングをスクリプト化すると移行コストが読めるようになります。全ページのゼロベース改修を避け、高流入×高収益ページから順に置き換えるだけで結果は変わります。中小企業でも“サイトを止めないリニューアル”を選べば、機会損失を最小化しながらSEOとコンバージョンの改善を並行できます。

テンプレート再利用とデザインシステムの効果

見栄えの刷新はデザインではなくコンポーネント化の問題です。Typography、色、間隔、ボタンやカードなどの基本をStorybookで定義して配布し、そこから各ページを構成します。一度固めたUIトークン（色や余白などの設計値）を共有することで、修正範囲はスタイルの差し替えに限定され、将来の改修費は比例ではなく逓減します。

// .storybook/preview.ts 共有トークンで将来の改修を逓減
import type { Preview } from '@storybook/react';
import '../src/styles/globals.css';

const preview: Preview = {
  parameters: {
    controls: { expanded: true },
    options: { showPanel: true },
  },
};
export default preview;

低コストを生む技術選定：Jamstack×ヘッドレス

静的生成とエッジ配信を軸にすると、サーバー常時稼働のコストが消えます。動的な体験はクライアントとエッジで補い、CMSは管理に特化させます。この三層分離（Jamstack）は単純に見えて、保守の予測可能性とセキュリティ面での恩恵が大きいのが特徴です。中小企業の予算でも始めやすく、スモールスタートから拡張しやすい点がメリットです。

Astroで静的化と部分ハイドレーション

Astroは静的出力を基本とし、必要なコンポーネントだけをクライアントに送るため、LCP（最大視覚要素の描画時間）の改善が起きやすい選択肢です⁵。部分ハイドレーション（アイランドアーキテクチャ）により、不要なJavaScript送信を抑えつつ必要箇所だけインタラクティブ化できます⁶。設定を最小に保ちながら、画像最適化と圧縮、サイトマップまで一括で導入できます。

// astro.config.mjs 配信構造をシンプルにしつつ性能を底上げ
import { defineConfig } from 'astro/config';
import compress from 'astro-compress';
import sitemap from '@astrojs/sitemap';
import tailwind from '@astrojs/tailwind';
import image from '@astrojs/image';

export default defineConfig({
  site: 'https://example.com',
  output: 'static',
  integrations: [tailwind(), image(), compress(), sitemap()],
});

Next.jsのISRで“速さ”と“更新”を両立

ニュースや在庫のように鮮度が問われる箇所はISR（増分静的再生成）で解決します。全ページの再ビルドを避け、更新のたびにトラフィック無関係な一定コストで運用できます⁷。中小規模の更新でも、速さ（Core Web Vitals）と更新性を両立しやすいのが利点です。

// pages/index.tsx 低コストで更新を回す増分再生成
import { GetStaticProps } from 'next';
import { createClient } from 'microcms-js-sdk';
import React from 'react';

const client = createClient({
  serviceDomain: process.env.MICROCMS_DOMAIN!,
  apiKey: process.env.MICROCMS_KEY!,
});

type Post = { id: string; title: string };

type Props = { posts: Post[] };

export const getStaticProps: GetStaticProps<Props> = async () => {
  const data = await client.get<{ contents: Post[] }>({
    endpoint: 'posts',
    queries: { limit: 10 },
  });
  return { props: { posts: data.contents }, revalidate: 60 };
};

export default function Home({ posts }: Props) {
  return (
    <main>
      <h1>News</h1>
      {posts.map(p => (
        <a key={p.id} href={`/posts/${p.id}`}>{p.title}</a>
      ))}
    </main>
  );
}

キャッシュ戦略で帯域とTCOを下げる

静的化してもキャッシュ指示が弱ければコストは下がりません。変更頻度に応じて期限（TTL）を分け、アセットはイミュータブル（内容が変わらない前提）、HTMLは短めのTTLにすると、ヒット率が一気に上がります。Vercelなら設定をコードで管理できます⁸。結果として帯域費用とTCO（総保有コスト）の双方を下げやすくなり、表示速度の安定はSEOにも寄与します。

{
  "headers": [
    {
      "source": "/(.*)\\.(png|jpg|webp|svg|css|js)",
      "headers": [{ "key": "Cache-Control", "value": "public, max-age=31536000, immutable" }]
    }
  ],
  "redirects": [
    { "source": "/old-url", "destination": "/new-url", "permanent": true }
  ]
}

仕組みで回す：自動化・品質・配信の実装

低コストを持続させるのは人ではなく仕組みです。CI（継続的インテグレーション）でテストとビルドを自動化し、予算に合わせた性能目標を常時監視し、失敗時はデプロイを止めます。結果的に手戻りが減り、外注費も抑えられます。

GitHub Actionsで“毎回同じ品質”を担保

Nodeとパッケージマネージャのバージョンを固定し、ビルド、テスト、デプロイまでを一筆書きにします。CLIデプロイに統一しておくと、人手によるばらつきが消えます。中小企業の小規模チームでも、プロセスを“コード化”すれば品質は再現可能です。

# .github/workflows/ci.yaml ビルドからデプロイまで自動化
name: ci
on:
  push:
    branches: [main]
jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: pnpm/action-setup@v2
        with:
          version: 9
      - uses: actions/setup-node@v4
        with:
          node-version: '20'
          cache: 'pnpm'
      - run: pnpm i --frozen-lockfile
      - run: pnpm build
      - run: npx vercel deploy --prod --token=${{ secrets.VERCEL_TOKEN }}

Lighthouse×予算で“速さ”を破壊不能に

目標は感覚ではなく数値で守るのが最短です。Lighthouse CIと性能バジェット（許容上限）を組み合わせ、LCPやCLS（レイアウト移動量）がしきい値を超えたらデプロイを失敗にします⁹¹⁰。スコアに一喜一憂するのではなく、指標を下限値で管理するのがポイントです。

// lighthouserc.js 成果物を数値で守る
import { defineConfig } from 'lighthouse-ci';

export default defineConfig({
  ci: {
    collect: { url: ['https://deploy-preview.example.com/'], numberOfRuns: 3 },
    assert: {
      preset: 'lighthouse:recommended',
      assertions: {
        'largest-contentful-paint': ['error', { maxNumericValue: 2500 }],
        'cumulative-layout-shift': ['error', { maxNumericValue: 0.1 }]
      }
    }
  }
});

E2Eでクリティカルパスを守る

問い合わせ、購入、会員登録など収益に直結する経路はE2E（ブラウザ自動テスト）で監視します。Playwrightで遅延の閾値を超えたら落とすだけで、重大な性能劣化を事前に止められます¹¹。これにより、売上に影響する不具合の顕在化を最小限にできます。

// tests/critical.spec.ts 主要導線の速度と可用性を常時チェック
import { test, expect } from '@playwright/test';

test('top -> contact is fast and alive', async ({ page }) => {
  await page.goto('https://example.com');
  const navPerf = await page.evaluate(() => {
    const n = performance.getEntriesByType('navigation')[0] as PerformanceNavigationTiming;
    return { dcl: n.domContentLoadedEventEnd, lcp: (window as any).__lcp || 0 };
  });
  expect(navPerf.dcl).toBeLessThan(1800);
  await page.click('text=お問い合わせ');
  await expect(page.locator('form[action="/api/contact"]')).toBeVisible();
});

変更時だけ無駄なくパージする

キャッシュは効かせるほど更新時の無駄なパージが増えがちです。更新イベントにぶら下げて、該当パスだけをピンポイントで消すと帯域もビルド時間も節約できます¹²。部分更新の設計は“速さとコスト”の両面で効きます。

// scripts/purge.ts 変更のたびに必要最小限だけをパージ
import fetch from 'node-fetch';

const zone = process.env.CF_ZONE as string;
const token = process.env.CF_TOKEN as string;
const paths = process.argv.slice(2); // 例: "/posts/abc", "/index.html"

async function purge() {
  const res = await fetch(`https://api.cloudflare.com/client/v4/zones/${zone}/purge_cache`, {
    method: 'POST',
    headers: {
      'Authorization': `Bearer ${token}`,
      'Content-Type': 'application/json'
    },
    body: JSON.stringify({ files: paths.map(p => `https://example.com${p}`) })
  });
  if (!res.ok) {
    console.error('purge failed', await res.text());
    process.exit(1);
  }
}

purge();

数字で語る：ROIの出し方とベンチマーク

意思決定を後押しするのはストーリーではなく数字です。たとえば月3万PV、画像転送量が月15GB、更新は週2回という条件を仮置きします。従来の動的CMS直配信ではアプリサーバー2台とRDB冗長構成で月5〜8万円の運用費が発生し、メジャーアップデートは年1回のスポット費用として50〜150万円が積み上がるケースが一般的に見られます。静的生成とエッジ配信に寄せると、ホスティングは無料〜数千円、CDNは無料枠内に収まりやすく、ヘッドレスCMSは商用でも月1〜2万円台で十分なことが多いでしょう。監視とエラー通知を含めても月2〜3万円台に収まり、年間では40〜60%のTCO削減を狙える“目安”になります（構成や契約により大きく変動します）。性能改善が売上に与える影響は業種差が大きいものの、Think with Googleで知られるように速度低下は直帰率に直結します¹。加えて、Deloitteの分析では、速度改善がコンバージョン率や収益の向上に結びついた事例が複数報告されています¹³。計測はLighthouseだけでなくSearch Consoleとアナリティクスで漏斗を追い、セッションから完了までのドロップに速度とUXの相関を重ねて見ると、改善の投資対効果が明瞭になります¹⁴。さらに、コンテンツモデルの正規化は将来のリニューアルを安価にします。見出し、本文、CTA、メタ情報を分離し、テンプレートの差し替えに耐えられる形にしておけば、次の刷新でデザインと実装の差し替えだけで完了します。作って終わりではなく、作り替えを安くするための構造を最初から仕込むことが、低コストを持続させる最大のコツです。

実装スニペット：AstroページでCMSを読む

ヘッドレスCMSの読み込みはサーバー側で完結させ、クライアントに余計な負担を載せないのが原則です。Astroならフロントエンドの肥大化を避けつつ、必要なところだけインタラクティブにできます⁶。

---
import Layout from '../layouts/Layout.astro';
import type { APIPost } from '../types';
const res = await fetch('https://example.microcms.io/api/v1/posts?limit=10', {
  headers: { 'X-API-KEY': import.meta.env.MICROCMS_KEY }
});
const data = (await res.json()) as { contents: APIPost[] };
---
<Layout title="News">
  <ul>
    {data.contents.map((p) => <li><a href={`/posts/${p.id}`}>{p.title}</a></li>)}
  </ul>
</Layout>

バックエンドに残したい領域の最小構成

予約や検索など、本当に動的な機能はBFF（Backend for Frontend）に寄せてミニマルに保ちます。Next.jsのAPI Routesを使えば別サービスを立てずに済み、コストを増やさずに要件を満たせます。

// pages/api/contact.ts サーバーは薄く速く保つ
import type { NextApiRequest, NextApiResponse } from 'next';
import nodemailer from 'nodemailer';

export default async function handler(req: NextApiRequest, res: NextApiResponse) {
  if (req.method !== 'POST') return res.status(405).end();
  const { name, email, message } = req.body as { name: string; email: string; message: string };
  const transporter = nodemailer.createTransport({
    host: process.env.SMTP_HOST,
    port: 587,
    auth: { user: process.env.SMTP_USER, pass: process.env.SMTP_PASS }
  });
  await transporter.sendMail({ from: email, to: process.env.CONTACT_TO, subject: `Contact from ${name}`, text: message });
  res.status(200).json({ ok: true });
}

まとめ：変え方を変えれば、費用は下がる

低コストの鍵は、作り直すことではなく、配信の静的化と更新の分離にあります。テンプレートはコンポーネントとして再利用可能にし、変化するのはコンテンツだけという状態をつくると、運用の負担は軽くなり、改修は小さく短く終わります。数値のガードレールをCIに組み込み、速度や可用性が目標から外れた瞬間に止める仕組みを用意すれば、品質は人に依存しなくなります。中小企業のWebサイトリニューアルでは、まず高流入の数ページを静的化して、キャッシュとCIを効かせるところから始めてみてください。最初の2〜3週間で、費用とリスクが下がる感覚を実感できるはずです。次にどのページを置き換えると効果が最大化できるのか、あなたのサイトのデータはもう答えを持っています。

参考文献

  1. Think with Google (archived). Find out how you stack up to new industry benchmarks for mobile page speed. 2017. https://web.archive.org/web/20180604201435/https://www.thinkwithgoogle.com/marketing-resources/data-measurement/mobile-page-speed-new-industry-benchmarks/
  2. W3Techs. Usage statistics of WordPress. https://w3techs.com/technologies/details/cm-wordpress
  3. Cloudflare. How CDNs reduce bandwidth costs. https://www.cloudflare.com/learning/cdn/how-cdns-reduce-bandwidth-cost/
  4. Akamai. The key metric for happier users: cache hit ratio. https://www.akamai.com/blog/edge/the-key-metric-for-happier-users
  5. Astro. 2023 Web Framework Performance Report. https://astro.build/blog/2023-web-framework-performance-report/
  6. Astro Docs. Islands architecture (partial hydration). https://docs.astro.build/en/concepts/islands/
  7. Next.js Docs. Incremental Static Regeneration (ISR). https://nextjs.org/docs/pages/building-your-application/data-fetching/incremental-static-regeneration
  8. Vercel Docs. Project configuration (vercel.json) — Headers. https://vercel.com/docs/projects/project-configuration#headers
  9. Lighthouse CI. Documentation and usage. https://github.com/GoogleChrome/lighthouse-ci
  10. web.dev (Google). Core Web Vitals. https://web.dev/articles/vitals
  11. Playwright Docs. Getting started with Playwright Test. https://playwright.dev/docs/test-intro
  12. Cloudflare API Docs. Purge cache by URL. https://developers.cloudflare.com/api/operations/purge-cache
  13. Deloitte Digital for Google. Milliseconds Make Millions. 2020. https://www.thinkwithgoogle.com/_qs/documents/7145/Milliseconds_Make_Millions.pdf
  14. Google Search Console ヘルプ. ウェブに関する主な指標レポート（Core Web Vitals）. https://support.google.com/webmasters/answer/9205520?hl=ja