オンラインストアを運営していると、注文管理に時間を取られ、他の重要な業務に手が回らなくなることはありませんか？そんな悩みを解決するのが、Webflowとkintoneの連携です。
例えば、Webflowで送信されたフォームデータを自動的にkintoneに反映させることで、手動入力の手間を省き、データ管理の精度向上が可能となるでしょう。
この記事では、手動入力の削減やフォームデータの一元管理といった具体的なメリットと連携方法について紹介します。
顧客管理やリード情報をkintoneで一元管理したい方におすすめです！
とにかく早く試したい方へ
YoomにはWebflowとkintoneを連携するためのテンプレートが用意されています。
今すぐ試したい方は以下のバナーをクリックしてスタートしましょう！
Webflowのフォームが送信されたらkintoneに追加する
試してみる
Webflowのフォームが送信されたらkintoneに追加するフローです。
Webflowとkintoneの連携フローの作り方
それでは、実際にテンプレートを使用して「Webflowのフォームが送信されたらkintoneに追加する」フローを一緒に作っていきましょう！
※今回連携するアプリの公式サイト：Webflow／kintone
[Yoomとは]
はじめる前に
Yoomのアカウントをお持ちでない方は、以下の「Yoomのアカウント発行ページ」からアカウントを発行してください。
Yoomの基本的な操作は「初めてのYoom」をご確認ください。
Yoomのアカウント発行ページ
初めてのYoom
それでは、始めましょう！
ステップ1：Webflowとkintoneをマイアプリ連携
ここではYoomとそれぞれのアプリを連携して、操作を行えるようにしていきます。
まずは基本的な設定方法を解説しているナビをご覧ください！
それではここから今回のフローで使用するアプリのマイアプリ登録方法を解説します。
WebflowとYoomのマイアプリ登録
(1)Yoomにログイン後、左欄にある「マイアプリ」を選択し「＋新規接続」をクリックします。
(2)マイアプリの新規接続一覧の中から、Webflowをクリックします。
(3)「Webflowの新規登録」画面から、アカウント名、アクセストークンを入力し、「追加」をクリックします。
kintoneとYoomのマイアプリ登録
以下の手順をご参照ください。
※サブドメイン、クライアントID、クライアントシークレットの確認方法は下記のサイトをご確認ください。
kintoneマイアプリ登録方法
kintoneのマイアプリ登録ができない主な原因と対応方法について
連携が完了するとYoomのマイアプリにWebflowとkintoneが登録されます。
これで、マイアプリ登録が完了しました。
次に、テンプレートを使用してトリガーの設定をしましょう！
ステップ2：フォーム送信されたら起動するトリガーを設定
(1)先程ご紹介した、テンプレートを使用していきます。下のバナーの「試してみる」をクリックします。
Webflowのフォームが送信されたらkintoneに追加する
試してみる
Webflowのフォームが送信されたらkintoneに追加するフローです。
アプリトリガーの「フォームが送信されたら」をクリックします。
(2)Webflowの「連携アカウントとアクションを選択」画面から、Webflowと連携するアカウント情報に誤りがないかを確認し、トリガーアクションは「フォームが送信されたら」のままで「次へ」をクリックします。
複数サイトを運営していたり、商品によってアカウントを分けている方はタイトルをわかりやすいものに変更すると後からフローを確認・修正する際に便利です。
(3)「アプリトリガーのAPI接続設定」画面から、サイトIDを候補から選択し、「テスト」をクリックします。エラーが発生しなければ、「次へ」をクリックします。
フォームの回答内容を取得する方法は下記のサイトをご参照ください。
「取得する値」を追加する方法
(4)以下の画像に移ったら、「テスト」をクリックし、エラーが発生しなければ、下部にある「保存する」をクリックします。
ステップ3:kintoneのデータベースの操作
(1)次に、kintoneのデータベースを操作します。
「レコードを追加する」をクリックします。
(2)kintoneの「データベースの連携」画面から、kintoneと連携するアカウント情報に誤りがないかを確認し、実行アクションは「レコードを追加する」のままにします。
アプリIDは候補から選択してください。
入力が完了したら、「次へ」をクリックします。
(3)「データベース操作の詳細設定」画面から、各項目のレコードの値を選択していきます。
入力が完了したら、下部にある、「テスト」をクリックし、エラーが発生しなければ、「保存する」をクリックします。
(4)最後に、「トリガーをON」をクリックします。
これで、「Webflowのフォームが送信されたらkintoneに追加する」フローボットの完成です。
Webflowやkintoneを使ったその他の自動化例
WebflowやkintoneのAPIを活用することで、様々な自動化の実現が可能になります。
Webflowを使ったその他の便利な自動化例
Webflowでのアイテム情報更新をチャットツールで通知したり、逆に他ツールでの情報更新をトリガーにWebflowでアイテムを追加したりといった連携が可能です。
Airtableでレコードが更新されたら、Webflowのコレクションのアイテムを更新する
試してみる
■概要
Webflowで構築したサイトのCMSとしてAirtableを活用しているものの、データの同期を手作業で行うことに手間を感じていませんか？情報の更新漏れや入力ミスは、サイトの信頼性にも関わるため避けたい課題です。このワークフローは、そうしたWebflowとAirtable間の連携における課題を解決します。Airtableのレコードが更新されると、関連するWebflowのコレクションアイテムが自動で更新されるため、手作業による運用の手間やミスをなくし、効率的なサイト管理を実現します。
■このテンプレートをおすすめする方
・Webflowで構築したサイトのCMSとしてAirtableを連携させているWeb担当者の方
・Airtableのデータ更新後、Webflowへの手動での反映作業に時間と手間がかかっている方
・手作業によるデータ更新ミスをなくし、サイト運用の属人化を解消したいチームリーダーの方
■注意事項
・Airtable、WebflowのそれぞれとYoomを連携してください。
・トリガーは5分、10分、15分、30分、60分の間隔で起動間隔を選択できます。
・プランによって最短の起動間隔が異なりますので、ご注意ください。
・Airtableのアウトプットの取得方法は下記を参考にしてください。
https://intercom.help/yoom/ja/articles/5404443
Microsoft Teamsにメッセージが送信されたら、テキストを抽出してWebflowにアイテムを追加する
試してみる
■概要
Webflowのチーム機能（Webflow Teams）を利用してサイトを共同管理する際、Microsoft TeamsでのコミュニケーションをWebflowのCMSに手作業で反映させるのは手間ではないでしょうか。コピー＆ペーストによる転記作業は、更新漏れや入力ミスを招く原因にもなりかねません。このワークフローを活用すれば、Microsoft Teamsのチャネルにメッセージが送信されると、その内容を自動でWebflowのコレクションにアイテムとして追加できます。チームでのWebサイト運用を円滑にし、コンテンツ更新の効率化に貢献します。
■このテンプレートをおすすめする方
・Microsoft Teamsの連絡を基に、手作業でWebflowへ情報を転記している方
・Webflow Teamsを利用し、チームでのサイト更新プロセスを効率化したいと考えている方
・Webflow CMSへのアイテム登録を自動化し、ヒューマンエラーを削減したい方
■注意事項
・Microsoft Teams、WebflowのそれぞれとYoomを連携してください。
・Microsoft365（旧Office365）には、家庭向けプランと一般法人向けプラン（Microsoft365 Business）があり、一般法人向けプランに加入していない場合には認証に失敗する可能性があります。
・トリガーは5分、10分、15分、30分、60分の間隔で起動間隔を選択できます。
・プランによって最短の起動間隔が異なりますので、ご注意ください。
Redditで特定のユーザーが投稿したら、Webflowのコレクションにアイテムを追加する
試してみる
■概要
Webflowで構築したサイトに、Redditの特定の情報を反映させたいものの、手作業での確認や転記に手間を感じていませんか。
特定のユーザーの投稿を常に追いかけ、手動でWebflowのコレクションに追加する作業は、時間もかかり見落としのリスクも伴います。
このワークフローを活用すれば、Redditで特定のユーザーが投稿した際に、その内容を自動でWebflowのコレクションアイテムとして追加するため、情報収集からサイト更新までのプロセスを効率化できます。
■このテンプレートをおすすめする方
WebflowとRedditを連携させ、サイトコンテンツの手動更新の手間をなくしたい方
・Redditの特定ユーザーの投稿を監視し、Webflowサイトへスピーディーに反映させたい運営者の方
・プログラミングの知識なしに、WebflowとRedditの連携をノーコードで実現したい方
■注意事項
・Reddit、WebflowのそれぞれとYoomを連携してください。
・トリガーは5分、10分、15分、30分、60分の間隔で起動間隔を選択できます。
・プランによって最短の起動間隔が異なりますので、ご注意ください。
・RedditのアウトプットはJSONPathから取得可能です。取得方法は下記をご参照ください。
https://intercom.help/yoom/ja/articles/6807133
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でアイテムが公開されたら、GitHubでIssueを作成する
試してみる
■概要
Webflowで新しいコンテンツやブログ記事を公開するたびに、開発タスクとしてGitHubに手動でIssueを作成する作業は、手間がかかる上に転記ミスも起こりがちではないでしょうか。このワークフローは、WebflowとGitHubを連携させることで、こうした定型業務の自動化を実現します。Webflowで新しいアイテムが公開されると、その情報をもとにGitHubのIssueが自動で作成され、開発チームへの共有を円滑にします。
■このテンプレートをおすすめする方
・WebflowとGitHub間の情報連携を手作業で行い、非効率を感じているWeb担当者の方
・Webサイトのコンテンツ公開と開発タスクの連携を、よりスムーズに行いたいチームリーダーの方
・Webサイトの運用フローを自動化し、ヒューマンエラーを削減したいと考えている方
■注意事項
・Webflow、GitHubのそれぞれとYoomを連携してください。
・Webflowの内容を取得する方法は下記を参照ください。
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でコレクションのアイテムが作成されたら楽楽販売に追加する
試してみる
■概要
Webflowのフォームから獲得したリード情報を、楽楽販売へ手作業で転記する業務に手間を感じていませんか。この作業は時間がかかるだけでなく、入力ミスといったヒューマンエラーの原因にもなり得ます。
このワークフローを活用すれば、Webflowと楽楽販売の連携をスムーズに自動化できます。Webflowで新しいアイテムが作成されると、その情報が楽楽販売に自動で登録されるため、こうした定型業務の課題を解消し、業務の正確性と効率を高めることが可能です。
■このテンプレートをおすすめする方
・Webflowで獲得したリード情報を楽楽販売へ手入力しており、手間を感じているご担当者の方
・Webflowと楽楽販売を連携させ、データ入力のミスや漏れをなくしたいと考えている方
・定型的なデータ登録作業から解放され、より重要な業務にリソースを集中させたい方
■注意事項
・Webflow、楽楽販売のそれぞれとYoomを連携してください。
Webflowでフォームが送信されたら、Discordで通知する
試してみる
■概要
Webflowで作成したWebサイトのフォームから問い合わせがあった際、気づくのが遅れて対応が後手になってしまうことはありませんか？
手動での確認作業は手間がかかる上に、機会損失にも繋がりかねません。
このワークフローを活用すれば、Webflowのフォーム送信をトリガーに、指定のDiscordチャンネルへ即時通知を自動で送信できます。Webflowを活用した業務のオートメーションに関心のある方にとって、迅速な顧客対応を実現する第一歩となるでしょう。
■このテンプレートをおすすめする方
・Webflowで獲得したリードへの対応速度を上げたいマーケティングや営業担当者の方
・社内のコミュニケーションツールとしてDiscordを利用しており、情報集約を効率化したい方
・WebflowとDiscordの連携を検討しており、ノーコードで手軽に通知の仕組みを構築したい方
■注意事項
・Webflow、DiscordのそれぞれとYoomを連携してください。
・Webflowの内容を取得する方法は下記を参照ください。
https://intercom.help/yoom/ja/articles/5404443
Webflowでフォームが送信されたら、HubSpotでコンタクトを作成する
試してみる
■概要
Webflowのフォームから問い合わせや資料請求があった際、その情報をHubSpotに手作業で登録していませんか？この定型業務は入力漏れや対応の遅延に繋がるだけでなく、本来注力すべきコア業務を圧迫する一因にもなります。このワークフローを活用すればWebflowでフォームが送信されたら自動でHubSpotにコンタクトを作成することが可能になり、手作業によるデータ転記の手間を解消できます。
■このテンプレートをおすすめする方
・Webflowのフォーム情報をHubSpotへ手入力しており、作業を効率化したい方
・フォームからのリード情報を迅速にHubSpotへ反映させたいマーケティング担当者の方
・データの転記ミスを防ぎ、顧客情報管理の精度を高めたいと考えている方
■注意事項
・Webflow、HubSpotのそれぞれとYoomを連携してください。
・Webflowの内容を取得する方法は下記を参照ください。
https://intercom.help/yoom/ja/articles/5404443
Webflowのコレクションのアイテムが非公開になったらGoogle Chatに通知する
試してみる
■概要
Webflowで管理しているコレクションアイテムが意図せず非公開になってしまい、関係者への共有が遅れてしまった経験はありませんか？手動でステータスを確認し、通知するのは手間がかかる作業です。
このワークフローを活用すれば、Webflowでコレクションのアイテムが非公開になったタイミングを自動で検知しGoogle Chatへ通知を送信できます。これにより、重要な変更の見落としを防ぎ、迅速な対応を実現します。
■このテンプレートをおすすめする方
・Webflowで管理するコンテンツのステータス変更をチームに迅速に共有したいサイト運営者の方
・Webflowのアイテムが非公開になった際の通知を手作業で行っており、自動化したいと考えている方
・Google Chatを活用し、Webサイトの更新状況を素早く把握したいチームリーダーの方
■注意事項
・Webflow、Google ChatのそれぞれとYoomを連携してください。
・Google Chatとの連携はGoogle Workspaceの場合のみ可能です。詳細は「Google Chatでスペースにメッセージを送る方法」を参照ください。
https://intercom.help/yoom/ja/articles/6647336
kintoneを使った自動化例
kintoneのレコード登録にあわせてフォルダを自動作成することや、Salesforceの新規リード情報をkintoneに自動反映することが可能です。
Googleフォームに回答が送信されたら、kintoneにレコードを追加する
試してみる
Googleフォームに新しく回答が送信されたら、kintoneに回答内容をレコードに追加するフローです。
Salesforceに新規リードが登録されたら、kintoneに登録する
試してみる
■概要
Salesforceに新しいリードが登録されるたびに、kintoneにも手作業で情報を転記するのは手間がかかりませんか？
二重入力の手間や、転記ミスなどのヒューマンエラーは、避けたい業務課題の一つです。
このワークフローを活用すれば、Salesforceに新規リードが登録されると、自動でkintoneにレコードが追加されるため、こうしたデータ連携の課題をスムーズに解消できます。
■このテンプレートをおすすめする方
・Salesforceとkintoneを併用し、リード情報の手入力に手間を感じている方
・データ入力のミスや漏れを防ぎ、リード管理の精度を高めたい営業担当者の方
・SaaS間のデータ連携を自動化し、営業プロセスの効率化を目指すマネージャーの方
■注意事項
・Salesforce、KintoneのそれぞれとYoomを連携してください。
・Salesforceはチームプラン・サクセスプランでのみご利用いただけるアプリとなっております。フリープラン・ミニプランの場合は設定しているフローボットのオペレーションやデータコネクトはエラーとなりますので、ご注意ください。
・チームプランやサクセスプランなどの有料プランは、2週間の無料トライアルを行うことが可能です。無料トライアル中には制限対象のアプリを使用することができます。
・トリガーは5分、10分、15分、30分、60分の間隔で起動間隔を選択できます。
・プランによって最短の起動間隔が異なりますので、ご注意ください。
Outlookのカレンダーに予定が登録されたらkintoneにレコードを追加する
試してみる
Outlookの指定のカレンダーに予定が登録されたら、kintoneに自動的にレコードを追加するフローボットです。
kintoneにレコードが登録されたらboxにフォルダを作成
試してみる
kintoneにレコードが登録されたら、そのレコード情報でboxにフォルダを自動的に作成します。
kintoneにレコードが登録されたらChatworkに通知
試してみる
kintoneにレコードが登録されたらChatGPTでテキストを生成する
試してみる
kintoneに新規レコードが登録されたら、ChatGPTでテキストを生成して、作成されたテキストをkintoneのデータベースに格納するフローです。
kintoneにレコード登録されたら、Microsoft SharePointにフォルダを作成する
試してみる
kintoneに新しく取引先のレコードが登録されたら、Microsoft SharePointに取引先名のフォルダを新たに作成するフローです。
kintoneのステータスが更新されたらZoomの会議URLを発行し、メールで送付
試してみる
kintoneのステータスが指定のものに更新されたら、更新されたレコードの情報を元にZoomの会議URLを発行し、メールで送付します。
kintoneのコメントで自分がメンションされたらSlackに通知
試してみる
kintoneのコメントで自身がメンションされたら、そのコメント内容をSlackのDMに送信するフローボットです。
クラウドサインで書類の締結が完了したら、kintoneのステータスを更新
試してみる
クラウドサインで書類の締結が完了したら、kintoneのステータスを更新します。
さらに、Webflowとkintoneを使ったテンプレートを確認したい方は、以下のサイトをご覧ください。
Webflowを使用したフローボットテンプレート一覧
kintoneを使用したフローボットテンプレート一覧
Webflowとkintoneを連携するメリット
メリット1:手動入力の削減
Webflowとkintoneを連携することで、Webflowのフォームが送信された際に自動でkintoneに情報が追加されます。これにより、担当者はフォームデータをkintoneに手動で転記する手間を省き、ミスの発生率を減少させることができるでしょう。また、この連携は時間とリソースの節約にもつながり、全体的な作業効率向上が期待できます。データの自動入力によって、迅速で正確な情報管理が可能になり、チーム全体の生産性が高まるでしょう。
特に、営業チームやカスタマーサポートにとっては、顧客対応のスピードと質が向上するため、大きなメリットとなるでしょう。
メリット2:フォームデータの一元管理
Webflowとkintoneの連携により、異なるプラットフォームで発生するデータを一元管理でき、情報が散在する問題を解決できます。これにより、チーム全体で必要な情報にリアルタイムにアクセスでき、業務全体のスムーズな進行が期待できます。
例えば、マーケティングチームが複数のキャンペーンを同時に運用している場合でも、すべてのデータを一元管理することで、キャンペーンの効果測定や改善点の特定しやすくなるでしょう。これは、複数のフォームや案件を扱う企業にとって特に役立つでしょう。
まとめ
Webflowとkintoneの連携により手動作業を削減し、データ管理やワークフローの効率化を実現できそうですね！
フォームデータの自動登録によって入力ミスのリスクが減少し、業務全体の精度向上が見込めます。
また、データの一元管理によりチーム全体での情報共有がスムーズになり、作業の見落としも防止されるでしょう。
興味のある方は、ぜひ今回の記事を参考に試してみてくださいね！
よくあるご質問
Q：Webflowのフォーム項目を変更した場合の注意点は？
A：
サイトID自体が変わる場合は、トリガー設定で新しいサイトIDに修正してください。既存のフォームの項目を変更する(サイトIDに変更がない)場合は修正不要です。
Q：フォーム送信だけでなく、アイテム情報や注文データもkintoneに登録できますか？
A：
可能です。以下のテンプレートもご利用いただけますので、ぜひお試しください。
Webflowで注文が発生したらkintoneに追加する
試してみる
Webflowで注文が発生したらkintoneに追加するフローです。
Webflowでコレクションのアイテムが作成されたらkintoneに追加する
試してみる
Webflowでコレクションのアイテムが作成されたらkintoneのデータベースに追加するフローです。
Q：フォームの回答内容によって処理を分けられますか？
A：
進行先の切り替え設定を追加することで可能です。例えば「フォーム名が〇〇(特定のフォーム名)と等しい場合」などと設定することで進行先の切り替えができます。あとはそれぞれの切り替え先で別のアプリIDを指定し「追加するレコードの値」を設定してください。
※「進行先を切り替える」はミニプラン以上のプランでご利用いただける機能（オペレーション）となっております。フリープランの場合は設定しているフローボットのオペレーションはエラーとなりますので、ご注意ください。
※ミニプランなどの有料プランは、2週間の無料トライアルを行うことが可能です。無料トライアル中には制限対象のアプリや機能（オペレーション）を使用することができます。
.avif)
.avif)
