デザインシステムは、ウェブ制作者が共通のデザイン基準と要素を確立することで、サイト全体の一貫性を維持することを可能にします。これは、サイトの規模が大きい場合や、複数のクリエイターのチームが同時に作業を行う場合に特に有効です。このデザインシステムは、色やタイポグラフィのスタイルガイド、サイト全体で使用する共通のアイコンやイメージのリスト、一貫性のある一貫したウェブサイトを形成するその他のブランド要素などを含む文書の形で提供されることがあります。デザイナーやコンテンツ制作者は、ページをデザインしたり、コンテンツを書いたりする際に、デザインシステムガイドを参照することができます。
しかし、このようなデザインシステムにも限界があります。Web制作者は、ガイドと作業を行ったり来たりしながら、一つ一つの要素を調整しながら作業を進めていかなければなりません。
ページに簡単な見出しをつけているときに、クリエイターの頭をよぎることがあります。”H3の見出しの16進数は何だったかな？そして、フォントの重さは何だったか？500? いや、それはH2の見出しのためのもので、H3の見出しのためのものは400ではなかったか？” そこで制作者は、物理的なフォルダかオンラインフォルダの中にあるスタイルガイドを探し回り、スタイル情報を見つけ出し、色やフォントの太さを変える作業を開始します。このプロセスをサイトの見出しの数だけ掛け合わせ、そこに他のすべての要素を加えることで、一貫性のある、しかし時間のかかるデザインプロセスに早変わりします。
Web制作製品自体に組み込まれているデザインシステムは、単に文書化されたガイドを参照するだけのものから大きく飛躍しています。ウェブ制作者がプロジェクトの最初からElementorに全てのデザインシステムを組み込んでいたとします。ある要素が特定の色とタイポグラフィの組み合わせを必要とし、それが標準的なブランドの組み合わせとして指定されていて、その組み合わせが要素を編集する際にワンクリックで選択できるようになっていたとしたら、以前のマニュアルガイドの参照プロセスに比べて大幅な時間の節約になるでしょう。
昔のデザインシステムガイドを参考にして、会社がブランドの全面的な刷新を行っていて、サイト全体の色、フォントファミリー、フォントの太さなどをすべて変更するのがウェブ制作者の仕事だとしましょう。これは膨大な作業になる可能性があり、その過程で多くの要素が見落とされ、あちこちの変な場所で奇妙で支離滅裂なデザインになってしまう可能性があります。
しかし、サイトデザイン製品自体にデザインシステムが組み込まれているので、このような変更は文字通り数分で完了します。Elementorを使えば、一箇所の変更をサイト全体に簡単に反映させることができます。Elementorのテーマスタイルオプションとグローバルカラー＆タイポグラフィの組み合わせは、このデザインシステムの方法論を体現しています。
Ｑ：混乱しています。テーマスタイルとデザインシステムのグローバルカラー/グローバルフォントの違いは何ですか？両方ともクロスサイトで色とタイポグラフィを制御するのではないのですか？
A：Theme StyleとGlobal Colors & Typographyは関連していますが、機能は異なります。テーマスタイルは、<H1>、<body>、<label>などのHTMLタグのフォールバックスタイル定義を設定します。これらはElementor固有のものではありませんが、可能な限り一般的なものです。これはサイトの基本的な設定であり、特定の要素定義が設定されていない場合のフォールバックとしてのみ使用されます。
グローバルカラーとグローバルフォントは、CSS変数を使用する追加のスタイルレイヤーです。このレイヤーはテーマスタイルレイヤーの上にあり、優先されます。これは、サイト全体のデザインシステムの構成要素を提供します。定義済みの4つのグローバル設定の色とタイポグラフィを割り当て、必要に応じてグローバルな色とタイポグラフィの設定を追加し、それぞれに名前を付けます。Elementorで使用している要素については、グローバルデザインシステムから事前に定義された設定の一つを素早く選択することができます。
将来的には、グローバル設定を1回変更するだけで、サイト内のすべてのインスタンスに影響を与えることができます。Elementor内でもElementor外でも、グローバル設定が割り当てられていない要素がある場合は、テーマスタイル内で定義された設定がデフォルトとなります。このように、テーマスタイルとデザインシステムのグローバルカラーとグローバルフォントの両方はとても必要とされる機能です。
Q：これで分かりましたが、具体的な例を教えてください。
A：もちろんです。Elementorページを編集して、H2見出しの色とタイポグラフィを、サイト設定 > デザインシステム > グローバルカラーとグローバルフォントであらかじめ割り当てたグローバルセカンダリスタイルに設定してください。次に、このページの他の要素やすべてのページで、同じ色やテキストスタイルを設定したい場合は、同じようにします。ボタンをH2の見出しと同じ色にしたいですか？ボタンの色は、それぞれのボタンの二次色を選択してください。
次に、他の定義済みのグローバル設定を使用して、H3 見出しを異なる色とテキストスタイルに設定します。例えば、「補完」という新しいグローバル設定を作成したとします。いくつかの列の背景を同じ色にしたいとします。OK、作成したグローバルカラー設定をそれらの列の背景にも割り当てます。
必要に応じて、他の要素にもこの作業を行います。
将来、サイトの色やタイポグラフィの設定を変更することになっても、一度変更すれば、サイト全体でどの要素が影響を受けるかを正確に知ることができます。グローバル設定を変更するだけで、特定の設定を使用しているすべての要素がサイト全体で即座に変更されます。
Q：わかりました、とてもクールですが、Elementorで編集されていないページがあります。見出しやボタン、カラムの背景はどうなっているのでしょうか？どのようなスタイルが継承されますか？
A：テーマスタイルの設定が有効です。それらのページはElementorで編集されたページではありませんが、Elementorのグローバル設定で設定したテーマスタイルがコントロールされています。それらのページの要素には、グローバルカラーやグローバルフォントのスタイルが割り当てられていないため、テーマスタイルで設定したスタイルが継承されます。このように、Elementorで編集されていないページでも、Elementorはサイト全体のスタイリングをコントロールすることができます。
注：もしも、デザインシステム > グローバルカラー、グローバルフォント、またはテーマスタイルでスタイルを設定していない要素がある場合、その要素のスタイルはテーマやブラウザ、または要素のスタイルを設定しているプラグインのような他の未知のソースから継承されます。ですから、完全にコントロールするためには、テーマスタイルで何も空白のままにしないでください。そこに可能なすべてのオプションを設定しておけば、デザインシステムのグローバルカラーやグローバルフォントオプションによって制御されない設定のためのデフォルトのフォールバックになります。
Q：Global Colorsがリリースされる前は、カラーピッカーに色を保存する機能がありました。これは、すべてのカラーピッカーで自分のブランドカラーを常に利用できるようにすることで、デザインの一貫性を維持するための小さな方法でした。新しいカラーピッカーでは、この機能はなくなりました。私のブランドカラーをカラーピッカーに追加するための苦労はすべて失われたのでしょうか?
A：あなたの苦労は無駄にはなりません。Elementor 3.0にアップグレードすると、新しいグローバルカラーとカラーピッカーが導入されたときに、アップグレードのプロセスで自動的に保存した色がグローバルカラーパレットに追加されます。カラーピッカーを開かなくても、どの要素のカラーオプションもドロップダウンリストから簡単に選ぶことができます。
