2026年4月4日

WEB Design Tips

HTMLベースの小規模サイトのCMSはヘッドレスCMSが主流に!?

HTMLベースの小規模サイトのCMSはヘッドレスCMSが主流に!?

MicroCMSとAIコーディングが変える、小規模Web制作のこれから

近年、私たち印刷会社にとっても、Web制作をセットで提供することは当たり前の時代になりました。
印刷物だけでなく、Webサイト、SNS、デジタルコンテンツまで含めた提案が求められるようになっています。

一方で、こうした変化の中で、中小企業のWebサイトの作り方そのものも大きく変わってきていると感じています。
特に最近増えているのが、「小規模・低コストで、必要十分なWebサイトを作りたい」というニーズです。

今回は、私たち自身が取り組んでいる、AIを活用したHTML生成と、ヘッドレスCMS「MicroCMS」の活用について、実際の検証を踏まえながらご紹介します。

なぜ今、「小規模サイト」のニーズが増えているのか?

これまで企業のWebサイトは、コンテンツ自体をクライアント側で管理したいという要望に対し、WordPressなどのCMSを導入することが前提という流れが一般的でした。
しかし最近は、状況が少し変わってきています。

  • SNSが主要な情報発信手段になっている
  • Webサイトは「名刺代わり」で十分というケースが増えた
  • Web制作・運用コストを抑えたい企業が増えている

さらに、WordPressの管理費用も、企業にとっては無視できないコストです。

  • セキュリティ管理
  • アップデート
  • バックアップ
  • 保守対応

こうした運用が必要なため、「小さなサイトには少し重い」と感じるケースも増えてきています。
その結果、HTMLベースの小規模サイトへの関心が高まっていると感じています。

AIによるHTML生成という新しい制作フロー

私たちも現在、AIを活用した新しい制作フローの検証を進めています。
具体的には、次のような流れです。

  1. 通常印刷物のデザイン制作で使用するツールでWebデザインを作成
  2. PDFとして書き出してAIに
  3. AIがデザインを解析
  4. HTMLを構造的に生成

この方法のメリットは、

  • コーディングの初期工程を大幅に短縮できる
  • デザインを比較的忠実に再現できる
  • 小規模サイトを比較的短期間で制作できる

といった点です。

現在のところ、コーディングに関してはかなり実用的なレベルまで到達してきていると感じています。

実際には、PDFからの解析部分で「いや、ここはもっと余白が…」「ここ、動きが欲しい…」など、通常ではコーダーさんとのやり取りでブラッシュアップする行程を、デザイナーとAIとがやり取りしながら構築していく、に置き換わるだけなので時間はかかります。

ただし、初動のHTML構築部分や、「やり取り」を人が介す時間が大きく短縮されますね。

正直…FigmaのようなデザインツールをDTPデザイナーが利用できるスキルをもつと、この「ブラッシュアップの為のやり取り」に要する時間も短縮できますし、FigmaとClaude codeをMCP接続することで、FigmaのデザインをAIでコード化する流れも可能。PDFを解析してHTML生成とはレベチの再現力。

実は、Claude codeを介して既にあるHTMLを元にFigmaでデザインを生成することも可能なので、デザイナーは生成されたデザインをもとに、リビルドすることも可能です。
こんな記事も見つけました。…凄い世界線ですね。

しかし、ここで一つの問題が出てきました。

CMSをどうするか?

HTMLサイトは軽量で扱いやすい反面、更新機能が弱いという課題があります。

例えば、

  • お知らせの更新
  • 事例紹介の追加
  • ニュース掲載

こうした部分は、CMSがあった方が圧倒的に便利です。クライアントも情報発信は自分たちでリアルタイムに行いたい。
そこで注目したのが、ヘッドレスCMSという仕組みです。

ヘッドレスCMSとは?

ヘッドレスCMSとは、コンテンツ管理機能だけを提供するCMSのことです。
通常のCMS(WordPressなど)は、管理機能と表示機能の両方を持っています。

一方、ヘッドレスCMSは、管理だけを担当します。表示は、HTML、JavaScript、APIなどを使って自由に構築します。

つまり、「表示」と「管理」を分離するCMSです。

MicroCMSとは?

現在、私たちが検証しているのが、MicroCMSという日本製のヘッドレスCMSです。
MicroCMSは、シンプルな管理画面とAPIベースの配信が特徴で、比較的小規模なサイトでも取り入れやすい構成を作りやすいサービスです。

例えば、

  • お知らせ
  • ブログ
  • 事例紹介

などのコンテンツを、管理画面から登録できます。基本的には、コンテンツを管理するだけ。それらのデータをHTMLサイト側からAPIで取得し、ホームページ上に表示させます。

MicroCMSの活用イメージ

例えば、

  • トップページ(HTML)
  • 会社案内ページ(HTML)
  • サービス紹介ページ(HTML)

といった固定ページは、HTMLとして生成します。

一方、

  • お知らせ
  • 新着情報
  • 実績紹介

など、更新頻度の高い部分だけを、MicroCMSで管理します。

この構成により、軽量・高速・管理しやすいというバランスの良いサイトが実現できます。

コスト面でのメリット

MicroCMSを活用した場合、大きなメリットの一つが運用コストの軽減です。

例えばWordPressの場合は、

  • サーバー管理
  • セキュリティ更新
  • プラグイン管理

といった作業が必要です。

一方、ヘッドレスCMSの場合は、サイト本体は静的HTML、CMSはクラウド管理という構成にできるため、保守負担を抑えられる可能性があります。

特に、小規模サイトにおいては、非常に合理的な選択肢になり得ます。
また、WordPressなど統合型CMSと違い、コンテンツは専用サーバにあり、それを表示させるHTMLサイトに引っ張ってくるだけという仕組みで、引っ張ってくる側はAPI接続できれば、複数が引っ張ってきて表示することも可能。複数のサイトを運営していても、記事の管理は1つのMicroCMSで行うことも仕組み的には可能です。

WordPressとの比較

ここで重要なのは、WordPressが不要になるわけではないという点です。
むしろ、用途によって最適な選択が変わるというのが正しい理解だと思います。

WordPressが向いているケース

  • 更新頻度が高い
  • 多機能が必要
  • ブログ機能を中心に使う
  • SEO対策を強化したい
  • 将来的な拡張を想定している

WordPressは今でも、非常に強力で信頼性の高いCMSです。

私たちの主力サービスも、現在はWordPressが中心です。

また、WordPressには様々なプラグインが用意されているため、機能を追加したい!という場合でも、無償で利用可能なプラグインで実装可能なケースも多々あります。

ヘッドレスCMSが向いているケース

  • 小規模サイト
  • 固定ページ中心
  • 更新箇所が限られている
  • 軽量で高速なサイトが必要
  • 管理コストを抑えたい

このような場合、MicroCMSのようなヘッドレスCMSは、有力な選択肢になります。

ただし、WordPressは「全てを用意された仕組み」、に対しヘッドレスCMSでCMSサイトを構築する場合は、初期設計の段階で仕組み作りと専用のコーディングが必要になります。初期構築のコストは必要、とお考えください。

AIは万能ではない

プロの視点が不可欠な理由

ここで誤解してはいけないのが、AIがあればWeb制作会社・コーダーが不要になるわけではないということです。

確かに、AIはコーディングを大きく効率化します。
しかし、

  • デザインの意図
  • 情報設計
  • ユーザー導線
  • ブランド表現

といった部分は、人の経験と判断、意思・志の介在が不可欠です。
また、AIが生成したコードも、まだ完全ではありません。

  • 微妙な表示崩れ
  • レスポンシブ対応
  • 細かな調整
  • 保守性や再利用性の整理

など、最終的な品質を支えるのは、これまで培ってきた制作ノウハウです。
AIは、制作を代替するものではなく、制作を加速するための道具だと考えています。

これからのWeb制作は「組み合わせ」の時代へ

これからのWeb制作の現場は、印刷、Web、SNS、AI、CMSといった要素を、最適に組み合わせる時代になると感じています。
私たちも、

  • WordPress
  • HTML
  • ヘッドレスCMS
  • AIコーディング

といった技術を柔軟に使い分けながら、お客様にとって最適な形を提案していきたいと考えています。

まとめ

小規模サイトに、新しい選択肢が生まれている

小規模Webサイトの制作において、HTML+ヘッドレスCMSという構成は、今後ますます広がっていく可能性があります。一方で、WordPressは依然として非常に重要な存在です。

重要なのは、技術ではなく「目的」に合わせて選ぶこと。そして、AIや新しいCMSが登場した今でも、本当に価値を生むのは、設計・デザイン・思想といった、人の経験から生まれる部分です。

私たちはこれからも、技術の進化を取り入れながら、「伝わる」Web制作を続けていきたいと考えています。

Categories: Tips, WEB, コラムPublished On: 2026年4月 4日By
DTP Tips
  • Excelから書き出したPDFをillustratorでベクター化した際に起こる色濁りを一発正規化!

    2026年3月2日

  • Adobe illustratorに配置した画像を同名のPDFに一括置き換え!

    2026年2月26日

  • バラバラのテキストをつないで1つに!

    2026年2月4日

  • Adobe illustrator Beta版「ターンテーブル」を使ってみた!

    2025年11月6日

  • Illustratorでつくる文字の囲み枠

    2024年8月22日

  • ドキュメントプロファイルを使って
    新規作業のストレスを軽減しよう

    2024年8月19日

WEB Tips
  • Webページを丸ごとスクショできる便利ツール「FireShot」のご紹介

    2026年4月7日

  • HTMLベースの小規模サイトのCMSはヘッドレスCMSが主流に!?

    2026年4月4日

  • モヤッとする、あれ。JS+CSSで「項目間だけ線」をスッキリ解決!

    2025年8月8日

  • WordPressサイトをGoogle検索から除外したい?
    「robots.txt」の正しい活用方法

    2025年7月3日

  • WordPressで記事を投稿してみよう!

    2025年6月26日

  • WordPressアップデートしてますか?

    2024年8月9日

取り組み
  • 小学校低学年向け夏休みカレンダー2025を配付します

    2025年6月20日