クライアントのブランドカラーをDivi5カラーシステムに変える

ブランドの色は通常、ヘックスコードが見出し、ボタン、背景に適用されることから始まります。最初は簡単ですが、レイアウトが成長するにつれて、より軽い色のバリエーション、ホバー状態、または補完的なアクセントが必要になることがよくあります。手動で管理することは乱雑になる可能性があります。

Divi 5の新しいカラーシステムは、パレットを一度定義し、最初のカラーパレットから接続されたシェードを構築できるようにすることで、これを簡単にします。デザインが進化するにつれて、各色は同期しています。このガイドでは、クライアントのサイト全体ですべてを一貫性に保つ柔軟でスケーラブルなカラーシステムを作成する方法を学びます。

Divi 5のカラーシステムの理解

Divi 4でグローバルな色で作業している場合、色を一度定義し、サイトに適用することがどれほど役立つかをすでに知っています。 Divi 5は同じアイデアに基づいて構築されますが、今回は色を完全なシステムに変えて、あなたと拡大します。

YouTubeチャンネルを購読してください

3つの主要なアップグレードは次のとおりです。

設計変数から始まります。 Variable ManagerのColors The Colors内のブランドパレットを定義すると、これらの値が基盤になります。定義されると、任意のモジュールまたはセクションで使用できるようになります。そして、ブランドがラインを進化させる場合、変数を1つの場所で更新するだけです。それらにリンクされているすべてがそれ自体で調整されます。

2番目のアップグレードはHSLカラーフィルターです。スライダーを使用すると、色相、飽和、軽さを調整することができ、トーンとコントラストを使用するときに、より多くのコントロールが得られます。

プライマリグリーンが背景には厳しすぎると感じた場合は、わずかに柔らかくなり、明るさを調整し、そのバージョンを変数として保存できます。これは真新しい色になりますが、まだ元の色にリンクされています。

これにより、孤立した値ではなく関係で考えるスペースが開かれます。変数をリンクすることで、より暗い、明るい、やや暖かい、またはより控えめなものなど、常に他の距離から一定の距離を保つことができます。これらは相対色と呼ばれ、3番目の改善です。

たとえば、ホバー色は、プライマリよりも20％暗く定義できます。一次色が変化した場合、ホバー状態は手動調整を必要とせずに関係を維持します。

この3部構成のシステムは、柔軟で接地した作業カラーシステムを作成します。一度に1つのモジュールを適用するだけではありません。デザインを一貫してきれいに保ちながら、必要に応じてシフトできるパレットを構築しています。

Diviの新しいカラーシステムに関するすべてを学びます

あなたがこれまで六角コードに依存していたなら、これはそのワークフローが限られていると感じ始めたポイントです。そして、それは将来の準備ができた色のシステムにシフトするためのあなたの手がかりです。

クライアントのブランドカラーをDivi5カラーシステムに変える

Divi 5のカラーシステムがどのように機能するかがわかったので、実際のプロジェクトでどのように見えるかを歩きましょう。この例では、DIVIライブラリから拡張現実のホームページレイアウトをインポートしました。

シナリオを作成しましょう。クライアントが補完的な色を追加して、サイト全体で使用される太字の緑のバランスをとることを望んでいるとします。いくつかのスポットに手動で追加する代わりに、レイアウトをDivi 5のカラーシステムにシフトする機会としてこれを行ってみてください。

レイアウトを調べると、見出し、ボタン、アクセント要素など、同じ緑がいくつかの場所に表示されることに気付くでしょう。それぞれが固定されたヘックスコードを使用します。私たちの目標は、それらをカラー変数に置き換え、後で変更に適応できるパレットを構築することです。

通常、このようなレイアウトを更新することは、各モジュールを手作業で編集することを意味します。ただし、次のいくつかのステップでは、色変数、HSLフィルター、接続された色ロジックを使用して、より安定したものを構築します。同じレイアウトに従って、プロジェクトをベースとして使用できます。

1.デザイン変数としてクライアントのプライマリカラーを保存します

クライアントが新しい16進コードを共有している場合、または既存のブランドの色に固執している場合、最初のステップはDesign Variable Managerに追加することです。これがあなたの基本色になり、あなたがそれを中心に構築する色のバリエーションの基盤になります。

一次色を追加します

開始するには、変数マネージャーを開き、 [色]タブに切り替えます。

パネルには、プライマリ、セカンダリ、見出し、およびボディテキストのデフォルト値が既に含まれる場合があります。プライマリカラーフィールドで、メインブランドの色の16進コードを入力し、 [変数を保存]をクリックします。

二次色を追加します

次に、プライマリをベースとして使用して、このセカンダリカラーの相対バージョンを作成します。そうすれば、基本色の将来の変更は自動的に引き継がれます。

この例では、既存の緑のバランスをとるために相補的な色を追加するため、それを二次色として割り当てます。レイアウトの背景は黒いので、このペアリングははっきりと際立っています。

今のところ1色のみで作業している場合は、セカンダリスロットセットを黒に残しておいてください。

セカンダリカラースウォッチをクリックして、カラーウィンドウを開きます。保存された値はすべてグローバルな色の下にリストされ、一次色が最初にリストされます。

それを選択します。これにより、出発点としてベースカラーがもたらされます。

次に、もう一度スウォッチをクリックしてウィンドウを再開し、カラーフィルターのドロップダウンを開きます。これにより、色相、飽和、軽さを調整できるHSLスライダーが明らかになります。

これらのスライダーを使用して、新しい色を形作ります。満足したら、保存してください。そして、そのように、あなたはプライマリに接続された二次色を持っています。

二次色を黒に保ちたいが、それをプライマリにリンクしたい場合は、軽さと飽和スライダーの両方を-100までずっと下げます。

代わりに暗い色合いを作成するには、色相と飽和をそのままにして、軽さのみを減らします。

この時点で、自由に実験できます。トーンがデザインに適していると感じるまで、値を調整します。新しい色がブランドパレットと柔らかく溶け込むか、コントラストとして際立っているかどうかにかかわらず、それはプライマリにリンクされたままで、それとともに進化します。

2。HSL調整を使用してサポート色を構築します

プライマリとセカンダリの色を配置すると、次のステップはパレットを拡張することです。これらのサポート色は、あなたのデザインルームを呼吸することを与えます。レイアウト全体に柔軟性、微妙なコントラスト、視覚リズムを追加します。

これらのバリエーションを作成するには、HSLパネルを開き、スライダーを調整します。

• 注意を引くことなくコントラストを必要とするセクションまたは背景の軽い色合いを作成します。
• ボタン、ホバー状態、または目立つ必要がある大胆な見出しには、わずかに暗いトーンを使用します。
• 色相または飽和をわずかにシフトして、アクセントの色を形成します。この色は、仕切り、アイコン、またはその他の小さな視覚的なハイライトに最適です。

一度の方法を紹介します。同じアプローチに従って、必要なすべての新しい色を定義できます。二次色のホバーバージョンを作りたいとしましょう。新しいカラー変数を作成し、明確な名前を付け、スライダーを調整してトーンを正しく取得し、保存します。

変数が保存されたので、他の色と同様に、ボタンのホバー状態に適用できます。

サポートカラーを追加するとき、それらをブランドの音色表現、さまざまなレベルの強調、コントラスト、または気分を反映するバリエーションと考えてみてください。たとえば、ソフトトーンは背景に適しています。大胆なトーンは、行動を促すことに注意を喚起し、ミュートされたトーンはオーバーレイやセカンダリテキストに役立ちます。

HEXコードを使用して手動でこれらすべてを技術的に作成できます。そして、もしあなたが1ページのサイトを構築しているなら、それは大丈夫かもしれません。しかし、クライアントがコアの色を変更したい瞬間、すべてのショートカットがその限界を示し始めます。私たちが意味するのは、ウェブサイトで背景シェードを使用した場所の数を追跡しないということです。そのシナリオでは、これらのバリエーションを接続された変数として構築するのに少し時間がかかりますが、一度それらが設置されると、物事がどれほど頻繁に変化しても、デザインを一貫性に保ちます。

3.既存の静的色を変数に置き換えます

新しいカラー変数を保存すると、レイアウト全体で使用されるハードコーディングされた六角値を置き換える時が来ました。これは、一貫性だけでなく、時間の経過とともにデザインを維持することがどれほど簡単になるかにおいて、静的からダイナミックに移行することで、本当の違いを生み出します。

固定色の値を使用して、まだ要素のレイアウトをスキャンすることから始めます。これには、ボタン、見出し、背景、アイコン、またはセクション仕分けが含まれる場合があります。ブランドの色が手動で適用された場所では、新しいシステムに接続する機会になりました。

そのためには、DIVIが2つのオプションを提供します。属性を拡張し、見つけて交換します。どちらも複数の要素をすばやく更新できますが、それぞれがわずかに異なる状況で輝いています。

• 正しい変数を1つの要素に既に適用し、残りを一致させたい場合は、拡張属性を使用します。
• さまざまな要素に適用されていても、特定の16進価値をどこにでも交換する場合は、検索と交換を使用します。

拡張属性から始めましょう。

拡張属性を使用します

この例では、レイアウト内のすべてのH2に新しいセカンダリカラーを割り当てます。まず、そのうちの1つだけに適用することから始めます。

それが完了したら、要素を右クリックし、拡張属性を選択します。表示されるパネルには、ページ全体にスコープを設定し、要素タイプをテキストに設定します。

ワンクリックすると、ページ全体のすべてのH2が同じ二次色を採用します。これは、そのベースカラーが変化した場合に一次色に結び付けられるため、同期し続けます。

検索と交換を使用します

それでは、サイト全体に特定の色の値を交換する場合に特にうまく機能することを見つけて交換してみましょう。

この場合、ボディテキストの色を更新します。これを行うには、設定>デザイン>ボディテキストの色に移動し、右クリックして、検索と交換を選択します。次に、交換値フィールドの上にホバリングし、新しい変数を選択します。

それがすべてかかるすべてです。その古い色のすべてのインスタンスは、新しい変数で更新されるようになりました。

ここで従わなければならない単一の方法はありません。拡張属性は、1つのモジュールを手動で既に更新している場合、その変更を同様の要素に渡すより速い方法です。静的なヘックスコードをまだ使用していて、それらを一括で変更したい場合は、すぐに移動するのに役立ちます。

どちらのアプローチを選択しても、クリーンアップを簡単にします。それが完了すると、このシステムの本当の利点が表示されます。1つの色だけを変更すると、デザインがどのように反応するかを確認します。

新しい配色をテストします

あなたがしたことはすべて、セットアップについてでした。これが、セットアップ全体がその価値を示し始めたときです。

システムを配置すると、一次色を変更してみてください。レイアウト全体が数秒で応答します - 背景、ボタン、ホバーエフェクト、およびその他の接続された要素は即座に更新されます。

将来の更新もこれまで以上に簡単です。クライアントがネオングリーンから暖かい黄色にシフトしたいとしているとします。これは、ウェブサイト全体、すべてのページ、および各モジュールを手動で更新することを意味します。

痛いように聞こえますが、あなたのためではありません。プライマリカラーを更新するだけで、サイトの残りの部分が続きます。

あるいは、それはブラックフライデーであり、彼らは赤い金の色の配色を求めました。プライマリを金色に更新し、セカンダリーをより深い赤に微調整します。レイアウトは、最後の詳細に即座に適応します。

場合によっては、ブランドの色は同じままかもしれませんが、セカンダリにはリフレッシュが必要です。これは、HSLスライダーを調整するだけの問題です。各ボタンや背景を個別にタッチする必要はありません。

色の作品の多くは、バランスを維持することです。コアの色が変化した場合でも、バリエーションを整列させます。このシステムは、ステップをたどる必要なく、デザイン全体でトーン、コントラスト、および強調を制御する方法を提供します。

そして、ここでやったことは1ページだけです。デザイン変数はグローバルであるため、このセットアップは、ヘッダー、フッター、ブログ投稿、ランディングページなど、パレットに接続されているものなど、サイト全体に拡張されます。

つまり、季節のキャンペーン、ブランドリフレッシュ、新しい色の方向であろうと、すべての将来の更新が1つの場所から始まります。いくつかの変数を更新し、すべてが新しい配色に一致するのを見ます。

Diviはあなたの色のワークフローを将来的に防ぐことができます

青の色合いを選ぶのは難しくありません。難しいのは、数十のモジュール、レイアウト、ページ、キャンペーンにわたってその青を一貫性に保ち、その過程で何かを壊すことなく後で更新することです。

Divi 5はそれを完全に簡素化します。新しいカラーシステム、HSLフィルター、設計変数などのツールを使用すると、1つの場所から視覚的アイデンティティ全体を管理できます。すべての色がすべてのレイアウトにわたって一貫性があり、更新が簡単であることを知っていることが、Divi 5の約束です。

そして、これは、ループビルダー、フレックスボックスレイアウト、モダンなWebデザイナー向けの完全に再考されたインターフェイスなど、過去数か月にわたって作成した多くの1つにすぎません。まだ探索していない場合は、今が完璧な時期です。