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

ベースキャンプ名古屋を会場に、a-blog cms 勉強会 を開催いたしました。

一方的な講義ではなく、みんなで輪になって語り合うようなスタイルを大切にしました。一人ひとりの声が響き合い、コミュニティならではの温かな一体感に包まれた時間でした。

当日の話題

『最近これを作りました』というご報告や、ちょっとした使い方のコツなど、皆さんのリアルな声が自然と集まる、風通しの良い素敵な時間となりました。

• a-blog cms Ver. 3.2.20のリリース説明
• 新しくできたV2_Category_Flat ＆ Category_Flat モジュールの説明
• Ver.3.2 の更新マニュアルについて
• 最近作った拡張アプリの説明
• AIにtwig形式のファイルで作成してもらったテーマを紹介

AIを導入した機能開発や開発環境の整備についても、具体的な話題が上がりました。

時には参加者の方のお悩みをその場で解決する場面も見受けられ、互いに疑問を解消しながら共に学びを深められる、大変有意義な時間となりました。

本イベントへのご参加を検討されている皆さまへ

a-blog cms 勉強会 in 名古屋では、参加者同士で情報交換をしながら a-blog cms の活用方法や実装について学ぶことができます。
初めての方も歓迎していますので、興味のある方はぜひご参加ください。

また、他県やオンラインでも開催してほしい！というご要望があれば、ぜひご相談ください。

平素より a-blog cms をご利用いただき、誠にありがとうございます。

先般お知らせしておりました MYPAGE (https://mypage.a-blogcms.jp) における a-blog cms Ver. 2.x 系 ライセンスファイルのダウンロード不具合、ならびにサブスクライセンス申請の不具合につきまして、本日無事に復旧いたしましたことをご報告申し上げます。

現在は通常通り MYPAGE より各種申請をご利用いただけますので、ご確認ください。

このたびはご利用のお客様に多大なるご迷惑とご不便をおかけいたしましたこと、心よりお詫び申し上げます。
今後はこのような事象が発生しないよう、再発防止に努めてまいります。
引き続き a-blog cms をご愛顧賜りますよう、よろしくお願い申し上げます。

平素より a-blog cms をご利用いただき、誠にありがとうございます。

現在、MYPAGE <https://mypage.a-blogcms.jp>より a-blog cms Ver. 2.x 系 のライセンスファイルがダウンロードできない不具合が発生しております。ご利用のお客様には大変ご迷惑をおかけしており、心よりお詫び申し上げます。

本件の対応につきましては、2026 年 5 月 7 日 (木) を予定 しております。復旧までいましばらくお待ちくださいますようお願い申し上げます。なお、Ver. 2.x 系のライセンスファイルがお急ぎで必要なお客様におかれましては、お手数をおかけいたしますが、下記サポート窓口までお問い合わせください。個別にご案内させていただきます。

お問い合わせ先:  https://www.a-blogcms.jp/contact/

復旧完了後、改めて本ページにてお知らせいたします。ご不便をおかけし誠に恐縮ではございますが、何卒よろしくお願い申し上げます。

平素は弊社サービスをご利用いただき、誠にありがとうございます。

現在、システム上の不具合により、公式サイトからのサブスクリプションライセンス購入ができない状態となっております。
多大なるご不便とご迷惑をおかけしておりますことを深くお詫び申し上げます。

復旧までの期間、一時的に利用できる期間限定ライセンスの発行にて対応させていただきます。

ライセンスの発行をご希望のお客様は、お手数ですがお問い合わせフォーム、またはメールにて以下の情報を添えてご連絡ください。

ご希望のライセンス種類（例：スタートアップ、プロフェッショナル　など）

使用予定のサイトドメイン（例：example.com）

折り返し、期間限定ライセンスの発行についてご案内させていただきます。

お困りの点がございましたら、下記アドレスまで直接メールにてお知らせください。優先的に対応させていただきます。

お問い合わせ先： https://www.a-blogcms.jp/contact/

平素より a-blog cms をご利用いただきありがとうございます。

サーバーメンテナンス作業のため、マイページを下記の時間帯において一時停止いたします。

対象URL

https://mypage.a-blogcms.jp

日時

2026年4月27日（月）11:00 〜 12:00（約1時間）

影響範囲

• マイページへのログイン・閲覧
• ライセンスの購入・各種お手続き

影響なし

• ライセンス認証（既にご利用中のサイトへの影響はありません）

メンテナンス終了後は通常通りご利用いただけます。
ご不便をおかけいたしますが、何卒ご了承いただきますようお願い申し上げます。

---

PDF ダウンロード

管理者マニュアル Ver. 3.2

準備中です。