CursorやClaude、Windsurfなどの AIコーディングツールを使えば、プロンプトを入力するだけで、かなり完成度の高いWebサイトのHTMLが生成できるようになりました。コーポレートサイト、LP、店舗サイト。デザインカンプを読み込ませれば、レスポンシブ対応のHTMLが数十分で生成されます。

ただ、作ったHTMLをそのまま納品するわけにはいきません。

お知らせを更新したい。実績ページを追加したい。ブログを書きたい。クライアントが自分で写真を差し替えたい。こうした「日々の運用」に対応するには、HTMLを管理画面から編集できる状態にする必要があります。つまり、CMS化です。
多くのCMSは、テンプレート言語やAPI連携を前提とした設計になっています。

AIが生成したHTMLをそのまま使えるかどうかは、CMSの設計思想によって異なります。

この記事では、AIで生成したHTMLをCMS化するための方法を3つ紹介し、それぞれの特徴と向き不向きを整理します。「AIで作ったHTMLを、どこまでそのまま活かせるか」という視点で比較していきます。

AIで作ったHTMLをCMS化する3つの方法

AIで生成したHTMLをCMS化する方法は、大きく3つに分けられます。それぞれ仕組みが異なるので、プロジェクトに合った方法を選ぶ必要があります。

方法① ヘッドレスCMS（API + フロント再構築）

まず一つ目は、ヘッドレスCMSを使う方法です。

ヘッドレスCMSはコンテンツをAPIで配信する仕組みなので、表示を担うフロントエンド部分は自分で構築する必要があります。つまり、AIが生成したHTMLをそのまま使うのではなく、Next.jsやAstroなどのフレームワーク上でAPIからデータを取得して表示するコードを書き直すことになります。

作業の流れ：

1. AIでHTMLを生成する
2. ヘッドレスCMS側でAPIスキーマ（データ構造）を設計する
3. フレームワーク（Next.js、Astroなど）でフロントを構築し直す
4. APIからデータを取得する連携コードを実装する
5. ビルド環境をセットアップし、Vercelなどにデプロイする

向いているケース：
Webサイト以外のチャネル（アプリ、デジタルサイネージ等）にもコンテンツを配信する必要がある場合や、大規模なコンテンツ基盤を構築したい場合に強みを発揮します。

注意点：
AIが生成したHTMLの構造やデザインは、フロント再構築の過程で実質的に「参考」止まりになります。また、Node.jsやフレームワークの知識が必要で、フロントエンドエンジニアがいないチームにはハードルが高い方法です。

方法② WordPress

二つ目は、WordPressに組み込む方法です。
WordPressのテーマには、従来の「クラシックテーマ」と、現在WordPressが推奨している「ブロックテーマ」の2種類があります。どちらを使うかで作業の流れが変わってきます。

クラシックテーマの場合

クラシックテーマでは、AIが生成したHTMLをPHPファイルに分割し、WordPressのテンプレートタグに書き換えます。

作業の流れ：

1. AIでHTMLを生成する
2. テーマフォルダを作成し、HTMLをheader.php・footer.php・index.phpなどに分割する
3. 静的なテキスト部分をWordPressのテンプレートタグ（PHPコード）に置き換える
4. functions.phpでナビゲーションメニューやウィジェットなどの機能を登録する

ブロックテーマの場合

ブロックテーマでは、PHPファイルの代わりにHTMLベースのテンプレートファイルを使います。テンプレートはHTMLコメント形式のブロックマークアップ（<!-- wp:paragraph --> など）で記述するため、クラシックテーマよりもHTMLに近い見た目になります。

作業の流れ：

• AIでHTMLを生成する
• AIが生成したHTMLを、WordPressのブロック記法に沿ったマークアップに変換する（すべての要素をブロックとして定義し直す）
• テーマフォルダを作成し、デザイン設定（色・フォント・スペーシング等）を定義する
• 変換したHTMLをページ種別ごとのファイルとして分割・配置する
• 動的なコンテンツ部分（記事一覧や投稿タイトルなど）をWordPress専用のブロックに置き換える

なお、2026年時点ではWordPress公式がブロックテーマを推奨していますが、制作現場ではクラシックテーマやクラシックテーマにブロック機能を取り入れた「ハイブリッドテーマ」もまだ多く使われています。

向いているケース： 社内にWordPressの経験者がいる場合。プラグインやエコシステムを活用したい場合。ブロックテーマの場合は、クライアントがブロックエディターで直感的にレイアウトを編集できる運用を想定しているケースにも適しています。

注意点： クラシックテーマではHTMLをPHPに分割・変換する工程が、ブロックテーマではHTMLをブロックマークアップに書き換えます。

方法③a-blog cms

3つ目は、HTMLのテンプレートにCMSタグを追加するだけでCMS化する方法です。a-blog cmsがこの方式を採用しています。
この方法の最大の特徴は、AIが生成したHTMLの構造をそのまま維持できることです。HTMLファイルの中にCMSタグ（HTMLコメント形式）を追記するだけなので、PHPへの変換もフレームワークの導入も必要ありません。

作業の流れ：

• AIでHTMLを生成する
• テーマフォルダにHTMLファイルを配置し、管理画面でテーマを設定する
• CMS化したい部分にモジュールタグ・ループ・変数を追記する

具体的にはどういうこと？

たとえば、AIが生成した「お知らせ一覧」のHTMLがこうなっているとします。

<section>
  <h2>お知らせ</h2>
  <ul>
    <li>
      <time>2026-03-01</time>
      <a href="/news/001.html">サイトをリニューアルしました</a>
    </li>
  </ul>
</section>

これをa-blog cmsでCMS化すると、こうなります。

<section>
  <h2>お知らせ</h2>
  <!-- BEGIN_MODULE Entry_Summary id="news" -->
  <ul>
    <!-- BEGIN entry:loop -->
    <li>
      <time>{date#Y}-{date#m}-{date#d}</time>
      <a href="{url}">{title}</a>
    </li>
    <!-- END entry:loop -->
  </ul>
  <!-- END_MODULE Entry_Summary -->
</section>

見ていただくとわかるように、HTMLの構造はほぼそのままです。追加しているのはHTMLコメント形式のCMSタグ（<!-- BEGIN_MODULE ... -->）と、テキスト部分を変数（{title} など）に置き換えただけです。

向いているケース：
AIが生成したHTMLをできるだけそのまま活かしたい場合。HTML/CSSがわかれば実装でき、PHPやフレームワークの知識は不要です。制作会社がクライアントにサイトを納品するケースや、小〜中規模のサイト構築に適しています。

注意点：
マルチデバイスへのAPI配信が必要な場合には向いていません。大規模なコンテンツ基盤として使うよりも、「Webサイトをきちんと運用したい」というニーズに特化しています。

なお、どの方法でも「ループ処理の記述」や「管理画面との連携設定」は必要です。a-blog cmsの場合、ループはHTMLコメント形式（<!-- BEGIN entry:loop -->）で記述し、管理画面でテーマやモジュールIDの設定を行います。違いは、これらの作業がHTMLファイルの中で完結するか、別の言語（PHP）やツール（フレームワーク）に移る必要があるかという点にあります。

実際に「HTMLベースCMSでのCMS化」をやってみよう

ここでは、a-blog cmsを使って実際にHTMLをCMS化する流れを紹介します。

a-blog cmsの公式サイトでは、静的HTMLサイトをCMS化するチュートリアルが公開されています。

チュートリアル： 静的HTMLサイトからCMSのテーマを作ってみよう 2026

このチュートリアルでは、生成AIで作られた静的HTMLのサイトを、a-blog cmsのテーマに変換する手順を3ステップで紹介しています。

• Step 1：「お知らせ」を部分的にCMS化する
• Step 2：フォームを動くようにする
• Step 3：トップページをCMS化する

Step 1だけでもa-blog cmsの基本的な流れを体験できます。「まず試してみたい」という方にはおすすめです。

ポイントは「全ページをCMS化する必要はない」ということです。お知らせやブログなど、更新が必要な箇所だけをCMS管理下に置いて、残りのページはAIが生成したHTMLをそのまま使う、という運用が可能です。これは、AIが出力したHTML構造をそのまま受け入れられるHTMLベースCMSだからこそできることです。

どの方法を使うべきかの判断ポイント

プロジェクトによって最適な方法は異なります。以下を参考にしてみてください。

ヘッドレスCMSが合うケース
Web以外のチャネル（アプリ、サイネージ等）にも配信が必要。フロントエンドエンジニアがチームにいる。大規模で複雑なコンテンツ構造が求められる。

テンプレートエンジン型CMS（WordPress等）が合うケース
そのCMSのテンプレート変換に慣れた経験者がいる。既存サイトが同じCMSで動いていて、統一したい。プラグインで特定の機能を拡張したい要件がある。

HTMLベースCMS（a-blog cms）が合うケース
AIが生成したHTMLをできるだけそのまま活かしたい。PHPやフレームワークの知識なしでCMS化したい。制作会社がクライアントにCMS付きサイトを納品したい。コーポレートサイトや店舗サイトなど、小〜中規模のサイトを構築する。

まとめ：AIの成果物を活かすCMS選び

AIコーディングが普及するにつれて、「HTMLを生成する」こと自体のハードルはどんどん下がっています。一方で、生成したHTMLを「運用できる状態にする」ためのCMS化は、まだ多くの人にとって悩みのタネです。

CMS化の方法を選ぶとき、最も重要な問いはこれです。

「AIが作ったHTMLを、どこまでそのまま活かしたいか？」

フロントを丸ごと作り直してもいいなら、ヘッドレスCMSの柔軟性が活きます。テンプレート言語への変換ができるチームなら、そのCMSの豊富なエコシステムが使えます。

そして、AIが出力したHTMLの構造をそのまま維持しながらCMS化したいなら、HTMLベースCMSであるa-blog cmsをおすすめしたいです。
HTMLにCMSタグを追加するだけなので、AIの成果物を壊さずに、運用できる状態にできます。

まずは公式チュートリアルで、静的HTMLのCMS化を体験してみてくださいね。
チュートリアルを見る → 静的HTMLサイトからCMSのテーマを作ってみよう 2026