本文へ移動

HEADLESS CMS WEBSITE

ヘッドレスCMS型
Webサイト制作

更新用のCMSと、閲覧者が見る公開サイトを分けて制作します。WordPressなどの管理画面で内容を更新し、公開サイトはNext.jsなどで表示する構成です。

CMS側と公開サイト側、それぞれの更新・保守が必要です。
管理画面を公開サイトから切り離し、公開側でWordPressのテーマやプラグインを直接動かさない構成です。

5ページ以内176,000円
10ページ以内242,000円
15ページ以内308,000円
16ページ以上お見積もり
すべて税込。保守は月6,600円から、運用支援は月28,400円からです。

STRUCTURE

管理と公開を分けます

管理画面の使いやすさを残しながら、公開サイトでCMSを直接動かさない構成にします。

  • 01

    更新用の管理画面

    WordPressなどのCMSで、お知らせやページの内容を更新します。

  • 02

    APIで内容を受け取る

    公開に必要な情報だけを、管理画面から公開サイトへ渡します。

  • 03

    公開サイトに表示

    Next.jsなどで構築した公開サイトが、受け取った内容を表示します。

FEATURES

この構成で変わること

URLを隠すことだけに頼らず、管理画面への入口と公開範囲を制限します。

公開サイトでWordPressを直接動かしません

  • 公開側ではWordPressのテーマやプラグインを読み込みません
  • CMSで一時的な障害が発生しても、あらかじめ生成・保存されたページを配信する構成であれば、公開サイトへの影響を抑え、表示を継続しやすくなります。
  • 表示速度や公開方法を、公開サイト側で調整しやすくなります

管理画面に入れる方を制限します

  • 管理画面の場所を公開サイトに表示しません
  • 指定した場所や、認証を通過した方だけがアクセスできるようにします
  • APIから取得できる情報を、公開に必要な範囲へ絞ります

※すべての攻撃や障害の防止を保証するものではありません。万一の際も影響範囲を切り分けやすくし、バックアップと監視をもとに、状況確認と復旧対応を速やかに進められる構成を目指します。

TECHNOLOGY

対応する構成

CMSを固定せず、更新する方と掲載内容に合う構成を選びます。

  • WordPressを非公開CMSとして利用

    使い慣れたWordPressの管理画面を、更新用として利用します。

  • Next.jsなどの公開フロントエンド

    公開サイトはCMSから分離し、表示に必要な機能だけで構築します。

  • その他のヘッドレスCMS

    既存環境や更新体制に合わせ、他のCMSも検討します。

PRICE

料金

既定のWordPress+Next.js構成を基準にした税込料金です。

  • 制作費
  • 5ページ以内176,000円
  • 10ページ以内242,000円
  • 15ページ以内308,000円
  • 16ページ以上個別お見積もり
  • 公開後の保守・運用
  • 保守(標準の構成)6,600円/月Vercel+WordPress の構成。作業枠なし
  • 当社サーバーの利用+1,100円/月から公開と管理画面の置き場所。ご契約中のみ
  • 保守(独自の機能がある構成)12,600円/月作業枠なし
  • 運用支援28,400円/月から保守+作業枠
  • ※CMSの種類、データ構造、検索・会員機能、外部サービス連携などにより、追加のお見積もりが必要になる場合があります。
  • ※当社サーバーの利用には、サイトの公開(Vercel の有料プラン)と、管理画面用の WordPress の置き場所が含まれます。記事200本・画像の合計10GBまでは月1,100円、30GBまでは月2,200円です。容量が上限の8割に近づいたら、当社からお知らせします。それを超える場合は個別にお見積もりします。
  • ※サーバーをご自身で契約される場合、Vercel とレンタルサーバーの利用料は実費です。Vercel の無料プランは商用に使えないため、有料プランでのご契約が必要です。
  • ※ご契約の終了時は、記事と画像のデータをお渡しします。別の場所への移設作業は、別途お見積もりです。
  • ※Vercel の料金や条件が変わった場合は、料金を見直すことがあります。
  • ※更新のないサイトで、公開後の保守が不要な場合は、制作と設置だけのご依頼もお受けします。固定のページだけのサイトは、Next.js/React+Vercel サイト制作(88,000円から)をご覧ください。
  • ※デザインや固定のページを、ご自身で直せるようになりたい場合は、AI伴走支援の標準プラン(月66,000円)をご利用いただけます。1〜2か月を目安に、AI を使った直し方を一緒に進めます。時間が取れないときは、保守・運用支援でご依頼いただけます。
  • ※保守・運用支援はいずれか一方をお選びいただきます。料金を重ねてご契約いただく必要はありません。
  • ※原稿と写真はご用意ください。写真が足りない場合は、無料の素材から当社で選びます。有料の素材の購入費は実費、写真撮影・イラスト制作・原稿の新規作成は別途お見積もりです。

置き場所として必要なものと、Vercel の料金プランの目安

記事を WordPress で更新する場合は、Vercel とは別に、WordPress を置くサーバーが必要です。PHP とデータベースが使える、一般的なレンタルサーバーで足ります。「当社サーバーの利用」には、この両方が含まれます。

サイトの種類ごとの、置き場所として必要なもの
Vercel(サイトの公開)レンタルサーバー(WordPress 用)
固定のページだけのサイト必要不要
記事を WordPress で更新するサイト必要必要

Vercel の無料プランと有料プランの違いは、次のとおりです(2026年10月4日現在)。会社やお店のサイトは、有料の Pro が前提になります。

Vercel の無料プランと Pro プランの違い(2026年10月4日現在)
Hobby(無料)Pro
月額0ドル20ドル
商用の利用不可(個人の、商用でない利用に限る)可
通信量(月)100GB まで1TB まで込み
リクエスト数(月)100万まで1,000万まで込み
上限を超えたとき追加の購入はできず、上限で止まる超えた分だけ課金(通信は1GBあたり0.15ドルから、リクエストは100万あたり2ドルから。2026年10月4日現在)
  • 「商用」には、商品やサービスの販売の宣伝や、制作・更新・設置の対価を受け取るサイトが含まれます。
  • Pro には、使いすぎを止めるための上限額の設定があります(初期値は200ドルで、変更できます)。
  • 記事を更新したときだけページを作り直す作りなら、通信量もリクエスト数も小さく済みます。小〜中規模のサイトは、Pro の月額の範囲に収まることが多いです(当社の見立てで、Vercel の保証ではありません)。
  • 写真を Vercel 側で最適化する機能などを使うと、別の項目で費用が増えます。
  • 金額と条件は Vercel の公式ページによります。変わることがあるため、ご契約の前に最新の内容を確認します。

PROCESS

進め方

現在の更新方法と、公開サイトに必要な機能を確認してから構成を決めます。

  1. 01お客様・当社

    ヒアリング

    更新する方、掲載内容、現在の環境を確認します。

  2. 02当社

    構成とお見積もり

    CMS、公開方法、ページ数と費用をお伝えします。

  3. 03当社

    制作・接続

    管理画面と公開サイトを構築し、必要な情報を連携します。

  4. 04当社

    確認・公開

    更新、表示、アクセス制限、バックアップを確認して公開します。

担当範囲

ご依頼前に、当社が行うことと、お客様にご用意・ご確認いただくことを整理します。

当社が行うこと

  • CMSと公開サイトの構成設計
  • API接続・表示・公開処理の実装
  • アクセス制限・バックアップ・公開動作の確認

お客様にお願いすること

  • 更新内容・更新担当者・必要な機能の確認
  • CMS・公開環境等の契約と権限付与
  • プレビュー・公開手順の最終確認

共有・納品するもの

ご依頼後、作業内容と確認結果をあとから確認できる形で共有します。

  • CMSと公開サイト
  • 更新・プレビュー・公開の手順
  • 構成・権限・バックアップ・保守範囲の記録

共有・納品する内容と形式は、ご依頼内容に合わせてお見積もり時に明記します。

CASE

実際の事例

当社が実際に担当した案件です。守秘義務のため、お客様のお名前は伏せ、業種や規模は大まかに記しています。

HEADLESS

教育関連のサイトで、管理画面と公開側を別々のドメインに分けた

構成
公開側は HTML と PHP、管理側は別ドメインの WordPress
ねらい
公開側を軽くして扱いやすくする。管理の機能は裏側にまとめる
背景
サーバーが共有のレンタルサーバーで、Next.js などを動かせる環境ではなかったため、公開側は HTML と PHP で作った
  • ヘッドレス CMS
  • WordPress ヘッドレス化
  • 管理画面カスタマイズ
  • 構造化データ

更新が公開されるまで

BEFOREWordPress の標準

  1. 管理画面で更新する
  2. テーマがそのまま公開画面を描く

AFTER分けた構成

  1. 管理用の別ドメインで更新する
  2. 画像は公開側へ直接保存される
  3. 公開側の中継の窓口がデータを取りに行く
  4. 公開側のテンプレートが表示する

構成の違い

教育関連のサイト:構成の違い
BEFOREWordPress の標準AFTER分けた構成
管理画面の場所公開サイトと同じドメイン別のドメイン
公開側の画面テーマとプラグインが描くHTML と PHP
画像の反映—保存した時点で公開側に入る(時間差なし)
問い合わせの受付WordPress が直接受ける公開側の中継の窓口で受ける
閲覧者から見える管理側の場所見える見えない
更新する方の画面WordPress のメニュー全部「お知らせ・ブログ・更新管理」に整理

こまかな作り込み

分ける仕組み6項目
  • 公開側に、同じドメインの中継の窓口を置く。閲覧者のブラウザから、管理側は直接呼ばない
  • 窓口の名前も、管理側が分からない名前に
  • 返すデータの中の画像の URL を、公開側のものへ書き換え
  • 画像は、最初から公開側の場所に保存(同期の処理なし)
  • 管理側のトップや記事の URL へ来たら、公開側へ転送
  • 管理側から取れないときは、HTML の初期の内容を表示
更新する方の画面6項目
  • 専用のメニュー「更新管理」。タブで、画像・実績・動画・料金を編集
  • 実績と料金の表は、行の追加と削除で編集
  • 動画は、埋め込みのタグを貼るだけ
  • タグの欄や分類の追加など、使わないものは出さない
  • 一覧の「表示」のリンクは、公開側の URL へ向ける
  • 公開のときとほぼ同じ見た目の、確認用の画面
フォームと検索エンジン5項目
  • 公開側の自前のフォームから、中継の窓口を通して、管理側の受付の処理へ
  • 送信中・完了・エラーの表示と、二重の送信の防止
  • 記事の本文は画面で描くが、タイトル・説明・構造化データはサーバー側で出す
  • 料金の行から、料金の構造化データを自動で作る
  • 中継の窓口と確認用の画面は、検索の対象の外に
引き渡し3項目
  • 更新する方向けの運用の案内
  • 同じ種類の案件で、最初に決める10項目のチェックリスト
  • デザインのデータから実装までの、5段階の判断の手順

DEMO

デモサイト

当社のデザインの雰囲気と、記事の更新の仕組みをご確認いただくためのデモサイトです。随時追加予定です。事務所名・店名は架空のもので、実在のお客様の案件ではありません。

DEMO

記事を別のサーバーの WordPress から読み込む、デモサイトをご用意しています

種類
当社が制作したデモ。架空の事務所・店舗で、実在の依頼者の案件ではありません
構成
サイトは Next.js で制作し、Vercel で公開。記事は、別のドメインにある WordPress の管理画面から更新する
規模
固定のページ35、WordPress の記事82本(2026年10月現在。業種は随時追加予定)
  • ヘッドレス CMS
  • WordPress ヘッドレス化
  • Next.js 開発
  • Vercel
  • ブロックエディタのカスタマイズ

実際に動くデモサイトです。記事は、別のサーバーにある WordPress から読み込んでいることを、ご自身の目でご確認いただけます。デモサイトを使ってみたい、などのご希望があれば、お問い合わせください。

実際の画面

画像を押すと、公開中のデモが別の画面で開きます。

構成の図

何を、どこで持つか

デモサイト:何を、どこで持つか
どこで持つか直す人
デザイン、固定のページNext.js のコード制作側(当社)
お知らせ・コラム・イベントなどの記事WordPress更新する方
記事の体裁(見出し・表・引用などの見た目)Next.js の CSS。同じものを編集画面にも読み込む制作側(当社)

更新が公開されるまで

FLOW記事を1本出すまで

  1. 管理画面で記事を書く
  2. 「公開」を押す
  3. WordPress がサイトへ知らせる
  4. サイトが、その業種の記事を読み直す
  5. 次に開いた方から、新しい内容が出る

ふつうの WordPress サイトとの違い

ふつうの WordPress サイトと、このデモの構成の違い
BEFOREふつうの WordPress サイトAFTERこのデモの構成
閲覧者が開く場所WordPress(テーマが画面を描く)Vercel 上の Next.js
管理画面の場所サイトと同じドメインサイトとは別のドメイン
見た目を作るものテーマとプラグインNext.js のコード(業種ごとの CSS)
固定のページの更新管理画面コード(当社が直す)
記事の更新管理画面管理画面(同じ)
公開の反映すぐ数秒で反映(遅くても1分以内)
選べるブロックテーマとプラグイン次第43種。選べるものは、すべてサイト側でデザインを用意
編集画面の見た目テーマ次第サイトの記事と同じ体裁を読み込む

数字で見ると

  • 35ページ固定のページ。コードで作る
  • 82本WordPress で管理している記事
  • 147ページPC とスマホの幅で検査して、問題0件
  • 1本WordPress に足したプラグイン(145行)

こまかな作り込み

編集画面4項目
  • 記事に使えるブロックは43種。編集画面で選べるものは、すべてサイト側でデザインを用意する
  • WordPress 側の仕組みに頼る一部のブロック(投稿の一覧、広告のタグなど)は、選べないようにする
  • 編集画面を、サイトの記事と同じ書体・色・見出しの形で表示する
  • 編集画面用の CSS は、サイトの記事用の CSS から機械で作る。体裁を直したら作り直せる
更新の反映5項目
  • 公開・更新・取り下げのたびに、WordPress がサイトへ知らせる
  • 知らせは待たずに送る。編集する方の画面は止まらない
  • 知らせには合言葉を付け、合わないものは受け付けない
  • 知らせが届かなくても、サイトは60秒ごとに読み直す(二重の備え)
  • 法律事務所のデモで、記事を作った数秒後に、一覧とトップに出ることを確かめた
記事の表示3項目
  • 記事の一覧・記事・トップの新着を、WordPress の記事から組み立てる
  • 地域メディアは、トップ・分類の一覧・記事のすべてを WordPress の記事で描く
  • 記事どうしのリンクと問い合わせへのリンクは、サイト側の URL へ向け直す

FAQ

よくあるご質問

Q. WordPressは使わないのですか。

+

A. 更新用の管理画面としてWordPressを利用できます。閲覧者が見る公開サイトでは、WordPressのテーマやプラグインを直接動かさない構成です。

Q. 管理画面は外部から見つかりませんか。

+

A. 管理画面の場所を公開サイトに表示せず、指定した場所や認証を通過した方だけがアクセスできるようにします。ただし、URLを隠すことだけで安全性を保証するものではないため、更新、認証、バックアップなども組み合わせます。

Q. どのサイトにも向いていますか。

+

A. 更新内容や必要な機能によっては、通常のWordPress構成の方が費用と運用負担を抑えられます。ご要望を確認し、分離する利点がある場合にご提案します。

Q. 公開後の保守もお願いできますか。

+

A. はい。標準構成では、CMSと公開サイトの更新確認、バックアップ、稼働確認を月額保守でお引き受けします。機能追加や大きな改修は、内容を確認して別途お見積もりします。

CONTACT

ヘッドレスCMS制作のご相談

現在のサイト、更新したい内容、公開サイトに必要な機能をお知らせください。内容を確認後、適した構成と費用をご案内します。

※パスワードやAPIキーなどの機密情報は、最初のフォームには入力しないでください。
REQUIRED
OPTIONAL
ファイルを添付(任意)
ここにファイルをドラッグ&ドロップ またはクリックしてファイルを選択 画像・PDF・テキスト・Word・Excel・zip/合計512MBまで・10ファイルまで(大きな複数ファイルはzip推奨)
ログイン情報やパスワードを含むファイルは添付しないでください。 画面のスクリーンショット、会社案内、既存の原稿などを添付いただけます。機密情報は、必要になった段階で安全な共有方法をご案内します。
送信する→