・
Webflowはノーコードで高品質なウェブサイトを作成できるため、多くの企業が導入しています。Google スプレッドシートに情報を一元化することで、データの管理や共有がより簡単になり、さらに便利に行えます。
しかし、従来の作業ではデータの手動入力や更新に時間がかかることが課題でした。
そこで、私たちはこのプロセスを自動化するフローボットを開発しました。この自動化ソリューションにより、これまでの課題が解消され、業務がスムーズになります。プログラミング不要で設定できる方法も解説していますので、ぜひ最後までご覧ください。
とにかく早く試したい方へ
Yoomには、WebflowとGoogle スプレッドシートを連携するためのテンプレートが用意されています。
今すぐ試したい方は、以下のバナーをクリックしてスタートしましょう！
WebflowとGoogle スプレッドシートを連携するメリット2選
デザイナーとバックオフィススタッフの視点から、この自動化がどのように業務を効率化するか考察しました。
メリット1：コンテンツ管理の効率化
Webflowでコレクションアイテムを作成すると、アイテムID、サイトID、コレクションIDなどが自動でGoogle スプレッドシートに記録されます。
これにより、アイテムがどのサイトやコレクションに紐付いているかを明確に管理でき、プロジェクトの進行がスムーズになります。
さらに、デザイナーは手動でデータを入力する手間がなくなり、デザイン作業に専念できる環境が整うでしょう。
ノーコードで自動化できるため、エンジニアに依存せずに業務を進められるのも大きな利点です。
メリット2：アーカイブ管理が簡単に
Google スプレッドシートにデータが自動で転記されることで、バックオフィスはリアルタイムでデータを共有し、アーカイブ管理を容易にします。
例えば、アーカイブ済みか、最終公開日時などの情報が記録されるため、どのコンテンツが現在アクティブなのか、どのコンテンツがアーカイブ済みなのかが一目で把握できます。
これにより、サイトの更新や報告書作成がスムーズになり、業務が円滑に進められます。
WebflowとGoogle スプレッドシートを連携してできること
WebflowとGoogle スプレッドシートを連携させることで、手作業で行っていたデータ管理を自動化できます。
たとえば、Webflowでコレクションのアイテムが作成されると、その情報を自動でGoogle スプレッドシートに追加できます。
これにより、わざわざWebflowを確認しなくてもデータがスプレッドシートに反映され、入力ミスや情報漏れを防ぐことが可能です。
ここでは、具体的な自動化の例をいくつかご紹介します。アカウント登録後、「試してみる」ボタンをクリックするだけでこれらの連携を体験できるので、気になる内容があればぜひクリックしてみてください！
Webflowでコレクションのアイテムが作成されたらGoogle スプレッドシートに追加する
Webflowでコレクションのアイテムを作成すると、自動でGoogle スプレッドシートに追加されるフローです。
これにより、管理業務にかける時間を削減でき、業務をシームレスに進められます。
さらに、Webflowのコレクションをもとにデータの分析やレポートの作成を行う場合でも、最新の情報がスピーディーに反映されるため、業務運営がスムーズになります。
Webflowで注文が発生したらGoogle スプレッドシートに追加する
Webflowで注文が発生すると、自動でGoogle スプレッドシートに追加されるフローです。
これにより、在庫管理や受注管理の作業が効率化され、注文情報の入力ミスや抜け漏れも減らせます。
その結果、データの確認や分析にかかる負担が軽減され、業務全体がよりスムーズに進行します。
WebflowとGoogle スプレッドシートの連携フローを作ってみよう
それでは、さっそく実際にWebflowとGoogle スプレッドシートを連携したフローを作成してみましょう！
今回はYoomを使用して、ノーコードで進めていきますので、もしまだYoomのアカウントをお持ちでない場合は、登録フォームからアカウントを発行しておきましょう。
※今回連携するアプリの公式サイト：Webflow／Google スプレッドシート
[Yoomとは]
フローの作成方法
今回は「Webflowでコレクションのアイテムが作成されたらGoogle スプレッドシートに追加する」フローの作り方を解説します！
作成の流れは大きく分けて以下です。
事前に準備するもの
Webflowの情報を追加するGoogle スプレッドシートを準備します。
今回は、以下のシートを用意しました。
ステップ1：WebflowとGoogle スプレッドシートのマイアプリ連携
ここでは、Yoomとそれぞれのアプリを連携して、操作が行えるようにします。
まずは基本的な設定方法を解説しているナビをご覧ください！
ここからは、今回のフローで使用するアプリの連携方法を解説します。
Webflowの場合
検索窓に「Webflow」と入力すると検索結果が表示されるので、クリックしましょう。
なお、説明文に記載されているように、Webflowを連携する際には権限の設定に注意してください。
入力が完了したら、「追加」をクリックしてください。
以上で、Webflowのマイアプリ連携は完了です。
Google スプレッドシートの場合
Google スプレッドシートのマイアプリ連携は、本章の冒頭にあるナビをご参照ください。
以上でマイアプリ登録は完了です！
ステップ2：テンプレートをコピー
下記のバナーから、「試してみる」をクリックしてテンプレートをコピーしてください。
テンプレートがコピーできたら、「OK」をクリックします。
マイプロジェクトにテンプレートがコピーされます。
赤枠内のタイトルをクリックして設定画面に遷移します。
ステップ3：Webflowのトリガー設定
プロセスの1つ目をクリックします。
Webflowで該当のサイトとの連携と、抽出する取得した値を設定しましょう。
「連携アカウントとアクションを選択」ページが表示されるので、トリガーアクションが「コレクションのアイテムが作成されたら」になっていること、アカウント情報が正しいことを確認し、「次へ」をクリックします。
続いて、アプリトリガーのAPI接続設定です。
サイトIDを設定します。
編集欄をクリックするとプルダウンが開き、候補が表示されます。選択すると自動でIDが引用されます。
もしくは、下記の方法で取得できます。
設定が完了したら、テストを実行してください。
問題がなければ、次へ進みましょう。
次に、Webhookの設定を行います。
※Webhookイベントとは
Webflow上でコレクションアイテムが作成される（または更新される）と、発生します。
ここで実際に、Webflowでコレクションアイテムを作成しておきましょう。
準備が完了したら、テストを実行してください。
テストに成功すると、以下のように「取得した値（アウトプット）」が表示されます。
※取得した値とは？
トリガーやオペレーション設定時に、「テスト」を実行して取得した値のことを指します。
後続のオペレーション設定時の値として利用でき、フローボットを起動する度に変動した値となります。
必要に応じて詳細設定を行い、保存しましょう。
ステップ4：Google スプレッドシートのレコード追加設定
ここでは、Google スプレッドシートとの連携と追加する情報の紐付けを行います。
「レコードを追加する」をクリックしてください。
「連携アカウントとアクションを選択」ページが表示されるので、アクションが「レコードを追加する」になっていること、アカウント情報が正しいことを確認し、「次へ」をクリックします。
次にデータベースの連携を行います。
スプレッドシートIDは編集欄をクリックすると、連携したGoogle アカウントから候補のシートがピックアップされます。
該当のシートを選択すると、IDが引用されます。
入力が完了したら、次に進みます！
データベース設定でエラーが生じる場合は、以下のヘルプページをご確認ください。
続いて、データベース操作の設定を行います。
レコードを追加するための詳細設定を入力します。
入力欄をクリックすると、以下のように取得した値に候補が出てきます。
それぞれ合うものをクリックしていきましょう。
すべての入力が完了したら、テストを実行しましょう。
テストに成功したら、保存して完了です！
ステップ5：トリガーをONにしてフローの動作確認
設定完了の画面が表示されたら、トリガーをONにします。
以上で連携作業は完了です！
WebflowとGoogle スプレッドシートとを活用したその他の自動化例
WebflowとGoogle スプレッドシートを活用した自動化は、今回ご紹介した「Webflowでコレクションのアイテムが作成されたらGoogle スプレッドシートに追加する」以外にも様々な業務に応用できます。
ここでは、関連するテンプレートをいくつかご紹介します。日々の業務効率化のヒントとして、ぜひ参考にしてください。
Webflowを使った便利な自動化例
さまざまなサービスと連携させることで、フォーム送信や投稿情報の登録、データ更新などの作業を自動化できます。
これにより、顧客情報やコンテンツデータの手入力作業を減らし、業務の効率化や情報管理の精度向上につなげることが可能です。
Google スプレッドシートを使った便利な自動化例
さまざまなツールと連携することで、レポート作成や注文情報の管理、メッセージ翻訳などの作業を自動化できます。
これにより、日々のデータ入力や情報更新の手間を減らし、業務の効率化やミスの防止につなげることが可能です。
まとめ
今回ご紹介したWebflowとGoogle スプレッドシートの自動連携によって、従来の手作業にかかる手間を削減でき、チーム全体の作業効率が向上が期待できます。デザイナーは、コンテンツの管理やプロジェクト進行がスムーズになり、バックオフィスはアーカイブや公開状態をリアルタイムで把握できるようになります。
今回ご紹介したノーコードツール「Yoom」を使えば、プログラミングの知識がなくても、直感的な操作で業務フローを構築することが可能です。自動化に少しでも興味を持っていただけたなら、ぜひ登録フォームから無料登録して、Yoomによる業務効率化を体験してみてください！
Q：Webflowアイテムの更新・削除も同期されますか？
A：
いいえ、同期されません。
今回は、「コレクションのアイテムが作成されたら」をトリガーに設定しているため、アイテムが削除・更新されても自動で反映されません。
ただし、「コレクションのアイテムが更新されたら」や「コレクションのアイテムが削除されたら」をトリガーに設定し、「レコードを更新する」アクションと組み合わせることで変更や削除内容も自動でGoogle スプレッドシートに反映できます。
連携でできることやテンプレート一覧は、WebflowのAPIと今すぐ連携をご確認ください。
Q：連携が失敗した場合、どのように検知できますか？
A：
エラーが発生すると、Yoomのアカウント作成時に登録したメールアドレス宛に通知が届きます。
また、Slack・Chatworkなどのチャットツールでエラー通知を受け取ることも可能です。
通知には、エラーが起きたオペレーションや、その詳細を確認できるリンクが記載されており、原因を迅速に把握できます。
なお、エラーが発生するとフローの再実行は自動で行われないため、手動での対応が必要です。
エラーが発生した際の対応方法は、以下のヘルプページをご参照ください。
ヘルプページで解決しない場合は、サポート窓口からお問い合わせいただけます。
Q：連携はリアルタイムで実行されますか？
A：
はい。
今回ご紹介したフローではWebhookを利用しているため、リアルタイムで連携が実行されます。
.avif)
.png)
.avif)
