Webflowでのページビルディング:マーケティングチームをサポートする新機能

techfather.com
October 15, 2024

参考動画

ページビルディングとは?

Webflowの「ページビルディング」機能では、複数のマーケティング担当者が同時に「ビルドモード」で作業を行うことができます。これにより、イベントマーケターやグロースマーケター、プロダクトマーケターが、それぞれの担当ページを同時に作成・ビルドすることが可能になります。この機能によって、マーケティングチームはスピーディーかつ自信を持って新しいページを作成し、デザイナーも安心して任せることができるのです。

WebflowとレガシーCMSとの比較

Webflowのページビルディング機能は、従来のレガシーCMS(例えばWordPress)とは異なり、ユーザーにとって直感的でスピーディーなページ作成を可能にします。WordPressのようなレガシーCMSでは、ページを作成するためにはテーマやプラグインのカスタマイズが必要で、技術的な知識が求められることが多く、マーケティング担当者が自由にページを作成することが難しいケースがありました。特に、複数のマーケターが同時にページを編集する場合、変更内容が競合するリスクもあり、デザインの整合性を保つのが困難でした。

一方で、Webflowのページビルディング機能では、デザイナーがあらかじめ設定したコンポーネントとテンプレートを使用することで、マーケターはデザインの整合性を崩すことなくページを迅速に作成できます。ビルドモードを利用することで、複数のマーケターが同時に作業を行っても競合が発生しにくく、またデザインのガイドラインを厳守しながらページを作成できるため、全体的な効率と品質が向上します。

Webflowを使用する以前は、マーケティング担当者が新しいページを作成するたびにデザイナーに依頼する必要があり、その結果として、ページの公開に時間がかかっていました。しかし、Webflowのページビルディング機能を導入することで、マーケティング担当者がデザイナーに依存することなく、独立してページを作成・更新することが可能になりました。これにより、マーケティング活動の迅速な展開と柔軟な対応が可能になったのです。

ページビルディングの利点:デザインガイドラインの確立とマーケティングの効率化

Webflowのページビルディング機能を利用することで、デザイナーはデザインシステムのガイドラインを作成し、マーケターやクライアント、技術的な知識の少ないチームメンバーがブランドの一貫性を保ちながら自分たちでページを作成できるようになります。これにより、新しいキャンペーン、実験、プロダクトリリースなどを効率よく実行することが可能になります。

デザイナー、開発者、またはパートナーとして、ページテンプレートやコンポーネントを作成し、チームメンバーをサイトに招待してデザインシステムを逸脱することなく貢献してもらうことができます。一方で、マーケターやクライアントは、デザイナーが承認したビルディングブロックを使用して、ランディングページや競合ページ、機能・ソリューションページ、イベントページなどを構築・編集し、公開前にチームにレビューを依頼することもできます。

デザイナー向けのページビルディング

  • ページテンプレートとビルディングブロックの作成デザイナーは、マーケティング担当者やクライアントが共通のマーケティングページ(ランディングページ、競合ページ、機能・ソリューションページ、イベントページなど)を作成・編集するために使用できる静的ページテンプレートとコンポーネントを作成します。静的ページテンプレートから作成されたすべてのページは、テンプレート上で設定したページ設定(SEO設定やカスタムコードなど)を継承します。
  • 注意点: ページテンプレートは静的ページのみ作成可能で、コレクションページには使用できません。また、最大40個の静的ページテンプレートを作成することが可能です。
  • マーケターやクライアントがページにコンポーネントを追加できるようにするためには、「ページスロット」要素をAddパネルからドラッグすることができます。ページスロットは、チームメンバーが既存のコンポーネントを追加するためのプレースホルダーとして機能します。ページスロットは通常の「スロット」要素とは異なり、マーケターはスロット要素にはコンポーネントを追加できない点に注意してください。
  • ページにページスロットがない場合、マーケティング担当者はそのページの編集のみが可能です。
  • マーケティングチームメンバーやクライアントをサイトに追加サイトにチームメンバーやクライアントを追加するには:
    • サイト設定 > サイトアクセス に移動します。
    • 「人を追加」をクリックします。
    • チームのドロップダウンから追加したいメンバーを選び、サイトロールを「マーケター」として設定します。
    • なお、サイトにメンバーを追加するためには、メンバーがすでにワークスペースの一員である必要があります。

マーケター向けのページビルディング

マーケターは、デザイナーが作成したテンプレートとビルディングブロックを使用して、ドラッグ&ドロップで自信を持って迅速にページを作成・編集できます。これにより、サイトを壊す心配なくページを作成できるのです。

静的ページテンプレートから新しいページを作成し、ページ設定を編集・調整します。そして、ページスロット内で既存のコンポーネントを追加、移動、または削除し、必要に応じてコンポーネントのプロパティ値をカスタマイズすることができます。ただし、ページスロットは通常のスロット要素とは異なり、マーケターはスロット要素にコンポーネントを追加することはできません。また、ページにページスロットがない場合、そのページのコンテンツのみを編集できます。

注意点: エンタープライズサイトのマーケターは、ブランチでページを作成し、レビューと承認を依頼することができますが、ブランチをマージすることはできません。デザイナーが変更を承認した後、ブランチをマージする必要があります。

複数のマーケターが異なるページ(または同じページ)で同時に作業することが可能です。しかし、複数のマーケターが同じページで同時に作業する場合、作業内容の競合が発生するリスクがあります。例えば、一人のマーケターが編集していたコンポーネントインスタンスを別のマーケターが削除する可能性があります。このため、複数のマーケターが同じページで作業している場合、元に戻す(Undo)およびやり直し(Redo)の操作は無効化されています。

変更内容は他のチームメンバーのデザイナーモードにもリアルタイムで同期されます。例えば、ページスロットにコンポーネントを追加すると、そのコンポーネントは他のチームメンバーのキャンバスにもリアルタイムで表示されます。

ページの作成が完了したら、チームにレビューとフィードバックを求めることができます。

デザイナーが気をつけるべきポイント

  • 静的ページテンプレートから作成されたページは、そのテンプレートから独立したページとなります。そのため、テンプレートに変更が加わっても、既存のページには影響しません。このため、デザイナーはテンプレートを変更した場合には、以前に作成されたページを再確認し、必要に応じて更新する必要があります。
  • コンポーネントのプロパティを削除すると、そのプロパティに対する全ての変更がサイト全体から削除されるため、チームと事前に連絡を取って注意を促すことが重要です。
  • すべての変更がデザイナーモードにライブ同期されるわけではありません。例えば、デザイナーがメインコンポーネントに変更を加えた場合、マーケターがそのコンポーネントをページに追加しようとすると、そのコンポーネントが古くなっている旨の通知が表示され、ブラウザを更新してコンポーネントを最新の状態にする必要があります。新しく作成されたページも、ブラウザのセッション間では同期されないため、他のチームメンバーにはページをリフレッシュまたは再読み込みするまで表示されません。

まとめ

Webflowのページビルディング機能を使用することで、マーケティングチームは簡単に新しいページを作成でき、デザインの一貫性も保つことが可能です。デザイナーは、マーケターが使いやすいようにコンポーネントとページテンプレートを設定することで、マーケティング活動を支援できます。この機能を活用し、スピーディーかつ効率的にWebページを作成していきましょう。さらに、従来のレガシーCMSに比べて、デザインとマーケティングの連携が強化され、チーム全体の生産性が向上することが期待されます。

参考情報

https://www.youtube.com/watch?v=iHhYB3Hy-Kk

techfather.com
October 15, 2024