Divi 5 で大幅進化した画像設定！「アスペクト比」「フレーミング」「プリセット」の活用法

Divi 5 が公開され、画像周りに追加された新機能には、現場で日々制作に携わる者として本当に嬉しく、そして待ち望んでいたアップデートだと実感しています。これまで画像の比率調整やトリミング、スタイル統一のために外部の画像編集ソフトを行き来していた手間が、ビルダー上で直感的に完結するようになったからです。

1. 最新の画像設定とプリセットのサポート

画像はウェブサイトにとって視覚的な中心であり、Diviのほぼすべてのモジュールに画像要素が含まれています。これまで画像のスタイリングやトリミングに多くの時間を割いてきた方にとって、今回のアップデートは制作フローそのものを見直すきっかけとなります。専門用語を避け、実務でどう使えるかに焦点を当てて解説します。

1.1 アスペクト比

各モジュールの「サイズ設定」グループに、アスペクト比（縦横比）の項目が追加されました。比率を指定すると、画面サイズやデバイス幅が変わっても要素の高さが自動的に比例調整され、比率が崩れることがありません。

実務での活用例：アイキャッチ画像やバナー、商品カードなど、スマートフォン表示で画像が縦に潰れたり横に伸びたりする問題を根本から防げます。画像編集ソフトで複数サイズを書き出す手間が大幅に削減されます。標準比率に加えカスタム比率も設定可能ですが、実案件では事前に「このブロックで最も頻繁に使用する比率」をプロジェクト内で統一しておくと、後のメンテナンスやチーム作業がスムーズになります。

1.2 画像フレーミング

アスペクト比や明示的な幅・高さを指定すると、通常は画像が枠に合わせて引き伸ばされます。しかし実際の制作では「比率を保ったまま、見せたい部分だけを切り出したい」というケースが非常に多いです。そこで役立つのが新しいフレーミング設定です。

写真の額縁のように、画像を枠内に収めながら「どの位置を基準に表示するか」を調整できる機能です。画像ファイル自体を編集・トリミングしなくても、表示領域だけを整えられます。横長の風景写真を正方形のカードにはめ込む際、被写体が枠の中心や上部に来るように調整できるため、ループアニメーションやギャラリーで「崩れない統一感」を出すのに最適です。実務では、フレーム位置の調整と表示方法の組み合わせで、意図しない余白や不要な切り抜きを防ぐ設計を意識しています。

1.3 画像プリセット

Divi 5 では、モジュール内のすべての画像要素でプリセット（共有スタイルセット）がサポートされるようになりました。画像の角丸、シャドウ、枠線、フィルタなどのスタイルを一度作成して保存しておけば、複数の画像にワンクリックで適用できます。

実務での活用例：サイト全体の商品画像やプロフィール画像など、共通のデザインルールを適用する際に手作業で一つずつ設定する必要がなくなります。仕様変更時にもプリセットを1つ更新するだけで、適用されているすべての画像がサイト全体で一括反映されるため、修正工数が劇的に減少します。大規模サイトや保守案件では、最初に「基本」「特徴」「サムネイル」など用途別のプリセット名を決めて運用すると、複数人での作業や納品後の引き継ぎが非常に円滑になります。

1.4 画像設定 ハーモニー＆コンポーザブル設定

今回のアップデートでは、画像関連の設定項目がDiviのデザインシステム全体と統合されました。画像サブ要素のデザインオプションが統一され、Divi全体のコントロールパネルと同じ操作感で設定を行えるようになっています。

実務での活用例：従来はモジュールによって設定場所や表記が異なり習得コストがかかっていましたが、今後は画像を扱える場所であれば同じ感覚でカスタマイズ可能です。これにより学習コストが下がり、新人スタッフの教育期間も短縮できます。構成可能な設定により、画像部分だけをピンポイントでカスタマイズする際にも、Diviのデザイン機能を存分に活用できる環境が整いました。

Divi 5 はアーキテクチャから見直されたメジャーバージョンです。実際の導入の際は、本番環境でいきなり置き換えるのではなく、ステージング環境やテスト用のサブドメインで動作検証を行うことを強く推奨します。既存のテーマカスタマイズや他プラグインとの干渉がないか、画像キャッシュの更新タイミングなどを事前に確認しておくことで、運用上のトラブルを未然に防ぐことができます。

2. 新しい可変フォントジェネレーターはお試しになりましたか？

画像設定の進化と同様、フォント管理も大幅に柔軟になりました。ウェイト（太さ）や幅をスライダーで連続制御できるため、以前のように複数のフォントファイルを読み込む必要が減り、ページの読み込み速度最適化に直結します。実務では、モバイル表示では軽量に、デスクトップではしっかりとした視認性を持たせるといったデバイスごとの調整が、CSSを直接記述せずに完結します。

まとめ

本記事では、Divi 5 で追加された画像設定の新機能について、実務の視点からその活用法を解説しました。

アスペクト比：デバイス表示の崩れを防ぎ、レスポンシブ対応をビルダー内で完結可能に

画像フレーミング：画像ファイルを変更せずとも、表示領域内で被写体の位置を自由に調整

画像プリセット：スタイルの一元管理により、サイト全体の一貫性維持と修正工数の大幅削減

設定の統合：操作感の統一により、学習コストの低下とチーム作業の効率化を実現

これらの機能は、単なる「便利機能」の追加ではなく、制作ワークフローそのものの見直しを促すものです。外部ツールへの依存を減らし、ビルダー内での完結型デザインが可能になることで、制作時間の短縮と品質の安定化が同時に実現できます。

実際にビルダー上で新機能を触ってみることで、その直感性と実用性を体感していただけるはずです。まずは小さなパーツから試し、徐々に適用範囲を広げていくことをお勧めします。

開発者の方々、WordPressおよびDiviをご利用の皆様の業務効率化に寄与し、微力ながらお役に立てれば幸いに存じます。