・
「Webflowで作成したサイトのフォームから問い合わせがあったら、その都度Airtableに手作業で転記している…」
「WebflowのCMSアイテムを更新するたびに、Airtableの管理データベースにも同じ内容を入力していて、二度手間になっている…」
このように、WebflowとAirtableを併用する中で、データの二重入力や手作業での転記に多くの時間を費やしていませんか?
もし、<span class="mark-yellow">Webflowで発生したイベントをきっかけに、自動でAirtableのデータベースにレコードを追加・更新する仕組み</span>があれば、こうした定型的な作業からの解放に繋がります。
入力ミスの心配を軽減し、創造的なWebサイトの改善やコンテンツ企画といったコア業務に集中できる時間を確保できるでしょう。
今回ご紹介する自動化の設定は、プログラミングの知識がなくても直感的に設定できます。これまで自動化を諦めていた方でも簡単に導入できますので、ぜひこの機会に業務を効率化させましょう!
Yoomには<span class="mark-yellow">WebflowとAirtableを連携するためのテンプレート</span>が用意されているので、今すぐ試したい方は以下よりバナーをクリックしてスタートしましょう!
WebflowとAirtableのAPIを連携すれば、Webflowで発生したイベントのデータをAirtableに自動的に連携することが可能になります。これにより、これまで手作業で行っていたデータ入力や転記作業をなくし、ヒューマンエラーの防止や業務の迅速化に繋がります。
ここでは具体的な自動化例を複数ご紹介しますので、気になる内容があれば、ぜひクリックしてみてください!
WebflowのCMSコレクションに新しいアイテム(ブログ記事、製品情報など)が追加されるたびに、その情報を自動でAirtableの指定したテーブルにレコードとして作成する連携です。
この自動化により、<span class="mark-yellow">CMSのコンテンツ情報をAirtable上で一元管理する際の手間を削減し、データの二重入力や転記ミスを防ぐ</span>ことができます。
WebflowのEコマース機能で新しい注文が発生した際に、注文情報を自動でAirtableの受注管理テーブルにレコードとして作成する連携です。
手動での注文情報の転記作業が不要になるため、<span class="mark-yellow">受注処理の初動を迅速化し、入力ミスなく正確な顧客・注文データをデータベースに蓄積</span>できます。
それでは、さっそく実際にWebflowとAirtableを連携したフローを作成してみましょう!今回はYoomを使用して、ノーコードでWebflowとAirtableの連携を進めていきますので、もしまだYoomのアカウントをお持ちでない場合は、こちらの登録フォームからアカウントを発行しておきましょう。
[Yoomとは]
今回は「Webflowでコレクションのアイテムが作成されたら、Airtableでレコードを作成する」フローを作成していきます!
作成の流れは大きく分けて以下です。
ここでは、Yoomとそれぞれのアプリを連携して、操作が行えるようにしていきます。
まずは基本的な設定方法を解説しているナビをご覧ください!
それではここから今回のフローで使用するアプリのマイアプリ登録方法を解説します。
アプリ一覧の画面に出たら、右上にある検索ボックスに「Webflow」と入力し、アイコンを見つけてクリックします。
アカウント名にはメールアドレスなど任意の名前を、アクセストークンはWebflowにログインして発行し、ペーストします。
任意のアカウントでWebflowにログインし、「Site Settings」をクリックして表示される以下の画面から「Generate API token」をクリックしてください。
発行するAPIトークンに任意の名前を設定し、「CMS」と「Site」の項目で「Read and Write」の権限を設定してから発行しましょう。
発行されたAPIトークンをコピーして、Yoomの連携画面にペースト後「追加」ボタンを押せばWebflowとの連携は完了です!
先ほどと同じ手順で、マイアプリ連携からAirtable(OAuth)と書かれたアプリアイコンを探してクリックしてください。
任意のAirtableでログインすると、YoomがAirtableにアクセス権限を求める画面が表示されます。「アクセスを許可する」をクリックしましょう。
「マイアプリに登録しました。」と表示されれば、Airtableとの連携は完了です!
Yoomには様々なアプリを活用した自動化のテンプレートが用意されています。今回は以下のテンプレートを試してみましょう。
Yoomにログインした状態で、バナーの「試してみる」をクリックしてみてください。
自動でYoomの画面に遷移して、以下のポップアップが表示されたらテンプレートのコピーは成功です!「OK」をクリックして次のステップに進みましょう。
Yoomのフローボットを動かす引き金となるアクションのことを「アプリトリガー」と呼びます。
このフローボットでトリガーになっている、Webflowの「コレクションのアイテムが作成されたら」というアクションを設定していきましょう。
タイトルを任意で設定し、Webflowと連携するアカウントやアクション内容を確認したら「次へ」を押してください。
トリガーの対象となる、WebflowのサイトIDを「候補」から選択します。
「テスト」ボタンを押して、「テスト成功」の文字が出たら「次へ」で進みます。
ここで一度Webflowにログインし、該当サイト内でテスト用のアイテムを作成しておきましょう。アプリトリガーを動かす、「Webflowでアイテムが作成されたら」という条件を満たすためです。
Webflowのコレクションにアイテムを作成できたら、Yoomの設定画面に戻って「テスト」ボタンを押してみてください。
「取得した値」として、以下のようにWebflowに作成したテストの内容が反映されていれば成功です!
Yoomではこの「取得した値」を、フローボット内の他のアクションで活用できる「アウトプット」と定義しています。
アウトプットとは?
【Tips】
アウトプットは各アクションで取得でき、取得したアウトプットはそれ以降のアクションで活用可能です。つまり、ここで取得したアウトプットをAirtableに自動登録可能となります!
ここまで確認できたら、ページ最下部の「保存する」ボタンをクリックしてください。
Webflowにアイテムが作成されたという情報をYoomで受け取ったら、その情報を活用してAirtableにレコードを作成していきましょう。
タイトルを任意で設定し、Airtableと連携するアカウントやアクション内容を確認したら「次へ」を押してください。
「ベースID」と「テーブルID」には、Airtableで更新したいデータベースに直接アクセスし、URLから抽出した文字列を入力します。
次に、Webflowの情報を入力していくフィールド情報について設定していきましょう。
「フィールド名」は先ほど指定したAirtableのデータベースを確認して、更新したいフィールド名を直接入力してください。
「値」には、前のステップで取得した値から該当する情報を入力しましょう。
ここで取得した値を用いることで、今後新たにWebflowにアイテムが作成される度に、フィールド内に作成される値が更新されていきます。
【Tips】
このようにアウトプットを活用することで最新のWebflowのデータをその都度Airtableへ登録可能となります。なお、テキストを直接入力した部分は固定値とされるため、アウトプットを活用せず設定を行うと毎回同じWebflowのデータが登録されてしまうので注意が必要です。
今回は以下のように設定してみました。
他にもAirtableに追加したいフィールドがある場合は、フィールド設定画面の下にある「+フィールド情報を追加」をクリックしてください。
必要な設定ができたら、「テスト」ボタンを押してみましょう。テストが成功すると、取得した値としてAirtableに作成されたレコードのIDが表示されます。
試しにAirtableにログインして、該当データベースにアクセスしてみましょう。しっかりWebflowのアイテム名やSlugが反映されていますね。
ここまで確認できたら「保存する」をクリックしてください。
お疲れさまでした!すべての必要な設定を完了すると、以下のポップアップが表示されます。「トリガーをON」をクリックして、フローボットを動かしはじめましょう。
これでWebflowのコレクションにアイテムが追加されたら、自動でAirtableにレコードが作成されるようになりました。
今回はWebflowからAirtableへデータを連携する方法をご紹介しましたが、逆にAirtableからWebflowへのデータ連携を実施したい場合は、下記のテンプレートも併せてご利用ください。
Airtableをマスターデータベースとして活用し、Webサイトのコンテンツを効率的に管理・更新したい場合に便利です。
Airtableのテーブルに新しいレコードが追加された際に、その情報を基にWebflowのCMSコレクションへ自動でアイテムを追加する連携です。
この仕組みを活用することで、<span class="mark-yellow">Airtable上で管理しているコンテンツ情報をWebflowに自動で反映させ、サイト更新の手間を削減</span>します。
Airtable上の既存レコードが更新された場合に、その変更内容をWebflowの対応するコレクションアイテムに自動で反映させる連携です。
例えば、Airtableで製品価格や在庫情報を更新するだけでWebサイトの情報も即座に更新されるため、<span class="mark-yellow">情報の鮮度を保ち、手動での更新漏れや反映のタイムラグを防ぐ</span>ことができます。
WebflowやAirtableのAPIを活用することで、フォーム情報や商品データの管理、顧客データの更新などの業務をスムーズに自動化できます。
Yoomにはこれらの業務を効率化できるテンプレートが多数用意されているので、ぜひ活用してください!
Webflowでの自動化を導入すると、フォーム送信やアイテム作成に伴う業務を効率化できます。
たとえば、フォーム送信内容を自動的に要約してメール通知したり、HubSpotやStripeで作成されたデータをWebflowに反映させることで、手作業の入力を省力化できます。
アイテム作成時にMicrosoft Teamsへ通知すれば、チーム内の情報共有もスムーズに行えます。
Airtableの自動化により、フォームや注文データの登録、ステータス更新時の他システム反映を簡単に行えます。
WordPressやWix、BASEから取得したデータを自動でAirtableに反映させることで、情報管理の手間を削減。
さらに、レコード更新内容をGoogle スプレッドシートや会計システムに連携させることで、データ管理やチーム共有を効率化できます。
WebflowとAirtableの連携を自動化することで、<span class="mark-yellow">これまで手作業で行っていたWebflowとAirtable間のデータ転記作業の手間を削減し、ヒューマンエラーを防ぐことができます。</span>
これにより、担当者はサイトのコンテンツ更新や受注情報管理をより迅速かつ正確に進められるようになり、本来注力すべきコア業務に集中できる環境を整えやすくなるでしょう!
今回ご紹介したような業務自動化を実現できるノーコードツール「Yoom」を使えば、プログラミングの知識がない方でも、直感的な操作で簡単に業務フローを構築可能です。
もし自動化に少しでも興味を持っていただけたなら、ぜひこちらから無料登録して、Yoomによる業務効率化を体験してみてください!
Q:連携が失敗した場合の通知や対処法はありますか?
A:Yoomでは進行していたフローボットがエラーとなり、停止された場合にワークスペース発行時に登録したメールアドレス宛に通知が届きます。
また、アクション設定時の「テスト」ボタンでもエラーがあれば内容が表示されます。
その際には該当フローを確認し、エラーの原因や種類が表示される「エラーコード」を確認して修正してください。
詳しくは「エラー時の対応方法」をご確認ください。ヘルプページで解決しない場合は、サポート窓口を利用することもできます。
Q:特定の条件を満たしたデータだけを連携できますか?
A:はい、可能です。アプリトリガーを設定した後のフローボットに、以下のようなアクションを追加してください。
これで分岐条件を満たしたアイテムがWebflowに作成された場合のみ、Airtableに連携されるようになります。
詳しい設定方法は「分岐」の設定方法をご確認ください。
Q:既存のAirtableレコードを上書き更新できますか?
A:はい、可能です。以下のように分岐オペレーションやアクションを追加することにより、既存Webflowのアイテムが更新された場合にのみAirtableレコードを上書き更新できます。
前述の通り、「分岐する」オペレーションは、ミニプラン以上でしかご利用できない点に注意してください。