WordPress Divi 5:次世代ページビルダーを公開 - スピードと安定性を劇的に向上

エレガント Themesは長い準備の終わりにDivi 5パブリックベータ版を公開しました。今回のパブリックベータは、一般的なベータのようにバグを探す用途ではなく、安定性と機能完成度を備えた実使用可能なバージョンです。

ほとんどのDivi 4サイトは、特に問題なくすぐに移行できます。ただし、複雑な拡張モジュールや高度なカスタマイジングが適用されたサイトは、 Staging 環境でテストした後に適用する方が安全です。私は既存です WordPress DiviサイトにDivi 5をインストールして移行しましたが、問題なくうまく機能しました。

エレガント Themesが完全に再設計したDivi 5は、単なるアップデートではなく、スピードと柔軟性、安定性を劇的に改善した新しいバージョンです。 Divi 5は フレックスボックス(Flexbox)、CSS Grid、デザイン変数、カスタムレスポンシブエディタなど、最新のWeb標準を反映しており、おかげでより迅速で直感的なWebデザイン環境を提供します。

ディビ5の新しいビルダーでページを編集してみると、既存のDiviビルダーやエレメンタービルダーのように遅くなる現象が全くなく素早く反応するのがとても印象的でした。

👉 Divi 5が1年間のテスト期間を経て2026年2月26日(韓国時刻で2月27日)ベータ段階を終了し、 フルバージョンがリリースれました。

WordPress Divi 5:次世代ページビルダーを公開

Diviはシンプルでありながら強力なテーマを目指していますが、ここ数年の間に多くの新しい利便性を適用しながら、利便性で大幅に改善されました。例えば、 エレメンプロのテーマビルダー機能は、Diviが最初に導入して拡散したものです。また、2,600を超えるレイアウトデザインを提供して、すばやくページを作成するのに役立ちます。

Diviテーマライブラリ

Divi 5はまったく新しいデザインで、スピード、安全性、柔軟性を大幅に向上させました。

区分ディビ4ディビ5
レイアウト基本行/列システムFlexbox、CSS Grid、入れ子になった行/列、繰り返しコンテンツ ​,war
속도比較的遅い、二重リロードありビルダー・ページ反応即時、クリティカルCSS自動生成 ​,war
拡張性サードパーティモジュールの多く、いくつかの不安定バックワード互換+新規インターフェイス、デザイン変数、グローバルスタイル
SEO機能基本的な構造化データに限定的な適用FAQスキーマ/リッチスニペット/画像最適化モジュールなどベースのサポート ​,war
移行一部モジュール互換不可、手動操作が必要自動移行サポート、不足している部分は互換モードに安全に移行

実際にDivi 5にアップデートしてテストしてみると、ページ編集画面で要素を選択するとすぐに反応し、非常に印象的なパフォーマンスを見せました。次の画像のようにクリックするとすぐに反応します。

WordPressでビルダーを使用すると編集中に遅い感じがあるかもしれませんが、Divi 5でテストしてみると、クリックするとすぐに反応し、エラーが発生せず非常に安定しているという感じを得ました。

Divi 5の詳細については、Elegant Theme■ブログ記事を参照してください。

Divi 5:主な変更の概要

Divi 5の登場は本格的 WordPress ビルパラダイム変化の信号弾になるのではないかと思います。それほどスピードと安定性の面で革新を遂げたようです。

Divi 5は単純なアップグレードではなく、 完全なリビルドその間、Divi 4ユーザーが不便に遭遇した遅い速度、バグ、複雑なスケーラビリティの問題を革新的に解決したそうです。

  • 基本構造 :Flexbox、CSS Gridなど最新のレイアウト技術を内蔵し、カスタムCSSなしでデザインの実装が容易です。
  • デザイン変数 :色、フォント、間隔を一度定義すると、サイト全体に適用できるため、ブランドの一貫性を維持するのがはるかに簡単になります。
  • レスポンシブエディタ :カスタムブレークポイントとさまざまなデバイス固有のプレビューを提供し、あらゆる環境で最適なユーザーエクスペリエンスを提供します。
  • アコーディオン、FAQ、ループビルダーなどのSEOフレンドリーなモジュールを強化 :主要なUI要素が最新のFAQと構造化データスキーマをサポートし、Googleなどの検索エンジンにリッチスニペットとして表示される可能性が高いです。​,war

Divi 5の速度・性能(パフォーマンス)・安定性イノベーション

スピードとパフォーマンス(パフォーマンス)はDivi 5の最大の強みの1つです。従来のDivi 4では、ロード遅延・デュアルリロードの問題がありましたが、Divi 5は次の技術革新で性能を最大化しました。

  • 動的JS/CSSロード :実際のページに必要なコードのみを読み込み、クリティカルなCSS自動生成でPageSpeed Insightsベースの上位スコアを簡単に取得できます。​,war
  • バックエンドビルダーの反応を改善 :レイアウトの変更、デザインの変更中にすぐにフィードバックが提供され、ワー​​クフローが高速になります。
  • バグを大幅に削減 :Divi 4では、複雑なページで発生していたボトルネックやモジュール衝突の問題がほとんどなくなりました。

ページビルダーとしてエレメントが多用されていますが、有料テーマの中ではDiviテーマが最も多いサイトに設置され使用されています。これはDiviテーマのライセンスに関連しています。 Diviは無制限のサイトにインストールできますが、ベストセリングテーマ Avada(Avada)は1つのサイトにのみインストールできます。

エレメンタは年間ライセンスのみ販売されますが、Diviは年間/生涯ライセンスで提供されるため、複数のサイトを運営したり、お客様のサイトを制作するエージェンシーでDiviを多く使用します。

Divi 5が公開されるにつれて、スピードと安定性の観点から、他のビルダーを先に進めるのではないかと思います。

Divi 5への移行

既存のDivi 4ユーザーなら、「Divi 5に移行しても安全ですか?」が最大の関心事でしょう。

段階的な移行ハニーチップ

  1. サイトのバックアップ :ホスティング自動バックアップ、プラグインバックアップ、手動DB・ファイルのエクスポートなど、あらゆる方法を活用して現在のサイトをバックアップします。
  2. Staging 環境で事前検証 :ウェブホスティングで Staging 機能を提供する場合は、あらかじめ Divi 5 を実際にインストール・アップデートして機能やデザインを検討することができます。
  3. Divi 5テーマのインストールと移行の実行 :既存のコンテンツと拡張モジュールの互換性を自動的に分析し、一部の未サポートサードパーティモジュールはバックワード互換モードで駆動。​,war
  4. 重要ページ・機能テスト :フォーム、ショッピングモール(WooCommerce)、ダイナミックコンテンツ、グローバル設定など、必須機能を直接チェックします。
  5. ライブ適用と最終チェック :十分な検証の後、実際のサイトにシームレスに反映してください。問題が発生した場合は、バックアップコピーを使用して簡単に元の状態に戻すことができます。 (Divi 5から以前のバージョンへのロールバック機能も提供しています。)

自動バックアップ/復元機能を備えた環境では、Divi 5にアップデートした後に問題がないかどうかを確認できます。

モールなどの重要なサイトの場合 Staging 機能が提供される場合 Staging サイトを作成して事前に更新テストを進めるのは安全です。

新しいサイトの場合はすぐにDivi 5で始めることができます。 Staging サイトまたはテストサーバーで事前更新テストを実行して、エラーが発生していないかどうかを確認してください。

Staging 環境でアップデートをテストする

クラウドウェイズを使用する場合は、アプリケーションを複製するか、 Staging サイトを作成して、事前更新テストを行った後にDivi 5に移行するかどうかを決定できます。

クラウドウェイで Staging サイトを作成してDivi 5アップデートをテストする方法を見てみましょう。他の重要なテストをしたい場合でも、同様の方法でアプリ(WordPress サイト)を複製するか、 Staging サイトを作成してテストできます。

1 まず、 エレガント ThemesホームページにログインしてDivi 5 Betaをダウンロードしてください。

Divi 5インストールファイルのダウンロード

2 クラウドウェイズアカウントにログインアプリケーションリストに移動し、Diviがインストールされているアプリケーション(WordPress サイト)を複製します。

クラウドウェイズアプリケーションの複製

またはそのアプリケーション(WordPress サイト)をクリックした後 Staging Managmentから Launch Staging Application ボタンをクリックします。

3 アプリケーションが複製されるサーバーを選択します。同じサーバーを選択するようにします。

サイトが複製されるサーバーの選択

Staging サイトを作成するには Create as Stagingをチェックします。チェックしないと、別々のアプリに複製されます。

  1. Staging サイト→アップデートテスト後に異常がなければすぐにライブサイトにプッシュ(Push)可能
  2. 複製サイト→更新後に異常がないことが確認されたら、実際のサイトから直接更新することができます。

2つの違いは、テストの直後にテストサイトで行った変更をライブサイトに直接適用したかどうかです。どちらを選んでも構いません。

4 アプリケーションが複製されると 用途 タブに表示されます。 Staging サイトに複製すると、アプリ名の前に「演出-'がつきます。

Staging サイト作成完了

5 アクセスの詳細でログイン情報を確認できます。 Staging サイトにログインしようとすると、ログイン情報の入力を求めるポップアップが表示されます。このログインポップアップは WordPress 管理者ログインに関係なく、アプリケーションを保護するためにパスワードを入力する必要があります。

ポップアップでID /パスワードを要求すると、下の図に パスワード保護 セクションに示す パスワード をコピーして入力します。

Staging サイトアクセス情報

この機能が不要な場合 パスワード保護 オプションを無効にできます。 (他のユーザー Staging サイトにアクセスできないようにしたい場合は、このオプションを有効にしてください。)

6 Staging サイトの WordPress 管理者ページにログインすると 形状 » テーマでテーマアップロードボタンをクリックして、ダウンロードしたDivi 5インストールファイルをアップロードします。

WordPress Diviテーマの更新

既存のバージョンは4.27.4です。上記の画像が表示された場合 アップロードとインストールの交換 ボタンをクリックしてテーマを更新します。

7 これで、Divi 4からDivi 5に移行できます。 Divi » Divi 5 マイグレータをクリックします。

Divi 5 移行メニュー

8 移行ツールページにアクセスすると、互換性チェックが行われます。下図のように」Congratulations! This site is 100% compatible with Divi 5「と表示されたら Migrate This site to Divi 5 ボタンをクリックします。

Divi 5互換性チェック完了

9 移行が完了したら Welcome to Divi 5 メッセージが表示されます。私はサイトがシンプルなので、10秒以内に移行が完了しました。😄

Divi 5への移行完了

移行後にメインページとコンテンツをチェックして問題がないかどうかを確認してください。サイトに問題がある場合 Restore Divi 4 コンテンツ ボタンをクリックしてDivi 4コンテンツに復元できます。

10 Divi Builderでページ編集画面を開いてみると、すっきりとしたインターフェースに変えましたね。何よりも要素をクリックするとすぐに反応するのがとても印象的でした。

WordPress Divi 5編集画面

左側のプラスアイコンをタップすると、レイアウトを挿入できるポップアップが表示されます。

Divi 5レイアウトを読み込む

新しいモジュールを追加するには 行を挿入 アイコン(+アイコン)をクリックして適切な構造を選択します。

Divi 5モジュールの追加

以下はモジュール挿入ポップアップをキャプチャしたものです。

11 サイトを見て、レイアウトが間違っている場所やエラーがないかどうかを確認してください。ページが正しく表示されない場合は、Divi Builderでページ編集画面を開き、[保存]ボタンを押して一度保存すると正常に表示されることがあります。

異常がなければ Staging Management » Copy Data from Staging to Liveから プッシュ ボタンをクリックします。

Staging 変更を実際の運用サイトに適用する

👉 Staging(スタギング)環境で Push(プッシュ)ラン、 テスト用サイト (Staging Site)で行われた変更 実際の運営サイト(Live Site)で反映(配布)する過程を指します。

12 ライブサイトにコピーするデータを選択します。

Staging 変更をライブサイトにコピー

あなたが知らない問題に備えてバックアップコピーを作成したい場合 Yes, please take backupをチェックします。

進む ボタンを押すと、変更内容がライブサイトにコピーされます。

完了後に運用サイトでページのレイアウトが間違っている場合は、そのページをDivi Builderで開き、[保存]ボタンを押すとレイアウトが正常に表示されることもあります。 (私は実サイトでページのレイアウトが壊れており、ページ編集画面モードで保存ボタンを押してキャッシュを削除することで問題を解決しました。)

最後に、

Divi 5のリリースは、単純なテーマのアップグレードではなく、完全なアーキテクチャの再構成(Rebuild)で、 WordPress ウェブサイト制作の版図を変えることができる意味のある転換点になることがあります。 Elegant ThemesはDivi 5を通じて既存のショートコード基盤を除去し、速度・安定性・拡張性を大幅に改善した新しいフレームワークを導入しました。これにより、ビルダーのパフォーマンスが最大2倍速くなり、複雑なモジュールや大きなレイアウトでもスムーズに動作するように最適化されています。また、開発者にやさしい新しいAPIと構造データシステムを備え、今後の機能拡張とサードパーティモジュールの互換性を強化したそうです。

詳細については、 エレガント Themesホームページを参考にしてみてください。

参照

2のコメント

コメントを残す

  1. Divi 5のパブリックベータニュースは本当に面白いです!スピードと安定性が大幅に改善されたという期待が大きい。既存サイトからの移行が問題なく行われたのも気になりますね。

    返信
    • 管理者ページでは、特に反応速度が大幅に改善され、印象的でした。エレメンタなどを使ってみると、管理者ページで編集するときにも重いという感じがしますが、Divi 5では素早く反応するので、そんな不快感はたくさん消えたようです。

      返信