HubSpotとWebflowの連携イメージ
【簡単設定】HubSpotのデータをWebflowに自動的に連携する方法
Yoomを詳しくみる
この記事のテンプレートを試す
HubSpotとWebflowの連携イメージ
フローボット活用術

2025-10-23

【簡単設定】HubSpotのデータをWebflowに自動的に連携する方法

Yuna Matsukawa
Yuna Matsukawa

■概要

HubSpotで管理している製品情報を、Webflowで制作したサイトへ手作業で登録していませんか?この転記作業は時間がかかる上に、入力ミスや反映漏れのリスクも伴います。
このワークフローは、HubSpotとWebflowを連携させ、製品が作成された際に自動でWebflowのコレクションにアイテムを追加します。WebflowとHubspot間での手作業による登録フローを自動化し、業務効率の改善に貢献します。

■このテンプレートをおすすめする方

  • HubSpotの製品情報をWebflowサイトに手作業で反映させているWeb担当者の方
  • WebflowとHubSpotを活用した製品管理やサイト更新の効率化を図りたいマーケターの方
  • 製品登録時の入力ミスや更新漏れをなくし、正確な情報発信を実現したいEC担当者の方

■このテンプレートを使うメリット

  • HubSpotに製品が作成されると自動でWebflowにアイテムが追加されるため、これまで手作業で行っていた登録時間を短縮できます
  • 手作業によるデータ転記が不要になることで、入力間違いや更新漏れといったヒューマンエラーを防ぎ、データの正確性を保ちます

■フローボットの流れ

  1. はじめに、HubSpotとWebflowをYoomと連携します
  2. 次に、トリガーでHubSpotを選択し、「製品が作成されたら」というアクションを設定します
  3. 最後に、オペレーションでWebflowを選択し、「コレクションにアイテムを追加」アクションを設定し、HubSpotから取得した製品情報をマッピングします

※「トリガー」:フロー起動のきっかけとなるアクション、「オペレーション」:トリガー起動後、フロー内で処理を行うアクション

■このワークフローのカスタムポイント

  • Webflowの「コレクションにアイテムを追加」アクションを設定する際、HubSpotから取得した製品情報を、Webflowのコレクションで設定している任意のフィールドにマッピングしてください

■注意事項

  • Hubspot、WebflowのそれぞれとYoomを連携してください。
  • トリガーは5分、10分、15分、30分、60分の間隔で起動間隔を選択できます。
  • プランによって最短の起動間隔が異なりますので、ご注意ください。

「HubSpotに登録した製品情報を、Webflowで構築したサイトのCMSにも反映させたい」
「でも、毎回手作業でコピー&ペーストするのは時間がかかるし、入力ミスも怖い…」
このように、HubSpotとWebflow間でのデータ連携を手作業で行うことに、非効率さやストレスを感じていませんか?

もし、HubSpotのデータをトリガーにしてWebflowのCMSアイテムを自動で作成・更新する仕組みがあれば、こうした定型業務を減らすことができます。サイトコンテンツの管理やマーケティング業務の効率化につながり、より創造的な作業に時間を割けるようになるでしょう。

今回ご紹介する自動化の設定は、プログラミングの知識がなくてもノーコードで簡単に導入可能です。
これまで自動化に踏み出せなかった方でもすぐに実践できるため、ぜひこの機会に取り入れて業務をよりスムーズにしましょう。

とにかく早く試したい方へ

YoomにはHubSpotとWebflowを連携するためのテンプレートが用意されています。

今すぐ試したい方は以下よりバナーをクリックしてスタートしましょう!


■概要

HubSpotで管理している製品情報を、Webflowで制作したサイトへ手作業で登録していませんか?この転記作業は時間がかかる上に、入力ミスや反映漏れのリスクも伴います。
このワークフローは、HubSpotとWebflowを連携させ、製品が作成された際に自動でWebflowのコレクションにアイテムを追加します。WebflowとHubspot間での手作業による登録フローを自動化し、業務効率の改善に貢献します。

■このテンプレートをおすすめする方

  • HubSpotの製品情報をWebflowサイトに手作業で反映させているWeb担当者の方
  • WebflowとHubSpotを活用した製品管理やサイト更新の効率化を図りたいマーケターの方
  • 製品登録時の入力ミスや更新漏れをなくし、正確な情報発信を実現したいEC担当者の方

■このテンプレートを使うメリット

  • HubSpotに製品が作成されると自動でWebflowにアイテムが追加されるため、これまで手作業で行っていた登録時間を短縮できます
  • 手作業によるデータ転記が不要になることで、入力間違いや更新漏れといったヒューマンエラーを防ぎ、データの正確性を保ちます

■フローボットの流れ

  1. はじめに、HubSpotとWebflowをYoomと連携します
  2. 次に、トリガーでHubSpotを選択し、「製品が作成されたら」というアクションを設定します
  3. 最後に、オペレーションでWebflowを選択し、「コレクションにアイテムを追加」アクションを設定し、HubSpotから取得した製品情報をマッピングします

※「トリガー」:フロー起動のきっかけとなるアクション、「オペレーション」:トリガー起動後、フロー内で処理を行うアクション

■このワークフローのカスタムポイント

  • Webflowの「コレクションにアイテムを追加」アクションを設定する際、HubSpotから取得した製品情報を、Webflowのコレクションで設定している任意のフィールドにマッピングしてください

■注意事項

  • Hubspot、WebflowのそれぞれとYoomを連携してください。
  • トリガーは5分、10分、15分、30分、60分の間隔で起動間隔を選択できます。
  • プランによって最短の起動間隔が異なりますので、ご注意ください。

HubSpotとWebflowを連携してできること

HubSpotとWebflowのAPIを連携させることで、これまで手動で行っていた二つのツール間のデータ入力を自動化し、業務の効率を向上させることが可能になります。
例えば、HubSpotに新しい製品情報を登録した際に、その情報を自動でWebflowのCMSアイテムとして追加する、といった連携が実現可能です。

これから具体的な自動化の例を複数ご紹介しますので、ご自身の業務に近いものや、解決したい課題に合ったものがないか、ぜひチェックしてみてください!

Hubspotで製品が作成されたら、Webflowにアイテムを追加する

HubSpotに新しい製品情報を登録すると、その内容が自動でWebflowのCMSコレクションに追加されるフローです。

Webサイトへの製品情報掲載にかかる時間を減らし、手作業による入力ミスを防ぎます。
この仕組みによって、製品情報の更新や追加を迅速かつ正確にサイトへ反映できるようになります。


■概要

HubSpotで管理している製品情報を、Webflowで制作したサイトへ手作業で登録していませんか?この転記作業は時間がかかる上に、入力ミスや反映漏れのリスクも伴います。
このワークフローは、HubSpotとWebflowを連携させ、製品が作成された際に自動でWebflowのコレクションにアイテムを追加します。WebflowとHubspot間での手作業による登録フローを自動化し、業務効率の改善に貢献します。

■このテンプレートをおすすめする方

  • HubSpotの製品情報をWebflowサイトに手作業で反映させているWeb担当者の方
  • WebflowとHubSpotを活用した製品管理やサイト更新の効率化を図りたいマーケターの方
  • 製品登録時の入力ミスや更新漏れをなくし、正確な情報発信を実現したいEC担当者の方

■このテンプレートを使うメリット

  • HubSpotに製品が作成されると自動でWebflowにアイテムが追加されるため、これまで手作業で行っていた登録時間を短縮できます
  • 手作業によるデータ転記が不要になることで、入力間違いや更新漏れといったヒューマンエラーを防ぎ、データの正確性を保ちます

■フローボットの流れ

  1. はじめに、HubSpotとWebflowをYoomと連携します
  2. 次に、トリガーでHubSpotを選択し、「製品が作成されたら」というアクションを設定します
  3. 最後に、オペレーションでWebflowを選択し、「コレクションにアイテムを追加」アクションを設定し、HubSpotから取得した製品情報をマッピングします

※「トリガー」:フロー起動のきっかけとなるアクション、「オペレーション」:トリガー起動後、フロー内で処理を行うアクション

■このワークフローのカスタムポイント

  • Webflowの「コレクションにアイテムを追加」アクションを設定する際、HubSpotから取得した製品情報を、Webflowのコレクションで設定している任意のフィールドにマッピングしてください

■注意事項

  • Hubspot、WebflowのそれぞれとYoomを連携してください。
  • トリガーは5分、10分、15分、30分、60分の間隔で起動間隔を選択できます。
  • プランによって最短の起動間隔が異なりますので、ご注意ください。

Hubspotで新しい取引が作成されたら、Webflowにアイテムを追加する

HubHubSpotで新しい取引が作成されると、取引に関連する情報をWebflowのCMSアイテムとして自動追加するフローです。

導入事例や顧客紹介ページなどのコンテンツ作成が効率化されます。
営業部門が取得した最新の取引情報を、マーケティングコンテンツとしてWebサイトへ迅速に反映でき、部門間の情報共有もスムーズになります。


■概要

WebflowとHubSpotを連携して活用する中で、手作業でのデータ移行に手間を感じていませんか?HubSpotで管理する取引情報をWebflowサイトへ反映させる作業は、時間もかかり入力ミスの原因になりがちです。このワークフローは、HubSpotで新しい取引が作成されると、自動でWebflowのコレクションにアイテムを追加します。手動更新の手間を省き、サイトコンテンツを効率的かつ正確に充実させることが可能になります。

■このテンプレートをおすすめする方

  • HubSpotの取引情報をWebflowサイトに手動で反映させているWeb担当者の方
  • WebflowとHubSpotを活用し、コンテンツ更新のリードタイムを短縮したい方
  • データ転記によるミスをなくし、正確な情報発信を実現したいマーケティング担当者の方

■このテンプレートを使うメリット

  • HubSpotで取引が作成されると自動でWebflowにアイテムが追加され、これまで手作業で行っていたサイト更新の時間を短縮できます
  • 手動でのデータ転記が不要になることで、入力間違いや更新漏れなどのヒューマンエラーを防ぎ、コンテンツの品質を維持します

■フローボットの流れ

  1. はじめに、HubSpotとWebflowをYoomと連携します
  2. 次に、トリガーでHubSpotを選択し、「新しい取引が作成されたら」というアクションを設定します
  3. 最後に、オペレーションでWebflowを選択して「コレクションにアイテムを追加」のアクションを設定し、HubSpotから取得した取引情報を紐付けます

※「トリガー」:フロー起動のきっかけとなるアクション、「オペレーション」:トリガー起動後、フロー内で処理を行うアクション

■このワークフローのカスタムポイント

  • Webflowの「コレクションにアイテムを追加」オペレーションにて、アイテムを追加したいコレクションIDを任意で設定してください
  • HubSpotから取得した取引情報(取引名、金額など)を、Webflowサイトで表示したい項目に合わせて自由に紐付けることができます

■注意事項

  • Hubspot、WebflowのそれぞれとYoomを連携してください。
  • トリガーは5分、10分、15分、30分、60分の間隔で起動間隔を選択できます。
  • プランによって最短の起動間隔が異なりますので、ご注意ください。

HubSpotとWebflowの連携フローを作ってみよう

それでは、実際にHubSpotとWebflowを連携したフローを作成する手順をご紹介します。
今回は、特別な知識がなくても業務の自動化を実現できるノーコードツール「Yoom」を使用して設定を進めていきます。プログラミング経験がない方でもご安心ください。

もしまだYoomのアカウントをお持ちでない場合は、こちらの登録フォームからアカウントを発行しておきましょう。

[Yoomとは]

フローの作成方法

今回は「Hubspotで製品が作成されたら、Webflowにアイテムを追加する」フローを作成していきます!

作成の流れは大きく分けて以下の通りです。

  • HubSpotとWebflowのマイアプリ連携
  • 該当のテンプレートをコピーする
  • HubSpotのトリガー設定とWebflowのアクション設定
  • トリガーをONにして、フローが起動するかを確認する

■概要

HubSpotで管理している製品情報を、Webflowで制作したサイトへ手作業で登録していませんか?この転記作業は時間がかかる上に、入力ミスや反映漏れのリスクも伴います。
このワークフローは、HubSpotとWebflowを連携させ、製品が作成された際に自動でWebflowのコレクションにアイテムを追加します。WebflowとHubspot間での手作業による登録フローを自動化し、業務効率の改善に貢献します。

■このテンプレートをおすすめする方

  • HubSpotの製品情報をWebflowサイトに手作業で反映させているWeb担当者の方
  • WebflowとHubSpotを活用した製品管理やサイト更新の効率化を図りたいマーケターの方
  • 製品登録時の入力ミスや更新漏れをなくし、正確な情報発信を実現したいEC担当者の方

■このテンプレートを使うメリット

  • HubSpotに製品が作成されると自動でWebflowにアイテムが追加されるため、これまで手作業で行っていた登録時間を短縮できます
  • 手作業によるデータ転記が不要になることで、入力間違いや更新漏れといったヒューマンエラーを防ぎ、データの正確性を保ちます

■フローボットの流れ

  1. はじめに、HubSpotとWebflowをYoomと連携します
  2. 次に、トリガーでHubSpotを選択し、「製品が作成されたら」というアクションを設定します
  3. 最後に、オペレーションでWebflowを選択し、「コレクションにアイテムを追加」アクションを設定し、HubSpotから取得した製品情報をマッピングします

※「トリガー」:フロー起動のきっかけとなるアクション、「オペレーション」:トリガー起動後、フロー内で処理を行うアクション

■このワークフローのカスタムポイント

  • Webflowの「コレクションにアイテムを追加」アクションを設定する際、HubSpotから取得した製品情報を、Webflowのコレクションで設定している任意のフィールドにマッピングしてください

■注意事項

  • Hubspot、WebflowのそれぞれとYoomを連携してください。
  • トリガーは5分、10分、15分、30分、60分の間隔で起動間隔を選択できます。
  • プランによって最短の起動間隔が異なりますので、ご注意ください。

ステップ1:HubSpotとWebflowのマイアプリ連携

Yoomとそれぞれのアプリを連携して、アプリごとの操作を行えるようにしましょう。この設定は初回のみ必要です。
先ずは、基本的な設定方法を解説しているナビをご覧ください!

それでは、今回のフローで使用するHubSpotとWebflowのマイアプリ登録方法を解説していきます。

1.HubSpotの登録方法

HubSpotを検索すると下記画面が表示されるので、「Sign in to your HubSpot account」を選択しましょう。

HubSpotのログイン画面に移行したら、パスワードを入力してログインします。

続いて、連携したいアカウントをクリックしましょう。

チェックボックスをクリックして、「Connect app」を選択してください。

これでHubSpotのマイアプリ登録完了です。

2.Webflowの登録方法

先ほどのマイアプリ画面に戻り、今度はWebflowを検索しましょう。
アカウント名は、メールアドレスなど任意の名前を設定してください。
アクセストークンはWebflowにログインして発行し、ペーストします。

任意のアカウントでWebflowにログインし、「Site Settings」をクリック後「Generate API token」を押してください。

発行するAPIトークンに任意の名前を設定します。
「CMS」と「Site」の項目で「Read and Write」の権限を設定してから発行してください。
発行されたAPIトークンをコピーして、先ほどのYoomのWebflow新規登録画面にペーストしましょう。

最後に「追加」ボタンを押せば、Webflowの連携完了です!

ステップ2:テンプレートのコピー

Yoomのテンプレートを利用すれば、効率よく業務を自動化することが可能です。
下記テンプレートページにアクセスし、「このテンプレートを試してみる」をクリックし自動化をスタートしましょう。


■概要

HubSpotで管理している製品情報を、Webflowで制作したサイトへ手作業で登録していませんか?この転記作業は時間がかかる上に、入力ミスや反映漏れのリスクも伴います。
このワークフローは、HubSpotとWebflowを連携させ、製品が作成された際に自動でWebflowのコレクションにアイテムを追加します。WebflowとHubspot間での手作業による登録フローを自動化し、業務効率の改善に貢献します。

■このテンプレートをおすすめする方

  • HubSpotの製品情報をWebflowサイトに手作業で反映させているWeb担当者の方
  • WebflowとHubSpotを活用した製品管理やサイト更新の効率化を図りたいマーケターの方
  • 製品登録時の入力ミスや更新漏れをなくし、正確な情報発信を実現したいEC担当者の方

■このテンプレートを使うメリット

  • HubSpotに製品が作成されると自動でWebflowにアイテムが追加されるため、これまで手作業で行っていた登録時間を短縮できます
  • 手作業によるデータ転記が不要になることで、入力間違いや更新漏れといったヒューマンエラーを防ぎ、データの正確性を保ちます

■フローボットの流れ

  1. はじめに、HubSpotとWebflowをYoomと連携します
  2. 次に、トリガーでHubSpotを選択し、「製品が作成されたら」というアクションを設定します
  3. 最後に、オペレーションでWebflowを選択し、「コレクションにアイテムを追加」アクションを設定し、HubSpotから取得した製品情報をマッピングします

※「トリガー」:フロー起動のきっかけとなるアクション、「オペレーション」:トリガー起動後、フロー内で処理を行うアクション

■このワークフローのカスタムポイント

  • Webflowの「コレクションにアイテムを追加」アクションを設定する際、HubSpotから取得した製品情報を、Webflowのコレクションで設定している任意のフィールドにマッピングしてください

■注意事項

  • Hubspot、WebflowのそれぞれとYoomを連携してください。
  • トリガーは5分、10分、15分、30分、60分の間隔で起動間隔を選択できます。
  • プランによって最短の起動間隔が異なりますので、ご注意ください。

これで、テンプレートのコピーが完了しました!
下記画面が表示されるので「OK」ボタンをクリックして設定を進めましょう。

ステップ3:HubSpotに製品が作成されたら起動するトリガー設定

まず最初に、HubSpotのトリガー設定を行います!
「製品が作成されたら」という項目をクリックしましょう。

下記画面は初期設定されています。
情報に誤りが無いか確認し、次のページに進んでください。

トリガーの起動間隔は、5分、10分、15分、30分、60分の間隔から選択できます。
迅速なデータ連携のためにも、基本的には最短の起動間隔でご使用いただくのがおすすめです。
ご利用プランによって最短の起動間隔が異なりますので、ご注意ください。

続いて、トリガーの動作テストを行います。HubSpotにテスト用の商品を登録してください。
(テスト用のため架空の情報でOKです!)

今回は例として、下記画像のように商品を作成してみました。

再びYoomの画面に戻り、テストボタンを押してください。

テストが成功すると、HubSpotのデータが取得した値(アウトプット)に表示されるので確認後「保存する」ボタンを押しましょう。
※取得した値(アウトプット)とは、トリガーやオペレーション設定時に、「テスト」を実行して取得した値のことです。

尚、ここで取得した値は、この後の設定で利用することができます。
詳しくは、こちらのヘルプページをご確認ください。

ステップ4:Webflowのコレクションにアイテムを追加

次に、HubSpotで登録した商品情報をもとにWebflowのコレクションにアイテムとして自動で反映する設定を行いましょう!
「コレクションにアイテムを追加」という項目をクリックしてください。

下記画面も初期設定されています。
確認後、次のページに進みましょう。

サイトIDとコレクションIDは、枠内をクリックし表示された候補から選択します。

フィールドも、枠内をクリックし表示される候補から使用したいものを選択してください。

値には、設定したフィールドに自動登録したいHubSpotのデータを入力します。
下記画像のように設定すると、ステップ3で取得したアウトプットを活用し、HubSpotに登録した「製品名」を自動で登録することができますよ!
用途に合わせて取得したい値を設定してみましょう。

他にも自動取得したい項目があれば「+フィールド情報を追加」をクリックすることで追加可能です。

設定が完了したら、「テスト」ボタンをクリックしてください。
テストが成功すると、Webflowのコレクションにアイテムが自動で追加されるので確認してください。
確認できたらYoomの画面に戻って「保存する」ボタンを押してください。

ステップ5:トリガーをONにする

これで「Hubspotで製品が作成されたら、Webflowにアイテムを追加する」フローの完成です!
「トリガーをON」ボタンをクリックして、フローが正常に動作するか確認してみてください。

WebflowのデータをHubSpotに連携したい場合

今回はHubSpotからWebflowへデータを連携する方法をご紹介しました。
逆にWebflowの情報を起点としてHubSpotのデータを操作したい場合もあるかと思います。
Yoomではそうした逆方向の連携も簡単に実現できますので、下記のテンプレートも併せてご活用ください。

Webflowでアイテムが作成されたら、テキストを抽出してHubSpotで製品を作成する

WebflowのCMSで新しいアイテムが作成された際に、そのアイテム情報から特定のテキストを抽出し、HubSpotに新しい製品として自動で登録するフローです。Webサイト側で先行して公開したコンテンツ情報を、後からHubSpotの製品データベースへ手間なく同期できます。

手作業による二重入力をなくし、データの一貫性を保ちながら管理を効率化することが可能です。


■概要

Webflowで新しい製品やコンテンツのアイテムを公開した後、HubSpotにその情報を手作業で登録するのは手間がかかり、転記ミスが発生する原因にもなりかねません。このワークフローを活用することで、WebflowとHubSpotの連携を自動化し、Webflowでアイテムが公開されると、その内容からテキストを抽出し、HubSpotに製品として自動で作成します。これにより、データ入力の手間を省き、正確な情報管理を実現できます。

■このテンプレートをおすすめする方

  • WebflowとHubSpotを併用し、製品情報の手動登録に課題を感じている方
  • サイトのアイテム公開とCRMの製品登録の連携を自動化したいマーケティング担当者の方
  • WebflowからHubSpotへのデータ入力ミスを防ぎ、業務の正確性を高めたい方

■このテンプレートを使うメリット

  • Webflowでのアイテム公開を起点にHubSpotへ製品が自動登録されるため、手作業の時間を削減し、本来の業務に集中できます。
  • 手動でのデータ転記が不要になることで、入力情報の誤りや登録漏れといったヒューマンエラーを防ぎ、データの整合性を保ちます。

■フローボットの流れ

  1. はじめに、HubSpotとWebflowをYoomと連携します。
  2. 次に、トリガーでWebflowを選択し、「コレクションのアイテムが公開されたら」というアクションを設定します。
  3. 続いて、オペレーションでテキスト抽出機能を選択し、Webflowから取得した情報から必要なテキストを抽出します。
  4. 最後に、オペレーションでHubSpotを選択し、「製品を作成」アクションを設定して、抽出した情報を基に製品データを作成します。

※「トリガー」:フロー起動のきっかけとなるアクション、「オペレーション」:トリガー起動後、フロー内で処理を行うアクション

■このワークフローのカスタムポイント

  • Webflowから取得したアイテム情報のうち、HubSpotに登録したい情報をテキスト抽出オペレーションで任意に設定してください。
  • HubSpotで製品を作成する際に、前のステップで抽出したテキスト情報や、その他固定値などを組み合わせて製品情報を設定してください。

■注意事項

Webflowで新規注文が発生したら、HubSpotで注文を作成する

WebflowのEコマース機能で新規注文が入ったことをトリガーに、その注文情報をHubSpotに自動で作成・登録するフローです。この連携により、Webサイト経由の注文データを手動で入力することなく、HubSpotのCRM上で顧客情報や購買履歴として一元管理できます。

その後のフォローアップやマーケティング活動へスムーズに繋げることが可能です。


■概要

Webflowで構築したECサイトで新規注文が発生するたびに、手作業でHubSpotへ顧客情報や取引情報を入力するのは手間がかかる作業ではないでしょうか。この繰り返し作業は、入力ミスや対応漏れといったヒューマンエラーの原因にもなりかねません。このワークフローを活用することで、WebflowとHubSpotをスムーズに連携させ、新規注文があった際にHubSpotへ取引を自動で作成できます。これにより、手作業による入力業務から解放され、より正確で迅速な顧客管理を実現します。

■このテンプレートをおすすめする方

  • WebflowとHubSpotを連携させ、注文管理から顧客管理までを効率化したいEC担当者の方
  • 手作業によるデータ入力の時間を削減し、ヒューマンエラーを防止したいと考えている方
  • SaaS間のデータ連携を自動化し、本来注力すべきコア業務の時間を確保したいと考えている方

■このテンプレートを使うメリット

  • Webflowでの新規注文をトリガーに、自動でHubSpotに取引が作成されるため、これまで手作業で行っていたデータ入力の時間を短縮することができます
  • 手作業による転記が不要になることで、注文情報や顧客情報の入力間違いといったヒューマンエラーのリスクを軽減し、データの正確性を保ちます

■フローボットの流れ

  1. はじめに、WebflowとHubSpotをYoomと連携します
  2. 次に、トリガーでWebflowを選択し、「新規注文が発生したら」というアクションを設定します
  3. 最後に、オペレーションでHubSpotを選択し、「取引の作成」アクションを設定し、トリガーで取得した注文情報を紐付けます

※「トリガー」:フロー起動のきっかけとなるアクション、「オペレーション」:トリガー起動後、フロー内で処理を行うアクション

■このワークフローのカスタムポイント

  • HubSpotで取引を作成するアクションでは、取引の名前、金額、取引ステージといった項目を、ユーザーの運用に合わせて設定してください
  • 各項目には、トリガーであるWebflowの新規注文から取得した顧客情報や注文内容といった値を、自由にマッピングすることが可能です

■注意事項

  • Webflow、HubSpotのそれぞれとYoomを連携してください。

HubSpotやWebflowを活用したその他の自動化テンプレート

HubSpotやWebflowを使えば、営業やマーケティングの定型作業をもっとシンプルにできます。日々の情報整理や共有が自動化されることで、時間を節約しながら正確な業務が進められます。

HubSpotを使った便利な自動化例

HubSpotと他のツールを組み合わせると、コンタクト管理や取引情報の整理が効率的に行えます。通知やフォルダ作成などを自動化することで、チーム内での情報共有や管理の手間を減らせます。


◼️概要

Hubspotのコンタクトページから、Zoomのミーティングを登録し、Gmailで会議情報を対象のコンタクトに送付するフローボットです。

Zoomの会議URLの発行と招待メールの送付をHubSpot上から実施することが可能です。

Zoomの会議情報の設定やGmailのメール内容を自由に変更してご利用ください。

◼️注意事項

・HubSpot、Zoom、GmailそれぞれとYoomの連携が必要です。

・YoomのChrome拡張機能をダウンロードしてご利用ください。


■概要

HubSpotに新規コンタクトが登録されたら、LINE WORKSに通知することができます。

通知を受け取ることで、スピーディーなフォローアップが可能になります。

通知先のトークルームは任意のトークルームを指定することが可能です。

■設定方法

HubSpotとLINE WORKSをYoomと連携してください。(マイアプリ連携)

HubSpotのトリガーで「新規コンタクトが登録されたら」を選択し、連携アカウントを設定してください。

LINE WORKSの「トークルームにメッセージを送信」オペレーションで、連携アカウント、送信先のルーム、メッセージ内容を設定してください。

HubSpotから取得したコンタクト情報をメッセージに含めることができます。

トリガーをONに変更されると、HubSpotに新規コンタクトが登録された際に、その情報を含む通知が指定したLINE WORKSルームに送信されます。

■注意事項

・各アプリで連携するアカウント情報の設定が必要です。

・LINE WORKSの設定情報を変更してご利用ください。


■概要

HubSpotに新しい商談情報が登録されるたびに、手作業でGoogleカレンダーに予定を入れ、Slackで関係者に通知する業務に手間を感じていませんか。このワークフローを活用すれば、HubSpotへのコンタクト登録・更新をトリガーに、Googleカレンダーへの予定作成とSlackへの通知までの一連の流れを自動化し、これらの定型業務を効率化します。

■このテンプレートをおすすめする方

  • HubSpotでの商談管理とGoogleカレンダーでの予定管理を手作業で行っている方
  • 営業チーム内での迅速な情報共有のためSlackを活用しているマネージャーの方
  • ツール間の連携を自動化し、営業活動の効率化を目指している担当者の方

■このテンプレートを使うメリット

  • HubSpotへの情報登録だけで、カレンダーへの予定作成や通知が自動で実行されるため、これまで手作業に費やしていた時間を短縮することができます。
  • 手動での情報転記が不要になるため、予定の登録漏れや関係者への通知忘れといったヒューマンエラーの発生を防ぎ、業務の正確性が向上します。

■フローボットの流れ

  1. はじめに、HubSpot、Google スプレッドシート、Googleカレンダー、SlackをそれぞれYoomと連携します。
  2. 次に、トリガーでHubSpotを選択し、「コンタクトが作成または更新されたら」というアクションを設定します。
  3. 続いて、オペレーションでHubSpotの「コンタクトのカスタムプロパティを取得」を設定し、詳細情報を取得します。
  4. 次に「分岐機能」を使い、取得した情報をもとに後続の処理を条件に応じて分岐させます。
  5. 次に、Google スプレッドシートの「範囲に値を入力」や「レコードを取得する」を設定し、情報を記録・参照します。
  6. 次に、Googleカレンダーの「予定を作成」アクションを設定し、取得した情報をもとに予定を登録します。
  7. 最後に、Slackの「チャンネルにメッセージを送る」アクションで、関係者へ自動で通知します。

※「トリガー」:フロー起動のきっかけとなるアクション、「オペレーション」:トリガー起動後、フロー内で処理を行うアクション

■このワークフローのカスタムポイント

  • Slackでメッセージを送るアクションでは、通知先のチャンネルを任意のチャンネルに設定することが可能です。
  • 通知メッセージの本文は、固定のテキストだけでなく、トリガーや前のアクションで取得したHubSpotのコンタクト情報(会社名や担当者名など)を変数として埋め込むことで、状況に応じた柔軟な内容にカスタマイズできます。

注意事項

  • HubSpot、Googleカレンダー、Slack、Google スプレッドシートのそれぞれとYoomを連携してください。
  • 分岐はミニプラン以上のプランでご利用いただける機能(オペレーション)となっております。フリープランの場合は設定しているオペレーションはエラーとなりますので、ご注意ください。
  • ミニプランなどの有料プランは、2週間の無料トライアルを行うことが可能です。無料トライアル中には制限対象のアプリや機能(オペレーション)を使用することができます。
  • トリガーは5分、10分、15分、30分、60分の間隔で起動間隔を選択できます。・プランによって最短の起動間隔が異なりますので、ご注意ください。
  • このフローでは、Google スプレッドシートを用いて協定世界時(UTC)から日本標準時(JST)に日時を変換しています。変換方法については、こちらをご参照ください。

■概要

HubSpotに新しいコンタクトを追加するたびに、手動でGoogle Driveに顧客管理用のフォルダを作成する作業は手間がかかり、フォルダの作成漏れや命名規則の間違いといったミスにつながることも少なくありません。このワークフローを活用すれば、HubSpotへのコンタクト登録をトリガーとして、Google Driveに自動でフォルダを作成する一連の流れを構築できるため、こうした課題を解消し、よりスムーズな顧客管理を実現します。

■このテンプレートをおすすめする方

  • HubSpotで顧客管理を行い、Google Driveで関連資料を保管している営業担当者の方
  • 手作業によるHubSpotからGoogle Driveへの情報反映に手間やミスを感じている方
  • SaaS間の連携を自動化し、ノンコア業務の時間を削減したいと考えているチームリーダーの方

■このテンプレートを使うメリット

  • HubSpotにコンタクトが作成されると自動でGoogle Driveにフォルダが作成されるため、これまで手作業に費やしていた時間を短縮できます。
  • 手作業によるフォルダの作成漏れや、コンタクト名とフォルダ名の入力間違いといったヒューマンエラーの防止に繋がります。

■フローボットの流れ

  1. はじめに、HubSpotとGoogle DriveをYoomと連携します
  2. 次に、トリガーでHubSpotを選択し、「新しいコンタクトが作成されたら」というアクションを設定します
  3. 最後に、オペレーションでGoogle Driveの「フォルダを作成する」アクションを設定し、HubSpotのコンタクト情報を元にしたフォルダを作成します

※「トリガー」:フロー起動のきっかけとなるアクション、「オペレーション」:トリガー起動後、フロー内で処理を行うアクション

■このワークフローのカスタムポイント

  • Google Driveでフォルダを作成するオペレーションにおいて、任意のフォルダIDを指定することで、特定の親フォルダ内に新しいフォルダを作成することが可能です。例えば、「顧客管理」フォルダの中に会社名フォルダを作成するなど、自社の運用に合わせた設定ができます。

注意事項

  • HubSpot、Google DriveのそれぞれとYoomを連携してください。
  • トリガーは5分、10分、15分、30分、60分の間隔で起動間隔を選択できます。
  • プランによって最短の起動間隔が異なりますので、ご注意ください。

■概要

HubSpotに新規コンタクトが登録されたら、指定のSlackチャンネルに通知します。

通知先のSlackチャンネルは任意のチャンネルを指定することが可能です。

設定方法

1.HubSpotとSlackをYoomと連携してください。(マイアプリ連携)

2.HubSpotのトリガーで「新規コンタクトが登録されたら」を選択し、連携アカウントを設定してください。

3.Slackの「Slackに通知」オペレーションで、連携アカウント、送信先のチャンネル、メッセージ内容を設定してください。HubSpotから取得したコンタクト情報をメッセージに含めることができます。

4.トリガーをONに変更すると、HubSpotに新規コンタクトが登録された際に、その情報を含む通知が指定したSlackチャンネルに送信されます。

注意事項

・各アプリのオペレーションで連携するアカウント情報の設定が必要です。

・Slackの投稿先のチャンネルIDを任意の値に置き換えてご利用ください。

Webflowを使った便利な自動化例

Webflowと外部サービスを連携すると、フォーム入力や注文データを自動的に整理できます。営業記録や顧客データの入力作業を省けるため、業務全体の流れがスムーズになります。


■概要

Webflowのフォームが送信されたらAirtableに追加するフローです。

■このテンプレートをおすすめする方

1.Webサイトの運営でWebflowを活用している方

・Webflowのフォームから問い合わせやリードを収集している企業

・Webflowのフォーム内容をAirtableに手動で追加している方

2.Airtableでフォーム情報を管理している方

・Airtableで顧客情報やリード情報を管理している方

・Airtableへのデータ入力を自動化したい方

■このテンプレートを使うメリット

Webflowから送信されたフォーム内容は、ダッシュボードや指定のメールアドレスから確認することができます。
しかし、毎回ツールにログインしてフォーム内容を確認するのは非効率的です。

このテンプレートは、Webflowから送信されたフォームを自動でAirtableに追加することができます。
Airtableに自動でフォーム情報が追加されることで、スピーディーにフォーム内容を確認することができ、対応状況を可視化することができます。

また、手動による転記作業も不要となるため、ヒューマンエラーの発生を防止し、業務の効率化を図ることが可能です。

■注意事項

・Webflow、AirtableのそれぞれとYoomを連携してください。


■概要

Webflowのフォームが送信されたらGoogleスプレッドシートに追加するフローです。

■このテンプレートをおすすめする方

1.Webflowを活用してWebサイトを構築している方

・Webflowで自社サイトやサービスを運営している企業

・フォーム内容をGoogleスプレッドシートに自動で追加したい方

2.Googleスプレッドシートで情報管理をしている方

・GoogleスプレッドシートでWebflowのフォーム内容を管理している方

・顧客情報の管理でGoogleスプレッドシートを活用している方

■このテンプレートを使うメリット

Webflowのフォームは、問い合わせやリード情報の取得に役立ちますが、都度ダッシュボードから確認するのは手間です。
また、Googleスプレッドシートにフォーム内容を手動で追加している場合、時間がかかり非効率的です。

このテンプレートは、Webflowのフォーム内容を自動でGoogleスプレッドシートに追加することができるため、ダッシュボードからフォーム内容を確認する手間を減らすことができます。
データ入力も自動化することができるため、手作業に比べてデータの正確性が高まり、情報管理を効率化することができます。

また、Googleスプレッドシートへの情報の追加がスピーディーに行われるため、チーム内の情報共有をスムーズにすることが可能です。

■注意事項

・Webflow、GoogleスプレッドシートのそれぞれとYoomを連携してください。


■概要

Webflowのフォームが送信されたらSalesforceに追加するフローです。

■このテンプレートをおすすめする方

1.Webflowを使ってサイト管理をしている方

・問い合わせやリード情報の取得でフォームを活用している企業

・問い合わせやリードの対応をスピーディーに行いたい方

2.業務でSalesforceを使用している方

・Salesforceへのフォーム内容の追加を自動化したい方

・顧客情報をSalesforceで一元管理している営業チーム

■このテンプレートを使うメリット

Webflowに送信されたフォーム内容の確認は、ダッシュボードや指定のメールアドレスから確認できますが、毎回アクセスするのは非効率的です。
また、フォーム内容をSalesforceに手動で追加している場合、誤入力や入力漏れといったヒューマンエラーの発生が懸念されます。

このテンプレートは、SalesforceにWebflowのフォーム内容を自動で追加することができます。
手動によるデータ入力が不要となるため、データを正確にSalesforceに反映することができ、問い合わせやリード情報の管理が楽になります。

フローの後にチャットツールと連携することで、問い合わせやリード情報の反映後に特定のメンバーに情報共有することが可能です。

■注意事項

・Webflow、SalesforceのそれぞれとYoomを連携してください。

・Salesforceはチームプラン・サクセスプランでのみご利用いただけるアプリとなっております。フリープラン・ミニプランの場合は設定しているフローボットのオペレーションやデータコネクトはエラーとなりますので、ご注意ください。

・チームプランやサクセスプランなどの有料プランは、2週間の無料トライアルを行うことが可能です。無料トライアル中には制限対象のアプリを使用することができます。


■概要

Webflowで新しいコンテンツを公開するたびに、チームへの共有を手作業で行うことに手間を感じていませんか。手動での連絡は時間がかかるだけでなく、共有漏れなどのミスにつながる可能性もあります。このワークフローは、WebflowのAPIを活用し、コレクションアイテムが公開されると自動でMicrosoft Teamsへ通知する仕組みを構築するため、このような課題を解消し、迅速で確実な情報共有を実現します。

■このテンプレートをおすすめする方

  • Webflowでコンテンツを管理しており、Microsoft Teamsでの共有を自動化したい方
  • WebflowのAPIを利用した業務効率化に関心がある、Webサイトの運営担当者の方
  • 手作業による情報伝達のタイムラグや、共有漏れといった課題を解消したい方

■このテンプレートを使うメリット

  • Webflowでアイテムが公開されると自動で通知が送られるため、手作業での連絡に費やしていた時間を他の業務に充てることができます。
  • 手動での共有作業が不要になることで、通知の漏れや遅延といったヒューマンエラーを防ぎ、確実な情報伝達を実現します。

■フローボットの流れ

  1. はじめに、WebflowとMicrosoft TeamsをYoomと連携します。
  2. 次に、トリガーでWebflowを選択し、「コレクションのアイテムが公開されたら」というアクションを設定します。
  3. 最後に、オペレーションでMicrosoft Teamsを選択し、「チャネルにメッセージを送る」アクションを設定して、任意のチャネルに通知を送信します。

※「トリガー」:フロー起動のきっかけとなるアクション、「オペレーション」:トリガー起動後、フロー内で処理を行うアクション

■このワークフローのカスタムポイント

  • Webflowのトリガー設定では、通知の対象とするサイトIDとコレクションIDを任意で指定することが可能です。
  • Microsoft Teamsのオペレーションでは、通知を送信するチームやチャネルを自由に設定できます。
  • 通知メッセージの本文は、固定のテキストだけでなく、Webflowから取得したアイテム名や公開URLといった情報を変数として埋め込むなど、柔軟なカスタマイズが可能です。

■注意事項

  • Webflow、Microsoft TeamsのそれぞれとYoomを連携してください。
  • Microsoft365(旧Office365)には、家庭向けプランと一般法人向けプラン(Microsoft365 Business)があり、一般法人向けプランに加入していない場合には認証に失敗する可能性があります。
  • トリガーは5分、10分、15分、30分、60分の間隔で起動間隔を選択できます。
  • プランによって最短の起動間隔が異なりますので、ご注意ください。

■概要

Webflowで注文が発生したらMicrosoft Excelに追加するフローです。

■このテンプレートをおすすめする方

1.Webflowで自社の商品やサービスの販売をしている方

・自社のWebサイトを運営している企業

・注文情報の管理効率化でWebflowとMicrosoft Excelの連携を自動化したい方

2.受注業務でMicrosoft Excelを利用している方

・Webflowからの注文情報をMicrosoft Excelで一元管理している方

・Microsoft Excelへの情報入力を手動で行っている方

■このテンプレートを使うメリット

Microsoft ExcelでWebflowからの注文情報を一元管理している場合、手動によるデータ入力は時間がかかり非効率的です。
また、手動によるデータ入力はヒューマンエラーが発生や作業効率の低下を招く可能性があります。

Microsoft Excelへのデータ入力を自動化したい方に、このテンプレートは適しています。
Webflowで注文が発生するとMicrosoft Excelに自動で注文情報を追加することができるため、手動による作業を効率化することが可能です。

Microsoft Excelへのデータ入力が自動化されることで、作業時間の削減とヒューマンエラーの発生を低減することができます。

■注意事項

・Webflow、Microsoft ExcelのそれぞれとYoomを連携してください。

・Microsoft365(旧Office365)には、家庭向けプランと一般法人向けプラン(Microsoft365 Business)があり、一般法人向けプランに加入していない場合には認証に失敗する可能性があります。

まとめ

HubSpotとWebflowの連携を自動化することで、これまで手作業で行っていた製品情報や取引情報のデータ転記作業をなくし、ヒューマンエラーの発生を防ぐことができます。

これにより、Webサイトへの情報反映が迅速かつ正確になり、担当者はコンテンツの入力作業から解放されるでしょう。
マーケティング戦略の策定や顧客分析といった、より付加価値の高いコア業務に集中できる環境が整いますよ!

今回ご紹介したような業務自動化は、ノーコードツール「Yoom」を活用することで、プログラミングの知識がない方でも直感的な操作で簡単に構築可能です。
もし日々の繰り返し作業の自動化に少しでも興味を持っていただけたなら、ぜひこちらから無料登録して業務の効率化を体験してみてください。

よくあるご質問

Q:特定の条件を満たしたデータだけを連携させることは可能ですか?

A:はい、可能です。
フローに「分岐」を設定することで、特定の条件(価格帯や作成日等)を満たす案件の情報だけをWebflowのコレクションにアイテムを作成することができます。
「分岐」の設定方法について、詳しくはこちらをご覧ください。

Q:連携が失敗した場合、エラーに気づくための通知機能はありますか?

A:連携が失敗すると、Yoomに登録する際に設定したメールアドレスに通知が届きます。通知内容にはエラーになったオペレーションも記載されているので、エラーの発生個所がすぐに確認可能です。
通知先は、メールの他にSlackやChatworkも設定できます。詳しい設定方法はこちらのヘルプページをご参照ください。

Q:連携に必要なHubSpotやWebflow側の料金プランはありますか?

A:HubSpotとWebflowの連携は、Yoomのフリープランで利用できるアプリです。Yoomには様々な有料プランがあり、各プランごとに利用可能な機能や、毎月の無料タスク数・無料ライセンス数が異なります。
詳しい機能比較や料金プランについては、こちらのヘルプページをご確認ください。

Yoomを使えば、今回ご紹介したような連携を
プログラミング知識なしで手軽に構築できます。
無料でYoomを試す
この記事を書いた人
Yuna Matsukawa
Yuna Matsukawa
これまでは、人材業界で営業・営業事務を経験してきました。 前職の経験を踏まえ、さまざまな企業が抱えている悩みは「業務の自動化」により軽減できると実感しています。 Yoomを通して、皆様のお悩みを少しでも解決できるよう、日々情報を発信していきます!
タグ
HubSpot
連携
Webflow
自動
自動化
関連アプリ
お役立ち資料
Yoomがわかる!資料3点セット
Yoomがわかる!資料3点セット
資料ダウンロード
3分でわかる!Yoomサービス紹介資料
3分でわかる!Yoomサービス紹介資料
資料ダウンロード
Before Afterでわかる!Yoom導入事例集
Before Afterでわかる!Yoom導入事例集
資料ダウンロード
お役立ち資料一覧を見る
詳しくみる