Divi 5を使用してカラーシステムを作成する方法

ランダムな色の選択は、まとまりのあるデザインにつながることはめったにありません。専門的にウェブサイトを構築する場合は、意図的なシステムが必要です。カラー管理とデザインの変数を使用して、Divi 5内で実際のカラーシステムを構築できます。これらは、ビジュアルエディターに直接設定し、任意のカラーフィールドにアクセスできる色で、他の多くの便利さが付属しています（以下に示します）。

この投稿では、Divi 5に柔軟でスケーラブルなカラーシステムをセットアップする方法を示します。

カラーシステムとは何ですか？

カラーシステムは、基本的に、サイト全体で一貫して使用される事前に計画された色のパレットです。それは、すべてがランダムに一緒に投げられるのではなく、意図的にスタイルのように見えるのを助けます。良いシステムのために、あなたは通常必要です：

• プライマリカラー：メインブランド色。
• 二次色：プライマリとサポートおよび対比します。
• テキストカラー：見出しや段落のためにクリアで読み取り可能。
• アクセント：アラート、通知、およびその他の重要なもののためのその他の色（オプション）。
• 背景色：通常、ニュートラルまたは微妙な色合い。

60-30-10ルールは、Webデザインの色に適用されます。一般に、ニュートラルな色（セクションの背景やネガティブスペースなど）は、デザインの60％、30％の一次色、残りの10％のセカンダリ/アクセント色に使用されます。

ウェブサイトの色を選択する方法

あなたのウェブサイトで使用されるブランドの色と色は、軽視される決定ではありません。目的のあるカラーパレットを作成することは、デザイナーのスキル、カラー心理学、業界、ブランドの差別化に依存します。ただし、ベースカラーとブランドアセット（ロゴのバリエーションなど）ができたら、設計システムの作成を開始できます。

設計リソースが限られている場合は、ウェブサイトのビルドに備えるためにいくつかの簡単なタスクを実行できます。まず、色の心理学の大まかな読み物をします。伝えたいブランドの価値（信頼、若々しい、イノベーションなど）を探し、それらの値に基づいて色を一致させてみてください。次に、ブランドの価値に合っていると思われる世帯認識可能なブランドを見てください。彼らはどんな色を使用していますか？彼らは彼らのウェブサイト、コマーシャル、ソーシャルポストでそれらをどのように使用しますか？

あなたの会社の価値は、あなたがする仕事の種類によってさえ決定されるかもしれません。錠前屋と配管工は信頼できる必要があるため、青はそれを伝えるのに最適な方法です。ファイナンシャルプランナーと造園家は、成長と持続可能性（それぞれの分野で）を扱っているため、グリーンはそこに良いアンカーです。フラワーファーマー、チャイルドケアセンター、レストランは、赤と黄色に寄りかかってブランドにエネルギーと活力をつなぐことができます。一般的なアイデアが得られたら、Coolorsのようなものを使用してシンプルなパレットを作成します。

Divi 5にカラーシステムを構築します

Divi 5には、グローバルな色を処理する最も簡単な方法です。その中には、4つの事前に割り当てられたグローバルな色があり、箱から出して作業することができます。彼らです：

1. 原色
2. 二次色
3. 見出しのテキストカラー
4. ボディテキストの色

ステップ1：ベース色を変数として定義します

Diviの左側のサイドバーで、設計変数マネージャーを開きます。 Colorsセクションを見つけてください。これらの4つの異なるデフォルトが表示されます。

これらの4つのラベルを削除することはできませんが、それぞれを設定する色を選択できます。これらの4つに加えて、グローバルカラーの追加ボタンをクリックして、必要な数の色を追加できます。先に進み、カラージェネレーターから色の16進値を入力します。

これらの変数は、Diviのビジュアルビルダーのどこでも即座に利用可能になります。これは非常に便利です。しかし、それらを保存してください！

ステップ2：HSL色のシェードと色合いを作成します

DiviのHSLフィルターを使用して、色合い（色の明るいバージョン）とシェード（色の暗いバージョン）を作成できます。このプロジェクトでは、一次色と二次色のバリエーションのみを作成します。カラーパレットジェネレーターを使用して、これらのカラーバリエーションを作成できます。

ここでの最初のステップは、別のグローバルな色を作成することです。ただし、16進値を貼り付ける代わりに、既存の色を選択してバリエーション（色合いと色合い）を作成します。

次に、バリエーションを作成するには、そのベースカラーにフィルターを適用する必要があります。カラーチップをクリックしてから、「フィルター色」を選択するか、新しい相対色の変数の色見本をクリックします。

色のバリエーションごとにこれを行います。カラーバリエーションに認識可能な名前を付けて保存してください。

たとえば、一次色はかなり暗いため、いくつかの明るい色合いといくつかの暗い色合いを追加できます。これにより、ページデザインにカラーシステムを適用する際に多くのオプションが得られます。

セカンダリおよび/またはアクセントの色については、上記の手順を繰り返します。これらのバリエーションを作成するときは、常にベースカラーを選択してから、その上にフィルターを適用してください。そうすれば、主要な色を変更した場合、これらのバリエーションはそれに続きます。

DIVIでデザインに色を適用します

あなたの変数は今存在します。それらを使用する時間。空白のDiviページから始めて、うまく設計されたレイアウトに向かって順番に作業します。

ステップ1。ページのワイヤーフレームを作成します

空白のページではなく、ワイヤーフレームから始めることができます。これにより、カラーシステムをよりよく理解することができます。ページの一般的な構造とフローを理解したら、デザインの選択を開始できます。 Diviの多くのプレムードレイアウトパックまたはスターターサイトの1つを使用することもできます。彼らがすでに定義されている色を持っているかどうかは関係ありません。これらを簡単に変更できます。

この例では、コンサルティングレイアウトパックを変更し、ホームページレイアウトを使用することを選択しました。同様のことをする場合は、プリセットをインポートできます。ただし、これらのプリセットの色を編集する必要があります。簡単にするために、モジュール/要素レベルでスタイルを直接変更します。

ステップ2。タイポグラフィと色

デフォルトでは、Diviはグローバルな見出しとボディテキストの色を使用して、テキストを清潔で読みやすくします。モジュールやプリセットのテキストカラーを変更することにより、これらの所定の色の選択をいつでもオーバーライドできますが、あまり頻繁に行う必要はありません。

モジュールで見出し色がどのように設定されているかに注意してください。 Diviは、グローバルな色を見出しとボディテキストに自動的に割り当てます。もちろん、別の色を選択することでオーバーライドできます。

リンクがより目立つようにする色をカスタマイズし、クリックを引き付けることができます。

スタイルを作成するテキストを備えた他のモジュール（見出しモジュールとテキストモジュール以外）があります。連絡先フォーム、カウントダウンタイマー、ブログモジュールなどのモジュールはすべて、色を一意に適用する必要がある場合があります。

ステップ3。スタイリングボタン

Diviのボタンはデフォルトではシンプルで、プライマリカラーを使用します。しかし、何か違うことを望むなら、あなたはこの決定を強いられません。モジュールの設定パネルを開き、[デザイン]タブに移動し、[選択]ボタンを選択します。ボタン設定の下で、「ボタンにカスタムスタイルを使用」を有効にします。あなたの背景を選択したグローバルな色に設定し、ボタンテキストは白のような読みやすい色になります。

ページに2つのボタンが並んでいるか、複数のボタンがある場合は、セカンダリカラーまたは別のアクセントを使用して、セカンダリボタンスタイルの別のボタンプリセットを作成できます。

色合いや色合いでホバー状態を作成します

ホバー状態は、相互作用と目的意識を追加します。ホバースタイルで以前の色合いと色合いを使用してください。ボタンに実装することは明らかですが、他の場所でも微妙に使用できます。

ホバー状態を有効にするには、背景色オプションの横にあるカーソルアイコンをクリックします。ホバーの背景色を設定します。ユーザーがボタンの上にホバリングすると、視覚的に応答し、相互作用を自然にガイドします。

ステップ4。カラープリセットと勾配を備えたセクションの作成

DIVIのセクションには、デフォルトで透明な背景があります。これは、保護されたままにしておくと、通常は白として表示されることを意味します。主な色の1つの色相に基づいて中立の色のバリエーションを作成することで、いくつかの陰謀を追加できます。

この背景色は黒に近いですが、主な色と同じベースヒューを共有して、「テーマに」微妙な結束を与える。

また、色バリアントを使用してグラデーションを実験することもできます。ここでのトリックは、色のあまりにも多くの組み合わせを使用しないことです。色のペアリングと階層に基づいた規律のあるまとまりのあるデザインが必要です。

この時点でリマインダーが整っています。これらの色のペアリングと決定のほとんどをプリセット（オプショングループまたは要素プリセットのいずれか）に保存する必要があります。プリセットを介してデザインにデザイン変数を作成および実装したら、デザインシステムを使用して、以下のページをより迅速に作成できます。これにより、サイト全体で一貫したデザインパターンを使用することも保証されます。

そして、後で色がわずかに外れていると判断した場合、ベース色のHSL値を調整でき、その色のすべてのインスタンス（およびその色に基づいて比較的作成されたすべての色）が変わります。

Divi 5カラーシステムをまとめます

思慮深いカラーシステムは、Webデザインで最も簡単な勝利の1つであり、Divi 5はあなたのためにそれを機能させるためのツールを提供します。ほんの数ステップで、あなたは：

• コアブランドの色を再利用可能なデザイン変数として定義します
• それらをHSLフィルターで便利な色合いと色合いに拡張します
• テキスト、ボタン、フォーム、およびセクションに一貫して適用します
• すべての新しいページが同じルールに従うように、選択肢をプリセットとして保存します

ペイオフは美学よりも大きいです。しっかりした色のシステムは、明確さを生み出し、訪問者をアクションに向け、サイトの隅々にブランドをまとまりやすく感じさせます。また、DIVIのすべてが可変駆動型であるため、ベースカラーへの1つの調整は、サイト全体を即座に波打つことができます。それは、あなたがスケーリングするにつれてあなたのデザインが一緒に保持されるといういじくり回しが少なく、より自信を持っていることを意味します。