2024年12月14日（土）に名古屋で開催された「Stack Nagoya Fes Vol.3」に登壇してきました。
Stack Nagoya の今回の内容はショートセッション回で14名の登壇者がリアル会場で様々なお話をするというものでした。登壇者も参加者も、久々に沢山の方にお会いできたこのイベント、いろいろな人の話を聞ける機会が減ってきていたので、とても楽しい時間を過ごすことができました！
今回のイベントでは「静的HTMLを最初に作る制作フローにするなら、どのCMSが良いの？」というタイトルで登壇しました。この記事では、その登壇した内容をもとに書いていきます。
尚、このエントリーは「 a-blog cms Advent Calendar 2024 」の20日目の記事としても掲載しています。
WordPress で静的HTMLを最初に作るフローは見直し対象
WordPressがブロックエディターを採用したこともあり、静的HTMLからのテーマ制作を行うことがなくなりました。ブロックを選択したりブロックで設定を変更してページを作っていくため、静的HTMLからのページを作るのは無駄になる工数が増えてしまうためです。
この部分は本題ではないため、 @Toro_Unit の 僕が考える 「HTML サイトを WordPress にする」話 を参考にしてください。
また、WordPressの制作の流れは、@chiilogweb の書いた WordPressのブロックテーマ制作手順まとめ を参考にしてください。
トロさん（ @Toro_Unit ）も言っているように、 「HTML先に作ってからそれを WordPress に合わせて直していく」 のは、 「とりあえず素敵な服を自由に作ってから、それを着る人に合わせて直す」 ような話で、とても難易度が高く、無駄な工数がかかるので、WordPressで構築する場合は、もうやめましょう。
しかし、いまだに静的HTMLを最初に作る制作フローを採用するケースを耳にします。 WordPress の知識などをアップデートせずに、もしくは従来の制作フローを維持したいがためだけに静的HTMLを先に作り、カスタムフィールドをたくさん用意して、静的HTMLを WordPress に合わせて作っていく。そんなフローをいまだに採用している場合は、 WordPress ではなく、他の CMS を検討するべきです。
静的HTMLでも十分な案件もあるのですが、お知らせ機能だけを加えたいような場合が悩ましいと特に感じています。WordPress では機能過多だったりメンテナンスコストだったりを考えると、もう少し初期導入や運用などでもコストが抑えられる CMS を検討するべきです。
WordPress の魅力を生かせていない
今の WordPress の魅力は、ブロックを利用することで、お知らせだけを投稿するのではなく、好きなレイアウトを管理画面からノーコードで作れるようになっている点です。
しかし、静的HTMLで作成を進めるフロー制作している多くの場合で、そのまま page-{slug}.php を作成して、更新される箇所だけ置き換える構成にされてしまうため、管理画面から更新ということができなくなります。また、投稿する内容を制限するためや、好きな内容をいれられるようにするため、カスタムフィールドを多用するケースもあります。
今の WordPress は、ブロックを利用することで自由な投稿や更新ができるようになっているにもかかわらず、ブロックを使わずに柔軟性を損ねたうえで、わざわざ専用の入力箇所をカスタムフィールドで用意するような制作フローを採用している会社は、知識・スキル不足と言わざるを得ません。
デザインの再現性で、ブロックテーマにできていない、というようなケースも多いので、100%ブロックテーマにするべきである、という話ではないですが、少なくとも、コンテンツ部分はすべてのページをブロックで更新できるようにしておくべきだと、私は考えています。
WordPress 以外の CMS を知らないから？
静的HTMLを先に作るフローの場合、WordPress 以外の CMS を検討すべきです。
WordPress が変わってきているにもかかわらず、過去の制作フロー WordPress 以外の CMS を知らないから、WordPress でやるしかないという方もいるかもしれません。しかし、WordPress 以外の CMS はたくさんあります。
しかし、検討をするにも学び直す機会なども必要になるため、できるだけ容易な選択肢を選びたいところです。
例えば、更新される箇所はお知らせだけのようなケースであれば、静的HTMLを先に作るフローであっても、過去のWordPress の制作で行っていたような、部分的に動的に出すコードをいれるようなケースでも十分対応できる CMS があります。
静的HTMLを先に作るフローの場合、WordPress以外のCMSでどんな選択肢があるか？
「お知らせ機能だけを加えたい」場合、価格面やメンテナンスコストなどをいずれも考慮した上で、静的HTMLを先に作るフローの場合 WordPress 以外の CMS でどんな選択肢があるのか、私が思い浮かぶ選択肢は主に以下の３つです。
- Headless系のCMS
- Movable Type
- a-blog cms
上記の他にもいくつも選択肢はありますが、ノーコード系サービスも除外したうえで、初期導入のスキル、価格面やメンテナンスコストの観点から、今回はこの３つに絞って検討します。
Headless系のCMS
国産の Headless 系も様々登場してきていて microCMS や Newt などが例にあげられます。Headless CMS は、フロントエンドとバックエンドを分離して、フロントエンド側でデータを取得して表示する仕組みで作れるので、静的HTMLを先に作るフローには向いているといえます。
しかし、初期導入とメンテナンスのハードルがやや高めに感じます。
初期導入の壁
Node.js を活用できるフロントエンドエンジニアのスキルがあれば導入の壁自体は高くないです。しかし、サーバーにインストールをして利用するようなCMSの導入に比べると、Headless系のCMSは、サービスに登録しただけでは終わらず、CMSからデータを取得してきてテーマにいれるような実装と、サーバー部分のビルドしたものをアップするまでの工程が必要なため、ある程度のスキルが求められます。
また、サーバーどこにするかによっても難易度が変わります。 Cloudflare Pages や Netlify 、 Vercel などのサービスを使うことで、導入のハードルを下げることができますが、ビルドやテンプレートの代わりになるようなツールを利用している側、多くは Node.js 関連になりますが、それらのアップデートはボタンひとつでポチッととできるものではないため、運用面でのコストがかかってきます。
アップデートしないという選択肢もありますが...
自由なHTMLとCSSを書いて、様々なデザインに対応できるという面では、静的HTMLを先に作るフローには向いているといえますが、初期導入の壁とメンテナンスコストがやや高い印象があります。
Movable Type
個人的には、Movable Type も推したいところですが、お知らせだけの更新として導入としては価格面で費用面でやや高い印象です。 MovableType.net というオンラインのサービスもあり、ライトプランで月額2,750円なのでお値段的にも魅力的です。
インストール型もしくはクラウド版の Movable Type は、単体のCMSだけで静的HTMLが出力できたりするのもHeadless CMS系と同様に魅力の一つです。（ MovableType.net は動的サービス）
ただ、インストール型のほうは、ボタンポチッとでのアップデートではないので、そこだけが難点かもしれません。
個人的おすすめは a-blog cms
a-blog cms は、WordPress と同じように、PHP で動作する 国産のCMSです。私も過去に何度か導入したことがありますが、買い切りで66,000円、サブスクリプションライセンスで月額1,650円から利用できるので、価格面でも安価なCMSです。
また、年々進化しているので、プラグインなしでも、そして来年春からは Twig 形式でもテンプレートが使えるようになるため、今以上にフロントエンドの人に使いやすいCMSになると思います。
静的HTMLをテーマにいれただけでも静的ページが表示される
a-blog cms の特徴の１つで、静的HTMLをテーマディレクトリにいれるだけで、そのまま表示されます。テーマディレクトリ用のパスに置き換えたりすることなく、そのまま表示されるので、静的HTMLを先に作るフローには向いているといえます。
お知らせ機能だけを追加する場合も、静的HTMLを先に作って、そのままテーマにいれ、お知らせ箇所のみコードを設定するだけで、お知らせ機能が追加できます。
a-blog cms でお知らせのみ静的HTMLに追加する場合
例えば、静的HTMLを以下のように作成したとします。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>株式会社HAMWORKS</title>
<link rel="stylesheet" href="/assets/css/styles.css">
</head>
<body>
<header class="header">
<div class="header__container">
<a href="/" class="header__logo">
<img src="/assets/images/logo.svg" alt="HAMWORKS" width="280" height="48">
</a>
</div>
</header>
<main>
<section class="hero">
<figure class="hero__figure">
<img src="/assets/images/mainvisual.jpg" alt="HAMWORKSメインビジュアル" class="hero__image" width="1500"
height="700">
</figure>
<div class="hero__overlay">
<h1 class="hero__title">
<span class="hero__title-top">HAMWORKS</span>は、<br>
企画からデザイン、コーディング、CMS構築まで<br>
トータルでサポートします。
</h1>
</div>
</section>
<section id="news" class="news">
<div class="news__container">
<h2 class="news__title">お知らせ</h2>
<ul class="news__list">
<li class="news__item"><a href="#">2026年08月06日 - HAMWORKS記念イベント</a></li>
<li class="news__item"><a href="#">2026年02月02日 - (´ ºムº `)</a></li>
<li class="news__item"><a href="#">2025年08月06日 - (´ ºムº `)</a></li>
</ul>
</div>
</section>
</main>
<footer class="footer">
<div class="footer__container">
<p class="footer__text">© 2016 株式会社HAMWORKS. All rights reserved.</p>
</div>
</footer>
</body>
</html>
これを a-blog cms のテンプレートディレクトリにいれるだけで、そのまま表示されます。
お知らせ機能を追加する
先程のHTMLにお知らせ機能を追加する場合は以下のようにします。
なお、お知らせ部分だけを抜粋。最新のお知らせカテゴリを3件だけ表示するようする場合のテンプレートは以下のようになります。管理画面で投稿する部分は今回は省略します。
使い方はぜひ公式のドキュメントを見てください。
<!-- BEGIN_MODULE Entry_List ctx="bid/1/cid/1" -->
<section id="news" class="news">
<div class="news__container">
<h2 class="news__title">お知らせ</h2>
<ul class="news__list">
<!-- BEGIN entry:loop -->
<!-- BEGIN_IF [{iNum}/lt/4] -->
<li class="news__item"><a href="{url}">{title}</a></li>
<!-- END_IF -->
<!-- END entry:loop -->
</ul>
</div>
</section>
<!-- END_MODULE Entry_List -->
上記は2024年12月現在の a-blog cms のテンプレートの書き方です。
お知らせカテゴリの投稿を3件のみ表示するようする書き方です。
a-blog cms では、 BEGIN_MODULE Entry_List から END_MODULE Entry_List までが、投稿を取得するためのコードになります。BEGIN_MODULE xxx と、CMSで用意されている機能を 上記の例では、 ctx="bid/1/cid/1" を指定することで、ブログIDが1、カテゴリIDが1の投稿を取得しています。
2025年春以降の a-blog cms 3.2 からは Twig 形式でのテンプレートが使えるように
2025年の春以降にリリースされる a-blog cms 3.2 版から Twig 形式でのテンプレートが今後使えるようにも変わります。先程のコードとは違い、今後は以下のようになります。
同じ様に最新のお知らせカテゴリを3件だけ表示するようする場合のテンプレートは以下のようになります。
{% set entrySummary = module('V2_Entry_Summary', '', 'bid/1/cid/1') %}
{% if entrySummary.entries|length > 0 %}
<section id="news" class="news">
<div class="news__container">
<h2 class="news__title">お知らせ</h2>
<ul class="news__list">
{% for entry in entrySummary.entries|slice(0, 3) %}
<li class="news__item"><a href="{{ entry.url }}">{{ entry.title }}</a></li>
{% endfor %}
</ul>
</div>
</section>
{% endif %}
a-blog cms での Twig 形式は開発途中のため、現時点では使える機能も全部ではないのですが、 V2_Entry_Summary というモジュール以外にも、V2_Entry_List なども使えるようになるかもしれません（憶測なのでこの辺は今後のアップデートに期待）
その他 a-blog cms のおすすめポイント
他にも、a-blog cms は、プラグインなしにフォームの機能が使えたり、ボタンポチッとでアップデートができる（何かあってもロールバックもしてくれる）など。
WordPress と比べると、静的HTMLを先に作るフローを採用している場合は、a-blog cms を使わない手はないと思います。
詳しくはぜひ、a-blog cms の公式サイトをご覧ください。
開発は開発用のページも a-blog cms developer。
a-blog cms で Twig 形式のテンプレートを利用するには、 a-blog cms Ver. 3.2.0 アルファ版 を公開しました からお試しください。書き方などは a-blog cms での Twig の書き方を体験してみよう！ こちらを参考にしてください。
まとめ：静的HTMLを最初に作るフローの場合、 WordPress ではなく a-blog cms の検討を
前半でも書いたように、WordPress がブロックエディタに変わった現在、静的HTMLを最初に作るフローはもうやめましょう。 WordPress の制作をする場合は、ブロックエディタでどのように作るかで検討をするようにしてください。もしも WordPress でブロックエディタを使うことが難しい場合は、ぜひ、弊社 HAMWORKS に一度ご相談ください。WordPress のブロックエディタを利用した設計や実装も、場合によっては、設計サポートだけや、ブロックの実装・カスタマイズだけでも相談お受けします。
もしも、静的HTMLを最初に作るフローを採用する場合は、WordPress ではなく、他の CMS を検討してください。個人的には、ご紹介した a-blog cms がおすすめです。
WordPress を無駄に使わず、スキルやフローにあうCMSを選ぶようにして制作を進めていきましょう。
Discussion