Gutenberg FSE：2026年のWordPressデザインの未来

フルサイト編集はWordPress 5.9で導入されました。3年後、ほとんどのエージェンシーはまだそれを適切に使用しておらず、使用しているエージェンシーは深刻な競争優位性を持っています。

FSEが実際に意味すること

FSE以前は、WordPressテーマはPHPテンプレートを通じてヘッダー、フッター、グローバルレイアウトを制御していました。Gutenbergはコンテンツ領域のみを処理していました。ブロックでブログ投稿を編集できましたが、ナビゲーションはPHPファイルにロックされていました。

FSEはそれを変更します。ブロックテーマを使用すると、ヘッダー、フッター、サイドバー、アーカイブテンプレート、シングル投稿レイアウトなど、サイトのあらゆる部分がブロックを使用してGutenbergエディターで編集可能になります。レイアウトの変更にPHPは不要です。

これはAI生成にとって重要です。なぜなら、サイト全体をブロックJSONとして表現できるからです。一部がPHPテンプレートで一部がブロックであるハイブリッドシステムはありません。すべてがブロックであり、すべてがJSONであり、すべてがプログラムで生成および編集できます。

PAGEnzaによるFSEの使用方法

PAGEnzaがサイトを生成するとき、ホームページだけを作成するのではありません。次のような完全なブロックテーマを作成します。

• templates/index.html — デフォルトテンプレート

• templates/single.html — シングル投稿レイアウト

• templates/archive.html — ブログ/カテゴリ一覧

• templates/404.html — エラーページ

• parts/header.html — 再利用可能なヘッダーブロック

• parts/footer.html — 再利用可能なフッターブロック

• theme.json — グローバルスタイル（色、タイポグラフィ、スペーシング）

これらはすべて同じデザイン指示書から生成されます。ホームページ用に定義されたカラーパレットは、theme.jsonのグローバルスタイルで使用されているものと同じです。ヒーロー用に選択されたフォントトリオは、ブロックテーマのスタイルシートにロードされているものと同じです。

これがAI生成におけるFSEの主な利点です：一貫性はシステムによって強制されるのであって、デザイナーがすべての場所に同じフォントを適用することを期待するわけではありません。

theme.json — あなたが編集したことのない最も重要なファイル

theme.jsonは、ブロックテーマのグローバルデザインシステムを定義する設定ファイルです。これは以下を制御します。

• カラーパレット — エディターのカラーピッカーに表示される名前付きの色
• タイポグラフィ — フォントファミリー、サイズ、行の高さ
• スペーシング — パディングとマージンコントロールで使用されるスペーシングスケール
• 境界線の半径 — デフォルトの角丸の値
• レイアウト — コンテンツ幅、ワイド幅

PAGEnzaがサイトを生成するとき、theme.jsonはデザイン指示書からプログラムで構築されます。ink、bg1、bg2、accentの色は、名前付きパレットの色として登録されます。フォントトリオは、正しいGoogle Fonts @import URLを持つフォントファミリーとして登録されます。

その結果、クライアントがテキストを変更するためにGutenbergエディターを開くと、カラーピッカーにはブランドカラーの4色だけが表示され、それ以外は何も表示されません。フォントセレクターには、選択された3つのフォントのみが表示されます。スペーシングコントロールはシステムスケールを使用します。デザインシステムはエディターレベルで強制されます。

「Gutenbergでのライブ編集」が実際に意味すること

PAGEnzaによって生成されたすべてのサイトは、Gutenberg FSEがアクティブなライブWordPressインストールです。クライアントは次のことができます。

• テキストをクリックして直接編集する
• ブランドカラーパレットから選択してセクションの背景を変更する
• ブロックをドラッグしてセクションを並べ替える
• ブロックインサーターから新しいセクションを追加する
• プレースホルダーをクリックして画像を変更する

オフブランドの色を選択してデザインシステムを誤って壊すことはできません。なぜなら、利用可能な色はブランドカラーの4色だけだからです。ブランドフォントの3つだけが登録されているため、不一致のフォントを選択することもできません。

これは、AI生成サイトが実際のクライアントにとって実用的である理由です。デザインを機能させる制約が、引き渡し後も維持されます。

ブロックカバレッジの問題

FSEは強力ですが、カバレッジの問題があります。すべてのデザインパターンをコアGutenbergブロックできれいに表現できるわけではありません。複雑なレイアウト、インタラクティブコンポーネント、カスタムデータ表示には、カスタムブロックまたはサードパーティプラグインが必要になることがよくあります。

PAGEnzaはこれを2つの方法で処理します。

レイアウトの場合：Group、Cover、Columns、Media & Textブロックを、慎重に制御された属性と組み合わせて使用します。マーケティングページレイアウトの約95％は、これら4つのブロックタイプだけで実現できます。

インタラクティブコンポーネントの場合：Plugin Builderは、PHPプラグインとしてカスタムGutenbergブロックを生成します。価格表、予約フォーム、お客様の声スライダーなどは、ショートコードを横付けするのではなく、FSEエディターと統合された正規の登録済みブロックとして生成されます。

クライアントがコードに触れることなく、ビジュアルエディターで編集する必要があるすべてを編集できるようにすることが目標です。