Divi 5対応 スタイル付きブレンドモードエフェクト無料セクション集

Divi 5をご利用いただければ、カスタムコードを用いることなく、印象的な画像エフェクトを手軽に作成することが可能でございます。本無料パックには、7種類のスタイル付きブレンドモードエフェクトが含まれており、アーティスティックなヒーローセクションやレイヤー化されたヘッダー、ブレンドモードを活かしたモダンな画像構成の制作にお役立ていただけます。お好きなページに1つをドロップし、画像のみ差し替えていただくだけで、そのままご利用いただけます。追加の設定は不要でございます。内容とご利用方法について、以下にてご説明いたします。

1. プレビュー

パックに含まれる7種類のスタイル付きブレンドモードエフェクトの概要でございます。いずれも無料でダウンロードいただき、Divi 5のビジュアルビルダーでそのままお使いいただけます。ダウンロード方法は、後述の項目にてご案内いたします。

2. 無料ダウンロード

7つのデザインすべてを無料でご利用いただけます。Diviライブラリへインポートいただき、ビジュアルビルダーでお好きなページに追加していただく形でご利用可能でございます。Diviのニュースレターにご登録いただきますと、本パックのダウンロード用リンクのほか、その他の無料Diviリソースやヒントをメールにてお送りしております。既にご登録済みの方は、メールアドレスをご入力のうえ「ダウンロード」よりレイアウトパックにアクセスいただけます。

3. 含まれるもの（8つのエクスポート）

ファイルをダウンロードし解凍いただくと、7種類のスタイル付きブレンドモード効果セクションのエクスポートと、全デザインをまとめた1ファイルが含まれております。スタイル付きブレンドモード効果セクション1～7は、ヘッダー、ヒーローセクション、ビジュアルコールアウトなどにそのままお使いいただける、レイヤー化された画像とブレンドモードスタイルを組み合わせた7種類のセクションレイアウトでございます。また「スタイル付きブレンドモード効果セクション（すべて）」をご利用いただくと、全デザインを一括でDiviライブラリにインポートすることが可能でございます。

4. スタイルブレンドモードエフェクトの使い方

ダウンロードされたフォルダをご用意いただき、セクションをインポートしたうえでページに追加してご利用ください。まず、Diviメニューより「Divi Library」へお進みいただき、画面上部の「インポートとエクスポート」をクリックいたします。「レイアウトのインポートとエクスポート」モーダルが表示されたら「インポート」タブを選び、「ファイルの選択」よりご利用になりたいスタイル付きブレンドモード効果のJSONファイルを選択し、「Divi Builder レイアウトのインポート」をクリックいたします。次に、ビジュアルビルダーで対象のページを開き、新しいセクションを追加いたします。「挿入セクション」モーダルにて「ライブラリから追加」をクリックし、「スタイル付きブレンドモード効果」のセクションをお選びいただき、「このセクションを使用」をクリックしてください。レイアウトがページに配置されましたら、プレースホルダー画像をご自身の画像に差し替えてください。デザイン内の画像または背景領域をクリックし、表示される設定パネルで画像ソースを更新いたします。複数のレイヤーがあるセクションの場合は、意図した構成を保つため、レイヤーを1つずつ入れ替えていただくことをお勧めいたします。ブレンドモードのバランスを保つため、必要に応じてコンテナ内の背景画像も差し替えてください。また、ブレンドモード・不透明度・オーバーレイ・間隔などを微調整することで、ブランドに合わせた見た目に調整することも可能でございます。画像が設定されている箇所（背景レイヤーや画像のスタイル設定など）でブレンドモードのオプションをご確認いただき、不透明度やコントラストを少し変更するだけでも、仕上がりが大きく変わることがございます。セクション内にテキストやボタンが含まれる場合は、オーバーレイの強さとテキストのコントラストを調整し、読みやすさをご確認ください。

5. ブレンドモードの結果を良くするためのヒント

ブレンドモードを用いたデザインは、レイヤーが意図した印象を与え、コンテンツの読みやすさが保たれているときに最も効果的でございます。高コントラストの画像をご利用ください。ハイライトとシャドウがはっきりしたベース画像ほど、ブレンドモードの効果が分かりやすくなります。平坦で濁りのある画像は、レイヤーを重ねた際にメリットが感じられにくい場合がございます。オーバーレイはシンプルに保つことをお勧めいたします。テクスチャやグラデーション、繊細なパターンレイヤーは、構図を重くせずに奥行きを足すことができます。効果が複雑に感じられる場合は、まず不透明度を下げてお試しください。テキストの読みやすさは早めにご確認ください。画像の上に見出しや本文があるレイアウトでは、複数の画面サイズでコントラストをご確認いただき、必要に応じてオーバーレイの強度を上げるか、レイヤーを簡素化してください。レイヤー化された構成は、小さい画面ではずれや崩れが生じることがございます。モバイル表示で各セクションをプレビューし、焦点が明確になるよう間隔や配置を調整していただくことをお勧めいたします。

動画：全ブレークポイントでプレビュー

6. 今すぐ Divi 5 で構築を始めましょう

 本パックはDivi 5にてそのままご利用いただけます。7種類のブレンドモードエフェクトをぜひお試しいただき、ヒーローセクションやヘッダー、画像構成の制作にお役立てください。Divi 5での制作を、本パックをきっかけに始めていただけますと幸いでございます。