DIVI 5デザイン変数を使用したサイジングと間隔システムの作成

Divi 5は、サイト全体でサイジングと間隔の決定を定義、管理、再利用する構造化された方法を提供します。設計変数とプリセットを使用して、メンテナンス、調整、複製が簡単なスケーラブルな設計システムを作成できます。

この投稿では、システムで考える方法を紹介します。包括的なサイジングと間隔システムの構築を紹介します。

Divi 5は、作成した新しいサイトで使用する準備ができていますが、既存のサイトの移行を控えることをお勧めします（今のところ）。

なぜサイジングと間隔システムを使用するのですか？

ほとんどのDIVIユーザーは、レイアウト、マージン、タイポグラフィの一貫性を望んでいます。しかし、これらの基準を早期に定義するのに時間をかける人はほとんどいません。または、もしそうなら、あなたはおそらくスタイルの高い子供のテーマを介してそれをやったでしょう。今、あなたはできます：

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

1. 数値変数を1回定義します（16pxまたはクランプなど（16px、4vw、48px）
2. モジュール/要素プリセットに割り当てます
3. またはオプショングループプリセット（間隔やサイジングなど）
4. 後で変数を更新し、サイト全体で反映される変更を確認します
5. Slimmerページには、より少ないCSSを使用します

他のサイトビルダーを使用すると、デザイナーはCSSフレームワークに大きく傾いて、プロジェクトからプロジェクトまで取ることができるシステムを使用しながら、一貫した間隔とサイジングを適用する傾向があります。 DIVI 5を使用すると、単一のコードに触れる必要なく、DIVIの設計変数を使用してDIVI UI内で機能する独自の「デザインフレームワーク」を作成できます。

要素サイズ、パディング、およびマージン

各Web要素には、全体の間隔とサイズに影響する3つのコンポーネントがあります。

• 要素サイズ：幅と高さで定義される要素のコアコンテンツサイズ。
• パディング：要素内にスペースが追加され、クリック可能な領域と視覚的なサイズが大きくなります。
• マージン：要素の外側にスペースが追加され、他の要素から押し出されます。

Divi要素の実用的な例

一般に、これはあなたがDIVIでパディングとマージンを使用することを期待する方法です：

• セクションには通常、ページ内に垂直間隔を作成するための上部と下部のパディング（マージンではありません）があります。
• 列はしばしば垂直のパディングの恩恵を受けますが、それ以外の場合はコンテンツを満たします。
• 列は、主に列のギャップを作成するために適用されるマージンに焦点を当てています。
• モジュールは通常、底部のマージンを使用して積み重ねられた要素を明確に分離しますが、マージンの量は視覚的なグループ化に依存します。

Diviのデフォルト間隔値

Diviを使用する初心者からWebデザインへの初心者は、おそらくDiviが箱から出していくつかの間隔の決定を下していることにさえ認識していません。より経験豊富なデザイナーは、多くの場合、目標に合わせてこれらを調整しますが、これらのデフォルトにより、ほとんどの人がプロジェクトを迅速に開始できます。

これらのデフォルトは役立つ場合がありますが、デザイナーは多くの場合、独自の間隔基準を設定することを好みます。デフォルトのパディングが設定されていないと、ページがどのように見えるかを見たい場合は、これを行うことができます。

1. 任意の要素に移動し、 [デザイン]タブの下の間隔オプショングループを見つけます。
2. デフォルトのオプショングループを開き、上部と下部のパディングを0 （ゼロ）に設定します。
3. デフォルトの間隔OGプリセットを保存して、すべての要素にサイト全体に適用します。

これにより、Diviのデフォルト設定なしでページがどのように見えるかが表示されます。見た目は良くありませんが、独自の設計システムを作成するために必要なことを確認し始めます（または、Diviのデフォルトを使用して、適切に変更するにつれて変更を加えることができます）。

8ポイント間隔スケールを使用します

8ポイントスケールは、8の増分を使用して間隔値が構築されるレイアウトスキームです。したがって、13pxや27pxなどの任意の値を使用する代わりに、8、16、24、32、40、48などの値に固執します。

このシステムは次のとおりです。

• サイズの一貫したルーブリックを使用して、垂直と水平のリズムを維持します
• ブレークポイント全体に間隔スタックがきれいにスタックされていることを確認します
• 意思決定をスピードアップする（選択肢が少ない=デザインの高速）

好みやスケールの種類に応じて、PXまたはREMでスケールを使用できます。たとえば、ベースフォントサイズが16pxの場合、16pxは1REMになります。

あなたの注意をグループ化する領域にあなたの注意を集め、訪問者を垂直間隔でページに押し込むページのモックアップ

垂直間隔は、読者に焦点を合わせる場所を伝えます。よりタイトな間隔でクラスター化されたアイテムは、当然互いに関連していると見なされます。より多くのスペースによって分離されたものは、新しいアイデアを示しています。

サイジングと間隔システムの作成方法

サイズとスペースのシステムは、設計全体で使用される変数またはトークンの設定と、サイト設計全体で一貫してそれらの変数を使用する2つのことで構成されています。 Diviでそれを行う方法は次のとおりです。

ステップ1：設計変数マネージャーに数値変数を作成する

DIVI 5は、再利用可能な数値値を定義するための視覚インターフェイスを導入します。各番号変数には以下が含まれます。

1. 簡単にリコールできる名前（たとえば、gap-sm、text-h1）はあまり長くありません
2. 数値または関数calc（）またはclamp（）
3. CSSユニット（PX、REM、％、VWなど）

変数マネージャーのため、CSS変数を別のStyleSheetで記述する必要はありません。これらすべてを設計変数マネージャーに設定し、Visual Builderの入力フィールドから選択します。

以下は、8ポイント設計システムに一致する数値変数の完全な開始セットです。これを使用する必要はありませんが、何が可能かについてのアイデアが得られます。

そして、これを変数マネージャーに記入することがどのように見えますか。

これらの間隔値は、Divi 5の今後のFlexBox機能に役立つことに注意してください

ステップ2：8ポイント間隔システムの計画

通常、ページには要素の繰り返しパターンが含まれます。次のような一般的なグループやクラスターを探します。

• 見出し、段落、ボタン
• 小さな見出し、大きな見出し、段落
• アイコン、段落
• 複数の要素を含むカード

最初のワイヤーフレーム（またはプレースホルダーデザイン）を使用すると、潜在的なパターンを作成する機会があります。また、処理方法を決定する必要があるパターンに合わないものを作成します。しかし、それはすべて設計の一部です。

これをFigmaで行うか、DIVIにプレースホルダー要素を備えたワイヤーフレームページを直接作成することで行うことができます。ページにレイアウトできるすべてを取得してください。 Everythingと呼ばれるChrome拡張機能を使用して、それらの調整を開始するときに（最初はDiviのデフォルト間隔で）間隔を視覚化するのに役立ちます。

拡張機能を使用するには、Chrome拡張ツールバーからアクティブにします。次に、興味のあるページの要素をクリックして、その要素にツールを集中させます。そこから、マウスを動かして、現在選択されている要素と他の要素の間でさまざまな側面を測定します。

ステップ3：オプショングループプリセットに番号変数を割り当てます

ページのワイヤーフレームが設定され、設計変数が配置されている場合、ページに間隔とサイズに関連する変更を行うことができます。最初にコンテンツのグループから始めることができます。ヒーローセクションの見出し、段落、ボタンに焦点を当てましょう。

プレースホルダーコンテンツとフォント/フォントサイジングを備えたワイヤーフレーム

この時点で、タイポグラフィの最初のドラフトがすでに設定されていることに注意してください。これには、フォント、フォントサイジング、およびラインの高さ/文字間隔が含まれます。これがなければ、誤字システムを確立すると、すべてのサイジングを再調整する可能性が非常に高くなります。

タイポグラフィのサイジングオプションの例は、数値変数として設定されています

次に、デザインに適用されているデフォルトの間隔を評価したいと思います。これを行うには、投稿で以前にチャートを見て、Heroセクション内で行っていることと比較できます。明らかに、セクション（＃1）と2行（＃2と＃3）があります。今のところ、デフォルトの行の上/下のパディングをゼロに設定します。

次に、セクション間隔の2つのオプションがあります。パディングをゼロに設定して後で把握するか、セクションのデフォルト要素プリセットに予備の上部と下のパディングを設定して、次のように見えることができます。

• デスクトップ：Space-XXXLに設定された上部および下部パディング
• タブレット：Space-XXLに設定された上部および下部のパディング
• モバイル：Space-XLに設定された上部および下部のパディング

しかし、あなたがすることは完全にあなた次第であり、あなたが最終的に設定することになる間隔の設計変数（またはあなたがあなた自身のものとしてそれらを採用したい場合はデフォルトを使用します）。私たちが現在持っているもの（デフォルトのrowパディングがゼロに設定され、カスタムセクションパディングがあります）：

ステップ4：モジュール間隔

次に行うことは、セクション/行内のモジュール間の間隔で作業することです。重要なのは、モジュールに間隔を適用する一貫した方法を選択することです。

オプションがあります。間隔を複数の方法で分割できます。

• マージントップに間隔を適用します
• マージンボトムに間隔を適用します
• マージントップとマージンボトムの間に間隔を均等に適用します

多くのモジュールにはマージンボトムがデフォルトで適用されていることを覚えておくことが重要です。そのため、間隔パラダイムを設定するときにそのコンベンションにアクセスして開始することをお勧めします。まず、上部/下のマージンをゼロに設定して、モジュール間の間隔がデフォルトが適用されないように見える方法を確認できます。

このセクション内で、デフォルトの間隔なしでこれらすべてのモジュールを見るために、マージン上部と下部に0pxを適用しました

これで、これらのモジュールのマージンボトムに間隔設計変数の割り当てを開始して、間隔システムを作成できます。見出しとボディテキストから始めます。

モジュール間隔でパターンを表示し始めると、これらの間隔の選択肢をデフォルトの要素プリセットに追加することができます。また、逸脱する要素の間隔ルールを作成する必要があるため、カスタム要素プリセットを作成できます。新しい要素はそこからデフォルトのプリセットを使用しますが、さまざまな状況に対してカスタム要素プリセットをすばやく選択できます。

サイジングと間隔にDivi 5をどのように使用しますか？

あなたが満足している間隔とサイズのシステムを作成することは、基本を練習し、目前のツールに寄りかかることにかかっています。 Divi 5は、WordPress Webサイト用の事実上の設計システムを作成する途中です。それは多くの柔軟性を持つというスイートスポットに当たりますが、頭を包むのは簡単です。

デザインシステムの作成を検討したことがない場合は、DIVIを使用すると、個々のモジュールまたは要素レベルだけでなく、設計変数とプリセットレベルから考えることができます。これにより、基本設計の決定を要素にこれまで以上に早く適用することができます。

8ポイントシステムを試してみますか、それとも他のことを計画していますか？また、これはDiviのデフォルト間隔について初めて考えていますか？ Divi Automaticでデザインしますが、プロのデザイナーにとっては、それらのデフォルトの一部を変更してPixel-Fectect Visionを実現することをお勧めします。

Divi 5は、作成した新しいサイトで使用する準備ができています。