Webデザインの相対的な色を理解する

Webデザインでは、最も単純な決定でさえ増殖することができます。単一のデザインの選択から始まるものは、相互作用、背景、境界などのための数十の視覚的バリエーションに迅速に拡大します。ビルドは、一貫したシステムなしで不一致の値と手動の調整で雑然とする可能性があります。

CSSの相対色の構文は、よりスマートでスケーラブルなアプローチを提供します。単一のソースに基づいて視覚的なバリエーションを定義し、デザインをまとまりやすく管理しやすくします。通常、これにはカスタムコードを書く必要があります。しかし、Divi 5を使用すると、これらの最新のテクニックを最初から視覚的に使用できます。よく見てみましょう。

一般的な色管理の問題

あなたが選んだ完璧なブランドの色は、サイト全体に散らばっている数十のバリエーションにすばやく掛かることができます。この問題に貢献するいくつかの問題は次のとおりです。

1色のバリエーションの管理

1つのベースブルーから始めて、すぐに数十のバリエーションが必要です。あなたのページビルダーのカラーピッカーは混乱します。明るい青、明るい青、濃い青、濃い青、色あせた青 - それぞれが別の色として保存されます。

あなたのブランドブルーは、サイト全体で20の異なる色合いにまたがっています。いくつかのセクションでは、オリジナルの青を使用し、他のセクションでは3週間前に作ったより明るいバージョンを使用し、ボタンはより良いコントラストのために作った暗い色合いを使用します。

これらの色は他の色に接続していません。クライアントが青の代わりに紫色を望んでいるとき、あなたはすべての色を手で更新することに直面します。モジュールをクリックするのに何時間も費やします。あなたはそれぞれの色合いを狩ります。あなたはあなたが何も見逃さないことを願っています。

左側の多くの同様の青い色合いのコレクションは、右側に散らばった無関係な紫に変わります。1つずつ更新することは退屈で、一貫性が必要です。さらに、これらの色のバリエーションは通常目で覆われており、接続はありません。

不透明な問題

多くのページビルダーには、透明性コントロールが含まれています。これは、色の一貫性の悪夢になる可能性があります。 60％の不透明度で完璧な青色のオーバーレイを作成できますが、後で別のセクションで同じシースルーレッドが必要です。

あなたのページビルダーは正確なミックスを覚えていないので、あなたは不透明なスライダーを見て、以前に作ったものと一致させようとしています。

目を合わせると正確なコントロールがあっても正確な結果が得られないため、試行1、2、および3は日陰と透明性が異なります。

一部のページビルダーでは、透明な色を保存できます。他の人はしません。あなたは、似たようなシースルーブルーの束になります。

それらはすべて少し異なります。あなたのデザインは一貫性を失います。さまざまなモジュールで同じ透明な色を確実に再現することはできません。透明性が必要なたびに、ゼロから始めます。あなたは不透明な価値を推測します。あなたは彼らがあなたの既存のデザインに一致することを願っています。

変数を手動で作成します

ほとんどのページビルダーは何らかの形の色を保存しますが、すぐに管理できなくなります。 「黄色1」、「黄色2」、「黄色の光」などの一般的な名前で色を保存します。

6か月後、どの黄色が何をするのかわかりません。保存されたカラーパレットは、意味のない名前の似たような色の混乱になります。あなたのカラーライブラリは、組織システムなしで成長します。ほぼ同じように見える3つの異なるオレンジがありますが、さまざまな目的を果たしています。

重なり合った色合いと一貫性のない不明確な名前を持つ多くの色見本のグリッドは、整理または効果的に使用するのが難しい、混乱した混乱したパレットに貢献します。

チームメンバーは色のバリエーションを追加し、異なる名前の重複したシェードを作成します。あなたのブランドオレンジは、「オレンジ」、「ブランドオレンジ」、「プライマリオレンジ」、「オレンジメイン」として存在します。どちらを使用するかは誰も知りません。

一部の開発者は、カスタムCSS変数を作成してこれを解決しようとします。これにより、色の関係をより適切に制御できます。

しかし今、あなたは技術的なハードルを作成しました。テック以外のチームメンバーは色を更新することができなくなり、クライアントは自分でシンプルな色を変更することができません。あなたはすべてのマイナーな色の調整に責任を負います。

CSSにはどのような相対色がありますか（そしてなぜそれらが必要なのか）

相対的な色はあなたの色の問題を解決します。 1つのブランドカラーを選択します。 CSSは、必要なすべてのバージョンを作成します。背景のための軽いもの。境界線の暗いもの。オーバーレイ用のクリアなもの。すべての開始色から。

CSSは動的なカラーツールとして機能します。 「この黄色を軽く作る」と言います。 CSSは仕事をします。レッドボタンがホバリングするときはフェードする必要があります。 CSSは透明性を追加します。青いヘッダーには暗い境界線が必要です。 CSSはすぐに作成します。

従来のワークフローには、より手動での努力が必要でした。デザイナーはPhotoshopでカラーセットを作成しました。コーダーはSASSなどのツールを使用しました。ウェブサイトビルダーは、色の一致することを推測する必要がありました。 CSSはこれを自動的に処理するようになりました。

CSSが色から色を作成する方法

「From」という言葉は、CSSに既存の色を出発点として使用するように指示します。 CSSに色を与え、その色を使用できる断片に破壊します。

あなたの開始色がベースになります。 CSSはそれを部分に分割します。赤い量、緑の量、青。または、これらのコントロールを好む場合は、色合い、明るさ、飽和。

任意のカラー形式から始めることができます。 ＃e91e63のような160色の色を使用します。簡単な明るさを変えるために、CSSにHSLとして作業するように伝えます。コードが必要な場合は、RGBとして出力します。 CSSはすべてを自動的に変換します。

コードは単純なパターンに従います。まず、色をどこから得るかを言い、それからそれについて何を変えるべきかを言います。すべてを同じままに保ちますが、透明度を追加するか、色相を変更しますが、明るさを保ちます。どちらも同じように機能します。

色を部品に壊します

異なるカラー形式は、さまざまなツールを提供します。 RGBを使用すると、赤、緑、青を個別に変更できます。 HSLは、色相、飽和、および軽さのコントロールを提供します。

これがどのように機能しますか。 RGB（＃FF4081 RGBから）を書きます。 CSSはそのピンクのヘックスコードを取り、赤、緑、青の数字に分割します。その後、必要な数字を使用できます。パターンは同じままです：カラー機能（色Channel1 channel2 channel3から）。

したがって、色から色を書く代わりに、既存の色に基づいて構築し、変更したい部分のみを変更します。

各部分は、選択したものと一致するように変換されます。そのピンクのヘックスを変換すると、r = 255、g = 64、b = 129が得られます。それらを使用するか、calc（）で変更します。

チャンネルもミックスして一致させることができます。すべての赤いピクセルを同じにしたいですか？ RGB（var（–color）gggから）を使用します。これは緑の値を取り、赤、緑、青に使用して、元の色から灰色のトーンを作成します。

ブラウザのサポートとその他の考慮事項

大きなサイトでは、訪問者がすべての人に対応する必要があるため、訪問者を無視することはできません。 Safariの古いバージョンの動作は異なります。 Chromeバージョンは、独自の方法を処理します。 Firefox、それは独自です。最終的には、1つのカラー効果について3つの異なるコードバージョンを作成します。

この余分な作業はすべて、より良いものから時間がかかります。サイトの機能を改善し、人々が望む機能を追加できます。

多くの開発者は、相対色を選択的に使用しています。ブラウザを制御するため、内部ツールと個人プロジェクトはうまく機能します。マーケティングサイトとクライアントの仕事には、より慎重な計画が必要です。

このテクノロジーは、サポートされている場合にうまく機能します。問題は、追加の複雑さがプロジェクトのタイムラインとチーム、またはクライアントの技術的能力に適合するかどうかです。しかし、ほとんどの場合、それはほとんどのチームメンバーにとって過剰でオーバーヘッドになります。

これがまさにDiviチームが介入した理由です。強力なカラーツールを逃しながら、ブラウザの互換性に苦しんでいるWebデザイナーを見ました。 Divi 5のソリューションは、相対的な色の最高の部分を取り、どこでも機能し、コーディングを必要としないシステムでそれらをラップします。

Divi 5が相対的な色を簡単にする方法

今、あなたは相対的な色の力を知っています。ただし、実装が簡単ではないことに気付いたかもしれません。 Divi 5は別のアプローチを取り、視覚インターフェイスに色の柔軟性を構築しました。しかし、Diviが正確に何であるかを見つけましょう。

Diviとは何ですか？

Diviは、最も人気のあるWordPressページビルダーです。視覚設計に優先順位を付け、デザインを完全に制御できます。

変更がライブで行われるのを見ることができ、フォントサイズまたはライン間隔を調整し、すぐにページに結果を確認できます。必要な場所に行く200以上のモジュールにアクセスできます。テキストブロック、見出し、コンテンツピースはチームとして機能します。アイデアを厄介な形に絞る剛性のあるテンプレートはありません。

Diviの違いは次のとおりです。2000を超える既製のレイアウトが実際のビジネス向けに構築されています。これらは基本的なスターターテンプレートではありません。各設計は特定の産業をターゲットにしています。視聴者の言語を話し、ビジネスのニーズに合ったレイアウトが見つかります。

Diviクイックサイトで空白ページのブルースをスキップします

Diviクイックサイトは、プロジェクトが始まる前にプロジェクトを殺す空のキャンバスを威圧的に修正します。私たちのデザインチームが他の場所には見られないオリジナルの画像やアートワークを使用して構築する堅実なデザインのプロのスターターWebサイトを手に入れます。

よりパーソナライズされたものが必要な場合は、DiviクイックサイトがDivi AIで動作し、ビジネスの詳細に基づいてカスタムレイアウトを構築します。コンサルティング会社またはレストランについて説明してください。これは、業界固有のコンテンツを含む関連ページを作成します。

これらは基本的なワイヤーフレームではありません。実際の見出し、書面によるコンテンツ、およびビジネスタイプに合った画像を受け取ります。ヘッダーとフッター、製品ページ、ブログ投稿のテンプレートなどを設計することもできます。

最初からブランドのフォントと色を設定するか、AIにそれらを選択させることができます。 AIはこれらのガイドライン内で機能します。その後、すべてが完全に編集可能なままであるため、正確なニーズに合うまでタイポグラフィを調整できます。

現在はAIを使用して、サイトの設計を完全に制御できます

テーマビルダーは、ウェブサイト全体でデザインを担当します。ブランドの個性を反映したカスタムヘッダーを作成します。読者を長い記事に従事させるブログレイアウトを構築します。 404ページは、一致するフォントとスタイリングでブランドのままです。

Divi AIは、前述のように、AIをデザインワークフロー内に置きます。あなたが書いたように聞こえる見出しと、あなたのブランドの声をキャプチャする製品の説明を作成します。

写真編集はビルダー内で行うことができます。画像に必要な変更をAIに伝え、編集を処理します。

新鮮な画像が必要ですか？それもそれらを作成します。

あなたのビジネスにぴったりの完全なページセクション。

さらに、コードスニペットが必要なときにコードスニペット。

Divi 5：次の進化

Divi 5は、明確なミッションでアルファテストに入ります。これは、Webデザインプロセスのパフォーマンスを向上させるためです。私たちは、あなたを遅くするものとあなたを助けるものについての本当のフィードバックを聞いていました。

現在のDiviのままであることについてあなたが好きなものはすべて。私たちはそれをうまく機能させました。インターフェイスはきれいに見えます。ページは以前よりも速く読み込まれます。クリックすると、コントロールが正しく応答します。

今日のWeb標準を使用して財団を再構築しました。これは、奇妙なバグが少なく、全体的にスムーズなパフォーマンスを意味します。

ビルダーとの戦いに費やす時間が少なく、設計に時間がかかります。一貫性が自動的に行われるため、サイトはよりプロフェッショナルに見えます。クライアントは、技術的な問題ではなくニーズに集中できるため、より良いウェブサイトを取得します。

Alphaバージョンは新しいWebサイトで使用する準備ができていますが、既存のDivi 4 WebサイトをDivi 5に変換することはお勧めしません。

Divi 5の新しいもの

Divi 5は、Webサイトの構築方法に大きな変更をもたらします。 Public Alphaバージョンは、現在、新しいプロジェクトに最適です。開発チームは2週間ごとに新機能を発送し、Alphaが開始されてからすでにいくつかの主要な更新がリリースされています。

ここにいくつかの重要な更新があります：

• 最新のコードベースは、実際に必要なモジュールのみをロードすることで物事を高速化し、Divi 4を遅くしたコード膨満感を削除します。
• 完全なフレックスボックスレイアウトシステムには、新しい行テンプレート、自動垂直センタリング、コンテンツラッピング、視覚コントロールによる間隔分布が含まれるようになりました。
• モジュール、グループ、または動的なコンテンツを使用してセクションを繰り返し、複雑なデータ構造のためのネストされたループをサポートする真新しいループビルダー。
• HSLの相対色は、色相、飽和、および軽さの値に基づいて動的な色制御を提供します。
• HTML-5ベースのシステムは、ショートコードを完全に置き換えます。これは、バグが少なくなり、WordPressの互換性が向上することを意味します。
• Visual Builder Interfaceは、明るいモードと暗いモード、ドッキング可能なパネル、タブ付きウィンドウ、キーボードショートカット、パン粉による改良されたレイヤービューを備えた完全な変身を獲得しました。
• カスタマイズ可能なレスポンシブブレークポイントは、Divi 4の3つの固定されたものを置き換え、キャンバススケーリングでより多くの制御を提供し、デザインが異なる画面サイズをどのように見ているかを正確に確認できます。
• モジュールグループは、関連する要素を一緒にバンドルする多用途のコンテナのように機能するため、ユニットとしてスタイルをスタイリングしたり、関係を失わせずに動かしたりできます。
• デザイン変数を使用すると、サイト全体でグローバルに色、フォント、数字、画像、テキスト、およびURLを設定できます。
• オプショングループプリセットは、さまざまなモジュールタイプで動作するタイポグラフィやシャドウなどの特定の設計プロパティを保存します。
• Advanced CSSユニットは、コードを作成せずに視覚インターフェイスを介してClamp（）、calc（）、min（）、およびmax（）機能をサポートするようになりました。
• インタラクションシステムは、外部プラグインなしでポップアップ、トグル、スクロールエフェクト、マウスモーブメント効果を作成します。

何が上がっているのか…

• WooCommerceモジュールは、完全なプリセットと可変互換性を備えたDivi 5アーキテクチャを使用して、ゼロから再構築されました。
• Element Inspectorは、上級ユーザー向けの新しいデバッグおよび開発ツールを提供します。
• 同様に、グループCarouselモジュールは、グループで構成されるCarouselを作成し、Diviの完全な要素セットを利用して、任意のスタイルのカルーセルを設計することにより、各スライドのコンテンツを開発するのに役立ちます。

Divi 5でスケーリングするパレットを構築します

あなたのブランドの色のバリエーションを何十個も必要とすると、あなたのカラーピッカーは混乱になります。 Divi 5は、すべてのシェードを1つのベースカラーに接続することにより、これを修正します。以下の手順では、スケーラブルで保守可能なカラーシステムを構築する方法を示します。

1.主要な色の基礎を設定します

ビジュアルビルダーを開き、左サイドバーに変数マネージャーアイコンを見つけます。クリックして、サイトのColor Foundationをご覧ください。 Divi 5には、プリマー、セカンダリ、ヘディング、ボディカラーなど、すでにあなたを待っているプリセットカラー変数が付属しています。

これらのプリセット変数を削除することはできませんが、それらの値を変更できます。これらの4つの色がほとんどのWebサイトを処理するため、これは完全に機能します。プライマリカラー変数をクリックして、ブランドのメインカラーを入力します。これは、サイト上の他のすべての色のバリエーションの基盤となります。

主要な色変数は、ブランドカラーの最も飽和バージョンを反映する必要があります。軽い背景を作成したり、透明度効果を追加したりする前に、純粋で希釈されていないバージョンと考えてください。これにより、後でバリエーションを構築するときに最も範囲が得られます。

セカンダリカラーは、プライマリブランドの色から目立つ必要があるアクセント、ボタン、またはハイライトに適しています。あなたの背景に対してよく読むものにあなたの見出しの色を設定してください。体の色は通常、読みやすくするために暗い灰色または黒のままです。

これらの4つのプリセット変数は、DIVIのシステム全体に接続します。モジュールを作成すると、これらの色はクイックオプションとして表示されます。ここでプライマリを青から緑に変更し、そのプライマリ変数アップデートを使用してサイト全体で即座に更新するすべてのモジュールを変更します。

早い段階で過度のカスタム変数を作成しないでください。代わりに、これらの4つのプリセットから始めます。ほとんどのWebサイトは、Divi 5の相対的な色コントロールを通じて作成されたバリエーションを備えたこれらの基本的な色だけを必要とする場合があります。しかし、もちろん、必要に応じて、好きなだけ変数を追加できます。

2。HSLコントロールを使用してカラーシェードを作成します

次に、別の色変数を追加します。今回は、新しいベースカラーを設定するのではなく、プライマリカラーからシェードを作成します。カラーピッカーで、リストからプライマリカラー変数を選択します。

これで、色相、飽和、軽さの3つのスライダーが表示されます。これらは、基本色の変化方法を制御します。

色相は、カラーホイールの周りを0〜360度に移動します。同じ色の色合いを作るときは、これをそのままにしておきます。飽和度は0％から100％になり、色の鮮やかさを制御します。 0％で、どの色が灰色になります。 100％では、完全な強度が得られます。

軽さは0％から100％です。このスライダーは実際の色合いを作成します。 0で、あなたはあなたの色の純粋な形を取得します。軽い色合いのために50％まで移動します。暗い色合いの場合は-20％にドロップします。

これらのHSL色を混ぜて一致させて、必要に応じて新しい色とバリエーションを作成できます。

一次色の2つのバリエーションを作成しましょう。変数を追加し、「プライマリライト」や「プライマリダーク」のような明確なものを新しい色合いにします。このプロセスを繰り返して、複数のシェードを作成します。典型的なセットアップでは、背景などに対して30％の軽さでベースプライマリを使用し、-15％の明るさで暗いものを使用します。

また、二次色にこのような明るい色と暗い色合いを追加することもできます。

3。ネストされた色変数の構築

ステップ2で一次光とプライマリダークを作成しました。これで、これらの色合いからより多くの色を作ることができます。

「カードバックグラウンドシャドウ」と呼ばれる新しい変数を作成します。リストから主要なライトを選択してください。不透明度を50％に落とします。これにより、カードの背景にかろうじて色合いが与えられます。次に、「ボタンホバー」を作成します。プライマリダークを選びます。軽さをさらに10％落として、さらに暗くします。これで、人々がそれらの上に浮かぶとき、あなたのボタンは暗い色になる可能性があります。

色合いからカスタムカラーを作成することもできます。ボタンホバーを選択して、「テキストシャドウ」を作成します。不透明度を15％に設定します。テキストシャドウは、プライマリダークに接続するボタンホバーに接続され、プライマリに接続されます。

プライマリライトから「ボーダーアクセント」を試してください。飽和度を100％にバンプして、より多くのポップにします。これにより、ブランドと一致する明るい境界線が得られます。各チェーンは長くなります。 5色すべてが1つの主要な選択肢にさかのぼります。

セカンダリカラーに同様の色合いを追加して、選択できる色の素敵な色を選択してください。

4.サイトに相対色を適用します

あなたはあなたの色の基礎を構築し、それらすべての色合いを作成しました。今度は実用的な部分があります：あなたのウェブサイト全体にそれらを実装します。

Visual Builderでモジュールを開きます。背景、テキスト、または境界の色オプションをクリックします。保存されたカラー変数は、カラーピッカー内に表示されます。名前や16進コードを覚えておく必要はありません。

メインボタンのプライマリカラーを選択してください。セクションの背景には一次光を選択します。 CTAボタンのような境界と微妙なアクセントにはプライマリダークを使用します。各選択は、ベースカラーシステムに戻ります。

カラー変数は、ヘッダー、フッター、ブログのレイアウト、製品ページなど、どこでも機能します。チームメンバーとクライアントは、推測せずに色を選ぶことができます。ピッカーにランダムヘックスコードの代わりに「一次光」が表示されます。明確な名前は、間違いが少なく、デザイン作業が高速であることを意味します。誰もがどの色がどのような目的を果たすかを知っています。

この可変ベースのシステムは、視覚的な矛盾を防ぎます。ホバーエフェクトに使用するシェードを多数節約したり、どのシェードを節約したりする必要はありません。変数は、設計の柔軟性を維持しながら構造を提供します。

5。必要に応じて色を更新します

クライアントは、青ではなく真夜中の青が欲しいと判断します。従来の色管理により、これはモジュールをふるいにかけ、すべてのシェードを手動で更新したり、一度に一瞬のグローバルな色を更新したりすることを意味します。 Divi 5の相対色では、1つの変数を変更し、他のすべてが続きます。

あなたの主な光の背景は薄緑になります。主要な暗い境界線は濃い緑にシフトします。ボタンホバーの色は、暗い青に調整されます。あなたが構築したそれらのネストされた関係はすべて無傷のままです。

あなたのカードの背景の影は、一次光の15％の不透明度を持っていました。それは、あなたがそれに触れることなく、新しい緑色のプライマリライトの15％の不透明度になります。テキストシャドウは、プライマリダークに接続するボタンホバーに接続され、プライマリに接続されます。

古い方法は、毎回ゼロから色の調和を再現することを意味していました。基礎を変えながら関係を維持し、デザインのバランスを保ちます。

あなたの色、あなたのルール

一貫性のない色の使用は、優れたデザインを損ないます。無意味な名前でランダムな色合いを保存し、更新のためにモジュールを狩り、クライアントが心を変えるたびにパレットをゼロから再構築しています。

Divi 5の相対的な色は、このワークフローの悪夢を終了します。ベースカラーから1回ビルドし、サイト全体のすべてのバリエーションアップデートを自動的に視聴します。システムは、ブラウザの互換性を処理し、関係を維持し、カラーピッカーを整理したままにしているため、CSSを使用する必要はありません。

あなたの次のプロジェクトは、より良い色管理に値します。 Divi 5をダウンロードして、整理されたデザインがどのように感じられるかを確認してください。