Experience Builder プレビュー：Drupal CMS 2.0 時代を先取りするドラッグ&ドロップページビルダー

Drupalの未来を変える革新的なページビルダー「Experience Builder（XB）」が、いよいよα版として利用可能になりました。2025年のウィーンで正式リリースを控えるこのツールは、マーケターから開発者まで、あらゆるユーザーのコンテンツ作成体験を根本から変えることになるでしょう。

Experience Builder が必要な理由

これまでDrupalでページを構築するには、Layout Builder（レイアウトビルダー）やParagraphs（パラグラフ）など複数のツールを組み合わせる必要がありました。しかし、Experience Builderは視覚的な行・列グリッド+リアルタイムプレビューという直感的なUIで、すべてを統合します。

5つの革新的メリット

1. 開発・編集の境界の縮小
マーケターも開発者も同一UIでの更新が可能。コードを書かずに複雑なレイアウトの実現。

2. SDCとの相乗効果
Single Directory Components（SDC）で作成したコンポーネントを、そのままドラッグ&ドロップで配置。再利用性の飛躍的向上。

3. 安全なデプロイメント
Package Manager（パッケージマネージャー）を介したステージング&ロールバック機能により、本番環境へのリスクの最小化。

4. 将来への拡張性
Site Templates（サイトテンプレート）、AI Framework（AIフレームワーク）、Marketplace（マーケットプレイス）とのシームレスな連携が計画済み。

5. アクセシビリティとガバナンス
キーボード操作や権限分離の改善が進行中。エンタープライズ環境への対応。

Experience Builder α版の試用方法

インストール手順

現在のα版（0.4.0-alpha1）は、Composerで簡単にインストールできます。

composer require drupal/experience_builder:0.4.0-alpha1

必要な前提条件

Drupal 10.3以上（推奨：Drupal CMS 1.x）
PHP 8.3以上
SDCモジュール（コンポーネント管理用）

インストール後、管理画面から「Experience Builder」モジュールを有効化します。

実践：SDCコンポーネントをXBキャンバスへ

ステップ1：デモ用SDCコンポーネントの作成

まず、シンプルな「Hero」コンポーネントを作成してみましょう。

# modules/custom/my_components/components/hero/hero.component.yml
name: Hero Banner
props:
  type: object
  properties:
    title:
      type: string
      title: タイトル
    subtitle:
      type: string
      title: サブタイトル
    image:
      type: string
      title: 背景画像URL

{# modules/custom/my_components/components/hero/hero.twig #}
<div class="hero-banner" style="background-image: url('{{ image }}');">
  <h1>{{ title }}</h1>
  <p>{{ subtitle }}</p>
</div>

ステップ2：Experience Builderでの配置

コンテンツ作成画面で「Experience Builder」レイアウトを選択
左サイドバーから「Hero Banner」コンポーネントをドラッグ
キャンバス上の任意の位置にドロップ
右サイドバーでプロパティ（タイトル、サブタイトル、画像）を編集
リアルタイムプレビューで確認しながら調整

ステップ3：レスポンシブ設定

Experience Builderの強力な機能の一つが、デバイスごとの表示設定です。

デスクトップ、タブレット、モバイルの各ビューポートを切り替え
グリッドの列数や余白を個別に調整
コンポーネントの表示/非表示を制御

Layout Builder との使い分け

Experience Builder が適している場面

ランディングページの作成
頻繁に更新が必要なキャンペーンページ
ビジュアル重視のコンテンツ
非技術者による日常的な更新作業

Layout Builder を継続利用すべき場面

既存サイトで安定稼働している環境
カスタムレイアウトプラグインを多用している場合
複雑な権限管理が必要な場合（現時点では）

両者は共存可能で、段階的な移行も可能です。

既知の課題と改善への取り組み

α版である現在、いくつかの課題が報告されています。

アクセシビリティ

課題：キーボードナビゲーションの不完全性
対応：改善作業が進行中

多言語対応

課題：翻訳インターフェースとの統合の未完成
対応：検討中

パフォーマンス

課題：大規模ページでの読み込み速度
対応：レンダリング最適化とキャッシュ戦略の改善を実施中

コミュニティからのフィードバックを積極的に募集しており、GitHubやDrupal.orgのイシューキューで議論に参加できます。

2025年以降のロードマップ

2025年Q2：Public Beta リリース

初回Site Templates（サイトテンプレート）の提供開始
Project Browser（プロジェクトブラウザー）との完全統合
パフォーマンスの大幅改善

2025年Q3：Drupal CMS 2.0 での GA 版

Experience Builder 1.0の正式リリース
統合レシピによる自動セットアップ
エンタープライズ向け機能の充実

2025年Q4以降：エコシステムの拡大

Drupal CMS Cloud（SaaS版）との連携
AIアシスタント機能の統合
Marketplace（マーケットプレイス）でのコンポーネント共有

Project Browser からの導入フロー

将来的には、Project Browser（プロジェクトブラウザー）から直接Experience Builder対応のコンポーネントやテンプレートをインストールできるようになります。

管理画面から「Extend」→「Browse」を選択
「Experience Builder Compatible」でフィルタリング
必要なコンポーネントパックを選択してインストール
即座にXBキャンバスで利用開始

まとめ：今すぐ始める理由

Experience Builderはまだα版ですが、Drupalの未来を体験する絶好の機会です。特に以下のような方にお勧めします。

マーケター・サイトビルダー：ノーコードで高速にLPを組み立てたい方
Drupalエンジニア：SDCやLayout Builder（レイアウトビルダー）を使っており、編集DXをさらに高めたい方
イノベーター：最新技術をいち早く試し、コミュニティに貢献したい方

GitHubのデモプロジェクトをクローンして、今すぐ試してみましょう。あなたのフィードバックが、Drupalの次世代ページビルダーをより良いものにしていきます。

Experience Builderに関する最新情報は、DrupalCon Vienna 2025でのセッションや、公式プロジェクトページをご確認ください。

カテゴリ

DrupalCMS機能

タグ

全般活用