コンポーネントスタイルのバリエーションが利用可能になりました！

2025-03-14

※この記事は2024年11月19日にWebflowが公開した下記アップデート情報・ニュースを日本語訳したものです（一部加筆・修正あり）

‍

今年のWebflow Confでコンポーネントスタイルのバリアントを発表しましたが、現在ではすべてのお客様にご利用いただけるようになりました。

コンポーネントは、サイトのデザインを忠実に保ちながらコンテンツをカスタマイズできる、サイトの再利用可能な構成要素です。

以前は、コンポーネントがさまざまなコンテキストに対して異なるデザインだった場合、同じコンポーネントの複数のバージョンを作成して管理するか、可視性プロパティやカスタムクラス属性を含む複雑な回避策を使用する必要がありました。

コンポーネントスタイルバリアントにより、このプロセスが大幅に簡素化され、1つのコンポーネントに対して複数のスタイルオプションを定義できるようになります。

たとえば、ソリッドスタイルとアウトラインスタイルのボタンや、水平レイアウトと垂直レイアウトのカードなどです。

これらのコンポーネントの検索と構築がより効率的になるだけでなく、バリアントはベースへの変更を継承するため、デザインの一貫性を保つのに役立ちます。

‍

バリアントは組み合わせてネストされたコンポーネントに適用することもできるため、さまざまなシナリオに合わせて組み合わせることができます。

たとえば、見出しにタイポグラフィのバリアント、カードにレイアウトのバリアント、カード内にさまざまな色のバリアントがあるセクションを作成できます。

これは、デザイナーが保守するコンポーネントが少なくなり、またチームの他のメンバーが精査するコンポーネントも少なくなり、全員の柔軟性が高まることを意味します。

‍

ベータ版に参加したパートナーの何人かは次のように言っています。

コンポーネントスタイルのバリアントは、私たちのチームにとって画期的なものであり、クライアントやパートナーが簡単に管理できる堅牢なデザインシステムを設計および展開する能力を与えてくれます。—Ilya Kroogman、The Digital Panda創設者

コンポーネントスタイルのバリアントにより、コンポーネントを使用してページを作成する際にクライアントに高い柔軟性を提供できるようになりました。以前は、小さな違いごとに複数のコンポーネントを作成するか、カスタム要素のクラス属性を使用する必要がありましたが、これはクライアントにとって複雑すぎました。今では、シンプルな選択要素を使用して、コンポーネントのスタイルやレイアウトを簡単に変更できます。—Kyle Craven、デザイナー & Webflow開発者

‍

‍