Webflowでサイトを更新するたびに関係者へ手動でメールを送信したり、更新内容をSlackで共有したりする作業に手間を感じていませんか？
特に、複数のメンバーが関わるプロジェクトでは、迅速かつ正確な情報共有が不可欠です。
しかし、手作業での通知は漏れや遅延のリスクが伴い、本来集中すべきサイト制作やコンテンツ改善の時間を圧迫してしまいます。
もし、Webflowでサイトのアイテムが更新されたタイミングを自動で検知し、指定した宛先にメール通知できる仕組みがあれば、これらの悩みから解放されるでしょう！
今回ご紹介する自動化は、ノーコードで簡単に設定できて、手間や時間もかかりません。
ぜひ自動化を導入して作業をもっと楽にしましょう！
とにかく早く試したい方へ
YoomにはWebflowの更新情報を取得する業務フロー自動化のテンプレートが用意されています。
「まずは試してみたい！」という方は、以下のバナーをクリックして、すぐに自動化を体験してみましょう！
Webflowでアイテムが更新されたら、Gmailで通知する
試してみる
Webflowの更新をGmailで自動通知するフローを作ってみよう
それではここから代表的な例として、Webflowでアイテムが更新された際に、その内容をGmailで自動的に通知するフローを解説していきます！
ここではYoomを使用してノーコードで設定をしていくので、もしまだYoomのアカウントをお持ちでない場合は、Yoomの登録フォームからアカウントを発行しておきましょう。
※今回連携するアプリの公式サイト：Webflow／Google Workspace
[Yoomとは]
フローの作成方法
今回は大きく分けて以下のプロセスで作成します。
- WebflowとGmailのマイアプリ連携
- テンプレートをコピー
- Webflowのトリガー設定とGmailのアクション設定
- トリガーをONにし、フローが起動するかを確認
Webflowでアイテムが更新されたら、Gmailで通知する
試してみる
ステップ1：WebflowとGmailをマイアプリ連携
ここでは、Yoomとそれぞれのアプリを連携して、操作が行えるようにしていきます。
まずは基本的な設定方法を解説しているナビをご覧ください！
※Gmailの連携方法は、以下のGoogle スプレッドシートの連携方法をご参照ください。
Webflowの連携
同様に検索欄にWebflowと記入して、表示されたWebflowのアイコンをクリックします。
アカウント名とアクセストークンを記入して、「追加」ボタンをクリックしましょう！
下記のような表示が出たら、連携は成功です！
ステップ2：テンプレートをコピーする
続いてYoomのテンプレートをコピーします。以下バナーの「試してみる」をクリックしましょう。
Webflowでアイテムが更新されたら、Gmailで通知する
試してみる
以下の画像のような画面が表示されたらテンプレートのコピーは完了です。
ステップ3：Webflowのトリガー設定
トリガー設定を行っていきます。
1つ目の赤枠をクリックしましょう。
連携アカウントとアクションを選択しましょう。
トリガーアクションは、テンプレート通りに「コレクションのアイテムが更新されたら」のままで大丈夫です。
「次へ」をクリックして進んでください。
サイトを候補の中から選択し、サイトIDの登録を行います。
WebhookURLの登録を行います。
「WebhookURLを登録」をクリックしましょう！
テストに成功したら、「次へ」ボタンで次のページに進みます。
次に、Webflowのコレクションのアイテムを更新しましょう！
Yoomの設定に戻ったら、「テスト」ボタンを押します。
「テスト成功」と表示が出たら、取得した値にデータが反映されます。
※取得した値とは、トリガーやオペレーションにて取得した値を指します。
取得した値は、後続のオペレーション設定時の値としてご利用いただくことができ、フローボットを起動する度に、変動した値となります。
取得した値が確認できたら、最後に「完了」ボタンを押しましょう！
ステップ4：Gmailのアクション設定
次にGmailのアクション設定をしていきます。
2つ目の赤枠をクリックします。
連携するアカウント情報に間違いがないか確認しましょう！
特に問題がなければ、メール内容の設定に移ります。
送信先と件名を手動で設定します。
BCCやCCも任意で設定が可能です！
Webflowで取得した値を利用して、メール本文を作成しましょう。
取得した値を利用することで、トリガーが起動するたびに最新の値を自動で引用できます。
本文の作成が終了したら「次へ」ボタンをクリックします。
作成したメールの送信内容が表示されています。
メール内容に問題がないか確認が終わったら、最後に「テスト」ボタンをクリックしましょう。
テスト成功です！
Gmailを確認してみましょう。
Webflowでのコレクション更新を知らせるメールが送信されています！
最後にYoomの設定画面で完了ボタンをクリックして設定を保存しましょう。
ステップ5：トリガーをONにし、フローが起動するかを確認
最後に、画面右上の「トリガーをON」をクリックし、Webflowで実際にコレクションアイテムを更新して、Gmailに通知が届けば設定は完了です！
Webflowを使った自動化例
サイト内のフォーム回答を自動集計したり、AIで内容を要約してメール通知したりすることが可能です。
さらに、決済サービスやECサイトと連携した商品情報の同期、各種フォームやチャットツールからのコンテンツ投稿など、サイト更新にまつわる煩雑な作業をノーコードで一気に自動化。
手作業による更新漏れを防ぎ、最新の情報を常にスピーディーに発信できる体制を構築しましょう。
Webflowでアイテムが更新されたら、Outlookで通知する
試してみる
GitHubでプルリクエストが作成されたら、Webflowにアイテムを追加する
試してみる
■概要
GitHubでの開発進捗をWebflowサイトに反映させる際、プルリクエストの情報を手作業でコピー＆ペーストしていませんか？この作業は手間がかかる上に、転記ミスや更新漏れの原因にもなり得ます。このワークフローを活用すれば、GitHubとWebflowの連携が自動化され、プルリクエストが作成されると同時にWebflowのコレクションにアイテムが追加されるため、こうした課題を円滑に解決します。
■このテンプレートをおすすめする方
・GitHubとWebflowを連携させ、開発の進捗管理を効率化したい方
・プルリクエストの情報をWebflowのCMSに手作業で転記している方
・開発チームとWebサイト管理チーム間の情報共有を円滑にしたい方
■注意事項
・GitHub、WebflowのそれぞれとYoomを連携してください。
・トリガーは5分、10分、15分、30分、60分の間隔で起動間隔を選択できます。
・プランによって最短の起動間隔が異なりますので、ご注意ください。
Googleフォームの回答内容でWebflowのコレクションにアイテムを追加する
試してみる
■概要
「Googleフォームの回答内容でWebflowのコレクションにアイテムを追加する」ワークフローは、Webflow formを活用して収集したデータを自動的にWebflowのコレクションに登録します。
これにより、手動でのデータ入力作業を削減し、効率的なサイト運営をサポートします。
YoomのAPI連携機能を駆使し、スムーズなデータ移行を実現します。
■このテンプレートをおすすめする方
・Googleフォームを利用して顧客やユーザーからの情報を収集しているウェブサイト運営者
・Webflowを使ってサイトを構築し、コレクションを活用してコンテンツ管理を行っているデザイナーや開発者
・手動でのデータ入力に時間を取られず、業務を自動化したいと考えているビジネスオーナー
・Yoomを活用して複数のSaaSアプリ間の連携を効率化したい方
■注意事項
・WebflowとGoogleフォームのそれぞれとYoomを連携してください。
・トリガーは5分、10分、15分、30分、60分の間隔で起動間隔を選択できます。
・プランによって最短の起動間隔が異なりますので、ご注意ください。
・Googleフォームでのアウトプットの取得方法は下記を参考にしてください。
https://intercom.help/yoom/ja/articles/5505530
Webflowのフォームが送信されたらGoogleスプレッドシートに追加する
試してみる
Webflowのフォームが送信されたらGoogleスプレッドシートに追加するフローです。
Trelloで特定のカード情報が更新されたら、ClickUpでタスクを作成する
試してみる
■概要
プロジェクト管理ツールとして人気のClickUpとTrelloですが、両ツール間の情報連携に手間を感じていませんか。
手動での転記作業は、時間もかかり、更新漏れの原因にもなり得ます。
このワークフローを活用すれば、Trelloでカード情報が更新されると、自動でClickUpにタスクが作成されるため、二重入力の手間をなくし、抜け漏れのないタスク管理を実現します。
■このテンプレートをおすすめする方
・TrelloとClickUpを併用し、タスクの二重入力に手間を感じている方
・TrelloとClickUp間の情報連携を自動化し、手作業による更新漏れを防ぎたい方
・プロジェクトの進捗管理をより効率化し、コア業務に集中したいと考えている方
■注意事項
・Trello、ClickUpのそれぞれとYoomを連携してください。
・分岐はミニプラン以上のプランでご利用いただける機能（オペレーション）となっております。フリープランの場合は設定しているフローボットのオペレーションはエラーとなりますので、ご注意ください。
・ミニプランなどの有料プランは、2週間の無料トライアルを行うことが可能です。無料トライアル中には制限対象のアプリや機能（オペレーション）を使用することができます。
Slackで特定のメッセージが送信されたら、テキストからデータを抽出しWebflowでアイテムを追加する
試してみる
■概要
Webflowで構築したサイトのコンテンツ更新で、Slackで受け取った情報を手動でアイテムとして追加する作業に手間を感じていませんか？こうした手作業は、更新漏れや入力ミスといったヒューマンエラーの原因にもなり得ます。このワークフローを活用すれば、Slackへの特定のメッセージ投稿をきっかけに、AIが自動で内容を解析し、Webflowへアイテムとして追加します。WebflowとSlackの連携を効率化し、コンテンツ更新をスムーズにすることが可能です。
■このテンプレートをおすすめする方
・Webflowで構築したサイトのコンテンツ更新をSlackで行っており、手作業での転記に手間を感じている方
・Slackでの連絡を基にWebflowへアイテムを追加する際の、入力ミスや更新漏れを防ぎたいWeb担当者の方
・WebflowとSlackを連携させ、コンテンツ管理業務の自動化や効率化を実現したいと考えている方
■注意事項
・Slack、WebflowのそれぞれとYoomを連携してください。
・トリガーは5分、10分、15分、30分、60分の間隔で起動間隔を選択できます。
・プランによって最短の起動間隔が異なりますので、ご注意ください。
・分岐はミニプラン以上のプランでご利用いただける機能（オペレーション）となっております。フリープランの場合は設定しているフローボットのオペレーションはエラーとなりますので、ご注意ください。
・ミニプランなどの有料プランは、2週間の無料トライアルを行うことが可能です。無料トライアル中には制限対象のアプリや機能（オペレーション）を使用することができます。
Stripeで商品が作成されたら、Webflowにアイテムを追加する
試してみる
■概要
Stripeで新しい商品を追加するたびに、Webflowで構築したECサイトにも手作業でアイテムを登録するのは手間がかかり、入力ミスや登録漏れの原因にもなりがちです。このワークフローは、そうした課題を解決するために設計されました。Stripeで商品が作成されると、その情報を基にWebflowのコレクションへアイテムが自動で追加されるため、商品登録に関する一連の作業を効率化し、手作業によるミスを防ぎます。
■このテンプレートをおすすめする方
・WebflowとStripeでECサイトを運営しており、商品登録を手作業で行っている方
・StripeからWebflowへの情報転記における、入力ミスや反映漏れをなくしたい方
・WebflowとStripeを連携させ、ECサイトの商品管理をより効率的に行いたい方
■注意事項
・Stripe、WebflowのそれぞれとYoomを連携してください。
・Stripeはチームプラン・サクセスプランでのみご利用いただけるアプリとなっております。フリープラン・ミニプランの場合は設定しているフローボットのオペレーションやデータコネクトはエラーとなりますので、ご注意ください。
・Stripeの商品メタデータにWebflowのアイテムIDなど更新に必要なデータを予め設定する必要があります。
・チームプランやサクセスプランなどの有料プランは、2週間の無料トライアルを行うことが可能です。無料トライアル中には制限対象のアプリを使用することができます。
・WebflowのDescriptionを取得する方法は下記を参照ください。
https://intercom.help/yoom/ja/articles/5404443
Webflowでアイテムが作成されたら、WooCommerceで商品を作成する
試してみる
■概要
Webflowでデザイン性の高いサイトを構築し、WooCommerceでEコマースを展開しているものの、商品情報の二重入力に手間を感じていませんか？手作業での登録は時間がかかるだけでなく、入力ミスの原因にもなり得ます。
このワークフローを活用すれば、Webflowのコレクションにアイテムを追加するだけで、WooCommerceに商品情報が自動で作成されます。WooCommerceとWebflowのスムーズな連携を実現し、商品登録に関わる一連の作業を効率化します。
■このテンプレートをおすすめする方
・WebflowとWooCommerceを併用し、商品を手作業で登録しているECサイトの運営担当者の方
・WooCommerceとWebflowを連携させ、商品管理のプロセスを自動化したいと考えている方
・サイト更新と商品登録の二重入力をなくし、本来のコア業務に集中したいと考えている方
■注意事項
・Webflow、WooCommerceのそれぞれとYoomを連携してください。
・WebflowのDescriptionを取得する方法は下記を参照ください。
https://intercom.help/yoom/ja/articles/5404443
Webflowでアイテムが公開されたら、テキストを抽出してMailchimpでキャンペーンを作成する
試してみる
■概要
Webflowで公開した新しいコンテンツや製品情報を、手作業でMailchimpのメールキャンペーンに反映させる作業に、手間や時間を取られていませんか。このワークフローを活用することで、WebflowとMailchimpをノーコードで連携させ、アイテムが作成されたタイミングで自動的にキャンペーンを作成できます。Webサイトの公開からメールマーケティング施策までをスムーズに繋げ、一貫性のある情報発信を効率的に実現します。
■このテンプレートをおすすめする方
・MailchimpとWebflowを用いて、コンテンツ公開やメール配信を手作業で行っているWeb担当者の方
・Webflowのアイテム情報を活用したメールキャンペーンの作成を自動化し、業務効率を改善したい方
・Webサイト公開から顧客への情報発信までの時間を短縮し、マーケティング活動を迅速化したい方
■注意事項
・Webflow、MailchimpのそれぞれとYoomを連携してください。
・Webflowの内容を取得する方法は下記を参照ください。
https://intercom.help/yoom/ja/articles/5404443
Webflowでフォームが送信されたら、OpenAIで内容を要約してメールで通知する
試してみる
■概要
Webflowで構築したサイトのフォームから届く長文のお問い合わせについて、内容を把握するために都度全文を確認する作業に手間を感じていませんか。このワークフローは、Webflowのフォームが送信されると、その内容をOpenAIが自動で要約し、指定のメールアドレスへ通知するものです。WebflowとOpenAIを連携させることで、問い合わせ内容の迅速な把握と、スピーディーな一次対応の実現を支援します。
■このテンプレートをおすすめする方
・Webflowで作成したフォームからの問い合わせ対応に時間がかかっているWebサイト担当者の方
・WebflowとOpenAIを連携させ、問い合わせ対応の初動を早めたいと考えている方
・フォームから送られる内容の確認と担当者への共有を手作業で行っているチームのリーダーの方
■注意事項
・Webflow、OpenAIのそれぞれとYoomを連携してください。
・Webflowから送信されたフォームの内容を取得する方法は下記を参照ください。
https://intercom.help/yoom/ja/articles/5404443
・ChatGPT（OpenAI）のアクションを実行するには、OpenAIのAPI有料プランの契約が必要です。（APIが使用されたときに支払いができる状態）
https://openai.com/ja-JP/api/pricing/
・ChatGPTのAPI利用はOpenAI社が有料で提供しており、API疎通時のトークンにより従量課金される仕組みとなっています。そのため、API使用時にお支払いが行える状況でない場合エラーが発生しますのでご注意ください。
まとめ
WebflowとGmailの連携を自動化することで、これまで手作業で行っていたサイト更新の通知業務を削減し、ヒューマンエラーを防ぎながら関係者への迅速な情報共有を実現可能です。
これにより、Web担当者やコンテンツ制作者は単純な連絡作業から解放され、サイト改善やコンテンツ制作といった、より創造的なコア業務に集中できる環境が整うでしょう！
今回ご紹介したような業務自動化を実現できるノーコードツール「Yoom」を使えば、プログラミングの知識がない方でも、直感的な操作で簡単に業務フローを構築できます。
もし自動化に少しでも興味を持っていただけたなら、ぜひ登録フォームから無料登録して、Yoomによる業務効率化を体験してみてください！
よくあるご質問
Q：連携エラーで通知が失敗したらどうなりますか？
A：
フローボットがエラーになると、Yoomに登録する際に設定したメールアドレスに通知が送られます。
通知先は、メールの他にSlackやChatworkも設定できます。
通知内容にはエラーになったオペレーションも記載されているので、エラーの発生個所がすぐにわかります。
再実行は自動で行われないため、エラー修正後手動で再実行してください。
Q：サイトが「公開」された時だけ通知できますか？
A：
はい、可能です。
「分岐する」オペレーションを追加することで、条件に合致する場合のみフローが先に進むようになります。
ただし、「分岐する」オペレーションはミニプラン以上でご利用できます。
フリープランで利用するとエラーになってしまうのでご注意ください。
Q：Webflowフォーム送信をきっかけに通知できますか？
A：
はい、できます！
Webflowのトリガーを、「フォームが送信されたら」にしてください。
また、Yoomでは様々なパターンのテンプレートもご紹介しているので、気になるものがあればぜひお試しください。
