AIが2分で完全なWordPressサイトを生成する方法

PAGEnzaにビジネスの説明を入力して生成を押すたびに、バックグラウンドでは約90秒で非常に複雑なことが起こっています。この記事では、それが正確に何であるかを説明します。

テンプレートの問題点

ほとんどのAIウェブサイトビルダーは次のように機能します。テンプレートを選択し、テキストを置き換えて、「AI生成」と呼びます。その結果、そのプラットフォームで構築された他のすべてのサイトと同じように見えます。

PAGEnzaは異なります。テンプレートはありません。すべてのサイトは、空白のGutenbergキャンバスから始まり、デザインマンデートと呼ばれる一連のデザインルールからアルゴリズム的に構築されます。

デザインマンデートとは？

デザインマンデートは構造化されたプロンプトであり、約8,000トークンで、特定のサイトのすべての視覚的および構造的な決定を記述します。これは、AI呼び出しが行われる前にPythonで構築され、入力に基づいています。

6つの部分が含まれています。

パートA — ブランドアイデンティティ: 業界、ビジネス名、トーン（例：「プロフェッショナル」対「遊び心」）、ターゲットオーディエンス。

パートB — カラーシステム: 4色のパレット（ink、bg1、bg2、accent）はアルゴリズムで生成され、WCAG AAコントラストルールに対して検証されます。すべてのパレットは、推測ではなく、実際の輝度計算でチェックされます。

パートC — タイポグラフィ: 80以上のGoogleフォントから選択されたフォントトリオ（見出し/本文/アクセント）は、業界のアーキタイプでフィルタリングされ、latin-ext文字セットのサポートが含まれていることが確認されています。

パートD — レイアウトブループリント: ページの構造 — どのセクションが表示されるか、どの順序で、どのバリアント（例：フルワイド画像のヒーロー対分割レイアウトのヒーロー）。

パートE — デザイン制約: ボーダーラジウススタイル（シャープ / ソフト / ラウンド）、セクション区切り線の形状、画像処理、スペーシングシステム。

パートF — コンテンツルール: どこにどのテキストが配置されるか、見出しの構造、表示されるCTA。

パレットの生成方法

色の生成は、ほとんどのAIツールが失敗する部分です。LLMに色を選択するように依頼すると、ランダムな16進コードが返され、単独ではうまく見えるかもしれませんが、アクセシビリティテストに失敗したり、単に一般的すぎたりします。

私たちは異なるアプローチを取ります。私たちのパレットシステムは次のように機能します。

1. 業界とアーキタイプ（例：「ラグジュアリー」、「大胆」、「アースカラー」）に基づいて、20の事前監査済みパレットグループから選択します。
2. 各グループ内で、inkがすべての背景に対して≥4.5:1のコントラストを持つパレットを選択します。
3. accentがbg1およびbg2に対して≥3.0:1のコントラストを持つことを確認します。
4. 2つの背景色がコントラストのある色温度（1つは暖色系、1つは寒色系）を持つことを保証し、セクションが区別できるようにします。

パレットがチェックに失敗した場合、自動的に置き換えられます。このステップにLLMは関与しません — 純粋な数学です。

Gutenbergブロックのアセンブリ方法

デザインマンデートが準備されると、Gemini Flashに厳密なプロンプトが送信され、以下が指定されます。

• 許可されるブロック（約40種類のGutenbergブロックタイプのホワイトリスト）
• 各ブロックタイプの必須属性
• 出力の正確なJSON形式

AIはHTMLやReactではなく、実際のWPブロックマークアップである生のGutenbergブロックJSONを返します。そのJSONは、いくつかの検証パスを経ます。

1. スキーマ検証 — 必須属性が存在し、未知のブロックタイプがないこと。
2. CSSクラスのサニタイズ — 作成されたクラス名は削除され、デザインシステムのクラスに置き換えられます。
3. ヒーラーパス — スペーシング属性の同期、カバーブロックのグラデーションの正規化、シェイプディバイダーの挿入。

結果は、WP REST APIを介してWordPressに直接アップロードされ、サイトのホームページとしてアクティブ化されます。

各サイトがユニークである理由

同じ業界でも、生成ごとにいくつかの点が異なります。

• パレット: 20以上のグループがあり、それぞれに複数のパレットがあります。
• フォントトリオ: アーキタイプごとに6つ以上の組み合わせ。
• セクションの順序とバリアント: ヒーローレイアウト、統計スタイル、機能カードの配置。
• シェイプディバイダー: オーガニック対ジオメトリック、振幅/周波数のバリエーション。
• ブロブ形状: オーガニックな業界の場合、画像とカードのブロブは12のバリアントからランダム化されます。

その結果、同じ日に生成された2つのピザレストランは、異なる色、異なるフォント、異なるレイアウトを持ち、両方ともWCAG AAに準拠します。

今後の予定

現在取り組んでいること：

• マルチページ生成 — 同じマンデートから/about、/services、/contactページを生成します。
• ライブプレビュー — WordPressにデプロイする前にサイトを確認します。
• スタイル転送 — 気に入ったサイトのスクリーンショットをアップロードし、そのデザインDNAを抽出します。

システムを実際に試してみたい場合は、ジェネレーターは無料で試すことができます — 最初の一つのサイトはアカウント不要です。