WebflowとAirtableの連携イメージ
【ノーコードで実現】WebflowのデータをAirtableに自動的に連携する方法
Yoomを詳しくみる
この記事のテンプレートを試す
WebflowとAirtableの連携イメージ
フローボット活用術

2025-10-23

【ノーコードで実現】WebflowのデータをAirtableに自動的に連携する方法

Kumiko Tsukamoto
Kumiko Tsukamoto

「Webflowで作成したサイトのフォームから問い合わせがあったら、その都度Airtableに手作業で転記している…」
「WebflowのCMSアイテムを更新するたびに、Airtableの管理データベースにも同じ内容を入力していて、二度手間になっている…」
このように、WebflowとAirtableを併用する中で、データの二重入力や手作業での転記に多くの時間を費やしていませんか?

もし、Webflowで発生したイベントをきっかけに、自動でAirtableのデータベースにレコードを追加・更新する仕組みがあれば、こうした定型的な作業からの解放に繋がります。

入力ミスの心配を軽減し、創造的なWebサイトの改善やコンテンツ企画といったコア業務に集中できる時間を確保できるでしょう。

今回ご紹介する自動化の設定は、プログラミングの知識がなくても直感的に設定できます。これまで自動化を諦めていた方でも簡単に導入できますので、ぜひこの機会に業務を効率化させましょう!

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

YoomにはWebflowとAirtableを連携するためのテンプレートが用意されているので、今すぐ試したい方は以下よりバナーをクリックしてスタートしましょう!


■概要

Webflowで構築したサイトのコンテンツ管理に、データベースとしてAirtableを利用しているものの、情報の同期を手作業で行うことに手間を感じていませんか?
手作業でのデータ転記は時間がかかるだけでなく、入力ミスといったヒューマンエラーの原因にもなり得ます。このワークフローを活用すれば、WebflowとAirtableをAPIで連携させ、コレクションアイテムの作成をトリガーにAirtableへレコードを自動で作成するため、こうした課題を円滑に解消します。

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

  • WebflowとAirtableを活用しており、データ入力の手間を削減したいWebサイト担当者の方
  • WebflowのCMS機能とAirtableのデータベース機能を連携させ、手作業による転記ミスをなくしたい方
  • ノーコードツールを活用して、Webflowでのコンテンツ更新とAirtableでのデータ管理を自動化したい方

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

  • Webflowでアイテムを作成するだけでAirtableへ自動でレコードが作成されるため、データ転記作業の時間を短縮することができます。
  • 手作業でのデータ入力が不要になることで、入力ミスや項目漏れといったヒューマンエラーの発生を防ぎ、データの正確性を保ちます。

■フローボットの流れ

  1. はじめに、WebflowとAirtableをYoomと連携します。
  2. 次に、トリガーでWebflowを選択し、「コレクションのアイテムが作成されたら」というアクションを設定します。
  3. 最後に、オペレーションでAirtableの「レコードを作成」アクションを設定し、トリガーで取得した情報を元にレコードが作成されるように設定します。

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

  • Airtableでレコードを作成するオペレーションでは、レコードを追加したいベースとテーブルを任意で指定してください。
  • レコードの各フィールドに、トリガーであるWebflowから取得したアイテム名や詳細などのどの情報を紐付けるかを設定します。

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

■注意事項

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

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

WebflowとAirtableのAPIを連携すれば、Webflowで発生したイベントのデータをAirtableに自動的に連携することが可能になります。これにより、これまで手作業で行っていたデータ入力や転記作業をなくし、ヒューマンエラーの防止や業務の迅速化に繋がります。

ここでは具体的な自動化例を複数ご紹介しますので、気になる内容があれば、ぜひクリックしてみてください!

Webflowでコレクションのアイテムが作成されたら、Airtableでレコードを作成する

WebflowのCMSコレクションに新しいアイテム(ブログ記事、製品情報など)が追加されるたびに、その情報を自動でAirtableの指定したテーブルにレコードとして作成する連携です。

この自動化により、CMSのコンテンツ情報をAirtable上で一元管理する際の手間を削減し、データの二重入力や転記ミスを防ぐことができます。


■概要

Webflowで構築したサイトのコンテンツ管理に、データベースとしてAirtableを利用しているものの、情報の同期を手作業で行うことに手間を感じていませんか?
手作業でのデータ転記は時間がかかるだけでなく、入力ミスといったヒューマンエラーの原因にもなり得ます。このワークフローを活用すれば、WebflowとAirtableをAPIで連携させ、コレクションアイテムの作成をトリガーにAirtableへレコードを自動で作成するため、こうした課題を円滑に解消します。

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

  • WebflowとAirtableを活用しており、データ入力の手間を削減したいWebサイト担当者の方
  • WebflowのCMS機能とAirtableのデータベース機能を連携させ、手作業による転記ミスをなくしたい方
  • ノーコードツールを活用して、Webflowでのコンテンツ更新とAirtableでのデータ管理を自動化したい方

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

  • Webflowでアイテムを作成するだけでAirtableへ自動でレコードが作成されるため、データ転記作業の時間を短縮することができます。
  • 手作業でのデータ入力が不要になることで、入力ミスや項目漏れといったヒューマンエラーの発生を防ぎ、データの正確性を保ちます。

■フローボットの流れ

  1. はじめに、WebflowとAirtableをYoomと連携します。
  2. 次に、トリガーでWebflowを選択し、「コレクションのアイテムが作成されたら」というアクションを設定します。
  3. 最後に、オペレーションでAirtableの「レコードを作成」アクションを設定し、トリガーで取得した情報を元にレコードが作成されるように設定します。

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

  • Airtableでレコードを作成するオペレーションでは、レコードを追加したいベースとテーブルを任意で指定してください。
  • レコードの各フィールドに、トリガーであるWebflowから取得したアイテム名や詳細などのどの情報を紐付けるかを設定します。

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

■注意事項

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

Webflowで新規注文が発生したら、Airtableでレコードを作成する

WebflowのEコマース機能で新しい注文が発生した際に、注文情報を自動でAirtableの受注管理テーブルにレコードとして作成する連携です。

手動での注文情報の転記作業が不要になるため、受注処理の初動を迅速化し、入力ミスなく正確な顧客・注文データをデータベースに蓄積できます。


■概要

Webflowで構築したECサイトで新規注文が入るたびに、その情報を手作業でAirtableのデータベースに転記していませんか?こうした繰り返し作業は時間がかかるだけでなく、入力ミスといったヒューマンエラーの原因にもなりかねません。このワークフローは、WebflowとAirtableをノーコードで連携し、注文情報の転記作業を自動化するためのものです。手作業によるデータ管理から解放され、より重要な業務に集中できる環境を整えます。

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

  • Webflowで構築したサイトの注文情報をAirtableで管理しているEC担当者の方
  • WebflowとAirtable間のデータ転記作業に時間と手間がかかっている方
  • 手作業によるデータ入力ミスをなくし、注文管理の精度を高めたいと考えている方

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

  • Webflowでの新規注文をトリガーに、自動でAirtableへレコードが作成されるため、手作業での転記業務にかかる時間を短縮します。
  • システムが自動でデータを連携するため、コピー&ペーストによる入力ミスや対応漏れといったヒューマンエラーを防ぎ、データの正確性を保ちます。

■フローボットの流れ

  1. はじめに、WebflowとAirtableをYoomと連携します。
  2. 次に、トリガーでWebflowを選択し、「新規注文が発生したら」というアクションを設定します。
  3. 最後に、オペレーションでAirtableを選択し、「レコードを作成」アクションを設定します。ここで、トリガーで取得した注文情報をどのフィールドに登録するかを設定します。

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

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

  • Airtableで「レコードを作成」するアクションを設定する際、Webflowのトリガーで取得した注文情報(顧客名、商品名、金額など)を、Airtableのどのフィールドに登録するかを任意で設定してください。

■注意事項

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

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

それでは、さっそく実際にWebflowとAirtableを連携したフローを作成してみましょう!今回はYoomを使用して、ノーコードでWebflowとAirtableの連携を進めていきますので、もしまだYoomのアカウントをお持ちでない場合は、こちらの登録フォームからアカウントを発行しておきましょう。

[Yoomとは]

フローの作成方法

今回は「Webflowでコレクションのアイテムが作成されたら、Airtableでレコードを作成する」フローを作成していきます!
作成の流れは大きく分けて以下です。

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


■概要

Webflowで構築したサイトのコンテンツ管理に、データベースとしてAirtableを利用しているものの、情報の同期を手作業で行うことに手間を感じていませんか?
手作業でのデータ転記は時間がかかるだけでなく、入力ミスといったヒューマンエラーの原因にもなり得ます。このワークフローを活用すれば、WebflowとAirtableをAPIで連携させ、コレクションアイテムの作成をトリガーにAirtableへレコードを自動で作成するため、こうした課題を円滑に解消します。

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

  • WebflowとAirtableを活用しており、データ入力の手間を削減したいWebサイト担当者の方
  • WebflowのCMS機能とAirtableのデータベース機能を連携させ、手作業による転記ミスをなくしたい方
  • ノーコードツールを活用して、Webflowでのコンテンツ更新とAirtableでのデータ管理を自動化したい方

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

  • Webflowでアイテムを作成するだけでAirtableへ自動でレコードが作成されるため、データ転記作業の時間を短縮することができます。
  • 手作業でのデータ入力が不要になることで、入力ミスや項目漏れといったヒューマンエラーの発生を防ぎ、データの正確性を保ちます。

■フローボットの流れ

  1. はじめに、WebflowとAirtableをYoomと連携します。
  2. 次に、トリガーでWebflowを選択し、「コレクションのアイテムが作成されたら」というアクションを設定します。
  3. 最後に、オペレーションでAirtableの「レコードを作成」アクションを設定し、トリガーで取得した情報を元にレコードが作成されるように設定します。

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

  • Airtableでレコードを作成するオペレーションでは、レコードを追加したいベースとテーブルを任意で指定してください。
  • レコードの各フィールドに、トリガーであるWebflowから取得したアイテム名や詳細などのどの情報を紐付けるかを設定します。

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

■注意事項

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

ステップ1:マイアプリ連携を行う

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

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

1.Webflowとの連携

アプリ一覧の画面に出たら、右上にある検索ボックスに「Webflow」と入力し、アイコンを見つけてクリックします。

アカウント名にはメールアドレスなど任意の名前を、アクセストークンはWebflowにログインして発行し、ペーストします。

任意のアカウントでWebflowにログインし、「Site Settings」をクリックして表示される以下の画面から「Generate API token」をクリックしてください。

発行するAPIトークンに任意の名前を設定し、「CMS」と「Site」の項目で「Read and Write」の権限を設定してから発行しましょう。

発行されたAPIトークンをコピーして、Yoomの連携画面にペースト後「追加」ボタンを押せばWebflowとの連携は完了です!

2.Airtableとの連携

先ほどと同じ手順で、マイアプリ連携からAirtable(OAuth)と書かれたアプリアイコンを探してクリックしてください。
任意のAirtableでログインすると、YoomがAirtableにアクセス権限を求める画面が表示されます。「アクセスを許可する」をクリックしましょう。

「マイアプリに登録しました。」と表示されれば、Airtableとの連携は完了です!

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

Yoomには様々なアプリを活用した自動化のテンプレートが用意されています。今回は以下のテンプレートを試してみましょう。
Yoomにログインした状態で、バナーの「試してみる」をクリックしてみてください。


■概要

Webflowで構築したサイトのコンテンツ管理に、データベースとしてAirtableを利用しているものの、情報の同期を手作業で行うことに手間を感じていませんか?
手作業でのデータ転記は時間がかかるだけでなく、入力ミスといったヒューマンエラーの原因にもなり得ます。このワークフローを活用すれば、WebflowとAirtableをAPIで連携させ、コレクションアイテムの作成をトリガーにAirtableへレコードを自動で作成するため、こうした課題を円滑に解消します。

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

  • WebflowとAirtableを活用しており、データ入力の手間を削減したいWebサイト担当者の方
  • WebflowのCMS機能とAirtableのデータベース機能を連携させ、手作業による転記ミスをなくしたい方
  • ノーコードツールを活用して、Webflowでのコンテンツ更新とAirtableでのデータ管理を自動化したい方

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

  • Webflowでアイテムを作成するだけでAirtableへ自動でレコードが作成されるため、データ転記作業の時間を短縮することができます。
  • 手作業でのデータ入力が不要になることで、入力ミスや項目漏れといったヒューマンエラーの発生を防ぎ、データの正確性を保ちます。

■フローボットの流れ

  1. はじめに、WebflowとAirtableをYoomと連携します。
  2. 次に、トリガーでWebflowを選択し、「コレクションのアイテムが作成されたら」というアクションを設定します。
  3. 最後に、オペレーションでAirtableの「レコードを作成」アクションを設定し、トリガーで取得した情報を元にレコードが作成されるように設定します。

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

  • Airtableでレコードを作成するオペレーションでは、レコードを追加したいベースとテーブルを任意で指定してください。
  • レコードの各フィールドに、トリガーであるWebflowから取得したアイテム名や詳細などのどの情報を紐付けるかを設定します。

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

■注意事項

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

自動でYoomの画面に遷移して、以下のポップアップが表示されたらテンプレートのコピーは成功です!「OK」をクリックして次のステップに進みましょう。

ステップ3:アプリトリガーを設定する

Yoomのフローボットを動かす引き金となるアクションのことを「アプリトリガー」と呼びます。
このフローボットでトリガーになっている、Webflowの「コレクションのアイテムが作成されたら」というアクションを設定していきましょう。

タイトルを任意で設定し、Webflowと連携するアカウントやアクション内容を確認したら「次へ」を押してください。

トリガーの対象となる、WebflowのサイトIDを「候補」から選択します。

「テスト」ボタンを押して、「テスト成功」の文字が出たら「次へ」で進みます。

ここで一度Webflowにログインし、該当サイト内でテスト用のアイテムを作成しておきましょう。アプリトリガーを動かす、「Webflowでアイテムが作成されたら」という条件を満たすためです。

Webflowのコレクションにアイテムを作成できたら、Yoomの設定画面に戻って「テスト」ボタンを押してみてください。
「取得した値」として、以下のようにWebflowに作成したテストの内容が反映されていれば成功です!

Yoomではこの「取得した値」を、フローボット内の他のアクションで活用できる「アウトプット」と定義しています。
取得し値とは?

【Tips】
アウトプットは各アクションで取得でき、取得したアウトプットはそれ以降のアクションで活用可能です。つまり、ここで取得したアウトプットをAirtableに自動登録可能となります!

ここまで確認できたら、ページ最下部の「保存する」ボタンをクリックしてください。

ステップ4:Airtableでレコードを作成する

Webflowにアイテムが作成されたという情報をYoomで受け取ったら、その情報を活用してAirtableにレコードを作成していきましょう。

タイトルを任意で設定し、Airtableと連携するアカウントやアクション内容を確認したら「次へ」を押してください。

「ベースID」と「テーブルID」には、Airtableで更新したいデータベースに直接アクセスし、URLから抽出した文字列を入力します。

次に、Webflowの情報を入力していくフィールド情報について設定していきましょう。

「フィールド名」は先ほど指定したAirtableのデータベースを確認して、更新したいフィールド名を直接入力してください。
「値」には、前のステップで取得した値から該当する情報を入力しましょう。

ここで取得した値を用いることで、今後新たにWebflowにアイテムが作成される度に、フィールド内に作成される値が更新されていきます。

【Tips】
このようにアウトプットを活用することで最新のWebflowのデータをその都度Airtableへ登録可能となります。なお、テキストを直接入力した部分は固定値とされるため、アウトプットを活用せず設定を行うと毎回同じWebflowのデータが登録されてしまうので注意が必要です。


今回は以下のように設定してみました。

他にもAirtableに追加したいフィールドがある場合は、フィールド設定画面の下にある「+フィールド情報を追加」をクリックしてください。

必要な設定ができたら、「テスト」ボタンを押してみましょう。テストが成功すると、取得した値としてAirtableに作成されたレコードのIDが表示されます。

試しにAirtableにログインして、該当データベースにアクセスしてみましょう。しっかりWebflowのアイテム名やSlugが反映されていますね。

ここまで確認できたら「保存する」をクリックしてください。

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

お疲れさまでした!すべての必要な設定を完了すると、以下のポップアップが表示されます。「トリガーをON」をクリックして、フローボットを動かしはじめましょう。

これでWebflowのコレクションにアイテムが追加されたら、自動でAirtableにレコードが作成されるようになりました。

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

今回はWebflowからAirtableへデータを連携する方法をご紹介しましたが、逆にAirtableからWebflowへのデータ連携を実施したい場合は、下記のテンプレートも併せてご利用ください。
Airtableをマスターデータベースとして活用し、Webサイトのコンテンツを効率的に管理・更新したい場合に便利です。

Airtableでレコードが登録されたら、Webflowのコレクションにアイテムを追加する

Airtableのテーブルに新しいレコードが追加された際に、その情報を基にWebflowのCMSコレクションへ自動でアイテムを追加する連携です。

この仕組みを活用することで、Airtable上で管理しているコンテンツ情報をWebflowに自動で反映させ、サイト更新の手間を削減します。


■概要

Airtableで管理しているデータをWebflowのCMSに手作業で登録していませんか?この単純作業は時間がかかるだけでなく、コピー&ペーストによる入力ミスも起こりがちです。このワークフローを活用すれば、WebflowとAirtableのデータ連携を自動化できます。Airtableに新しいレコードが登録されると、その内容が自動でWebflowのコレクションアイテムとして追加されるため、手入力の手間やヒューマンエラーをなくし、コンテンツ管理業務を効率化します。

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

  • WebflowとAirtableでコンテンツ管理を行っており、手作業でのデータ移行に手間を感じている方
  • WebflowとAirtableを連携させ、コンテンツ更新時のヒューマンエラーを未然に防ぎたいと考えている方
  • ノーコードでサイト運営業務を効率化し、より創造的な業務に時間を割きたいと考えている方

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

  • Airtableへのレコード登録をトリガーにWebflowへアイテムが自動で追加されるため、データ入力の時間を短縮できます
  • 手作業によるデータ転記が不要になることで、入力ミスや更新漏れといったヒューマンエラーの防止に繋がります

■フローボットの流れ

  1. はじめに、AirtableとWebflowをYoomと連携します
  2. 次に、トリガーでAirtableを選択し、「レコードが登録されたら」というアクションを設定します
  3. 最後に、オペレーションでWebflowを選択し、「コレクションにアイテムを追加」アクションを設定し、トリガーで取得したAirtableのレコード情報をアウトプットとして設定します

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

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

  • Webflowの「コレクションにアイテムを追加」アクションでは、Airtableから取得したどのデータを、Webflowコレクションのどのフィールド(項目名、本文など)に紐付けるかをそれぞれ設定してください

■注意事項

  • Airtable、WebflowのそれぞれとYoomを連携してください。
  • トリガーは5分、10分、15分、30分、60分の間隔で起動間隔を選択できます。
  • プランによって最短の起動間隔が異なりますので、ご注意ください。
  • Airtableのアウトプットの取得方法は下記を参考にしてください。
    https://intercom.help/yoom/ja/articles/5404443

Airtableでレコードが更新されたら、Webflowのコレクションのアイテムを更新する

Airtable上の既存レコードが更新された場合に、その変更内容をWebflowの対応するコレクションアイテムに自動で反映させる連携です。

例えば、Airtableで製品価格や在庫情報を更新するだけでWebサイトの情報も即座に更新されるため、情報の鮮度を保ち、手動での更新漏れや反映のタイムラグを防ぐことができます。


■概要

Webflowで構築したサイトのCMSとしてAirtableを活用しているものの、データの同期を手作業で行うことに手間を感じていませんか?情報の更新漏れや入力ミスは、サイトの信頼性にも関わるため避けたい課題です。このワークフローは、そうしたWebflowとAirtable間の連携における課題を解決します。Airtableのレコードが更新されると、関連するWebflowのコレクションアイテムが自動で更新されるため、手作業による運用の手間やミスをなくし、効率的なサイト管理を実現します。

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

  • Webflowで構築したサイトのCMSとしてAirtableを連携させているWeb担当者の方
  • Airtableのデータ更新後、Webflowへの手動での反映作業に時間と手間がかかっている方
  • 手作業によるデータ更新ミスをなくし、サイト運用の属人化を解消したいチームリーダーの方

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

  • Airtableのレコード更新をトリガーにWebflowのアイテムが自動で更新されるため、これまで手作業で行っていたデータ同期の時間を削減できます
  • 手動でのコピー&ペースト作業が不要になることで、入力ミスや更新漏れといったヒューマンエラーを防ぎ、データの正確性を保ちます

■フローボットの流れ

  1. はじめに、AirtableとWebflowをYoomと連携します
  2. 次に、トリガーでAirtableを選択し、「レコードが更新されたら」というアクションを設定します
  3. 最後に、オペレーションでWebflowを選択し、「コレクションのアイテムを更新」アクションを設定します

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

  • Webflowの「コレクションのアイテムを更新」アクションでは、どのアイテムをどの内容で更新するかを設定する必要があります。トリガーであるAirtableで取得したレコードの情報(更新された項目など)を活用し、更新したいWebflowのコレクションアイテムとフィールドをそれぞれ指定してください

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

■注意事項

  • Airtable、WebflowのそれぞれとYoomを連携してください。
  • トリガーは5分、10分、15分、30分、60分の間隔で起動間隔を選択できます。
  • プランによって最短の起動間隔が異なりますので、ご注意ください。
  • Airtableのアウトプットの取得方法は下記を参考にしてください。
    https://intercom.help/yoom/ja/articles/5404443

WebflowやAirtableのAPIを使ったその他の自動化例

WebflowやAirtableのAPIを活用することで、フォーム情報や商品データの管理、顧客データの更新などの業務をスムーズに自動化できます。Yoomにはこれらの業務を効率化できるテンプレートが多数用意されているので、ぜひ活用してください!

Webflowを使った自動化例

Webflowでの自動化を導入すると、フォーム送信やアイテム作成に伴う業務を効率化できます。
たとえば、フォーム送信内容を自動的に要約してメール通知したり、HubSpotやStripeで作成されたデータをWebflowに反映させることで、手作業の入力を省力化できます。
アイテム作成時にMicrosoft Teamsへ通知すれば、チーム内の情報共有もスムーズに行えます。


■概要

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分の間隔で起動間隔を選択できます。
  • プランによって最短の起動間隔が異なりますので、ご注意ください。

■概要

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

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

1.Webflowを導入してWebサイトの運営を行っている方

・問い合わせやリード情報の管理を自動化したい方

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

2.Microsoft Excelで情報管理をしている方

・Microsoft Excelでフォーム内容の一元管理をしている方

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

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

Webflowのフォームを利用することで、問い合わせやリード情報の収集を効率的に行うことができますが、毎回Webflowにログインして確認するのは手間です。
また、フォーム内容を管理するためにMicrosoft Excelに手動で追加している場合、誤入力や入力漏れが発生する可能性があります。

Microsoft Excelへのフォーム内容の追加を自動化したい方に、このテンプレートは適しています。
Webflowのフォーム内容が自動でMicrosoft Excelに追加されるため、毎回Webflowにログインする手間が不要となり、業務の効率化を図ることができます。

また、データ入力が自動化されることで、正確なデータがMicrosoft Excelに反映されるようになり、データの正確性を保つことができます。

■注意事項

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

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


■概要

Stripeで新しい商品を追加するたびに、Webflowで構築したECサイトにも手作業でアイテムを登録するのは手間がかかり、入力ミスや登録漏れの原因にもなりがちです。このワークフローは、そうした課題を解決するために設計されました。Stripeで商品が作成されると、その情報を基にWebflowのコレクションへアイテムが自動で追加されるため、商品登録に関する一連の作業を効率化し、手作業によるミスを防ぎます。

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

  • WebflowとStripeでECサイトを運営しており、商品登録を手作業で行っている方
  • StripeからWebflowへの情報転記における、入力ミスや反映漏れをなくしたい方
  • WebflowとStripeを連携させ、ECサイトの商品管理をより効率的に行いたい方

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

  • Stripeでの商品作成をトリガーにWebflowへアイテムが自動追加されるため、これまで手作業で行っていた登録作業の時間を短縮できます
  • システムが自動でデータを連携するため、手作業による商品情報の入力ミスや登録漏れを防ぎ、データの一貫性を保つことに繋がります

■フローボットの流れ

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

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

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

  • Webflowの「コレクションにアイテムを追加」アクションでは、Stripeから取得した商品名や価格だけでなく、商品説明や画像など、サイトに表示したい項目を任意で追加設定することが可能です

■注意事項

  • Stripe、WebflowのそれぞれとYoomを連携してください。
  • Stripeはチームプラン・サクセスプランでのみご利用いただけるアプリとなっております。フリープラン・ミニプランの場合は設定しているフローボットのオペレーションやデータコネクトはエラーとなりますので、ご注意ください。
  • チームプランやサクセスプランなどの有料プランは、2週間の無料トライアルを行うことが可能です。無料トライアル中には制限対象のアプリを使用することができます。
  • WebflowのDescriptionを取得する方法は下記を参照ください。
    https://intercom.help/yoom/ja/articles/5404443

■概要

Webflowでアイテムを公開した際、チームへの共有を手作業で行い、手間や連絡漏れを感じていませんか?特にMicrosoft Teamsを利用しているチームでは、この情報共有の遅れが作業の非効率に繋がることもあります。
このワークフローを活用すれば、Webflowでアイテムが公開されると同時にMicrosoft Teamsの指定チャネルへ自動で通知されます。これにより、手作業による共有の手間をなくし、チーム全体の円滑な情報連携を実現します。

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

  • Webflowでアイテムを公開後、Microsoft Teamsへの共有を手作業で行っているWeb担当者の方
  • サイト公開に関するチーム内の情報共有を迅速化し、作業連携をスムーズにしたい方
  • Webflowと連携したチームの業務フローを自動化し、生産性を高めたいと考えているWeb管理者の方

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

  • Webflowでのアイテム公開をトリガーに、自動でMicrosoft Teamsに通知されるため、これまで共有作業にかけていた時間を短縮できます
  • 手作業による連絡で起こりがちな共有漏れや遅延を防ぎ、チーム全体へ正確な情報を素早く周知することが可能になります

■フローボットの流れ

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

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

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

  • Microsoft Teamsの「チャネルにメッセージを送る」アクションでは、通知するメッセージ内容を任意で設定できます
  • Webflowのトリガーで取得したアイテム名やURLといった動的な情報をメッセージに含めることで、より具体的で分かりやすい通知を作成することが可能です

■注意事項

  • Webflow、Microsoft TeamsのそれぞれとYoomを連携してください。
  • Microsoft365(旧Office365)には、家庭向けプランと一般法人向けプラン(Microsoft365 Business)があり、一般法人向けプランに加入していない場合には認証に失敗する可能性があります。

■概要

Webflowで構築したサイトのフォームから届く長文のお問い合わせについて、内容を把握するために都度全文を確認する作業に手間を感じていませんか。このワークフローは、Webflowのフォームが送信されると、その内容をOpenAIが自動で要約し、指定のメールアドレスへ通知するものです。WebflowとOpenAIを連携させることで、問い合わせ内容の迅速な把握と、スピーディーな一次対応の実現を支援します。

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

  • Webflowで作成したフォームからの問い合わせ対応に時間がかかっているWebサイト担当者の方
  • WebflowとOpenAIを連携させ、問い合わせ対応の初動を早めたいと考えている方
  • フォームから送られる内容の確認と担当者への共有を手作業で行っているチームのリーダーの方

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

  • Webflowのフォーム送信後、OpenAIが自動で内容を要約するため、長文を読む時間を短縮し、迅速な状況把握が可能になります
  • 要点がまとめられた状態で通知されるため、重要な情報の見落としや確認漏れといったリスクの軽減に繋がります

■フローボットの流れ

  1. はじめに、OpenAIとWebflowをYoomと連携します
  2. 次に、トリガーでWebflowを選択し、「フォームが送信されたら」というアクションを設定します
  3. 次に、オペレーションでOpenAIの「テキストの生成(Chat completion)」アクションを設定し、フォームの送信内容を要約するように指示します
  4. 最後に、Yoomの「メールを送る」アクションを設定し、OpenAIが生成した要約文を指定のメールアドレスに通知します

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

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

  • OpenAIの「テキストの生成(Chat completion)」アクションでは、どのような要約をさせたいか、プロンプト(指示文)を任意の内容で設定してください。また、利用するモデルIDも候補から選択が可能です
  • Yoomの「メールを送る」アクションでは、通知先のメールアドレスや件名、本文などを自由に設定できます。本文には前のオペレーションでOpenAIが生成した要約結果を含めるように設定してください

■注意事項

  • Webflow、OpenAIのそれぞれとYoomを連携してください。
  • Webflowから送信されたフォームの内容を取得する方法は下記を参照ください。
    https://intercom.help/yoom/ja/articles/5404443
  • ChatGPT(OpenAI)のアクションを実行するには、OpenAIのAPI有料プランの契約が必要です。(APIが使用されたときに支払いができる状態)
    https://openai.com/ja-JP/api/pricing/
  • ChatGPTのAPI利用はOpenAI社が有料で提供しており、API疎通時のトークンにより従量課金される仕組みとなっています。そのため、API使用時にお支払いが行える状況でない場合エラーが発生しますのでご注意ください。

Airtableを使った自動化例

Airtableの自動化により、フォームや注文データの登録、ステータス更新時の他システム反映を簡単に行えます。
WordPressやWix、BASEから取得したデータを自動でAirtableに反映させることで、情報管理の手間を削減。
さらに、レコード更新内容をGoogle スプレッドシートや会計システムに連携させることで、データ管理やチーム共有を効率化できます。


■概要

Airtableでステータスが更新されたらfreee会計に取引先を登録するフローです。

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

1.Airtableを業務に使用している方

・取引企業の情報の一元管理を行う方

・売上や取引のデータを管理している方

2.freee会計を活用している方

・取引に関連する売り上げの管理を行う方

・取引先ごとに登録管理を行っている方


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

freee会計は取引に関わるデータの管理に有効的なツールです。
しかし、Airtableでステータスの更新ごとにfreee会計に取引先を登録するのは、ヒューマンエラーのリスクを高めます。

このテンプレートは、Airtableでレコードのステータスが更新されるとfreee会計に自動で取引先を登録できるため、業務を効率化できます。
Airtableのステータスの更新を確認する必要がなくなり、freee会計への取引先情報の登録をスムーズに完了させることができます。
また自動化によって手入力で起きていた人的ミスの発生の回避につながるため、情報の正確性を保つことに繋がります。

■注意事項

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

・トリガーは5分、10分、15分、30分、60分の間隔で起動間隔を選択できます。

・プランによって最短の起動間隔が異なりますので、ご注意ください。

・分岐をするにはミニプラン以上のプランでご利用いただける機能(オペレーション)となっております。フリープランの場合は設定しているフローボットのオペレーションはエラーとなりますので、ご注意ください。

・ミニプランなどの有料プランは、2週間の無料トライアルを行うことが可能です。無料トライアル中には制限対象のアプリやAI機能(オペレーション)を使用することができます。


■概要

BASEで注文が発生したらAirtableに追加するフローです。

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

1.BASEを業務に活用している方

・ECサイトの運営に活用している方

・顧客情報を追加し管理する方

2.Airtableを活用してデータ管理を行なっている方

・帳票情報を一元管理している方

・登録した情報を可視化し進行状況を確認する方

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

BASEはECサイトの運営を円滑に行うために有益なツールです。
注文情報をAirtableで管理する情報と合わせて管理することで、データを蓄積し、より良い施策への分析に活用することができます。
しかしBASEで注文が発生したら毎回Airtableに情報を手入力することは手間がかかり、非効率的で時間がかかります。

このフローは効率のいい業務進行を目指す方に適しています。
BASEでの注文をトリガーに自動でAirtableに情報の追加を行うため、手入力の手間を省きミスや漏れを防ぐことができます。
また省いた時間を他の業務に充てることでチーム全体がタスク解決に注力でき、生産性の向上に繋げることができます。

■注意事項

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

・トリガーは5分、10分、15分、30分、60分の間隔で起動間隔を選択できます。

・プランによって最短の起動間隔が異なりますので、ご注意ください。


■概要

Wixで作成したWebサイトのフォームから受け付けた問い合わせや申し込み情報を、都度Airtableに手作業で転記していませんか。この作業は時間がかかるだけでなく、入力ミスや転記漏れといったヒューマンエラーの原因にもなり得ます。このワークフローを活用すれば、Wixでフォームが送信されると同時に、その内容を自動でAirtableのレコードとして追加できるため、手作業によるデータ入力の手間をなくし、顧客情報管理を効率化します。

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

  • WixでWebサイトを運営し、フォームからの問い合わせや申し込み管理をしている方
  • 顧客情報やプロジェクトの管理にAirtableを活用しており、データ入力を自動化したい方
  • 手作業でのデータ転記による入力ミスや対応漏れといった課題を解消したい方

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

  • Wixフォームが送信されると自動でAirtableにレコードが作成されるため、これまで手作業での転記に費やしていた時間を短縮できます。
  • 手作業によるデータ転記がなくなることで、入力間違いや転記漏れといったヒューマンエラーの発生を防ぎ、データの正確性を保ちます。

■フローボットの流れ

  1. はじめに、WixとAirtableをYoomと連携します。
  2. 次に、トリガーでWixを選択し、「フォームが送信されたら」というアクションを設定し、対象のフォームを指定します。
  3. 最後に、オペレーションでAirtableの「レコードを作成」アクションを設定し、トリガーで取得したフォームの情報を任意の項目に紐付けます。

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

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

  • Airtableの「レコードを作成」アクションでは、どのデータベースのどのテーブルにレコードを追加するかを任意で設定してください。
  • Airtableの各項目には、Wixフォームから取得した氏名やメールアドレスなどの情報を変数として設定できます。
  • また、対応状況などの特定の項目には「未対応」といった固定のテキストを設定することも可能です。

■注意事項


■概要

WordPressで投稿が公開されたらAirtableに追加するフローです。

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

1.WordPressを使用してコンテンツ管理を行う企業

・記事制作を行うコンテンツ担当者

・コンテンツ公開後の戦略を担当する方

2.Airtableを使用したデータベースで情報の管理を行う方

・データベースに登録した情報の分析を行う方

・情報の一元管理を行う事務職担当者

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

WordPressはコンテンツ作成に有効なツールです。
併せて作成したコンテンツの件数管理をAirtableのデータベースを活用して行うことで、作成したコンテンツを他の情報と連携することができます。
しかし、Airtableに手入力で情報を入力するのは手間がかかり、業務プロセスの改善を阻害する要因となります。

このフローを活用することによって、WordPressで投稿が公開されたら自動でAirtableのデータベースに情報が登録され、手作業の手間がかからなくなります。
また入力情報を引用することで、手入力によるヒューマンエラーを未然に防ぎます。

注意事項

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


■概要

Airtableで管理している情報を、分析や共有のためにGoogle スプレッドシートへ手作業で転記していませんか。この作業は時間がかかるだけでなく、更新漏れや入力ミスといったヒューマンエラーの原因にもなり得ます。このワークフローを活用すれば、Airtableでレコードが更新された際に、その内容を自動でGoogle スプレッドシートに反映できるため、常にデータを最新の状態に保ち、手作業による更新の手間を省くことができます。

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

  • AirtableとGoogle スプレッドシートを併用し、手作業でのデータ同期に手間を感じている方
  • データ転記時の入力ミスや反映漏れを防ぎ、情報の正確性を高めたいと考えている担当者の方
  • データベース間の情報連携を自動化し、データ管理を効率化したいと考えているチームリーダーの方

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

  • Airtableのレコードが更新されると自動でGoogle スプレッドシートへ反映されるため、これまで手作業で行っていた転記作業の時間を短縮できます。
  • 手作業でのデータ更新によって発生しがちな、入力間違いや反映漏れなどのヒューマンエラーを防止し、データの整合性を維持することに繋がります。

■フローボットの流れ

  1. はじめに、AirtableとGoogle スプレッドシートをYoomと連携します。
  2. 次に、トリガーでAirtableを選択し、「レコードが更新されたら」というアクションを設定します。
  3. 最後に、オペレーションでGoogle スプレッドシートの「レコードを更新する」アクションを設定し、トリガーで取得した情報をもとに、更新したいスプレッドシートやレコードを指定します。
※「トリガー」:フロー起動のきっかけとなるアクション、「オペレーション」:トリガー起動後、フロー内で処理を行うアクション

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

  • Airtableのトリガー設定では、監視対象としたいベースIDやテーブルIDを任意で設定してください。
  • Google スプレッドシートのオペレーションでは、更新するスプレッドシートやシート名、どの行を更新するかのキーとなる列などを指定してください。
  • 更新するセルの内容には、トリガーで取得したAirtableのレコード情報を「変数」として設定することで、特定のフィールドの値を動的に反映させることが可能です。

まとめ

WebflowとAirtableの連携を自動化することで、これまで手作業で行っていたWebflowとAirtable間のデータ転記作業の手間を削減し、ヒューマンエラーを防ぐことができます。

これにより、担当者はサイトのコンテンツ更新や受注情報管理をより迅速かつ正確に進められるようになり、本来注力すべきコア業務に集中できる環境を整えやすくなるでしょう!

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

よくあるご質問

Q:連携が失敗した場合の通知や対処法はありますか?
A:Yoomでは進行していたフローボットがエラーとなり、停止された場合にワークスペース発行時に登録したメールアドレス宛に通知が届きます。
また、アクション設定時の「テスト」ボタンでもエラーがあれば内容が表示されます。

その際には該当フローを確認し、エラーの原因や種類が表示される「エラーコード」を確認して修正してください。
詳しくは「エラー時の対応方法」をご確認ください。ヘルプページで解決しない場合は、サポート窓口を利用することもできます。

Q:特定の条件を満たしたデータだけを連携できますか?
A:はい、可能です。アプリトリガーを設定した後のフローボットに、以下のようなアクションを追加してください。

  1. Webflowの「コレクションのアイテムを取得」で、任意のカスタム項目などを取得した値として追加する
  2. 「分岐オペレーション」を追加し、任意の取得した値に対する分岐条件を設定する

これで分岐条件を満たしたアイテムがWebflowに作成された場合のみ、Airtableに連携されるようになります。

詳しい設定方法は「分岐」の設定方法をご確認ください。

  • 「分岐する」オペレーションは、ミニプラン以上でご利用いただけます。フリープランで利用するとエラーになってしまうのでご注意ください。

Q:既存のAirtableレコードを上書き更新できますか?
A:はい、可能です。以下のように分岐オペレーションやアクションを追加することにより、既存Webflowのアイテムが更新された場合にのみAirtableレコードを上書き更新できます。

  1. 「分岐オペレーション」を追加
    分岐対象の「作成日時」が「最終更新日時」と等しくなければ分岐する、という条件でWebflowが更新された場合のみ後続アクションに進むよう設定する
  2. Webflowの「コレクションのアイテムを取得」アクションを追加し、任意のカスタム項目などをアウトプットとして取得する
  3. Airtableの「レコードを更新」アクションを追加し、任意のフィールドを最新のWebflowの情報に更新するよう設定する

前述の通り、「分岐する」オペレーションは、ミニプラン以上でしかご利用できない点に注意してください。

Yoomを使えば、今回ご紹介したような連携を
プログラミング知識なしで手軽に構築できます。
無料でYoomを試す
この記事を書いた人
Kumiko Tsukamoto
Kumiko Tsukamoto
SaaS連携ツール「Yoom」を活用した業務自動化に関する記事を執筆するWebライター。ITパスポート資格保有者で、元システムエンジニア。Excelへの手入力による勤怠管理や領収書のデータ化といった反復作業に日々直面した経験から、SaaSツールを活用した業務効率化に興味を抱く。現在は、手作業に悩む担当者に向けて、Yoomの自動化機能を用いた業務フロー改善のTipsを発信している。
タグ
連携
Webflow
自動
自動化
関連アプリ
お役立ち資料
Yoomがわかる!資料3点セット
Yoomがわかる!資料3点セット
資料ダウンロード
3分でわかる!Yoomサービス紹介資料
3分でわかる!Yoomサービス紹介資料
資料ダウンロード
Before Afterでわかる!Yoom導入事例集
Before Afterでわかる!Yoom導入事例集
資料ダウンロード
お役立ち資料一覧を見る
詳しくみる