バイブコーディング時代に a-blog cms が再評価される理由。 Gemini 3 / Nano Banana Pro で変わるWeb制作

2025年12月23日 #ablogcms #AI #Gemini3 #NanoBanana #HTML-First

「コーディング」の定義が、ここ数ヶ月で完全に変わってしまったと感じていないでしょうか？

OpenAIの創設メンバーである Andrej Karpathy（アンドレイ・カーパシー）氏が提唱した 「Vibe Coding（バイブコーディング）」 という言葉が、今のWeb制作の現場を的確に表しています。文法や構文を人間が細かく気にするのではなく、自然言語で「Vibe（ノリ・雰囲気）」を伝えれば、AIがそれを形にしてくれる。

特に、画像生成を得意とする Nano Banana Pro と、そのデザインを正確にコードに落とし込む Gemini 3 という「最強の相棒たち」が揃った今、Web制作のフローは劇的に進化しました。

デザインもコードもAIが生成できるようになった今だからこそ、あえて HTMLファーストなCMS「a-blog cms」 を選ぶメリットについて解説します。

生成AI のアウトプットは「ノーコードCMS」は扱いづらい？

これまで、Web制作のトレンドは「コードを書かない」ノーコードCMSへと流れていました。しかし、皮肉なことにAIの進化によって、ノーコードCMSの「GUI（管理画面）」が逆にボトルネックになりつつあります。

ノーコードCMS の進化は、制作会社の「脅威」になるか？

今、いくつかのノーコードCMSに「AI自動生成機能」が搭載され始めています。
「AIに頼めばサイトができる」──これは一見便利ですが、Web制作のプロにとっては 「クライアントが自分で作れてしまう」 ということを意味します。ツールの中で完結するAI機能は、基本的に汎用的なテンプレートの組み合わせであり、誰がやっても似たような結果になりがちです。

プロとして対価をいただく以上、 「クライアントが自分では作れないクオリティ」 を提供する必要があります。しかし、従来のノーコードツールで細部にこだわろうとすると、結局は管理画面での複雑な設定作業（GUI操作）が必要になり、AIのスピード感を活かせないというジレンマがありました。

AIにとって、GUI操作は「まどろっこしい」

もちろん、最近ではブラウザを操作できるAIエージェントも登場し始めています。しかし、「AIにマウスを持たせて、人間と同じようにポチポチ操作させる」のは、バイブコーディングのスピード感とは対極にあります。

AIの「母国語」はテキスト（コード）です。
母国語で直接やり取りできる「コード」ベースの構築こそが、AIのポテンシャルを最大化し、 ノーコードツールでは到達できない「オーダーメイドの品質」 を最速で生み出すルートなのです。

国内シェア 83% の巨人、WordPress とフルサイト編集の「壁」

Web制作について語る上で、国内シェア 83% とも言われる WordPress の存在は無視できません。
現在、開発元の Automattic社は、Wix や Squarespace といった競合に対抗するため、 「完全なノーコードツール化」 へと大きく舵を切っています。

しかし、皮肉なことに、この「人間にとっての使いやすさ」を追求した進化が、「AIによるバイブコーディング」との相性という点では、巨大な「壁」になっています。

目指しているのは「Wix化」。だからコードを隠す

最新の「フルサイト編集（FSE）」では、PHPテンプレートを極力使わず、すべてを管理画面上のブロック操作で完結させようとしています。
これはつまり、 裏側のコード（HTML/CSS）を徹底的に隠蔽し、ブラックボックス化する方向 に進んでいるということです。

一方、 Gemini 3 が出力するのは、Web標準の素直な「HTML」と「CSS」です。
AIが出力したコードを WordPress に組み込もうとすると、 「コードを隠したがるシステム」対「コードを書きたいAI」 というミスマッチが起きます。

次期バージョンでも、この溝は埋まらない

2025年末リリース予定の WordPress 6.9 などのロードマップを見ても、その方向性は変わりません。開発の主軸は「管理画面での共同編集」など、あくまで GUI（マウス操作）の強化 にあります。

AIが一瞬でHTMLを書いてくれても、それを WordPress に実装するには、人間が「Reactベースのブロック」や「独自JSON」へと、長い時間をかけて翻訳し直さなければなりません。
「ノーコード化」を急ぐあまり、AI時代に最も重要な「コードの透明性」を失いつつある。これが、シェアNo.1 CMS の現状なのです。

HTMLファーストこそが、AIリレーの「最終走者」

ここで再評価されているのが、a-blog cms のような「HTMLファースト」なアーキテクチャです。なぜなら、 「AIが書くコード（標準HTML）」と「a-blog cms が読むコード（テンプレート）」が、100% イコールだから です。

1. 「変換ロス」がゼロ。AIのコードを直に駆動する

多くのCMSは、データを出力するために、独自のテンプレート言語やプログラミング言語（PHPの配列処理や Reactコンポーネント）の中にHTMLを「埋め込む」構造になっています。つまり、AIが生成したHTMLを、一度バラバラに解体して、CMSの都合に合わせて組み直す「移植手術」が必要でした。

しかし、a-blog cms は逆です。「普通のHTMLファイル」が主役であり、CMSの実装作業はあくまで `` のようなコメントタグを追加したり、テキストを {title} のような変数に置き換えるだけ。

他社CMS: システムの中に、HTMLを取り込む（要変換）
a-blog cms: HTMLの中に、システム機能（タグ・変数）を置く（変換不要）

この主従関係の違いが決定的です。AIが出力した美しい DOM構造を一切破壊することなく、そのまま動的コンテンツとして駆動させることができる。これが「HTMLファースト」の真価です。

2. デザイン(画像) → コード → CMS の直通パイプライン

このアーキテクチャにより、 Nano Banana Pro が描いた「理想のUI」を、 Gemini 3 が「HTML（静的なWebサイト）」として具現化し、a-blog cms がそれを 「運用可能なシステム」 へと昇華させるまでの流れが、一本の直線で繋がります。

WordPress のブロック開発のように Reactへリファクタリングする必要もなければ、ノーコードツールのように GUI で再構築する必要もありません。
AIたちが作り上げた、従来のツールでは表現不可能だった独創的なクリエイティブも、一切の劣化なく、静的なHTMLをそのままテンプレートとして利用できる。

まさに、AIから受け取ったバトンを、1ミリも減速することなくゴール（公開）まで運ぶことができる 「リレーの最終走者（アンカー）」 としての役割を果たせるのです。

実践：AI × a-blog cms の爆速ワークフロー

実際の制作フローは、これまでの常識とは全く異なります。

Vibe Design (Nano Banana Pro)
「近未来的なテック企業の採用サイト。ネオンカラーのグラデーションを使って」と指示し、デザイン画像を生成。
Vibe Coding (Gemini 3)
生成された画像をGemini 3 にアップロードし、「このデザインをHTML/Tailwind CSSで再現して。ホバー時のアニメーションもつけて」と指示。
a-blog cms 化
出力されたコードをコピペし、テキスト部分を {title} などのCMSタグに置き換える。

言葉だけでは伝わりにくいかもしれないので、実際のコードを見てみましょう。例えば、 Gemini 3 に 「Alpine.js を使って、クリックで開閉するアコーディオンUIを作って」 と指示した場合の比較です。

Gemini 3 が出力したコード（Tailwind CSS + Alpine.js）

AIはロジックを含んだ完璧なHTMLを書いてくれます。

<div x-data="{ open: false }" class="border-b py-4">
    <button @click="open = !open" class="flex justify-between w-full font-bold">
        <span>募集職種：UIデザイナー</span>
        <span x-text="open ? '-' : '+'"></span>
    </button>
    <div x-show="open" class="mt-2 text-gray-600">
        <p>勤務地：東京本社 / 年収：500万〜</p>
    </div>
</div>

これを a-blog cms 化するのは、HTMLタグやJSのロジックを一切壊さず、ただ変数に置き換えるだけです。

a-blog cms 化したコード

<div x-data="{ open: false }" class="border-b py-4">
    <button @click="open = !open" class="flex justify-between w-full font-bold">
        <span>募集職種：{title}</span> <span x-text="open ? '-' : '+'"></span>
    </button>
    <div x-show="open" class="mt-2 text-gray-600">
        <p>勤務地：{location} / 年収：{salary}</p>
    </div>
</div>

ご覧の通り、x-data や @click といった JavaScript (Alpine.js) の記述には一切触れず、中身のテキストを変数 {title} などに変えただけです。

React や Vueベースの CMS や、独自記法が必要なツールでは、こう単純にはいきません。「AIの書いた生のコード」がそのまま動く。これが HTMLファーストの強さです。

これまでは「デザインを再現する技術力」が壁でした。これからは 「AIが描いてAIが書いたものを、素直に受け入れるCMS」 を選ぶだけで、誰でもハイエンドなWebサイトを作れるようになります。

まとめ：CMSは「AIの出力」を受け入れる「器」になる

Nano Banana Pro が描く 「夢（デザイン）」 を、 Gemini 3 が 「現実（コード）」 にし、a-blog cms がそれを 「ビジネス（運用）」 として定着させる。

この3つの連携こそが、これからのWeb制作のニュースタンダードです。「HTMLを書く」という最大の参入障壁が消滅した今、Web標準の技術をそのまま扱え、クライアントが更新しやすいシステムへとスムーズに変換できる a-blog cms は、AI時代のクリエイティブを支える最強のプラットフォームと言えるのではないでしょうか。