プリセットベースの設計がDivi Designパラダイムをどのように変えるか

Diviの設計機能は、Divi 5にオプショングループプリセットの導入とともに進化しました。要素プリセットは長い間、完全にスタイルの要素を簡単に保存して再利用できますが、新しいオプショングループプリセットは、タイポグラフィ、間隔、効果などの設計プロパティを再利用できるようにすることで柔軟性の層を追加します。

一緒になって、これらの組み込みのDIVI機能は、デザイナーが一貫性と効率性にアプローチする方法を再構築するのに役立ち、より高速な設計反復とより簡単なグローバルアップデートを可能にします。この投稿では、これらのプリセットがどのように連携してDivi 5デザインワークフローを変換するかについて飛び込みます。

プリセットベースのデザインの2つの柱

詳細に飛び込む前に、DIVIのプリセットベースのデザインを非常に強力にする2つの主要なコンポーネントを理解することが重要です。要素プリセットとオプショングループプリセットを組み合わせることにより、より効率的で一貫した、スケーラブルな設計プロセスを作成できます。これらの2つの柱と、それらがどのように協力してデザインワークフローを高めるかを見てみましょう。

要素プリセット：再利用可能な設計パッケージ

要素プリセット特定のDIVI要素の設計構成全体を保存します。 DIVIには現在、モジュール、列、行、およびセクションの4つの異なる要素タイプがあります。モジュールに関しては、要素プリセットはモジュールタイプ（ボタン、テキスト、CTAなど）にも一意です。要素プリセットを適用すると、タイポグラフィ、色、間隔、効果などのすべての関連設定が、適用されると即座に継承されます。要素プリセットの焦点は次のとおりです。

• ページ全体で視覚的な一貫性を確保します
• 繰り返しスタイリングタスクを削減します
• より速い編集のためのグローバル更新を許可します

オプショングループプリセット：モジュラー設計制御

オプショングループプリセットは、タイポグラフィ、ボックスシャドウ、境界線、スクロールエフェクトなどのスタイリングプロパティに焦点を当てています。それらは複数の要素にわたって作業し、デザイナーが単一の要素タイプに縛られることなくスタイルを混合およびマッチングできるようにします。つまり、たとえば、行とモジュールの両方で同じボックスシャドウプリセットを使用できます。オプショングループプリセットを使用する主な利点は、次のとおりです。

• さまざまな要素に共有スタイルを適用します
• 高度なカスタマイズのためにスタック可能
• 個々のモジュールに影響を与えることなく、リアルタイムのグローバル編集を許可します

プリセットを使用して構造化されたワークフローを作成します

Diviのプリセットの2つの柱を表示し、違いを簡単に説明したので、構造化されたワークフローを作成するためのヒントをいくつか見てみましょう。

ステップ1：オプショングループプリセットを使用してコアスタイルを定義します

ウェブサイトのコアデザイン原則を確立することから始めます。これには、タイポグラフィ、色、ボタンスタイル、間隔などが含まれます。これらの基本的な要素は、ウェブサイト全体で一貫性を維持するために不可欠です。

絶えず繰り返される設定の場合、オプショングループプリセットをデフォルトとして設定することを選択できます。この良い例は、段落テキストをスタイリングし、デフォルトとして使用することです。

オプショングループプリセットは汎用性があり、再利用可能であるため、複数の要素にこれらの設定を適用できます。たとえば、テキスト-Shadowプリセットを定義したら、そのプリセットをWebサイト上のすべての要素タイプの見出しに適用できます。この段階では、デザインの残りの部分の基礎を築き、これらのプリセットはあなたのウェブサイトのビルディングブロックとして機能するはずです。

ステップ2：特定のモジュールの要素プリセットを作成します

コアスタイルを定義したら、次のステップは、より具体的な設計要素の要素プリセットを作成することです。理論上、この順序に従うことは最も論理的ですが、多くの場合、両方を同時に作成することに気付くことがよくあります。要素プリセットは、個々の要素（セクション、行、列、モジュール）の完全な設計パッケージであり、サイト全体に一貫したスタイルをすばやく適用できるようにします。

事前に定義されたオプショングループプリセットを使用して、プリスタイルのCTAボタンを設計し、ボタンのタイポグラフィ、背景色、およびホバーエフェクトに焦点を当てます。

これを将来使用するための要素プリセットとして保存します。証言モジュール、機能セクション、価格表など、他の繰り返し要素を構築し、それに応じてスタイルをスタイルします。これらのスタイルの前の各モジュールは、必要なときにいつでも適用できる要素プリセットとして保存できます。

設計するときは、DIVIライブラリにこれらのプリセットを含むレイアウトを保存することを検討してください。これにより、すべてのデザインの概要を維持することができ、作成したすべてのプリセットスタイルを追跡できます。最初からすべてを完璧にすることを心配する必要はありません。サイトを構築すると、これらの要素を微調整するにつれて、これらの要素を微調整する可能性があります。

ステップ3：必要に応じて実装および調整します

オプショングループと要素プリセットを作成したら、Webサイトに適用できます。事前にデザインソフトウェアを使用せずにウェブサイトをゼロから構築している場合、最初のページビルド中にプリセットをすでに適用している可能性が高くなります。

作業中に要素レベルで調整する必要がある場合があります。たとえば、記述モジュールにプリセットを適用しているが、特定のページの間隔を変更する必要がある場合、サイトの残りの部分に影響を与えることなくそうすることができます。この柔軟性により、行くにつれて調整することができ、デザインがスケーラブルで適応性のあるままであることを保証します。

ここで重要なのは、プリセットを、正確に従わなければならない剛性のあるフレームワークではなく、柔軟でまとまりのある設計システムを作成するためのツールと考えることです。構築を続けるにつれてスタイルを微調整する必要がある可能性が高いので、必要に応じてプリセットを変更し、要素レベルでそれらをオーバーライドする必要があります。デザインを洗練させ続け、Diviのリアルタイム編集を最大限に活用して、これらの調整を行ってください。

ステップ4：Diviライブラリ内でスタイルを整理しておく

すべての要素プリセットとレイアウトを追跡するには、Diviライブラリに保管できるレイアウトに保存します。

サイトが成長するにつれて、デザインを改善するために保存されたプリセットを調整できます。取り組んでいる要素内のプリセットを常に変更することができます。プリセットを更新すると、Webサイト全体で更新されます。

ステップ5：反復と改善

Diviのプリセットシステムの素晴らしい点の1つは、デザインを継続的に改善および改良する機能です。より多くのページとレイアウトを構築するとき、オプショングループと要素プリセットを再訪して、グローバル調整を行います。

プライマリボタンの色を変更するか、すべての見出しのフォントサイズを更新することにした場合、これを1回実行し、そのプリセットが適用されるすべてのインスタンスでサイト全体を反映することができます。

作業を続けると、どの要素がうまく機能し、どの要素がさらに調整する必要があるかをより深く理解することができます。あなたが行くときにプリセットを変更することを恐れないでください。そして、Diviの柔軟性を活用して、進化するデザインビジョンに合った小さな変更を加えてください。

プリセットを継続的に繰り返して改善することにより、まとまりがあるだけでなく、将来の変更や設計動向に適応できるサイトを作成します。プリセットシステムは、プロセスを合理化するのに役立つツールであり、初日から厳密に従わなければならないルールのセットではありません。

プリセットベースのワークフローの利点

Divi Presetsを使用して構造化されたワークフローを作成する基本を経験したので、このアプローチに伴う利点のいくつかを見てみましょう。

速度：すぐに使用できるプリセットで設計時間を短縮します

Diviのプリセットシステムを使用すると、Webサイトの設計にかかる時間を大幅に短縮できます。要素を設計する必要があるたびにゼロから始めるのではなく、単に要素とオプショングループのプリセットを作成して再利用するだけです。 CTAボタン、見出しスタイル、または証言モジュールであろうと、これらのプリセットを使用すると、1回のクリックで完全な設計パッケージを適用できます。

たとえば、オプショングループプリセットでボーダースタイルを設計したら、作業をやり直す必要なく、すべてのページに一貫して適用できます。

要素プリセットは、スタイル前のモジュール全体を再利用できるようにすることで、さらに時間を節約できます。 1回のクリックで完全に設計されたモジュールを展開して、レイアウトがビジョンに即座に一致するようにすることができます。

設計するこのすぐに使用できるアプローチにより、個々の要素をスタイリングする繰り返しタスクではなく、より速く構築し、プロジェクトの創造的な側面に集中することができます。

一貫性：ページ全体で均一なスタイリングを維持します

プリセットベースのワークフローの主な利点の1つは、一貫性です。要素とオプションのグループプリセットを使用することにより、ウェブサイトのすべてのページが、タイポグラフィから間隔まで、同じデザインルールに準拠していることを確認します。

ボタンのデフォルトとしてプリセットされた単一のオプショングループの設定により、サイトのフォントサイズとスタイルがどこに表示されても均一なままであることが保証されます。この一貫性は、サイトの視覚的アイデンティティを強化し、洗練されたまとまりのある外観を与えます。

さまざまなページで一貫性のないスタイルを扱うのではなく、ユーザーエクスペリエンスを改善し、サイトをよりプロフェッショナルに見せる統一された設計システムを維持できます。

スケーラビリティ：サイトの設計を簡単に展開および更新します

プリセットにより、ウェブサイトが成長するにつれて非常に簡単にスケーリングできます。新しいページを追加したり、既存のページのデザインを変更したりする場合でも、デザインを迅速かつ効率的に更新できます。新しいページを追加する必要がある場合は、既存の要素とオプショングループプリセットを適用して、新しいページがサイトの残りのデザインにシームレスに適合するようにします。

グローバルアップデートを作成する必要がありますか？ Diviのプリセットシステムを使用すると、プリセットを1回変更し、そのプリセットが適用されるすべてのインスタンスで自動的に反映できます。たとえば、サイトのすべてのボタンの色を変更する場合は、ボタンプリセットを更新するだけで、そのプリセットにリンクされているすべてのボタンが即座に更新されます。

このスケーラビリティは、サイトが進化するにつれて、各要素を個別に再加工することなくデザインを成長させ続けることができることを意味します。ブログ、新製品、またはまったく新しいセクションを追加するかどうかにかかわらず、デザインはまとまりがあり、一貫性があります。

柔軟性：システムを壊さずに個々の要素をオーバーライドします

プリセットはWebデザインへの構造化されたアプローチを提供しますが、柔軟性を可能にします。特定の要素を調整する必要がある場合は、残りのデザインに影響を与えることなく、その要素のプリセットをオーバーライドできます。

たとえば、要素プリセットをBlurbモジュールに適用しているが、特定のインスタンスのアイコンサイズまたは間隔を調整する必要がある場合、サイトの他の場所の他のインスタンスに影響を与えることなく、モジュールにそれらの変更を直接変更できます。オプショングループプリセットを使用すると、サイト全体のコアスタイルを維持しながら、特定の要素に対して、フォントサイズやボタンの色などの個々の設定を微調整できます。

この柔軟性は、サイトのユニークなセクションのカスタムルックを実現するための鍵です。プリセットが提供する一貫性と構造を破ることなく、詳細なカスタマイズが可能になります。デザインが進化するにつれて、必要に応じて微調整要素を継続することができ、プロセスをよりスムーズで適応性のある制御と使いやすさのバランスを提供します。

Divi 5のプリセットでよりスマートな設計を開始します

プリセットベースのワークフローを採​​用すると、DIVIでWebサイトを構築する方法が再定義されます。要素プリセットとオプショングループプリセットを活用することにより、視覚的に見事で、非常に適応性があり、管理しやすいWebサイトを作成できます。オプショングループプリセットはDivi 5でのみ利用可能であるため、Divi 5インターフェイスに精通し始めるのに最適な時期です。