2024/10/10
アプリ同士の連携方法

WebflowとAirtableを連携して、Webflowで注文が発生したらAirtableに追加する方法

k.ohshiro
WebflowとAirtableの連携イメージ

目次

 

Airtableを情報管理ツールとして利用している方は多いと思います。
データベース機能が豊富で表形式で操作できるため、使いやすい便利なサービスですよね。
しかし、通常は情報を入力する際に手作業で行う必要があるため、負担に感じることもあるかもしれません。
そんな課題を解決するために、Webflowの注文情報をAirtableに自動追加するフローを作成してみました!
WebflowでECサイトを運営していて、Airtableで注文情報を一元管理したい方におすすめです。
「データ入力の手間を削減したい」「作業を効率化したい」とお考えなら、本記事を参考にYoomで自動連携を試してみてください。
プログラミング不要で簡単に連携することができます。

WebflowとAirtableを連携するメリット

メリット1.作業負担の軽減

ECサイトを運営する上で、どのように注文情報を管理するかはとても重要な問題なため、管理にかかる手間はなるべく削減したいですよね。
本記事の連携を使うと、Webflowで受け取った注文情報がAirtableに自動追加されるため、データ入力の手間が削減されます。
また、ヒューマンエラーのリスク低減にも寄与するでしょう。
手動でデータ入力をしていると、間違った金額で入力してしまったり、誤字脱字があったり、人的エラーのリスクが伴います。
データに不備があると会社の損失につながるかもしれません。
自動化により、このようなリスクを最小限に抑え、正確なデータ管理の実現に努めましょう!

メリット2.コミュニケーションの円滑化

WebflowとAirtableの連携により、注文情報を一つのアプリで一元管理できるようになります。
これにより、Airtableにアクセスするだけですべての注文情報を参照できるため、必要な情報をスピーディに把握できるようになるでしょう。
また、チーム内での認識のズレを回避することにもつながります。
注文情報が自動反映されると、チーム全員がAirtableから情報を確認できるため、特定の人だけが知っている情報が減ります。
結果として、認識のズレが起きづらく、スムーズなコミュニケーションがとれるようになるでしょう。

[Yoomとは]

WebflowとAirtableの連携フロー

では、実際にWebflowとAirtableを連携する方法をご紹介します。
今回紹介するのは、【Webflowで注文が発生したらAirtableに追加する】というフローです。
連携のステップは以下の通りです。

  1. Webflowでアプリトリガーの設定
  2. Airtableにレコードを作成

Yoomでは、上記2ステップをテンプレートとして提供しています。
ゼロから作成するよりも簡単にフローボットを作成できるので、まずは下のバナーにある「試してみる」ボタンをクリックして、テンプレートをコピーしましょう!
コピーが完了すると、サイドバーにある「マイプロジェクト」から操作できます。

WebflowとAirtableのマイアプリ連携

テンプレートをコピーしたら、事前準備としてWebflowとAirtableをYoomのマイアプリに登録します。
※既に登録している場合は「ステップ1.アプリトリガーの設定」へお進みください。

<手順>

1.Yoomにログイン後、「マイアプリ」→「+新規接続」の順にクリック

2.アプリ名を検索して必要な情報を入力

マイアプリ一覧にWebflowとAirtableが表示されていれば準備完了です!
早速、詳細設定に進みましょう!
コピーがまだの場合は、フローボットテンプレートを下記よりコピーしてください。

1.バナーにカーソルを合わせ「詳細を見る」をクリック
2.移行したページの「このテンプレートを試す」をクリック
3.Yoomの登録を行う
※既に登録が完了している場合はログイン画面が表示されるので、ログインしましょう。

ステップ1.アプリトリガーの設定

まずは、サイドバーにある「マイプロジェクト」から先ほどコピーしたテンプレートを選択してください。

次に、アプリトリガー「新規注文が発生したら」をクリックしましょう。

最初のページでは、事前に連携したアカウント情報が表示されるので確認し、問題なければ、「次へ」をクリックしてください。

次のページでは、WebflowとAPI接続するための設定をします。
サイトIDを候補の中から指定し、「テスト」でエラーがなければ「次へ」をクリックしてください。

次のページではWebhookイベントを送信、またはトリガーとなるイベントを実行し、「テスト」をクリックしてください。

ここまで問題がなければ、「保存する」でトリガーの設定は終了です。

ステップ2.レコードを作成

次に、「レコードを作成」をクリックしてください。

最初のページでは、ステップ1と同様にアカウント情報が表示されるので、問題なければ「次へ」をクリックしてください。

2ページ目では、レコードを作成するための設定を行います。
「ベースID」「テーブルID(または名前)」「フィールド情報」を入力しましょう。
フィールド情報の値には、Webflowからアウトプットされた情報をいれてください。

上記の画像では、注文IDを登録する設定になっていますが、他の値も登録したい場合は「+フィールド情報を追加」ボタンを選択すると、新しく入力ボックスが作成されます。

「テスト」をクリックしてエラーが出なければ、「保存する」をクリックしてください。

下記のようなポップアップが表示されたらすべての設定が完了です。

今回使用したフローボットテンプレート
Webflowで注文が発生したらAirtableに追加する

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

Yoomには、WebflowとAirtableを利用した自動化例が多数あります。
さまざまなアプリと連携することが可能なので、以下の代表例を参考にしてみてください。

1.Webflowのフォームが送信されたらAirtableに追加する

今回紹介した自動連携は、注文情報を自動追加する方法でしたが、この連携はフォーム情報を自動追加するフローです。
お問い合わせや資料請求などで獲得できた見込み顧客の情報をAirtableで一元管理したい方におすすめです。

2.Webflowで注文が発生したらNotionに追加する

Airtableではなく、Notionで注文情報を管理したい方はこちらのテンプレートも参考にしてみてください。AirtableとNotionを併用している方も、今回の連携を組み合わせることで、どちらのアプリにも注文情報が自動追加されるようになります。

3.指定のスケジュールになったらAirtableのレコードを検索し、Gmailに連携してメールを送付する

GmailとAirtableを連携することで、メールの送付を自動化することも可能です。
毎回手作業でメールの作成・送付を行っている方は、この自動化によって、作業負担が軽減するでしょう。

まとめ

以上、WebflowとAirtableを連携する手順でした!
このようにYoomは、プログラミングの知識がなくても使えるため、簡単に連携設定ができます。
Webflowの注文情報がAirtableに自動追加されると、手作業の負担が軽減されるだけでなく、ヒューマンエラーのリスク低減にもつながります。
これにより、正確なデータ管理が実現され、データの不備による会社の損失を回避することができるかもしれません。
また、スピーディな情報共有によって、コミュニケーションの円滑化も期待できます。

興味を持っていただけましたら、まずはこちらから無料登録をお願いします!

この記事を書いた人
k.ohshiro
学生時代からSaaS企業でカスタマーサクセスとして働いてきました。 複数のクラウドサービスを使って業務をしていたのですが、もっと簡単にサービス同士を連携できたら便利だなと思うことがありました。 Yoomではノーコードでアプリの連携ができるので、誰でも簡単に設定することができます。 少しでもわかりやすくYoomの魅力を伝え、みなさんの業務効率化に貢献出来たらなと思います!
タグ
Webflow
Airtable
自動化
連携
自動
関連アプリ
Yoomのハイパーオートメーションとは?
従来のRPAでは単純な繰り返し作業しか自動化できず、その設定作業はとても複雑なものでした。
AI・API・RPA・OCRなど様々な技術を組み合わせた「ハイパーオートメーション」なら、これまでは実現できなかった多くの作業を、これまでよりも簡単に自動化することが可能です。
Yoomのハイパーオートメーションとは?
従来のRPAでは単純な繰り返し作業しか自動化できず、その設定作業はとても複雑なものでした。
AI・API・RPA・OCRなど様々な技術を組み合わせた「ハイパーオートメーション」なら、これまでは実現できなかった多くの作業を、これまでよりも簡単に自動化することが可能です。
Yoomについて詳しく見る
お役立ち資料
Yoomがわかる!資料3点セット
資料ダウンロード
3分でわかる!Yoomサービス紹介資料
資料ダウンロード
Before Afterでわかる!Yoom導入事例集
資料ダウンロード
お役立ち資料一覧を見る
会社概要
利用規約(JaEn
プライバシーポリシー(JaEn
セキュリティポリシー(JaEn
特定商取引法に基づく表記
©️ Yoom Inc.