WebflowとAirtableを連携して、Webflowでコレクションのアイテムが登録されたらAirtableに自動追加する方法

WebflowとAirtableを連携することで、データ管理が効率化されるでしょう。
本記事では、Webflowにコレクションのアイテムが登録された際に、自動的にAirtableに反映させる方法をお伝えします。
これにより、手動入力のミスやデータ漏れを防ぎ、業務全体の効率化が期待できます。
今回は、WebflowとAirtableの連携メリットと自動化についてご紹介します。

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

メリット1:手動作業を削減できる

WebflowとAirtableを連携させることで、データの入力作業を自動化し、作業効率の向上が期待できます。
たとえば、Webflowでコレクションのアイテムが作成されると、Airtableに自動で反映されます。
これにより、<span class="mark-yellow">担当者は手動の転記作業から解放され、ブログ作成やECサイト運営に集中できます。</span>
また、作業の一貫性を保ちながら、ワークフローを効率化できるため、複数のプロジェクトを抱えるプロジェクトマネージャーにおすすめの自動化です。

メリット2:データの整合性を向上できる

コレクションアイテムの自動転記により、データの整合性を向上できるかもしれません。
この自動化を導入することで、手入力によるデータ漏れやミスを軽減することができます。
たとえば、<span class="mark-yellow">各チームで別々のアプリを利用していても、データが同期されるため、チーム間で正確なデータを確認することができます。</span>
これにより、どのチームも混乱することなく業務に取り組むことができるでしょう。

[Yoomとは]

WebflowAirtableとの連携フローの作り方

今回は「Webflowでコレクションのアイテムが作成されたらAirtableに追加する」という以下のテンプレートの設定方法をご紹介します。
このテンプレートを利用することで、イチから自動化設定を行う必要がなく、便利です。

工程は4ステップだけなので、10~15分で設定できます。

WebflowとAirtableをマイアプリ登録
Webflowでコレクションのアイテムが作成されたら起動するトリガーを設定
Airtableでレコードを作成するアクションを設定
WebflowとAirtableの自動化の動作確認

Yoomを利用していない方は、こちらから無料登録を行ってください。
すでにYoomを利用している方はログインしましょう。

ステップ1:WebflowとAirtableをマイアプリ登録

YoomにWebflowとAirtableを接続するマイアプリ登録を行います。
最初にマイアプリ登録をすると、自動化設定がスムーズに進みます。

まず、Webflowのマイアプリ登録をしましょう。
Yoom画面の左側にある「マイアプリ」→「新規接続」をクリックしてください。
「アプリ名で検索」からWebflowを探すか、アプリ一覧から探しましょう。

以下の画面が表示されるので、説明を確認して「アカウント名」と「アクセストークン」を設定してください。

続いて、Airtableのマイアプリ登録を行います。
こちらにマイアプリ登録の設定方法が記載されているので、参照して登録しましょう。

両方のマイアプリ登録が完了したら、WebflowとAirtableが表示されます。

ステップ2:Webflowでコレクションのアイテムが作成されたら起動するトリガーを設定

自動化の設定をするため、以下のバナーにある「試してみる」をクリックしてください。

以下の画面表示を読んで、「OK」をクリックしましょう。

以下の画面が表示されたら、「タイトル」と「説明」を確認してください。
変更が必要な場合は、該当箇所をクリックすることで変更できます。
最初にWebflowの設定を行うため、「コレクションのアイテムが作成されたら」をクリックしてください。

以下の画面が表示されるので、設定を確認しましょう。

「タイトル」→自由に変更可能
「Webflowと連携するアカウント情報」→アカウントが合っているか確認
「トリガーアクション」→コレクションのアイテムが作成されたら

以下の画面が表示されたら、候補から「サイトID」を選択してください。
入力箇所をクリックすると、候補が表示されます。
設定できたら、「テスト」→「テスト成功」→「保存」をクリックしましょう

以下の画面が表示されるので、手順を確認してください。
Webhookイベントを送信またはトリガーとなるイベントを実行したら「テスト」→「テスト成功」→「保存」をクリックしましょう。

ステップ3:Airtableでレコードを作成するアクションを設定

続いて、Airtableの設定を行うため、「レコードを作成」をクリックしてください。
以下の画面が表示されたら、設定を確認しましょう。

「タイトル」→自由に変更可能
「Airtableと連携するアカウント情報」→アカウントが合っているか確認
「アクション」→レコードを作成

以下の画面が表示されるので、注意事項を確認してください。

スクロールして説明を確認し、「ベースID」と「テーブルIDまたは名前」を設定しましょう。

スクロールし、Webflowのアウトプットを活用して、「フィールド情報」の設定をしてください。

「フィールド名」→値に合う名称を記載
「値」→Webflowのアウトプットから選択
※赤枠内の矢印をクリックすると、Webflowのアウトプットを利用できます。

Airtableに追加するアイテム情報を任意で設定しましょう。
フィールド情報を追加したい場合は、「フィールド情報を追加」をクリックすると追加できます。
設定できたら、「テスト」→「テスト成功」→「保存」をクリックしてください。

ステップ4:WebflowとAirtableの自動化の動作確認

最後に「トリガーをON」をクリックしたら、自動化の設定は完了です。
フローボットが正しく起動するか確認しましょう。

今回使用したフローボットテンプレート
Webflowでコレクションのアイテムが作成されたらAirtableに追加する

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

1.Webflowで注文が発生したら、自動的にAirtableに追加するフローです。
注文情報を何度も追加するのが手間だと感じている方におすすめの自動化です。
注文情報の自動転記により、入力漏れやミスといったヒューマンエラーを防げます。

2.Webflowのフォームが送信されたら、Airtableに自動追加するフローです。
‍フォーム内容をスピーディーに確認できるため、スムーズに対応できます。
WebflowとAirtableを利用していて、フォーム内容の管理にお困りの方におすすめの自動化です。

3.Webflowでコレクションのアイテムが作成されたら、自動的にMicrosoft Excelに追加するフローです。
‍WebflowのコレクションデータをMicrosoft Excelにも反映することができます。
入力作業が自動化されるため、ヒューマンエラーの防止につながります。

まとめ

WebflowとAirtableを連携することで、データ管理が効率化され、常に最新のデータにアクセスすることができます。
これにより、担当者は手動の転記作業から解放され、ブログやECサイトの運営に取り組むことができます。
特に、複数のプロジェクトを抱えるプロジェクトマネージャーにおすすめの自動化です。

通常、アプリ連携や自動化にはある程度のプログラミング知識が必要ですが、Yoomでは一切必要ありません。
そのため、機械操作が苦手な方でも簡単に利用できます。
実際に操作してみたい方は、こちらから無料登録をしてください。