Webflowと@pocketの連携イメージ
Webflowと@pocketを連携して、Webflowでアイテムが作成されたら@pocketに追加する方法
Yoomを詳しくみる
この記事のテンプレートを試す
Webflowと@pocketの連携イメージ
フローボット活用術

2025-03-26

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

Erina Komiya
Erina Komiya

コレクションアイテムの情報把握は、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へ登録されるため、これまで手作業で行っていたURLのコピー&ペーストなどの時間を削減できます
  • 手動での登録作業が不要になることで、登録漏れや誤った情報の追加といったヒューマンエラーを防ぎ、確実な情報ストックが可能になります

■フローボットの流れ

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

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

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

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

■注意事項

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

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

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

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

__wf_reserved_inherit

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

__wf_reserved_inherit

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


■概要

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

__wf_reserved_inherit

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

__wf_reserved_inherit

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

__wf_reserved_inherit

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

__wf_reserved_inherit

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

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

__wf_reserved_inherit

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

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

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

__wf_reserved_inherit

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

__wf_reserved_inherit

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

__wf_reserved_inherit

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

__wf_reserved_inherit

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

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

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

以上で、「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に追加するフローです。

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

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スプレッドシートに追加するフローです。

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

1.Webflowを活用してWebサイトを構築している方

・Webflowで自社サイトやサービスを運営している企業

・フォーム内容をGoogleスプレッドシートに自動で追加したい方

2.Googleスプレッドシートで情報管理をしている方

・GoogleスプレッドシートでWebflowのフォーム内容を管理している方

・顧客情報の管理でGoogleスプレッドシートを活用している方

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

Webflowのフォームは、問い合わせやリード情報の取得に役立ちますが、都度ダッシュボードから確認するのは手間です。
また、Googleスプレッドシートにフォーム内容を手動で追加している場合、時間がかかり非効率的です。

このテンプレートは、Webflowのフォーム内容を自動でGoogleスプレッドシートに追加することができるため、ダッシュボードからフォーム内容を確認する手間を減らすことができます。
データ入力も自動化することができるため、手作業に比べてデータの正確性が高まり、情報管理を効率化することができます。

また、Googleスプレッドシートへの情報の追加がスピーディーに行われるため、チーム内の情報共有をスムーズにすることが可能です。

■注意事項

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

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


■概要

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

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

1.カスタマーサポートチーム

・顧客からの問い合わせやリクエストを効率的に管理したいチーム

・フォーム送信内容を自動でチケット化し、迅速に対応したいサポート部門

2.営業部門

・見込み顧客の問い合わせを効率的に管理し、迅速に対応したい営業チーム

・フォームから送信された情報を基に、フォローアップアクションを実行したい部門

3.マーケティング部門

・顧客のフィードバックやリクエストをHubSpotで一元管理し、マーケティング活動に活用したいチーム

4.IT部門やシステム管理者

・フォーム送信内容を一元管理し、システム上で効率的に対応したい部門

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

・顧客からの問い合わせやリクエストにリアルタイムで対応でき、顧客満足度の向上に繋がります。

・チケット作成の手間を省けるため作業時間を大幅に短縮することができます。

■注意事項

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

まとめ

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

Yoomを使えば、今回ご紹介したような連携を
プログラミング知識なしで手軽に構築できます。
無料でYoomを試す
この記事を書いた人
Erina Komiya
Erina Komiya
これまで専門商社やEC業界で事務を経験してきました。 担当した業務は営業事務や経理、総務、人事、法務など多岐に渡ります。 個々の作業の効率化には取り組みましたが、各種のサポートツールやYoomを使えばより便利に業務が進められたのに…と思っています。 業務経験を活かしたYoomの紹介記事を発信し、皆さんがスムーズに業務を進められるお手伝いができれば幸いです。
タグ
@pocket
連携
Webflow
自動化
関連アプリ
お役立ち資料
Yoomがわかる!資料3点セット
Yoomがわかる!資料3点セット
資料ダウンロード
3分でわかる!Yoomサービス紹介資料
3分でわかる!Yoomサービス紹介資料
資料ダウンロード
Before Afterでわかる!Yoom導入事例集
Before Afterでわかる!Yoom導入事例集
資料ダウンロード
お役立ち資料一覧を見る
詳しくみる