Webflowと@pocketを連携して、Webflowでアイテムが作成されたら@pocketに追加する方法

コレクションアイテムの情報把握は、WebflowでWebサイト運営をしている場合に欠かせないものです。しかし、データベースでコレクションアイテムの情報を一覧化している場合、転記作業に手間がかかることでデータの確認や分析の開始が遅れてしまいます。その遅れを解消するために、データ転記の自動化がおすすめです。

本記事では、Webflowでコレクションアイテムが新たに作成された際に、@pocketにコレクションアイテムの概要を自動で同期する方法を紹介します。データを正確かつ迅速に共有し、コンテンツ管理の効率化を図りましょう。

Webflowと@pocketを連携するメリット

メリット1: 情報共有の迅速化

連携と自動化により、Webflowのコレクションアイテムのデータが、作成後すぐに@pocketに同期されます。これにより、更新情報をもとにデータの確認や分析をスムーズに始められます。例えば、Webサイト管理者は、作成日とアイテム数から作成ペースを把握したり、アイテム名の設定に問題がないかチェックして修正指示を行ったりできます。

また、他の部署の担当者も同じタイミングで情報を共有できるため、営業やマーケティング担当者による、新商品やキャンペーン企画のページが漏れなく作成されているかの確認も速やかに行えます。

メリット2: 手動作業の削減による効率化

連携によってコレクションアイテムのデータ同期を自動化することで、手作業でのデータ転記が不要になります。これにより、Webサイトの運営担当者は、転記に費やしていた時間でコンテンツ制作や効果測定といった他の重要な業務に集中できるようになります。また、入力ミスや入力漏れといった人的ミスが減少することによって、データの信頼性向上が期待できるでしょう。

[Yoomとは]

Webflowと@pocketの連携フローの作り方

それでは、Webflowと@pocketの連携と業務フローの自動化設定を行ってみましょう。

テンプレートを使って、「Webflowでコレクションのアイテムが作成されたら@pocketに追加する」業務フローの作成手順を紹介します。

はじめる前に

1. @pocketで、コレクションアイテムを同期するデータベースアプリを作成しておいてください。

2. Yoomにログインしてください。

3. 以下の「試してみる」ボタンから、Yoomのテンプレートをコピーしてください。

Webflowでコレクションのアイテムが作成されたら@pocketに追加する

試してみる

---

■概要

Webflowで新しいコンテンツを作成するたびに、後で確認するために手動で@pocketへ追加する作業に手間を感じていませんか？この繰り返し作業は、登録漏れや他の業務を圧迫する原因になりがちです。このワークフローを活用すれば、Webflowと@pocketの連携をスムーズに自動化できます。Webflowでコレクションにアイテムが作成されると、その情報が自動で@pocketに登録されるため、手作業による情報管理の手間をなくし、より効率的なコンテンツ運用を実現します。

■このテンプレートをおすすめする方

• Webflowで作成したコンテンツを、後で確認するために手動で@pocketへ追加している方
• Webflowと@pocketの連携を手作業で行っており、入力の手間や登録漏れをなくしたい方
• コンテンツ制作後の情報ストック作業を自動化し、業務効率を向上させたいと考えている方

■このテンプレートを使うメリット

• Webflowでコレクションアイテムを作成するだけで自動的に@pocketへ登録されるため、これまで手作業で行っていたURLのコピー＆ペーストなどの時間を削減できます
• 手動での登録作業が不要になることで、登録漏れや誤った情報の追加といったヒューマンエラーを防ぎ、確実な情報ストックが可能になります

■フローボットの流れ

1. はじめに、Webflowと@pocketをYoomと連携します
2. 次に、トリガーでWebflowを選択し、「コレクションのアイテムが作成されたら」というアクションを設定します
3. 最後に、オペレーションで@pocketを選択し、「レコード情報を登録」アクションを設定し、トリガーで取得した情報を紐付けます

※「トリガー」：フロー起動のきっかけとなるアクション、「オペレーション」：トリガー起動後、フロー内で処理を行うアクション

■このワークフローのカスタムポイント

• @pocketにレコード情報を登録するオペレーションでは、どの情報を登録するかを任意で設定してください。Webflowのトリガーで取得したアイテムのURLやタイトルといった情報を、@pocketの各登録項目に紐付けることで、必要な情報が自動で保存されるようになります

■注意事項

• ‍‍Webflow、@pocketのそれぞれとYoomを連携してください。

詳細を見る 試してみる

ステップ1: Webflowと@pocketのマイアプリ連携

※アプリ連携がお済みの場合は、ステップ2へ進んでください。

1. 左メニューの「マイアプリ」を選択し、画面右の「+ 新規接続」をクリックします。

2. マイアプリの新規接続一覧からWebflowと@pocketをそれぞれ選択し、アプリを連携してください。
　※下図は@pocketの連携画面です。説明を参考にして、すべての項目に入力してください。

次は、マイプロジェクトにテンプレートコピーして、フローボットを作成していきます。
コピーがまだの場合は、フローボットテンプレートを下記よりコピーしてください。

Webflowでコレクションのアイテムが作成されたら@pocketに追加する

試してみる

---

■概要

Webflowで新しいコンテンツを作成するたびに、後で確認するために手動で@pocketへ追加する作業に手間を感じていませんか？この繰り返し作業は、登録漏れや他の業務を圧迫する原因になりがちです。このワークフローを活用すれば、Webflowと@pocketの連携をスムーズに自動化できます。Webflowでコレクションにアイテムが作成されると、その情報が自動で@pocketに登録されるため、手作業による情報管理の手間をなくし、より効率的なコンテンツ運用を実現します。

■このテンプレートをおすすめする方

• Webflowで作成したコンテンツを、後で確認するために手動で@pocketへ追加している方
• Webflowと@pocketの連携を手作業で行っており、入力の手間や登録漏れをなくしたい方
• コンテンツ制作後の情報ストック作業を自動化し、業務効率を向上させたいと考えている方

■このテンプレートを使うメリット

• Webflowでコレクションアイテムを作成するだけで自動的に@pocketへ登録されるため、これまで手作業で行っていたURLのコピー＆ペーストなどの時間を削減できます
• 手動での登録作業が不要になることで、登録漏れや誤った情報の追加といったヒューマンエラーを防ぎ、確実な情報ストックが可能になります

■フローボットの流れ

1. はじめに、Webflowと@pocketをYoomと連携します
2. 次に、トリガーでWebflowを選択し、「コレクションのアイテムが作成されたら」というアクションを設定します
3. 最後に、オペレーションで@pocketを選択し、「レコード情報を登録」アクションを設定し、トリガーで取得した情報を紐付けます

※「トリガー」：フロー起動のきっかけとなるアクション、「オペレーション」：トリガー起動後、フロー内で処理を行うアクション

■このワークフローのカスタムポイント

• @pocketにレコード情報を登録するオペレーションでは、どの情報を登録するかを任意で設定してください。Webflowのトリガーで取得したアイテムのURLやタイトルといった情報を、@pocketの各登録項目に紐付けることで、必要な情報が自動で保存されるようになります

■注意事項

• ‍‍Webflow、@pocketのそれぞれとYoomを連携してください。

詳細を見る 試してみる

1.バナーにカーソルを合わせ「詳細を見る」をクリック
2.移行したページの「このテンプレートを試す」をクリック
3.Yoomの登録を行う
※既に登録が完了している場合はログイン画面が表示されるので、ログインしましょう。

ステップ2: Webflowの新しいコレクションアイテムの作成時に起動するトリガーの設定

1. コピーしたテンプレートを開きます。
　※下図の赤枠部分から、任意のタイトルに変更できます。

2. フローボットの「アプリトリガー：コレクションのアイテムが作成されたら」をクリックします。

3. 連携アカウントとアクションを選択します。
　必要に応じてタイトルを変更し、「次へ」をクリックします。

4. アプリトリガーのAPI接続設定を行います。
　サイトIDを候補から選び、「テスト」をクリックします。

5. テストが成功したら、「次へ」をクリックします。

6. Webflowで新しいコレクションアイテムをテスト作成した後、「テスト」をクリックします。

7. テストが成功したら、「保存する」をクリックします。

ステップ3: @pocketにコレクションアイテムの情報を追加するアクションの設定

1. フローボットの「アプリと連携する：レコード情報を登録」をクリックします。

2. 連携アカウントとアクションを選択します。
　タイトルを必要に応じて変更し、「次へ」をクリックします。

3. API接続設定を行います。
　アプリID：情報を同期するデータベースのアプリIDを入力してください。
　レコード情報「フィールド識別名」：情報を追加したい項目のフィールド(列)名を選択してください。
　レコード情報「値」：ステップ2で取得したアウトプットを、フィールド識別名に合わせて設定してください。
　※下図は入力例です。
　※複数の項目を同期する場合は、「+ レコード情報を追加」をクリックして設定してください。

　※下図は、アウトプットの参照例です。入力欄をクリックすると候補が表示されるため、使用したいアウトプットを選択してください。

4. 「テスト」をクリックします。

5. テストが成功したら、「保存する」をクリックします。

最後に、保存したフローのトリガーを「ON」に切り替えると起動します。

以上で、「Webflowでコレクションのアイテムが作成されたら@pocketに追加する」フローの完成です。

Webflowでコレクションのアイテムが作成されたら@pocketに追加する

試してみる

---

■概要

Webflowで新しいコンテンツを作成するたびに、後で確認するために手動で@pocketへ追加する作業に手間を感じていませんか？この繰り返し作業は、登録漏れや他の業務を圧迫する原因になりがちです。このワークフローを活用すれば、Webflowと@pocketの連携をスムーズに自動化できます。Webflowでコレクションにアイテムが作成されると、その情報が自動で@pocketに登録されるため、手作業による情報管理の手間をなくし、より効率的なコンテンツ運用を実現します。

■このテンプレートをおすすめする方

• Webflowで作成したコンテンツを、後で確認するために手動で@pocketへ追加している方
• Webflowと@pocketの連携を手作業で行っており、入力の手間や登録漏れをなくしたい方
• コンテンツ制作後の情報ストック作業を自動化し、業務効率を向上させたいと考えている方

■このテンプレートを使うメリット

• Webflowでコレクションアイテムを作成するだけで自動的に@pocketへ登録されるため、これまで手作業で行っていたURLのコピー＆ペーストなどの時間を削減できます
• 手動での登録作業が不要になることで、登録漏れや誤った情報の追加といったヒューマンエラーを防ぎ、確実な情報ストックが可能になります

■フローボットの流れ

1. はじめに、Webflowと@pocketをYoomと連携します
2. 次に、トリガーでWebflowを選択し、「コレクションのアイテムが作成されたら」というアクションを設定します
3. 最後に、オペレーションで@pocketを選択し、「レコード情報を登録」アクションを設定し、トリガーで取得した情報を紐付けます

※「トリガー」：フロー起動のきっかけとなるアクション、「オペレーション」：トリガー起動後、フロー内で処理を行うアクション

■このワークフローのカスタムポイント

• @pocketにレコード情報を登録するオペレーションでは、どの情報を登録するかを任意で設定してください。Webflowのトリガーで取得したアイテムのURLやタイトルといった情報を、@pocketの各登録項目に紐付けることで、必要な情報が自動で保存されるようになります

■注意事項

• ‍‍Webflow、@pocketのそれぞれとYoomを連携してください。

詳細を見る 試してみる

Webflow・@pocketを使ったその他の自動化例

他にもWebflowや@pocketを使った自動化の例がYoomには多数あるため、いくつか紹介します。

1. Webflowで新しい注文が発生した際に、@pocketに情報を追加するフローです。WebflowでECサイトを運営している場合、このテンプレートを活用すれば、売上情報をタイムリーに共有できます。データ分析の迅速化が可能になり、売上金額やリピート購入率の推移などの最新情報をマーケティングや営業に活用できます。

Webflowで注文が発生したら@pocketに追加する

試してみる

---

■概要

Webflowで注文が発生したら@pocketに追加するフローです。

‍

■このテンプレートをおすすめする方

1.Webflowで商品やサービスの販売をしている方

・自社のオンラインストアを運営しているチーム

・Webflowによる注文情報を@pocketに手動で連携している方

‍

2.受注管理で@pocketを利用している方

・Webflowからの注文情報を@pocketで一元管理している方

・Webflowと@pocketの連携を効率化したい方

‍‍

■このテンプレートを使うメリット

Webflowからの注文情報を都度手動で@pocketに連携している場合、時間がかかり手間だと感じているかもしれません。
また、手動による情報連携は誤入力や入力漏れといったミスの発生リスクを高めるため、本来注力すべき業務への時間を奪うことがあります。

@pocketへの注文情報の追加を効率化したい方に、このテンプレートは適しています。
このテンプレートは、Webflowで注文が発生すると@pocketに自動で追加することができるため、手動による追加作業が不要になります。

@pocketへの注文情報の追加が自動化されることで、手動作業によるヒューマンエラーの発生を防止し、効率的に受注管理を進めることが可能です。

‍

■注意事項

・Webflow、@pocketのそれぞれとYoomを連携してください。

詳細を見る 試してみる

2. Webflowのフォーム回答が送信された際に、Google スプレッドシートに情報を追加するフローです。フォーム回答からリード情報や問い合わせを収集して一覧化できます。また、Google スプレッドシートの機能を使ってデータを加工・分析することで、マーケティングやカスタマーサービスに役立てることができます。

Webflowのフォームが送信されたらGoogle スプレッドシートに追加する

試してみる

---

■概要

Webflowで作成したフォームから問い合わせや申し込みがあった際、その内容を手作業でGoogle スプレッドシートに転記していませんか？この作業は単純ですが、件数が増えると大きな負担になり、入力ミスも起こりがちです。このワークフローを活用すれば、Webflowのフォーム送信をきっかけに、自動でGoogle スプレッドシートへ情報が追加されるため、こうした手間やミスをなくし、顧客情報をスムーズに管理できます。

■このテンプレートをおすすめする方

• Webflowのフォームで得た顧客情報を手作業でGoogle スプレッドシートに転記している方
• フォームからの問い合わせ対応の初動を早め、機会損失を防ぎたいと考えているご担当者の方
• Webサイトからのリード獲得から管理までの一連の流れを自動化し、効率化したいと考えている方

■このテンプレートを使うメリット

• Webflowのフォームが送信されると自動でGoogle スプレッドシートに情報が追加されるため、これまで手作業で行っていた転記作業の時間を短縮できます。
• 手作業でのデータ転記が不要になることで、コピー＆ペーストによる入力間違いや記載漏れといったヒューマンエラーの防止に繋がります。

■フローボットの流れ

1. はじめに、WebflowとGoogle スプレッドシートをYoomと連携します。
2. 次に、トリガーでWebflowを選択し、「フォームが送信されたら」というアクションを設定します。
3. 最後に、オペレーションでGoogle スプレッドシートを選択し、「レコードを追加する」アクションを設定して、フォームから送信された情報をスプレッドシートに書き込むよう設定します。

※「トリガー」：フロー起動のきっかけとなるアクション、「オペレーション」：トリガー起動後、フロー内で処理を行うアクション

■このワークフローのカスタムポイント

• Webflowのトリガー設定では、連携の対象としたいサイトIDを任意で設定してください。
• Google スプレッドシートでレコードを追加するアクションを設定する際に、対象のスプレッドシート、シート、および書き込みたいテーブル範囲などを任意で設定してください。

■注意事項

• Google スプレッドシート、WebflowのそれぞれとYoomを連携してください。

詳細を見る 試してみる

3. Webflowのフォーム回答が送信された際に、HubSpotのチケットを作成するフローです。フォームで送信されたリードや顧客からの問い合わせをHubSpotに集約し、一元管理できます。これにより、速やかなフォローアップが可能となり、顧客満足度の向上が期待できます。

Webflowのフォームが送信されたらHubSpotにチケットを作成する

試してみる

---

■概要

Webサイトに設置したWebflowのフォームから問い合わせがあった際、手作業でHubSpotにチケットを作成していませんか？この手作業は時間がかかるだけでなく、対応漏れや入力ミスといったヒューマンエラーの原因にもなり得ます。このワークフローを活用すれば、Webflowのフォーム送信をきっかけに、HubSpotへ自動でチケットが作成されるため、顧客対応の初動を迅速かつ正確に行うことが可能です。

■このテンプレートをおすすめする方

• Webflowのフォームからの問い合わせ対応を、より迅速にしたいマーケティングや営業担当者の方
• HubSpotでチケットを手動作成しており、業務の効率化を目指しているカスタマーサポート担当者の方
• フォームからのリード情報を正確に管理し、顧客対応の品質向上を図りたいチームリーダーの方

■このテンプレートを使うメリット

• Webflowのフォームが送信されると自動でHubSpotにチケットが作成されるため、手作業の時間を短縮できます。
• 手作業によるチケットの作成漏れや、顧客情報の転記ミスといったヒューマンエラーの防止に繋がります。

■フローボットの流れ

1. はじめに、WebflowとHubSpotをYoomと連携します
2. 次に、トリガーでWebflowを選択し、「フォームが送信されたら」というアクションを設定します
3. 最後に、オペレーションでHubSpotの「チケットを作成」アクションを設定し、フォームの送信内容を反映させます

※「トリガー」：フロー起動のきっかけとなるアクション、「オペレーション」：トリガー起動後、フロー内で処理を行うアクション

■このワークフローのカスタムポイント

• Webflowのトリガー設定で、連携の対象としたいサイトIDを任意で設定してください。
• HubSpotでチケットを作成する際、Webflowのフォームから取得した情報を、チケットの件名や内容などの各項目に自由に設定してください。

■注意事項

• Webflow、HubSpotのそれぞれとYoomを連携してください。

詳細を見る 試してみる

まとめ

Webflowと@pocketを連携することで、作成されたコレクションアイテムの情報を自動で同期できます。新規アイテムの概要を速やかに共有できるため、情報の確認や分析をスムーズに行えます。また、転記の手間やヒューマンエラーを減らすことで、担当者の作業時間の短縮やデータの正確性向上につながるでしょう。Yoomを使って連携し、Webサイトのコンテンツ管理の効率化を図ってみてください。