デザインのゴールデン比をマスターする

あなたのデザインはほぼ正しいように見えますが、何かが気分が悪くなります。間隔は厄介なようです。プロポーションは機能しません。マージンとパディングを調整しますが、そのしつこい不均衡の感覚は残ります。欠落しているピースはゴールデン比である可能性があります。

この数学の原則は、何世紀にもわたって素晴らしいデザインを導いてきました。そして、私たちの目は当然、これらの特定の比率を好みます。ほとんどのデザイナーは、ゴールデン比をスキップしたり、誤用したりします。ただし、Divi 5のようなページビルダーを使用すると、複雑な計算なしで完全なプロポーションを適用できます。

もっと調べましょう。

ゴールデン比とは何ですか？

ゴールデン比はほぼ等しくなります

1.618。

どこから来たの？線を2つの部分に分割すると、この数値を取得します。長い部分を短い部分で割ると、ライン全体を長い部品で分割します。

フィボナッチシーケンスを使用してゴールデン比を計算できます。 0および1から始めます。1を追加して1を取得します。次に1と1を追加して2を取得します。最後の2つの数値を追加し続けます：1、2、5、8、13、21、34、55、89、144。

この比率は、自然界のどこにでも現れます。ひまわりの種の螺旋はそれに続きます。 Nautilusの殻は、これらの比率を使用して成長します。あなたの顔でさえ、あなたの機能間の黄金比の測定に従う可能性があります。何かがこの比率に従うと、あなたの脳はそれを自然に心地よく認識します。

画像礼儀：ルーカスとダイナミックな王、onplashとミレナ・カロライナ・ドス・サントス・マンゲイラ

シンボルφ（PHI）は、古代ギリシア人が紀元前300年頃に発見したユニークな数学比を表しています。彼らはそれを「神の割合」と呼び、それが特別な視覚的バランスと美しさを明らかにしたと信じていました。

なぜそれが重要なのか：古い建物からウェブデザインまで

ギリシャ人はこの比率をパルテノン寺院に使用し、エジプトのピラミッドはこれらの測定に従います。レオナルド・ダ・ヴィンチのようなアーティストは、これらの割合を長年にわたって研究してきました。ダヴィンチは有名な「ビトルビア人」を描き、人体の黄金の比率を示しました。

表現画像

確立されたデザイナーはまだこれを使用しています。 Appleのロゴでは、ゴールデン比率を使用しています。かつてのTwitterの鳥のロゴは、これらの測定に従いました。雑誌は、重要なコンテンツを中央の右ではなく、ゴールデン比のスポットに配置します。

画像提供：WideWalls＆Design Shack

科学者は、なぜ黄金の比率が好きなのかを研究しました。脳スキャンは、人々が金色の比率の長方形を見ると、喜びの領域でより多くの活動を示します。これは、すべての文化や年齢にわたって起こるので、人間に固有のものです。

脳は、これらの比率を他の比率よりも速く処理します。これは、ユーザーエクスペリエンスの向上を意味します。ウェブサイトのプロポーションが1.618から遠すぎると、訪問者は不快に感じ、より早く離れます。

この比率は、完全に均等になることなくバランスを作成します。完全な対称性は、ウェブサイトで退屈に見えることがあります。ゴールデン比は、クリーンでプロフェッショナルな外観のユーザーを維持しながら、視覚的な関心を生み出すのに十分な非対称性を与えます。

あなたのデザインが「オフ」と感じる理由（および比率がこれを修正する方法）

あなたはちょうどあなたのレイアウトを完成させるために何時間も費やしました。色はちょうどいいです。フォントは一緒に動作します。しかし、何かがまだ感じられます。サイドバーは幅が広すぎるようです。ヘッダーは少しamp屈に見えます。コンテンツ領域は残りとともに流れません。

これは一般的な経験です。多くのデザイナーは、現時点で正しいと感じるものに基づいてサイズを調整します。メインコンテンツを70％、サイドバーを30％に設定するかもしれません。これらの数字は合理的に聞こえますが、常に自然に見えるとは限りません。

私たちの目はバランスとおなじみのパターンを探しています。プロポーションが正しくない場合、その理由を説明できなくても、デザイン全体が厄介に感じます。それは大きな間違いではないかもしれません、あなたを不安にさせる小さな詳細です。

実際の問題はしばしば割合です。レイアウトがバランスが取れていると感じるものを無視すると、あなたの脳は気づきます。指を置くことができなくても、何かが気分が悪くなります。

どのように間違った比率ユーザーエクスペリエンスを妨害します

割合が悪いことは、物事を奇妙に見せます。あなたの脳は、特定の形とサイズがうまくいくと期待しています。画面の正確な半分を占めるヒーローセクションを想像してください。硬くて厄介に見えます。

ここで、スペースの43％または67％を使用するものを考えてみましょう。それは不均衡で乱雑に見えます。

これはあなたのウェブサイトを傷つける可能性があります。彼らが見たものを信頼するなら、人々は非常に速く決定します。ページが外れている場合、彼らはあなたのビジネスが信頼できないと思うかもしれません。乱雑なデザインは、人々にあなたの仕事が良くないと信じさせます。

ゴールデン比はこれを修正するのに役立ちます。ヒーローのセクション70パーセントを作る代わりに、61.8パーセントを試してみて、次のセクションは38.2パーセントを表示します。

これらの数字はランダムではありません。彼らは、花や貝殻のように、あなたが自然に見える1.618と呼ばれる特別なパターンに従います。あなたの目はこのパターンを知っており、彼らがそれを見ると落ち着いていると感じます。

トリックは、パーツが互いにどのように関連するかです。ヘッダーサイズがゴールデン比を使用してコンテンツ領域と一致する場合、すべてが正しいと感じます。フッター、メニュー、コンテンツは、スペースのために戦っているように見えるのではなく、一緒にフィットし始めます。

黄金比の割合を計算する方法

派手な数学は必要ありません。 62と38を覚えておいてください。これらの数値は最大100になるため、パーセンテージとして機能します。

より大きな部分に62％を与え、38％を小さい部分に38％与えてスペースを分割します。あなたのウェブサイトは幅1000ピクセルです。メインコンテンツを620ピクセルにします。サイドバーを380ピクセルにします。完璧な黄金の比率。

500ピクセル高さのセクションを取得しました。メインエリアは310ピクセルを取得します。残りは190ピクセルを受け取ります。

ウェブサイトのパーツのクイックルール

ヒーローセクションでは、最初に見られるものの約60％を取る必要があります。残りはメインコンテンツのプレビューに送られます。カードを幅と同じくらい高くするカードを作ります。 300ピクセル幅のカードの高さは180ピクセルになります。

ボタンも同じように動作します。 100ピクセルの幅は、60ピクセルの高さを意味します。テキスト列の幅は600ピクセルです。 370ピクセル前後のコンテンツの追加を停止します。次に、次のセクションを追加します。

それは正しく見えますか？

画面から後退します。パーツは今バランスを感じているはずです。あなたの目はセクションからセクションまでスムーズに流れます。ある場所を見つめ続けると、プロポーションがオフになる可能性があります。

人気のあるWebサイトは、これらの同じ62/38スプリットをどこでも使用しています。何を探すべきかがわかったら、パターンを見始めます。数学は隠されたままですが、視覚的な調和はすぐに際立っています。

デザイナーが犯す一般的なゴールデン比ミス

ほとんどのデザイナーは、黄金の比率が存在することを知っており、それを使用したいと考えています。ここが彼らが一般的に苦労しているところです。

最大の間違いは、システムなしでランダムに比率を適用することです。ヘッダーにはゴールデン比、コンテンツグリッドに3分の1、フッターにランダムな割合を使用します。 1つのアプローチを選択し、デザイン全体で一貫して使用します。

多くのデザイナーは、1.5や1.7などの簡単な数値まで1.618をラウンドにしています。あなたの脳は、62％と60％の違いに気づき、その小さなギャップはあなたが作成しようとしている視覚的な調和に影響します。

もう1つの一般的な問題は、比率要素の不一致です。たとえば、完全に比例したヒーローセクションを作成しますが、まったく異なる間隔比を使用する画像ギャラリーを追加する場合があります。視覚的な切断は、あなたが確立したフローを破壊します。

一部のデザイナーは、快適さを読むことを考慮せずに、ゴールデン比をテキストに適用します。完全な数学的なプロポーションに続く線の長さは、快適な読み取り幅を超える可能性があります。読みやすさは、数学的な精度よりも優先されます。

また、Webデザイナーは、多くの場合、応答性を見落としています。バランスのとれたデスクトップのプロポーションは、小さな画面でcr屈または伸びると感じることができます。ゴールデン比は、デバイスサイズで異なるアプリケーションを必要とします。

多くのページビルダーは、比例的な調和を無視する任意のレイアウトにデフォルトです。標準の3列グリッドは、より自然な比率ではなく33/33/33スプリットを使用します。

最も制限的な間違いは、最初の試みの後にアプローチを放棄することです。ゴールデン比は、孤立した調整ではなく、レイアウト構造全体に体系的に適用される場合に最適に機能します。

なぜ多くのページビルダーがゴールデン比を無視するのですか？

ページビルダーは、プログラマー思考を中心に育ちました。開発者は、きれいに分割する数字が大好きです。 12の列、4つのセクション、50の分割。

多くのビルダー企業は、ユーザーが独自のデザインの選択を制御すべきだと本当に信じています。彼らは、さまざまなアプローチを好むかもしれない人々に特定の美的理論を推進したくありません。一部の設計者は、黄金の比率を嫌い、他のプロポーションシステムを好みます。創造性がオプションで繁栄するのに、なぜ1つの数学的原理を強制するのですか？

本当の技術的な問題は、デザインの哲学よりも厄介です。ゴールデン比は、古いデバイスで壊れる奇妙な小数を作成します。 1つの列が61.8％の幅で応答性の高いグリッドを構築してみてください。すべてのデバイスで25％または33％などのクリーンな割合が予想通り動作します。

ほとんどのページビルダー企業は、設計ツールではなく、技術的なソリューションとしてスタートしました。それらは、確実に機能する体系的で論理的なレイアウトを中心に構築されています。

ユーザーが割合についてめったに不満を言うことはめったにありません。彼らは、壊れたモバイルレイアウトと読み込み時間が遅いことについて不平を言っています。会社の優先順位は、設計理論ではなく、実際のユーザーフィードバックに従います。

一部のビルダーは、圧倒的な初心者を心配しています。新しいユーザーはすでに数十のレイアウトの選択肢に直面しており、数学的な考慮事項を追加すると、清潔でプロフェッショナルなものが欲しいだけの人を怖がらせるかもしれません。

Divi 5で完璧なプロポーションを構築します

Divi 5がゴールデン比のデザインを数学的頭痛からポイントアンドクリックのシンプルに変える方法の核心に飛び込む前に、短い迂回をして、コーディングナイトメアなしでプロフェッショナルな結果を求めるWordPressデザイナーの選択肢になる理由を理解しましょう。

Diviとは何ですか？

Diviは、機能に妥協することなく視覚的なデザインを気にする人向けに設計されたWordPressページビルダーです。

200を超えるモジュールをドラッグアンドドロップしたり、テキストを変更したり、新しい色を選んだりできます。すべてがあなたのページで起こるので、あなたは訪問者が何を見るかを正確に見るでしょう。

テーマには、2000以上の事前に作られたレイアウトが詰まっています。これらは基本的なテンプレートではなく、レストラン、写真家、コンサルタント、および他の数十のビジネス向けの完全なデザインです。あなたのスタイルに合ったものを選んで、そこからカスタマイズしてください。

オンラインで製品を販売する場合、Diviにはショップ専用に作られた20以上のモジュールが含まれています。製品ページはプロフェッショナルに見え、実際にブラウザーをバイヤーに変換するのに役立ちます。

頭痛のないウェブサイトを構築します

テーマビルダーを使用すると、サイトのあらゆる部分を設計できます。ブランドに一致するカスタムヘッダーを作成し、ユニークなブログレイアウトを作成し、404ページを驚くほど見せることもできます。

Divi AIは、AIの利便性を設計キャンバスにもたらします。テキストを生成できます。

画像、

コード、

Divi AIを使用したページ全体のセクション。

必要なものを説明するだけで、既存の写真を編集することもできます。

Diviクイックサイトは、Webサイトビルダーが直面する最大の問題を解決します。どこから始めればよいかわからずに空白のページを見つめています。プロのスターターサイトから選択できます。プロのスターターサイトは、デザインチームによって作成され、他の場所には見つからないユニークな画像やアートワークを備えています。

または、ビジネスの説明に基づいてDivi AIにカスタムレイアウトを作成させます。

このAIに生成されたWebサイトは、単なるワイヤーフレームではありません。説明ごとに関連する見出し、コピー、画像が含まれます。 Divi AIにすべての画像を生成したり、Unsplashの画像を使用したり、プレースホルダーを使用して自分で交換できるように依頼することができます。

フォントや色を事前に選択して、AIをそれらと一緒に実行させることもできます。そしてもちろん、Webサイトは通常のWebサイトと同じように編集可能なままであるため、好みに応じて必要なものは何でも調整できます。

Diviを取得します

Divi 5：次のステップ

ウェブサイトの構築は、紙の上でアイデアをスケッチするなど、自然に感じるはずです。あなたにはビジョンがあり、あなたのツールは邪魔にならずにそれを実現するのに役立つはずです。それがまさに私たちを完全にゼロから再構築するように私たちを駆り立てたものです。

Divi 5は、本日、アルファとして利用可能で、新しいWebサイトで使用できるようになりましたが、Webサイトを作成するときに必要なものを聞く長年を表しています。それは鐘やホイッスルではなく、誰も実際に使用していないものではなく、あなたの仕事をより速く、より楽しくする本当の改善です。私たちはあなたがDiviについて好きなものをすべて維持し、それを次のレベルに引き上げました。

新しいWebツールを使用して、すべてをゼロから再構築しました。ページの読み込みが速くなり、コントロールの動作がより適切に機能します。追加の作業なしで、サイト全体でデザインを同じように保つことができます。

何が改善されましたか？新着情報？

• 完全なフレームワーク再構築は、古いショートコードを取り除きます。すべてが、より速くロードされ、より良く動作する新しいブロックベースのコードで実行されます。
• ワンクリック編集により、ページの任意の部分をクリックしてすぐに編集できます。小さなアイコンを探したり、メニューを掘ったりすることはもうありません。
• カスタマイズ可能なブレークポイントは、3つではなく7つの画面サイズを使用できます。それぞれを変更して、正確なニーズに合わせて変更できます。
• 高度なユニットサポートでは、Calc（）、Clamp（）、Min（）、Max（）、およびすべての新しいCSSユニットをビルダーに使用できます。
• デザイン変数を使用すると、色、フォント、サイズ、画像、テキスト、リンクを1つの場所に保存できます。それらを一度変更すると、彼らはあなたのサイトのどこでも更新されます。
• オプショングループプリセットでは、境界、フォント、影、間隔のスタイルを保存および再利用できます。これらは、サイトのさまざまな部分で動作します。
• ネストされた列を使用すると、他の行内に行を配置できます。特別なセクションなしで複雑なレイアウトを構築できます。
• モジュールグループは、いくつかのモジュールを1つのユニットに組み合わせます。これにより、複雑なレイアウトが管理しやすくなります。カスタムモジュールを作成することもできます。
• マルチパネルワークスペースを使用すると、パネルを必要な場所に配置できます。いくつかの設定を同時に開くことができます。
• 属性管理により、さまざまなパーツ間でスタイル、コンテンツ、プリセットをコピー、貼り付け、リセットするときに正確な制御が可能になります。
• ライト/ダークモードでは、作業中に目に簡単なテーマを選択できます。
• Canvas Scalingを使用すると、ワークエリアをサイズ変更して、さまざまな画面でサイトがどのように見えるかを確認できます。プレビューモードを切り替える必要はありません。
• パフォーマンスの改善により、ページの読み込みが速くなり、より速く表示され、構築するときにスムーズに感じるようになります。

今日Divi 5を試してみてください

DIVI 5は、新しいWebサイトプロジェクトに利用できるようになりました。ワークフローをより速く簡単にするために、地面から再構築しました。 Public Alphaをダウンロードして、次の新しいサイトで試して、改善を確認してください。すべてのDiviメンバー、新旧のメンバーにとって無料です。

既存のDIVI 4サイトの移行システムを改善しながら、新しいサイトにのみ使用することをお勧めします。新鮮な場合は、更新されたインターフェイスとパフォーマンスの向上を試す絶好の機会です。

Divi 5を使用した黄金比の使用方法

十分に言った。 Divi 5を使用してWebサイトにゴールデン比を実装する方法を詳しく見てみましょう。新しいセクションやページを作成するたびに数学をスクランブルする必要がないように、どのように標準化できるかを確認します。

設計変数を使用すると、サイト全体で値を保存および再利用できます。彼らはあなたのサイトの視覚的アイデンティティDNAを形成します。 Divi 5には、色、フォント、画像、テキスト文字列、リンク、および数字の6種類があります。それぞれに特定の役割があります：

• カラー変数には、ブランドの色、背景、テキストの色、およびサイト全体で使用されるその他の色合いがあります。
• フォント変数は、見出し、ボディテキスト、特別な要素に合わせてフォントを一貫して保ちます。
• 画像変数は、簡単に使用できるように、ロゴや背景パターンなどの一般的なグラフィックを保存します。
• テキスト文字列変数は、スローガン、連絡先、リーガルノートなどの再利用可能なコンテンツを保存します。
• リンク変数は、ソーシャルメディアやキーページなど、よく使用するURLを保持します。
• 数値変数は、ピクセル、パーセンテージ、EMS、REM、ビューポートユニットの測定値を処理し、CALC（）のようなCSS関数を使用して、画面上のプロポーションを正しく保ちます。

ゴールデン比変数を設定します

Divi 5ダッシュボードを開き、左側のサイドバーに変数マネージャーアイコンを見つけます。

それをクリックして、変数パネルを開きます。色、フォント、画像、テキスト、およびリンク変数を追加します。

次に、[数字]タブに移動して、ゴールデン比変数を作成します。これらの数値変数を追加することから始めます。

タイポグラフィ変数

• H1サイズ：クランプ（47px、4.7VW、76px）
  • 最小47px：最小の携帯電話（幅320倍）でも、H1は階層を確立するのに十分な大きさです。より小さな失われたものは、メインの見出しとして衝突します。
  • 4.7VWミドル値：このビューポート幅ユニットは、テキストスケールをスムーズにします。 1000px画面幅、4.7VW = 47px。 1600pxでは、75pxに成長します
  • 最大76px：18px×1.618を3回乗算することでこれを取得します（18×1.618×1.618×1.618 = 76.244px）
• H2サイズ：クランプ（29px、3.5VW、47px）
  • 最小29px：読みやすいままにしている間、H2をモバイルでH1よりも著しく小さく保ちます
  • 3.5VWスケーリング：階層を維持するためにH1よりも比例して小さいスケーリング
  • 最大47px：正確に76px÷1.618 = 47.122px
• H3サイズ：クランプ（18px、2.9vw、29px）
  • 最小18px：垂直スペースを節約するためにモバイルのボディテキストサイズに合わせます
  • 2.9VWスケーリング：大きな見出しよりも穏やかに成長します
  • 最大29px：正確に47px÷1.618 = 29.124px
• H4サイズ：クランプ（14px、2.2VW、22.4px）： 〜29px÷1.618 = 17.994pxを続けますが、読みやすさのために最低22.4pxに設定します
• H5サイズ：クランプ（13px、1.8vw、18px）： 18pxのベースフォントサイズは、ここでスケールに完全に適合します
• ボディテキストサイズ：クランプ（16px、1.6vw、18px）：すべての計算が生じる標準18pxベース

Clamp（）関数により、テキストが画面間でスムーズにサイズを変更できます。 3つの値が必要です。携帯電話の最小サイズ、スケーリングの中間値、デスクトップの最大の値です。画面が大きくなるにつれてテキストが徐々に成長するため、ビューポート幅（VW）を中央で使用します。サイズ間の突然のジャンプはありません。

デスクトップでは、完璧なゴールデン比に固執します。モバイル画面では、テキストを読みやすくするためにマイナーな調整が必要です。純粋な計算では、一部の見出しでは11pxを示唆しているかもしれませんが、訪問者の目に負担がかかります。 14pxのような実用的な最小値を設定すると、ゴールデン比の視覚的な調和が維持され、誰もがコンテンツを快適に読むことができます。比例関係は無傷のままです。読みやすくするために少しシフトしました。

間隔変数

各値に、前の値に正確に1.618を掛けます。

• スペースXS：クランプ（8px、1vw、10px）
  • なぜ10pxベース：これは、モバイルで最小の快適なタッチターゲットパディングです。業界の知恵では、44pxの最小タッチターゲットと、すべての側面に10pxのパディングを推奨します。 10px未満は、要素をamp屈にすると感じます。
  • 最小8pxの理由：幅360px未満の電話では、10pxでも広々としていると感じることがあります。要素を区別できるようにしながら、コンテンツスペースを最大化するために8pxにドロップします。
  • 1VW：間隔を比例して成長させ、1000px画面幅で正確に10pxを提供します
• スペーススモール：クランプ（13px、1.6VW、16.18px）：ボタンパディングとフォームフィールド間隔に最適です。
• スペース媒体：クランプ（21px、2.6VW、26.18px）：関連するコンテンツブロック間の間隔に最適です。
• 大規模なスペース：クランプ（34px、4.2VW、42.36px）：画面サイズでスケーリングしながら、主要なセクションの間に呼吸室を作成します。
• スペースXL：クランプ（55px、6.8VW、68.54px）：ヒーローセクションと主要な機能ブロックのトップ/ボトムパディングに最適です。ヒーローセクションでは、モバイルでもかなりのパディングが必要です。 50px未満で、ヒーローのコンテンツはエッジに対してcr屈に感じられます。
• スペースXXL：クランプ（89px、11VW、110.89px）：控えめに使用します。たぶん、劇的な呼吸室が必要な特別なセクションの場合。

レイアウト変数

• 一次列幅：61.803％
  • それを得る方法：1を1.618 = 0.61803（または61.803％）で割る
  • これを2列のレイアウトでメインコンテンツ領域に使用します
• 二次列幅：38.197％
  • 同じ行のサイドバー列に使用します
  • 100％-61.803％= 38.197％から派生
• コンテナ最大幅：1165px
  • テキストは72文字を超えて伸びるときに読みにくくなります。
    • 10pxを最小テキストサイズとして仮定すると、最適な読み取り幅（720px）×ゴールデン比（1.618）= 1165px
  • コンテンツを保持するメインセクションまたは行に適用してください
• ゴールデン高さ比：calc（100％ / 1.618）
  • これは、画像、アクションへの呼び出しボックス、ヒーローセクション、チームメンバーカードなど、モジュール/モジュールグループの高さの値として使用できます。
  • これにより、正方形やランダムな形状の代わりに長方形が作成されます。あなたの脳は、完璧に額装された写真のように、これらの割合が自然に魅力的であることを発見します。
  • どうすればこれを手に入れますか？ゴールデン比は、幅= 1.618の場合、高さ= 1。したがって、幅= 100％の場合、高さ= 100％÷1.618 = 61.8％であると述べています。この式は、その数学を自動的に行います。

これらの変数をDivi 5の変数マネージャーに保存します。次に、幅、高さ、または最大幅フィールドの横にある変数アイコンをクリックして、どこでも使用します。最初のセットアップ後、数学は必要ありません。また、これらの変数ラベルはどれも修正されていません。意味のあるものとラベルを交換することができます。

ゴールデン比のヒーローセクションを作成します

本のランディングページのヒーローセクションを作成しましょう。これは、スターターサイトコレクションのデザインの1つに触発され、今後作成したゴールデン比変数を使用しています。そして、それは楽しい部分です。これらの慎重に計算された変数を取得し、それらが実際のヒーローセクションにどのように影響するかを見ることができます。

Divi 5のVisual Builderに新しいセクションを作成することから始めます。黄金の高さ比変数を使用して高さを設定します。これは、脳が心地よいと認識することを自然にします。

Space XL変数を上部と下部のパディングに追加します。これにより、デスクトップで適切に拡大しながら、モバイルで十分な呼吸室が提供されます。

セクションの背景には、設計変数を使用して2つの主要なオプションがあります。

オプション1：固体の背景

• 背景色フィールドをクリックして、ドロップダウンからプライマリカラー変数を選択します。これにより、ヒーローセクションがブランドアイデンティティと一致します。主な色がテキストコントラストには軽すぎる場合は、代わりにセカンダリカラー変数を使用してください。選択した色が、テキストが読みやすいままになるのに十分なコントラストを提供している場合を確認してください。インスピレーションについていくと、背景の勾配と72％の停止と90°でプライマリカラーを追加します。

オプション2：画像の背景

• 背景画像フィールドにヒーローイメージ変数（作成した場合）を適用します。背景画像設定の横にある変数アイコンをクリックし、保存した画像変数を選択します。背景画像を使用する場合は、テキストの読みやすさのオーバーレイを追加します。オーバーレイ色をプライマリカラー変数に設定し、不透明度を40〜60％に調整します。これにより、白いテキストを鮮明で読みやすくするのに十分な画像が暗くなります。
• 選択した背景画像をより適切に対照する場合、オーバーレイにセカンダリカラー変数を使用することもできます。

2列のレイアウトの作成

2つの列のある行を追加します。

左の列幅をプライマリ列幅変数に設定し、右列を二次列幅変数に設定します。また、「columle heights」というオプションをオンにします。次に、コンテナの最大幅変数が適用され、コンテンツをより大きな画面で読み取り可能にします。これにより、特に広い画面では、テキストラインが広すぎるのを防ぎます。

また、「カスタムガター幅を使用」して1に設定します。これは、モジュール間でゴールデン比の間隔を使用するのに役立ちます。

スペース媒体変数を最初の列の右に適用し、2番目の列の左パディングを塗り、列間に呼吸スペースを追加します。これにより、列が切断されるようにすることなく、列間を十分に分離します。

大きな列には、メインメッセージとアクションへの呼びかけが保持されます。小さな列には、シンプルなヒーローの画像が含まれているか、きれいなテキスト中心のデザインのために空のままになります。

流れるタイポグラフィのセットアップ

メインコラムに、2つの見出しモジュールを追加します。

最初のものをH5に設定し、H5サイズ変数を適用します。この例では、このテキストモジュールには、コンテンツ「ベストセラー著者」が記載されています。また、このテキストにはセカンダリカラーを使用し、大文字のフォントスタイルを適用します。また、ボディフォントをテキストに適用して、独特にし、重量を太字にします。

2番目のものをH1に設定し、H1サイズ変数を適用します。これがあなたの主な見出しになります。この例では、設計変数として以前に追加された著者の名前を使用します。アイデアが不足している場合は、Divi AIを使用して、優れた見出しテキストを支援できます。

その下に、サポート段落のテキストモジュールを追加します。ボディテキストサイズ変数と色変数を適用します。これを、コアバリュー提案を説明する2〜3文まで保ちます。この例では、著者に簡単な紹介を追加します。 Divi AIを使用して、こちらのコピーを支援することもできます。

これらの要素は、スペース媒体を見出しと段落の間のマージンとして使用しています。

次に、テキストの下にボタンモジュールを追加します。あなたの色を適用します。プライマリカラーデザイン変数とボタンテキストを使用しています。

ボタンの寸法のために、スペース媒体変数を左右のパディングと上部と下部に小さなパディングとスペースを追加します。これにより、特大にならずにテキストに比例するボタンが作成されます。スペースの大きな変数を上のマージンとして使用して、段落から分離します。

ボタンテキストは、ボディテキストサイズ変数を使用して、段落テキストとの一貫性を維持する必要があります。また、以前に追加したボタンリンク設計変数も適用します。

右の列をスタイリングします

右の列は、画像からオンボーディングフォームまで何でも保持できます。小さな列で画像を使用する場合は、シンプルにしてください。あなたのチーム、あなたのオフィス、またはきれいなイラストの写真がうまく機能します。画像の配置を考え直さないでください：通常は列内に集中します。この例では、最近の本の画像デザイン変数を含めます。また、ボックスシャドウを追加して目立たせます。

また、画像の幅を約90％に調整して、より整合しているように見えるようにします。

コンサルティングウェブサイトの場合、正しい列を空にすると、メッセージに完全に焦点を当てるよりクリーンでよりプロフェッショナルな外観が作成されることがあります。

結果

結果は次のとおりです。

Divi 5のキャンバススケーリングを使用して、さまざまな画面サイズでヒーローの外観をテストします。変数内のClamp（）機能は、応答性を自動的に処理する必要があります。

ゴールデン比変数は優れた比例調和を提供しますが、特定のコンテンツに基づいてマイナーな調整が必要になる場合があります。長い見出しには、わずかに小さいテキストが必要になる場合があります。短くてパンチのあるタグラインは、より大きなサイズを処理できます。一部のブランドスタイルでは、よりタイトまたはルーズの間隔が必要です。

デザイン変数の美しさは、これらの変更が2回のクリックにかかることです。変数マネージャーを開き、H1サイズまたはスペースの大きな変数を調整し、サイト全体にシフトが即座に適用されるのを見ます。

H1は顕著なままですが、モバイルで読みやすい（最低47％）。間隔は寛大に感じますが、画面サイズでは過度ではありません。 2列の分割は、信頼と明快さが派手なデザイン要素よりも重要なサービスビジネスに適したクラシックでプロフェッショナルなレイアウトを提供します。

オプショングループプリセットを使用して、サイト全体の黄金比を維持します

設計変数は数値を処理しますが、オプショングループプリセットは、サイト全体で一貫して使用されるようにします。

作成した変数を使用して最初のセクションを作成します。タイポグラフィ、間隔、レイアウトを正確に右に入手してください。次に、各スタイリンググループ（タイポグラフィ、間隔、境界など）の横にあるプリセットアイコンをクリックし、オプショングループプリセットとして保存します。

これにより、すでに黄金の比率を含む再利用可能な設計ブロックが作成されます。ゼロから始める代わりに、新しいセクションまたはモジュールを追加するたびにこれらのプリセットを適用します。

サイト全体の割合を調整する必要がある場合は、変数を1回変更します。それを使用するすべてのプリセットは、サイト全体で即座に更新されます。変更を加えるために個々のページを狩ることはありません。

あなたの黄金の比率は、手動の作業なしでは一貫しています。

数学から美しいデザイン、Divi 5は簡単になります

レイアウトが「ほぼ正しい」ように見えるときのしつこい感覚は、ついに理にかなっています。あなたはうるさいことではありませんでした：あなたの脳は、感じられた比例的な関係を拾っていました。

ゴールデン比は信頼できる出発点を与えますが、ほとんどのビルダーは毎回数学を行わせます。 Divi 5の設計変数システムは完全に変更されます。 1.618の割合を一度計算し、変数として保存し、クリックしてサイトのどこにでも適用します。

50ページで間隔を調整する必要がありますか？各ページを個別に編集する代わりに、1つの変数を変更します。ゴールデン比に続く一貫したタイポグラフィが必要ですか？クランプ（）値を1回設定し、すべてのデバイスで完全にスケーリングするのを視聴します。

数学はどこでも機能しますが、Divi 5は実際には一貫して使用することを実用的にしています。