Webflow APIと各種アプリの連携イメージ
自動化のアイデア

2025-07-28

【Webflow API】各種アプリとの連携方法から活用事例まで徹底解説。

s.kinjo

Webflowを使ったWebサイト運営やコンテンツ管理において、手作業でのデータ入力や更新に時間を取られていませんか?
例えば、フォームから送信されたリード情報を手動でCRMに入力したり、新しいCMSアイテムを公開するたびにチームへ手動で通知したりと、定型的ながらも重要な作業は少なくありません。
これらの作業を自動化するためにAPIの活用が考えられますが、「プログラミングの知識がないから難しそう」「社内に頼れるエンジニアがいない」といった理由で、一歩を踏み出せずにいる方も多いのではないでしょうか。

そこで本記事では、Webflow APIの基本的な知識から、<span class="mark-yellow">エンジニアでなくても簡単に様々なアプリとWebflow APIを連携する方法</span>をご紹介します。
Webサイトのフォーム投稿と顧客管理ツールの連携や、CMSアイテムの更新とチャットツールへの通知といったフローをステップごとにわかりやすく解説しますので、「エンジニアに頼らず、自分たちの手で業務を効率化したい!」と考えている方は、ぜひ参考にしてみてください。

とにかく早くWebflowのAPIを利用したい方へ

Yoomには<span class="mark-yellow">Webflow APIを使った様々なアクションや、業務フローを自動化するためのテンプレート</span>が用意されています。今すぐ試したい方はこちらから詳細をチェックしてみてください!

Webflow APIとは

Webflow APIはWebflowと外部アプリ(Google、Microsoft、Salesforce、Notionなど)を繋げてデータの受け渡しを行い、Webflowを使った業務フローを自動化できるインターフェースです。APIはアプリケーション・プログラミング・インタフェース (Application Programming Interface)の略語です。

インターフェースとは簡単に言うと「何か」と「何か」を「繋ぐもの」で、Webflow APIの場合は「Webflow」と「外部のアプリ」を繋ぐインターフェースを指します。

また、APIでは大きく分けて以下のような指示を出すことができます。

  • 取得:APIを経由して、データを取得することができます。
  • 追加:APIを経由して、データを追加することができます。
  • 更新:APIを経由して、データを更新することができます。
  • 削除:APIを経由して、データを削除することができます。

Webflow APIでできること

Webflow APIでできることをいくつかピックアップしたので、ご覧ください!

気になる自動化例の「試してみる」をクリックしてアカウント登録するだけで、すぐにWebflow APIを使った自動化を体験できます。

登録はたったの30秒で完了するので、ぜひ気軽にお試しください!

1. コレクションのアイテムが作成されたら自動で起動する

Webflowでコレクションのアイテムが作成されたことをアクションの起点として、データベースアプリへのレコード追加などを自動化できるので、手作業による転記作業をなくし、入力ミスや共有漏れを防ぎます。

[[222770]]

2.コレクションのアイテムが公開されたら自動で起動する

Webflowでアイテムが公開されたことをトリガーに、Microsoft Teamsなどのチャットツールへ自動で通知できるため、関係者への迅速な情報共有が実現し、プロジェクトの進行をスムーズにします。

[[222780]]

3. コレクションにアイテムを自動で追加する

Notionデータベースへの情報追加などをきっかけに、Webflowのコレクションにアイテムを追加するアクションをフローの中に組み込めるので、手動でのCMS入稿作業を効率化し、コンテンツ管理の手間を大幅に削減できます。

[[222785]]

その他にも下記のようなアクションをAPI経由で実行が可能です。 

■フローの中で設定できるアクション(フローボットオペレーション)

  • コレクションのアイテムを更新
  • コレクションのアイテムを公開する
  • コレクションのアイテムを検索
  • ローカライズされたコレクション内にアイテムを作成
  • コレクションのアイテムを更新(マルチリファレンスフィールド)
  • コレクションのアイテムを取得
  • コレクションのアイテムを削除
  • 特定のコレクション内にあるアイテム総数を取得
  • コレクションのライブアイテムを更新

■フローの起点となるアクション(トリガーアクション)

  • フォームが送信されたら
  • コレクションのアイテムが更新されたら
  • コレクションのアイテムが削除されたら
  • コレクションのアイテムが非公開になったら
  • 新規注文が発生したら
  • 注文情報が更新されたら

Webflow APIの利用料金と注意点

Webflow APIは、Webflowの無料プラン(Starter)でも利用可能です。そのため、基本的な機能の自動化であれば、追加料金なしで始めることができます。

ただし、無料プランと有料プランではAPIの利用に関して以下のような違いがあるため、用途に合わせてプランを選ぶことが重要です。

  • APIリクエスト制限:APIを呼び出せる回数には上限があり、無料プランでは1分あたり60リクエストまでと定められています。一方、CMSプランやBusinessプランなどの有料プランでは、1分あたり120リクエストまでとなり、より多くの処理を高速に行えます。
  • Webhooksの活用:もしAPIを頻繁に呼び出す必要がある場合は、Webflowが提供するWebhooks機能の利用が推奨されます。これにより、APIのリクエスト数を抑えつつ、リアルタイムに近いデータ連携が実現できます。
  • エラーへの対処:APIのリクエスト制限を超過するとエラーが返されます。自動化フローを構築する際は、このようなエラーも考慮した設計が大切です。

※詳細はWebflowのサービスサイトをご確認ください。

※2025年07月25日時点の情報です。

実際に連携してみた!

ここではノーコードツールYoomが用意するテンプレートで、実際の設定方法を通してWebflow APIを使った具体的な連携方法を紹介していきます!

もしまだYoomのアカウントをお持ちでない場合は、こちらの登録フォームからアカウントを発行しておきましょう。

[Yoomとは]

Webflow APIとの連携方法

はじめにWebflow APIとYoomを連携する方法を紹介します。
まずWebflowのマイアプリ登録を行いましょう。

1.Yoom画面左側にある「マイアプリ」→「新規接続」をクリックしてください。
アプリ一覧からWebflowを探すか、検索機能を活用して検索しましょう。

2.入力欄にWebflowと入力するとアイコンが表示されるので、アイコンをクリックします。

以下の画面が表示されたら、説明を確認し、「アカウント名」と「アクセストークン」を入力し、追加をクリックします。

これでWebflow APIとの連携は完了です。

今回は「Webflowでコレクションのアイテムが作成されたら、KnackでRecordを追加する」という実際のフローボットも作成していきます!

作成の流れは大きく分けて以下です。

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

ステップ1:KnackとYoomの連携

Knackも先程のWebflowと同様、マイアプリメニューからアプリを検索しクリックしてください。

こちらも赤枠の説明を確認し、必須項目を入力し、「追加」をクリックします。

Yoomのマイアプリにそれぞれが登録されたら連携が完了です!

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

ここからいよいよフローを作っていきます!簡単に設定できるようテンプレートを利用しているので、まずはこちらをコピーしましょう。

Yoomにログインし、以下バナーの「試してみる」をクリックしてください。

[[222770]]

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

ステップ3:Webflowのトリガーアクション設定

1.いよいよフローの設定に入ります!まずは以下の赤枠をクリックしましょう。

2.以下の画面でYoomと連携するアカウントを選択します。
タイトルは変更可能です。わかりやすものにするなどカスタマイズしてみてください。
連携するアカウント情報は基本的にマイアプリ登録をしたアカウントが選択されています。
情報を確認してください。
トリガーアクションは「コレクションのアイテムが作成されたら」のまま「次へ」をクリックして進んでください。

3.入力欄をクリックし、対象の「サイトID」を候補から選択してください。

入力後にYoomと連携できるか「テスト」を実行し、問題なければ「次へ」に進みます。

4.実際にWebflowでテスト用のアイテムを作成しましょう!
Webflowの内容をYoomと連携するために、「テスト」をクリックしてください。

テストが成功した場合は、アウトプット(取得した値)を取得できます。
実際の設定では、各項目に具体的な値が反映されます。
こちらの値は次の設定に活用するので、取得された内容を確認して保存しましょう。

ステップ4:KnackにRecordを追加する設定

1.あっという間に最後の設定項目です!これまでと同様に以下の赤枠をクリックします。

2.以下の画面でYoomと連携するアカウントを選択します。

先ほどと同様にタイトルとアカウント情報を確認し、アクションは「Create Record」のまま「次へ」をクリックして進んでください。

3.画面が切り替わったら、任意の「Object ID」を入力します。

4.その他の項目は、「取得した値」などを活用しながら任意で設定しましょう。

5.設定完了後に、「テスト」をクリックします。
テストが成功したら、Knackに追加できていることを確認しましょう!

6.確認後、「保存する」をクリックしてください。

ステップ5:トリガーをONに設定して動作確認

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

以上が、Webflow APIの連携方法とそれを活用した実際のフローボット作成方法でした!

Webflow APIを活用した自動化の例

今回紹介した事例以外でも、Yoomではさまざまなサービスとの連携が可能で、それぞれに対応したテンプレートが用意されています。

普段使用しているサービスと連携できるテンプレートを活用して、Webflowを使った業務フローを自動化しましょう!

1. Webflowフォームを起点とした顧客・データ連携

Webflowのフォームが送信されたら、HubSpotにチケットを作成したり、SalesforceやGoogleスプレッドシートに情報を追加したりできます。

これにより、リード管理からCRM連携、データ集計まで、Webサイトからの情報を自動で活用し、営業・マーケティング活動を効率化します。

[[84388,98815,98818]]

フォームのテキストを抽出してBrevoでコンタクトを作成したり、Pipedriveの組織にノートを追加したり組織を追加することも可能です。

これにより、フォームから得た詳細情報を直接CRMに連携させ、顧客管理の精度と効率を高めます。

[[258816,258962,258924]]

2. Webflowコレクションアイテム作成からの外部サービス連携

Webflowでコレクションのアイテムが作成されたら、Airtableへの追加、WordPressでの新規投稿作成、WooCommerceでの商品作成、Klaviyoでのプロフィール作成、Brevoでのキャンペーンレポート作成が可能です。

これにより、Webサイトのコンテンツ更新に伴う情報連携、ECサイトの商品同期など、多岐にわたる業務を自動化し、コンテンツ管理とマーケティング活動を効率化します。

[[103582,234959,256265,257361,258948]]

3. Webflowのアイテム作成・更新を起点とした通知

Webflowでアイテムが作成または更新されたら、Microsoft Teams、Slack、Discordに通知できます。

これにより、Webサイトのコンテンツ更新状況をチームにリアルタイムで共有し、情報連携をスムーズにします。

[[222780,247070,255627,247079,255637]]

アイテムの内容を抽出してMailchimpでキャンペーンを作成したり、OpenAIで要約してメールで通知したりできます。

これにより、Webサイトのコンテンツを元にしたマーケティングキャンペーンの自動作成や、コンテンツの要約・共有を効率化します。

[[257455,258675]]

4. 外部フォームからWebflowコレクションへのアイテム追加

GoogleフォームやTypeformの回答内容をトリガーに、Webflowのコレクションにアイテムを自動追加できます。

これにより、外部フォームで収集したデータをWebflowのCMSに効率的に連携させ、コンテンツ管理やサイト更新の手間を削減します。

[[179780,179782]]

まとめ

Webflow APIを活用することで、<span class="mark-yellow">これまで手作業で行っていたWebサイトのコンテンツ更新やフォームデータの転記作業が自動化され、業務の手間を大幅に削減し、ヒューマンエラーの発生を防ぎます!
</span>これにより、担当者は単純な繰り返し作業から解放され、より創造的で重要なコア業務に集中できる時間を確保できます。

今回ご紹介したような業務自動化を実現するハイパーオートメーションツール「Yoom」を使えば、プログラミングの知識がない方でも、画面の指示に従って操作するだけで直感的に連携フローを構築できるでしょう。
もしWebflowを使った業務の自動化に少しでも興味を持っていただけたなら、ぜひこちらから無料登録して、その効果を体験してみてください!

この記事を書いた人
s.kinjo
インターネットメディアやカスタマーサポート業界で働いてきました。 日ごろから効率化などの合理的な考えを軸に仕事に取り組んでいます。 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とは?
これまでは実現できなかった多くの作業を、これまでよりも簡単に自動化することが可能です。
詳しくみる
詳しくみる