・
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が引用されます。
入力が完了したら、次に進みます！
データベース設定でエラーが生じる場合は、以下のヘルプページをご確認ください。
続いて、データベース操作の設定を行います。
レコードを追加するための詳細設定を入力します。
入力欄をクリックすると、以下のように取得した値に候補が出てきます。
それぞれ合うものをクリックしていきましょう。
