・
Webflowを使ったWebサイト運営やコンテンツ管理において、手作業でのデータ入力や更新に時間を取られていませんか?
例えば、フォームから送信されたリード情報を手動でCRMに入力したり、新しいCMSアイテムを公開するたびにチームへ手動で通知したりと、定型的ながらも重要な作業は少なくありません。
これらの作業を自動化するためにAPIの活用が考えられますが、「プログラミングの知識がないから難しそう」「社内に頼れるエンジニアがいない」といった理由で、一歩を踏み出せずにいる方も多いのではないでしょうか。
そこで本記事では、Webflow APIの基本的な知識から、<span class="mark-yellow">エンジニアでなくても簡単に様々なアプリとWebflow APIを連携する方法</span>をご紹介します。
Webサイトのフォーム投稿と顧客管理ツールの連携や、CMSアイテムの更新とチャットツールへの通知といったフローをステップごとにわかりやすく解説しますので、「エンジニアに頼らず、自分たちの手で業務を効率化したい!」と考えている方は、ぜひ参考にしてみてください。
Yoomには<span class="mark-yellow">Webflow APIを使った様々なアクションや、業務フローを自動化するためのテンプレート</span>が用意されています。今すぐ試したい方はこちらから詳細をチェックしてみてください!
Webflow APIはWebflowと外部アプリ(Google、Microsoft、Salesforce、Notionなど)を繋げてデータの受け渡しを行い、Webflowを使った業務フローを自動化できるインターフェースです。APIはアプリケーション・プログラミング・インタフェース (Application Programming Interface)の略語です。
インターフェースとは簡単に言うと「何か」と「何か」を「繋ぐもの」で、Webflow APIの場合は「Webflow」と「外部のアプリ」を繋ぐインターフェースを指します。
また、APIでは大きく分けて以下のような指示を出すことができます。
Webflow APIでできることをいくつかピックアップしたので、ご覧ください!
気になる自動化例の「試してみる」をクリックしてアカウント登録するだけで、すぐにWebflow APIを使った自動化を体験できます。
登録はたったの30秒で完了するので、ぜひ気軽にお試しください!
Webflowでコレクションのアイテムが作成されたことをアクションの起点として、データベースアプリへのレコード追加などを自動化できるので、手作業による転記作業をなくし、入力ミスや共有漏れを防ぎます。
Webflowでアイテムが公開されたことをトリガーに、Microsoft Teamsなどのチャットツールへ自動で通知できるため、関係者への迅速な情報共有が実現し、プロジェクトの進行をスムーズにします。
Notionデータベースへの情報追加などをきっかけに、Webflowのコレクションにアイテムを追加するアクションをフローの中に組み込めるので、手動でのCMS入稿作業を効率化し、コンテンツ管理の手間を大幅に削減できます。
その他にも下記のようなアクションをAPI経由で実行が可能です。
■フローの中で設定できるアクション(フローボットオペレーション)
■フローの起点となるアクション(トリガーアクション)
Webflow APIは、Webflowの無料プラン(Starter)でも利用可能です。そのため、基本的な機能の自動化であれば、追加料金なしで始めることができます。
ただし、無料プランと有料プランではAPIの利用に関して以下のような違いがあるため、用途に合わせてプランを選ぶことが重要です。
※詳細はWebflowのサービスサイトをご確認ください。
※2025年07月25日時点の情報です。
ここではノーコードツールYoomが用意するテンプレートで、実際の設定方法を通してWebflow APIを使った具体的な連携方法を紹介していきます!
もしまだYoomのアカウントをお持ちでない場合は、こちらの登録フォームからアカウントを発行しておきましょう。
[Yoomとは]
はじめにWebflow APIとYoomを連携する方法を紹介します。
まずWebflowのマイアプリ登録を行いましょう。
1.Yoom画面左側にある「マイアプリ」→「新規接続」をクリックしてください。
アプリ一覧からWebflowを探すか、検索機能を活用して検索しましょう。
2.入力欄にWebflowと入力するとアイコンが表示されるので、アイコンをクリックします。
以下の画面が表示されたら、説明を確認し、「アカウント名」と「アクセストークン」を入力し、追加をクリックします。
これでWebflow APIとの連携は完了です。
今回は「Webflowでコレクションのアイテムが作成されたら、KnackでRecordを追加する」という実際のフローボットも作成していきます!
作成の流れは大きく分けて以下です。
Knackも先程のWebflowと同様、マイアプリメニューからアプリを検索しクリックしてください。
こちらも赤枠の説明を確認し、必須項目を入力し、「追加」をクリックします。
Yoomのマイアプリにそれぞれが登録されたら連携が完了です!
ここからいよいよフローを作っていきます!簡単に設定できるようテンプレートを利用しているので、まずはこちらをコピーしましょう。
Yoomにログインし、以下バナーの「試してみる」をクリックしてください。
以下の画面表示を読んで、「OK」をクリックしましょう。
1.いよいよフローの設定に入ります!まずは以下の赤枠をクリックしましょう。
2.以下の画面でYoomと連携するアカウントを選択します。
タイトルは変更可能です。わかりやすものにするなどカスタマイズしてみてください。
連携するアカウント情報は基本的にマイアプリ登録をしたアカウントが選択されています。
情報を確認してください。
トリガーアクションは「コレクションのアイテムが作成されたら」のまま「次へ」をクリックして進んでください。
3.入力欄をクリックし、対象の「サイトID」を候補から選択してください。
入力後にYoomと連携できるか「テスト」を実行し、問題なければ「次へ」に進みます。
4.実際にWebflowでテスト用のアイテムを作成しましょう!
Webflowの内容をYoomと連携するために、「テスト」をクリックしてください。
テストが成功した場合は、アウトプット(取得した値)を取得できます。
実際の設定では、各項目に具体的な値が反映されます。
こちらの値は次の設定に活用するので、取得された内容を確認して保存しましょう。
1.あっという間に最後の設定項目です!これまでと同様に以下の赤枠をクリックします。
2.以下の画面でYoomと連携するアカウントを選択します。
先ほどと同様にタイトルとアカウント情報を確認し、アクションは「Create Record」のまま「次へ」をクリックして進んでください。
3.画面が切り替わったら、任意の「Object ID」を入力します。
4.その他の項目は、「取得した値」などを活用しながら任意で設定しましょう。
5.設定完了後に、「テスト」をクリックします。
テストが成功したら、Knackに追加できていることを確認しましょう!
6.確認後、「保存する」をクリックしてください。
最後に「トリガーをON」をクリックしたら、自動化の設定は完了です!
フローボットが正しく起動することを確認しましょう。
以上が、Webflow APIの連携方法とそれを活用した実際のフローボット作成方法でした!
今回紹介した事例以外でも、Yoomではさまざまなサービスとの連携が可能で、それぞれに対応したテンプレートが用意されています。
普段使用しているサービスと連携できるテンプレートを活用して、Webflowを使った業務フローを自動化しましょう!
Webflowのフォームが送信されたら、HubSpotにチケットを作成したり、SalesforceやGoogleスプレッドシートに情報を追加したりできます。
これにより、リード管理からCRM連携、データ集計まで、Webサイトからの情報を自動で活用し、営業・マーケティング活動を効率化します。
フォームのテキストを抽出してBrevoでコンタクトを作成したり、Pipedriveの組織にノートを追加したり組織を追加することも可能です。
これにより、フォームから得た詳細情報を直接CRMに連携させ、顧客管理の精度と効率を高めます。
Webflowでコレクションのアイテムが作成されたら、Airtableへの追加、WordPressでの新規投稿作成、WooCommerceでの商品作成、Klaviyoでのプロフィール作成、Brevoでのキャンペーンレポート作成が可能です。
これにより、Webサイトのコンテンツ更新に伴う情報連携、ECサイトの商品同期など、多岐にわたる業務を自動化し、コンテンツ管理とマーケティング活動を効率化します。
Webflowでアイテムが作成または更新されたら、Microsoft Teams、Slack、Discordに通知できます。
これにより、Webサイトのコンテンツ更新状況をチームにリアルタイムで共有し、情報連携をスムーズにします。
アイテムの内容を抽出してMailchimpでキャンペーンを作成したり、OpenAIで要約してメールで通知したりできます。
これにより、Webサイトのコンテンツを元にしたマーケティングキャンペーンの自動作成や、コンテンツの要約・共有を効率化します。
GoogleフォームやTypeformの回答内容をトリガーに、Webflowのコレクションにアイテムを自動追加できます。
これにより、外部フォームで収集したデータをWebflowのCMSに効率的に連携させ、コンテンツ管理やサイト更新の手間を削減します。
Webflow APIを活用することで、<span class="mark-yellow">これまで手作業で行っていたWebサイトのコンテンツ更新やフォームデータの転記作業が自動化され、業務の手間を大幅に削減し、ヒューマンエラーの発生を防ぎます!
</span>これにより、担当者は単純な繰り返し作業から解放され、より創造的で重要なコア業務に集中できる時間を確保できます。
今回ご紹介したような業務自動化を実現するハイパーオートメーションツール「Yoom」を使えば、プログラミングの知識がない方でも、画面の指示に従って操作するだけで直感的に連携フローを構築できるでしょう。
もしWebflowを使った業務の自動化に少しでも興味を持っていただけたなら、ぜひこちらから無料登録して、その効果を体験してみてください!