Diviグラデーションビルダーを使用して複数のグラデーションカラーを簡単にブレンドする方法

Diviの新しいグラデーションビルダーは、必要なあらゆる種類のグラデーション背景を作成する強力なツールです。 使い方は簡単で、複数の色を追加して、面白くてユニークなグラデーションを作成できます。 ただし、色を追加すると、設計プロセスでより多くの考慮が必要になる場合があります。 この投稿では、Divi Gradient Builderを使用して複数のグラデーションカラーを簡単にブレンドし、独自のマルチカラーグラデーションの作成を開始する方法を説明します。

複数のグラデーションカラープレビュー

まず、このチュートリアルで作成するものを見てみましょう。 同じレイアウトを使用して、4つの異なるグラデーションを作成します。

最初の例の結果

2番目の例の結果

3番目の例の結果

4番目の例の結果

複数のグラデーションカラーを組み合わせるためのベストプラクティス

すべての設計原則と同様に、複数のグラデーションカラーを組み合わせるときに留意すべき点がいくつかあります。 複数のグラデーションカラーを組み合わせてWebサイトのルックアンドフィールを最適化する場合は、次の点に注意してください。

カラーファミリーに焦点を当てる

同じ色の異なる色合いを使用しながら、同じ色のファミリ内にとどまります。 これにより、背景色間のコントラストが低くなり、背景が邪魔になりすぎないようになります。 最初の例では、この手法を使用します。

トーンダウンカラーをお試しください

同じレベルのトーンダウンカラーのさまざまな色合いを試してください。 これにより、それらの間のコントラストを低く保ちながら、より多くの色を得ることができます。 パステルはこの良い例です。 これにより、前景の邪魔になることなく、背景に複数の色合いが与えられます。 2番目の例ではこのメソッドを使用します。

読みやすさを優先する

デザインでは常に読みやすさを優先します。 グラデーションを使用して色やパターンをデザインするときは、コンテンツが常に読みやすいことを確認してください。 これを行う1つの方法は、グラデーションを画面の片側にプッシュすることです。 これにより、コンテンツの邪魔にならずに目立つグラデーションをデザインできます。 3番目の例では、このメソッドを使用します。

交差および混合勾配を使用する

交差するグラデーションとブレンドされたグラデーションを組み合わせて、ハードラインとソフトトーンを作成します。 これにより、コンテンツの邪魔になることなく、興味深いパターンを作成できます。 さまざまな方向とグラデーションの停止点を試して、レイアウトに最適なものを確認してください。 これらの設定を使用して、円やハードラインなどを作成します。 3番目の例でもこの方法を使用します。

さまざまなグラデーションタイプを使用する

さまざまなグラデーションタイプを試して、独自の結果を取得してください。 たとえば、円錐形は、さまざまなグラデーションカラーで独自のルックアンドフィールを作成するための優れたグラデーションタイプです。 4番目の例では円錐を使用します。

あまりにも多くの色を使用しないでください

より多くの色を使用するためだけに、より多くの色を使用しないでください。 通常は2〜3色が理想的ですが、注意すればもっと使用できます。 さらに多くの色を使用する場合は、それらをできるだけ類似させて、はっきりとしたコントラストではなく色合いになるようにします。

色をランダムに選択しないでください

コンテンツやウェブサイトに適した色を使用してください。 これにより、コンテンツが読みやすくなるだけでなく、Webサイトに属しているように見えます。

UXを忘れないでください

常にユーザーエクスペリエンスを考慮してください。 グラデーションとその上のコンテンツをチェックして、それがどの程度うまく機能するかを確認します。 何人かのユーザーにコンテンツとグラデーションを見てもらい、それが自分たちにとってうまく機能することを確認します。

グラデーションをテストする

何が最良の結果を得るかを確認するために、A/Bテストで複数のタイプと色のグラデーションを試してください。

複数のグラデーションカラーの例

それでは、GradientBuilderの例をいくつか見てみましょう。 これらの例では、Divi内で利用できる無料のFlooringLayoutPackのAboutPageのヒーローを微調整しました。 新しい背景色＃6294d1と新しいボタン色＃c1fff4を付けました。

• 背景色：＃6294d1
• ボタンの色：＃c1fff4

DiviGradientBuilderで複数のグラデーションカラーを作成する方法

まず、DiviGradientBuilder内で調整を行う方法を見てみましょう。 セクションの背景にグラデーションを追加します。 開始するには、セクションの設定アイコンをクリックします。

次に、[背景]まで下にスクロールします。 [背景グラデーション]タブを選択し、[背景グラデーションを追加]をクリックします。

グラデーションは2色から始まります。 グラデーションストップバーでグラデーションを選択して色を変更し、新しい開始位置にドラッグします。 必要な数のグラデーションを追加します。 さらに追加、削除、編集などを行うことができます。

タイプ、方向、繰り返し、単位、および背景画像の上に配置するかどうかを調整して、目的のデザインを取得します。

Divi Gradient Builderの詳細な概要については、Divi用のAdvancedGradientBuilderの紹介の記事を参照してください。

複数のグラデーションカラーの例1

最初の例では、4つの勾配ストップを作成します。 [背景グラデーション]タブを開き、最初のグラデーションを選択します。 グラデーションの位置を0％のままにして、グラデーションの色を＃6294d1に変更します。

• グラデーションストップの最初のポイント位置：0％
• 色：＃6294d1

次に、グラデーションストップバーをクリックして、新しいカラーストップを追加します。 グラデーションの位置を29％に移動し、色を＃b5bfd1に変更します。

• グラデーションストップセカンドポイント位置：29％
• 色：＃b5bfd1

次に、 3番目のグラデーションストップを追加し、その位置を84％に移動します。 その色を＃8eacd1に変更します。

• グラデーションストップサードポイント位置：84％
• 色：＃8eacd1

最後に、 4番目のグラデーションストップの色を＃b5bfd1に変更します。 このグラデーション位置は100％のままにします。

• グラデーションストップ4番目のポイント位置：100％
• 色：＃b5bfd1

次に、グラデーションの設定を調整します。 方向を225度に変更します。 残りの設定はデフォルトのままにします。 これらの設定をここに含めて、確認できるようにします。 これで、モジュールの設定を閉じて作業を保存できます。

• タイプ：線形
• 方向：225度
• リピートグラジエント：いいえ
• グラデーションの単位：パーセント
• 背景画像の上にグラデーションを配置：いいえ

複数のグラデーションカラーの例2

2番目の例では、3つのグラデーションストップを作成します。 背景グラデーション設定を開き、最初のグラデーションストップの色を#bffffcに変更します。 その位置を0％のままにします。

• 最初の勾配停止位置：0％
• 色：#bffffc

新しいグラデーションストップを追加し、その位置を42％に移動します。 その色を＃bbc7f9に変更します。

• 2番目の勾配停止位置：42％
• 色：＃bbc7f9

次に、 3番目のグラデーションストップの色を＃adbdd1に変更します。 グラデーション位置は100％のままにします。

• 3番目の勾配停止位置：100％
• 色：＃adbdd1

次に、グラデーションタイプを円形に変更します。 残りの設定はデフォルトのままにします。 これにより、セクションの中央にホットスポットが作成されます。 設定を閉じて、作業を保存します。

• グラデーションタイプ：円形

複数のグラデーションカラーの例3

3番目の例では、3つのグラデーションストップを使用してグラデーションを作成します。 最初のグラデーションの位置を15％に移動し、その色を＃afc3edに変更します。

• 最初の勾配停止位置：15％
• 色：＃afc3ed

次に、 2番目のグラデーションストップを33％に移動し、その色を＃adbdd1に変更します。

• 2番目の勾配停止位置：33％
• 色：#bffffc

次に、3番目のグラデーションストップを2番目のグラデーションストップの真上にある33％に移動し、その色を＃adbdd1に変更します。 グラデーションストップバーに2つのグラデーションがあるように見えます。

• 3番目の勾配停止位置：33％
• 色：＃adbdd1

これには、設定で作成する興味深いアーチがあります。 グラデーションの種類を円形に、グラデーションの位置を右に変更します。 設定を閉じて、作業を保存します。

• タイプ：サーキュラー
• 位置：右

複数のグラデーションカラーの例4

4番目の例には、5つの勾配停止が含まれています。 最初のグラデーションストップでは、色を＃878ebcに変更します。 ポジションは0％のままにしておきます。

• 最初の勾配停止位置：0％
• 色：＃878ebc

22％の位置に2番目の勾配ストップを追加します。 その色を＃a0c1d6に変更します。

• 2番目の勾配停止位置：22％
• 色：＃a0c1d6

次に、48％の位置に3番目のグラデーションストップを追加します。 その色を#bffffcに変更します。

• 3番目の勾配停止位置：48％
• 色：#bffffc

4番目のグラデーションストップでは、73％の位置に配置し、色を＃d3d8ffに変更します。

• 4番目の勾配停止位置：73％
• 色：＃d3d8ff

5番目のグラデーションストップでは、77％の位置に移動し、色を＃c6dfffに変更します。

• 5番目の勾配停止位置：77％
• 色：＃c6dfff

最後に、グラデーションタイプを円錐形に変更し、グラデーション方向を233度に変更します。 設定を閉じて、作業を保存します。

• タイプ：コニカル
• 方向：233度

複数のグラデーションカラーの結果

最初の例の結果

2番目の例の結果

3番目の例の結果

4番目の例の結果

複数のグラデーションカラーに関する最後の考え

これが、DiviGradientBuilderを使用して複数のグラデーションカラーを簡単にブレンドする方法についての説明です。 Gradient Builderは、楽しく遊ぶことができます。 色はいくつでも追加できますが、一緒に見栄えを良くするには、いくつかの簡単な設計原則に従う必要があります。 これらの例は、3〜5色を使用してグラデーションを作成し、Webサイトのデザインとうまく連携させることがいかに簡単かを示しています。

私たちはあなたから聞きたい。 これらの方法を使用して、Diviの新しいグラデーションビルダーで複数のグラデーションカラーを作成しましたか？ コメントであなたの経験を教えてください。