Divi 5では、デザインシステムの根幹が「変数（Variables）」と「プリセット（Presets）」に再構築されました。従来はページ単位・モジュール単位でスタイルを都度調整していた作業が、サイト全体を統制する「変数システム」へ移行したことで、保守性・拡張性・チーム共有のハードルが劇的に下がっています。
中でも特に注目すべきは、数クリックでサイト全体のカラーパレットとサイズ設定を自動生成できる「Variable Generator」です。clamp()やHSL相対カラーといったCSSの高度な概念をGUIに落とし込むことで、初心者でもプロレベルのレスポンシブ制御が可能になり、上級者も細やかなカスタマイズを効率的に行えます。
本記事では、実務視点でその仕組みと運用メリット、導入時の具体的なフローを整理します。
相対カラーパレット変数ジェネレーター：1色変更でサイト全体のトーンを統一
仕組みと特徴
従来のカラーパレットは「固定値」の羅列でしたが、Divi 5ではすべての色が「変数」として管理されます。さらに相対カラーシステムにより、メインカラー（Primary Color）を基準に、明度や彩度を数学的に連動させた階調（Shades）を自動生成します。
変数マネージャーでカラーグループにカーソルを合わせ、Generate Color Palette Variablesをクリックするだけで、ベースカラー（Primary/Secondary/本文テキスト/ヘッダーテキスト/リンク）に加え、明度グラデーションや透明色を含むパレットがHSL（色相・彩度・明度）演算で生成されます。
実務でのメリット
ブランドカラー変更に瞬時対応：クライアントからの「もう少し暖かみのある色へ」などの調整依頼に対し、メインカラー変数を1つ変更するだけで、派生色・ボタン・背景・リンク色が連動して更新されます。
一貫性の担保：デザイナーが意図した明度差をシステム側が自動計算するため、担当者間のバラつきや「少し暗いグレー」の曖昧な指定がなくなります。
運用
生成時に「セカンダリカラーとの関係性」や「生成する階調数」を調整可能。アクセントカラーが明確なプロジェクトでは、生成後に微調整するとより自然な配色になります。
変数名はプロジェクトのガイドラインに合わせて接頭辞（例：brand-, ui-）を統一しておくと、チーム開発時の可読性が向上します。
流体サイズ変数システム：clamp()をGUIで。レスポンシブ作業の負担を激減
Divi 5のサイズ変数ジェネレーターは、フォントサイズ、マージン/パディング、Gap、角丸（Radius）、ボーダー幅などを流体（Fluid）かつレスポンシブな変数として一括生成します。デフォルトではCSSのclamp()関数が採用され、ビューポート幅に応じて自動的にスケールします。
clamp()とは、「画面幅に応じて自動で伸縮し、指定した最小値より小さくならず・最大値より大きくならないように制限するCSSの仕組み」です。これにより、ブレークポイントごとに値を手入力する作業が不要になります。
変数マネージャーのNumbersグループからGenerate Fluid Sizing Variablesを選択し、変数タイプ（Font Size, Spacing, Gap, Radius, Border Width, Generic Clamp/Sizeなど）を選んで生成数を指定。Add Variables To My Siteをクリックするだけで基盤が完成します。
モバイル～大画面の一貫性：最小値・推奨値・最大値が自動計算されるため、デバイス間での見た目の崩れや極端な拡大/縮小を防げます。
コーディング知識が浅くてもプロ並みの制御：メディアクエリや細かな数値計算を記述せずとも、滑らかなレスポンシブ挙動を実現できます。
保守コストの削減：タイポグラフィやスペーシングルールの変更時、ページを巡回して修正する必要がなくなります。
カスタマイズ
デフォルト設定でも十分実用的ですが、カスタマイズサイドバーを開くことで以下の制御が可能です：
スケーリング関数の変更
サイト固有の最小/最大ビューポート幅の定義
個別変数の手動調整
静的（非clamp）変数システムへの変更
接頭辞/接尾辞のカスタマイズ
デザインシステムを厳密に管理したい開発者や、企業ブランドガイドラインに厳格に従う案件でも柔軟に対応できます。
ネスト可能オプションプリセット：CSSプリプロセッサのような保守性
Divi 5のプリセットシステムは、単なる「CSSクラス定義」を超え、サブコンポーネントやオプション単位でスタイルを共有・階層化できるOption Presetsに進化しました。
従来は適用が難しかった「CTA > Button > Border」などの細部設定もプリセット対応となり、複数のプリセットをスタック（積み重ね）させ、入れ子にすることが可能になりました。これにより、コンポーネントベースの開発に近い保守性を実現し、大規模サイトや複数担当者での共同作業において、スタイルの競合や冗長化を大幅に防ぎます。
実務で活かすための導入フローと注意点
変数ジェネレーターは「魔法のボタン」ではなく、デザインシステムの基盤を作るツールです。実務で安定して運用するためのフローを以下にまとめます。
具体的なアクション
① 設計段階
Figmaや紙面でタイポグラフィスケール、スペーシングルール、アクセントカラーの階調を整理。自動生成は「起点」を作るものであり、最終調整はプロジェクトの文脈に合わせます。
② 段階的適用
既存サイトをDivi 5にアップグレードする場合は、いきなり全変数を適用せず、テスト環境で「カラーパレット → フォント/スペーシング → Gap/Radius」の順に検証・適用します。
③ 命名規則の統一
チーム開発時は変数のプレフィックス/サフィックスを統一（例：divi-font-, site-space-）。他プラグインやテーマとの競合を回避し、将来のメンテナンスを容易にします。
④ アクセシビリティ検証
clamp()による自動スケールは便利ですが、ブラウザの文字サイズ拡大機能や極端なアスペクト比のデバイスでの表示は、必ず実機またはデベロッパーツールで確認してください。最小値/最大値の閾値はユーザー体験に直結します。
おわりに：ページ単位から「システム単位」へ
Divi 5の変数ジェネレーターは、単なる機能追加ではなく、Web制作の考え方を「ページ単位」から「システム単位」へ転換する基盤です。CSSの高度な概念をGUIに落とし込むことで、初心者でも保守性の高いサイトを構築でき、上級者も細やかな制御を効率的に行えます。
WordPressとDiviを活用するすべての開発者・制作者にとって、制作効率と品質の両立を現実的にする強力なツールとなるでしょう。本記事が皆様の業務フロー改善の一助となれば幸いです。
.jpg)
