Webflow共有ライブラリ機能でコンポーネントを複数サイトで使い回す方法
複数のサイトで同じボタンやナビゲーションを使いたいとき、それぞれを別々に管理すると更新が大変になります。Webflowの共有ライブラリは、元サイトのコンポーネントや変数などを、同じWorkspace内の別サイトで利用するための仕組みです。
共有できるもの
ライブラリにはコンポーネント、変数、アセット、フォント、タグスタイルなどを含められます。利用可能な内容や共有できるライブラリ数はWorkspaceプランにより異なるため、現在のプランと権限を確認します。共有ライブラリは有料Workspaceプランで利用できます。
共有とインストール
元サイトのLibrariesパネルで対象のリソースを確認し、Workspaceへの共有操作を行います。利用先サイトではLibrariesパネルの「Available to install」からライブラリを選択してインストールします。Workspaceをまたぐ共有には対応していません。
更新を反映する
メインコンポーネントや変数の変更は元サイトで行い、Librariesパネルから更新を共有します。利用先では変更内容を確認して更新を受け入れ、公開サイトへ反映するときは各サイトの公開操作が必要です。更新は自動的にすべての本番サイトへ反映されるわけではありません。
利用先では、共有コンポーネントのインスタンスをプロパティでカスタマイズできます。画像などがプロパティとして公開されていれば差し替えられますが、メインコンポーネントの構造変更は元サイトで行います。
対応要素と運用の注意点
共有ライブラリでは対応する要素が順次拡張されており、背景動画や検索などを含むコンポーネントも扱えるようになっています。以前は対象外だった背景動画・検索要素を含む既存のコンポーネントは、元サイトから次に更新を共有するとライブラリへ追加されます。利用先では更新内容を確認して受け入れ、動画の表示や検索の動作をチェックしましょう。
共通部品を整理するときは、コンポーネントの作成方法も参考になります。
まとめ
共有ライブラリは、同じWorkspace内のサイトでデザイン資産を再利用する仕組みです。元サイトでの変更、更新の共有、利用先での確認と受け入れ、公開までの流れをチームで決めておきましょう。
参考資料
Booostはノーコードツール「Webflow」に特化したWeb制作サービスです。
デザイン・マーケティング・翻訳の3つの最適化で、Webサイトの集客力を最大化します。
