WebflowとYoomの連携イメージ

【ノーコードで実現】Webflowと様々なアプリを連携して業務を自動化する方法

Yoomを詳しくみる
この記事のテンプレートを試す
WebflowとYoomの連携イメージ
アプリ同士の連携方法

2025-10-31

【ノーコードで実現】Webflowと様々なアプリを連携して業務を自動化する方法

y.akinaga

[[305359]]

Webflowで作成したサイトのフォームから問い合わせや申し込みが入るたびに、その内容を確認して手作業で顧客管理システムに情報を転記したり、関係者にチャットで通知したりといった対応に追われていませんか?
これらの定型的ながらも重要な作業は、時間がかかるだけでなく、入力ミスなどのヒューマンエラーを引き起こす原因にもなりがちです。

もし、<span class="mark-yellow">Webflowのフォーム送信をきっかけに、HubSpotなどのCRMツールへのコンタクト情報登録や、Discordといったチャットツールへの通知、さらにはZoomミーティングの設定までを自動化できる仕組み</span>があれば、こうした日々の煩わしい作業から解放されます。より戦略的なマーケティング活動や顧客対応といったコア業務に集中するための貴重な時間を確保できます。

今回ご紹介する自動化の設定は、プログラミングの知識がなくても簡単に設定可能です。
ぜひこの機会に導入して、Webサイト運用に関わる業務をさらに効率化しましょう!

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

Yoomには<span class="mark-yellow">Webflowと様々なアプリを連携して業務を自動化する様々な方法</span>が用意されています。「まずは試してみたい!」という方は、以下のバナーをクリックして、テンプレートを体験してみましょう!

[[305359]]

Webflowと他アプリを連携して業務を自動化する方法

Webflowのフォームが送信された際に、様々なアプリケーションと連携して後続の業務を自動化する方法を、具体的なテンプレートを交えてご紹介します。
Webサイトからのリード獲得後のアクションを効率化し、対応スピードを向上させることが可能です。
気になる内容があれば、ぜひクリックしてみてください!

データベース/CRMサービスにデータを自動登録する

<span class="mark-yellow">Webflowのフォームから送信された情報を、HubSpotなどのCRMサービスにコンタクト情報として自動で登録する</span>ことができます。手作業によるデータ入力の手間をなくし、入力ミスを防ぎながらリード情報を一元管理できるので、営業活動へのスムーズな連携が実現します。

[[305359]]

ミーティングツールで予定を自動作成する

<span class="mark-yellow">Webflowのフォームからデモや相談の申し込みがあった際に、Zoomミーティングを自動で作成し、参加用URLを発行する</span>ことができます。日程調整の手間を削減し、リードに対して迅速なアクションを取ることが可能になります。

[[305386]]

チャットツールに自動で通知する

<span class="mark-yellow">Webflowのフォームが送信された際に、その内容をDiscordなどのチャットツールに素早く通知する</span>設定です。担当者がスピーディーにリードの発生を把握し、迅速な初期対応を開始できるため、顧客満足度の向上にも繋がります。

[[305391]]

Webflowのフォーム送信をトリガーにHubSpotへコンタクトを自動登録するフローを作ってみよう

それではここからWebflowと様々なアプリを連携して業務を自動化する方法を紹介します。
今回はより具体的な業務例として、Webflowでフォームが送信された際に、その情報を基にHubSpotにコンタクト情報を自動で登録するフローを解説していきます!
ここではYoomを使用してノーコードで設定をしていくので、もしまだYoomのアカウントをお持ちでない場合は、こちらの登録フォームからアカウントを発行しておきましょう。
※今回連携するアプリの公式サイト:WebflowHubSpot

[Yoomとは]

フローの作成方法

今回は大きく分けて以下のプロセスで作成します。

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

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

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

それでは、ここから今回のフローで使用するアプリのマイアプリ登録方法を解説します。

Webflowのマイアプリ連携

アプリ一覧の検索窓から、Webflowを検索し、クリックします。

「アカウント名」と「アクセストークン」を設定します。
「アカウント名」は、任意で管理用名称を設定してください。

「アクセストークン」は、Webflowにログインして取得します。
Webflowにログインし、Site Settings から「Apps & Integrations」 を選択してください。

 API accessで「Generate API token」をクリックし、APIキーを発行しましょう。

名前は任意で設定可能です。
また、「CMS」「Forms」「Sites」の「Read and Write」権限を設定してください。

設定が完了したら「Generate token」で発行します。

発行されたAPIキーをコピーしましょう。

Yoomに戻り、コピーしたAPIキーを「アクセストークン」に貼り付けてください。
最後に「追加」をクリックします。

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

HubSpotのマイアプリ連携

以下の手順をご参照ください。

ステップ2:テンプレートをコピーする

続いてYoomのテンプレートをコピーします。
テンプレートは自動化の大枠があらかじめ作成されており、それに沿って設定するだけでフローが完成するため、初心者の方にもおすすめです!
以下バナーの「試してみる」をクリックしましょう。

[[305359]]

以下の画像のような画面が表示されたらテンプレートのコピーは完了です。

ステップ3:Webflowのトリガー設定

ここからはフローボットの設定を進めていきます。
Yoomのフローボットを動かす引き金となるアクションのことを「アプリトリガー」と呼びます。まずはこのトリガーの設定を行いましょう。
「フォームが送信されたら」をクリックしてください。

クリックすると以下の画面に切り替わります。
Webflowと連携するアカウントに間違いがないかを確認し、「次へ」をクリックしましょう。

アプリトリガーのAPI接続設定を行います。
「サイトID」は、入力欄をクリックして表示される候補から選択してください。候補は、連携しているアカウントに紐づいて表示されます。
ここまで設定が完了したら連携テストを行います。テストボタンをクリックしましょう。

テストに成功したら「次へ」をクリックしてください。

次のページに進んだらWebflowへ移動し、トリガーとなるイベント(フォームを受信)を実行してみましょう。
テスト送信するフォームの内容は、架空の情報(「山田テスト」や「テスト株式会社」など)でOKです。

送信が完了したらYoomに戻り、再びテストを実行しましょう。

テストが成功するとテスト成功画面と取得した値が表示され、Webflowのデータが確認できます。
「保存する」をクリックして完了です!

なお、ここで表示されている取得した値をそのままHubSpotへ自動登録可能です。
詳しく知りたい方は以下のリンク先をご覧ください。

また、Webflowをトリガーに設定した場合、テストが成功してもHubSpotへ連携したいデータが表示されない場合があります。
その場合は「+取得する値を追加」をクリックして情報を取得しましょう。
詳しい取得方法については、こちらの記事をご確認ください。

HubSpotへ連携したいデータの設定が完了したら「保存する」をクリックし、次へ進みます。

ステップ4:HubSpotのアクション設定

取得した情報を基に、HubSpotにコンタクトを自動作成する設定をしていきます。
「コンタクトの作成」を、クリックしてください。

クリックすると以下の画面に切り替わります。
HubSpotと連携するアカウントに間違いがないかを確認し、「次へ」をクリックしましょう。

作成するコンタクトの情報を設定していきます。
「会社名」は、取得した値を活用し設定しましょう。
取得した値を活用することで、固定値ではなく、トリガーが実行されるたびに最新の情報が反映されます。

その他の項目も、取得した値を活用し設定してください。
特に設定がいらない場合は、空白でも大丈夫です。

全ての設定が完了したら「テスト」を行いましょう。

テストに成功すると、以下の画面が表示されます。

また実際に、コンタクトが作成されるのでHubSpotを確認してみましょう。

確認できたら、Yoomに戻り「保存する」を押してください。

ステップ5:トリガーをONにして起動準備完了

これですべての設定が完了です。
設定が完了すると以下のようなメニューが表示されるので、トリガーをONにします。
作成したフローボットが正常に動作するか確認しておきましょう!お疲れさまでした。

Webflowを使った自動化例

Webflowの自動化を導入することで、フォーム送信や注文情報の管理、通知業務を効率化できます。
例えば、Webflowのフォーム送信内容を他ツールに連携したり、注文情報を他システムに登録することで、管理業務をスムーズに進められます。
顧客対応や社内連絡も効率化できるため、ECサイト運営者や営業担当者に特に有効です!

[[98784,98818,98815,103223,103531,247070,179780,179783,257418]]

まとめ

WebflowとHubSpotの連携を自動化することで、<span class="mark-yellow">これまでWebサイトのフォームから問い合わせがあるたびに行っていた、手作業での顧客情報転記の手間を削減し、入力ミスといったヒューマンエラーも防ぐことができます。</span>

これにより、マーケティングや営業の担当者はリード情報を素早く把握し、より迅速にアプローチを開始できるため、見込み顧客への対応スピードを向上させ、商談化率のアップに繋げることが可能です!

今回ご紹介したような業務自動化を実現できるノーコードツール「Yoom」は、プログラミングの知識がない方でも、画面の指示に従って操作するだけで直感的に業務フローを構築可能です。
もし自動化に少しでも興味を持っていただけたなら、ぜひこちらから無料登録して、Yoomがもたらす業務効率化を体験してみてください!

よくあるご質問

Q:フォームの回答内容によって処理を分けることはできますか?

A:可能です。
ミニプラン以上でご利用いただける「分岐設定」を活用することで、回答内容に応じて処理を分けることができます。
例えば「職種」や「エリア」によって分けることも可能です。

Q:Webflowのカスタムフィールドのデータも連携できますか?

A:はい、連携可能です。
ブログ内でご紹介した「取得する値を追加する方法」を使えば、Webflow のカスタムフィールドも自由に選択して取得できます。
そのため、任意のカスタムデータを問題なく取得し、連携することができます。

Q:連携が失敗した場合、エラーに気づく仕組みはありますか?

A:自動化が失敗した場合、Yoomに登録したメールアドレスに通知が届きます。
また、Yoom画面上に「認証に失敗しました」「設定内容に誤りがある」などのエラーメッセージが表示されます。
エラーが起きた際の対応方法については下記のサイトをご参照ください。

ヘルプページで解決しない場合は、サポート窓口を利用することもできます。

Yoomを使えば、今回ご紹介したような連携を
プログラミング知識なしで手軽に構築できます。
無料でYoomを試す
この記事を書いた人
y.akinaga
3年間動画制作に携わり、 視聴者の心を動かす表現を追求してきました。 その経験を活かしyoomの魅力や可能性を わかりやすく・魅力的に発信していきます。
タグ
Webflow
自動化
自動
連携
関連アプリ
アプリ連携
No items found.
Yoomのハイパーオートメーションとは?
従来のRPAでは単純な繰り返し作業しか自動化できず、その設定作業はとても複雑なものでした。
AI・API・RPA・OCRなど様々な技術を組み合わせた「ハイパーオートメーション」なら、これまでは実現できなかった多くの作業を、これまでよりも簡単に自動化することが可能です。
Yoomのハイパーオートメーションとは?
従来のRPAでは単純な繰り返し作業しか自動化できず、その設定作業はとても複雑なものでした。
AI・API・RPA・OCRなど様々な技術を組み合わせた「ハイパーオートメーション」なら、これまでは実現できなかった多くの作業を、これまでよりも簡単に自動化することが可能です。
Yoomについて詳しく見る
お役立ち資料
Yoomがわかる!資料3点セット
資料ダウンロード
3分でわかる!Yoomサービス紹介資料
資料ダウンロード
Before Afterでわかる!Yoom導入事例集
資料ダウンロード
お役立ち資料一覧を見る
Yoomとは?
これまでは実現できなかった多くの作業を、これまでよりも簡単に自動化することが可能です。
詳しくみる
詳しくみる