・
Webflowはノーコードで高度なウェブサイトを作成できるため、多くの企業に活用されています。デザインと機能を簡単に統合できる点が強みです。
このWebflowのコレクション情報をSPIRALで一元管理すると、より便利になります。
従来の手動でのデータ更新作業は時間がかかり、ミスが起こりやすいといった課題がありました。
そこで当社では、自動化を実現するフローボットを開発しました。
これにより、更新作業がスムーズに進み、手間が減ります。
さらに、プログラミング不要で簡単に導入できるため、幅広い方々に活用していただけます。詳細をぜひご覧ください。
とにかく早く試したい方へ
YoomにはWebflowとSPIRALを連携するためのテンプレートが用意されているので、今すぐ試したい方は以下よりバナーをクリックしてスタートしましょう！
WebflowとSPIRALを連携するメリット2選
マーケティングチームとIT管理者の視点で、WebflowとSPIRALの連携による自動化のメリットを考察しました。
メリット1 コンテンツ更新のスピードアップで競争力を強化
Webflowでコレクションが作成されると、SPIRALが自動で更新されてリアルタイムで情報を管理できます。
特にマーケティングチームにとっては、新しいキャンペーンやプロモーションの情報を素早く市場に反映できるため、大きなメリットとなります。
さらに、作成日時や最終更新日時をデータベース上で管理することで、コンテンツの更新状況やサイクルを把握できます。
これにより、次のアップデートのタイミングを見極めやすくなり、スケジュール管理が容易になります。
スピードが求められる業界では、こうした機能がタイムリーな情報発信と競争力の強化に貢献します。
メリット2 一元管理でデータの信頼性を向上
SPIRALの強みはデータの一元管理です。
Webflowの情報をSPIRALに自動で転記することで、データが複数のシステムで分散せず、一つのプラットフォームで管理できます。
これにより、スラッグやアイテム名を一覧で確認し、簡単に検索や参照が可能です。
特に、データが正確に反映されるため、手動のミスが減り、結果的に業務の効率化が期待できます。
自動化によるスムーズな管理は、作業時間の短縮にも寄与します。
WebflowとSPIRALを連携してできること
WebflowとSPIRALのAPIを連携させることで、これまで手動で行っていたアプリケーション間の情報伝達を自動化できます。
これにより、情報共有のスピードと正確性を向上させ、チームの連携を強化することができるでしょう。
ここでは、具体的な自動化の例をいくつかご紹介します。気になる内容があれば、ぜひクリックしてみてください！
Webflowでコレクションのアイテムが作成されたらSPIRALに追加する
Webflowでコレクションのアイテムが作成されたらSPIRALに追加するフローです。
SPIRALへの情報追加がスピーディーに行われるため、チーム内での情報共有も容易になり、業務をスムーズに進めることが可能です。
Webflowで注文が発生したらSPIRALに追加する
Webflowで注文が発生したらSPIRALに追加するフローです。
手動作業によるミスの発生リスクを低減できるため、送付先の誤りや作業漏れを防止することができます。
Webflowのフォームが送信されたらSPIRALに追加する
Webflowのフォームが送信されたらSPIRALに追加するフローです。
SPIRALに都度フォームの情報が追加されるため、顧客対応やフォローアップをスピーディーに進めることが可能です。
WebflowとSPIRALの連携フローを作ってみよう
それでは、さっそくWebflowとSPIRALを連携したフローを作成してみましょう！
ここではYoomを使用してノーコードで設定をしていくので、もしまだYoomのアカウントをお持ちでない場合は、こちらの登録フォームからアカウントを発行しておきましょう。
※今回連携するアプリの公式サイト：Webflow／SPIRAL
[Yoomとは]
フローの作成方法
今回は「Webflowでコレクションのアイテムが作成されたらSPIRALに追加する」フローを作成していきます！
作成の流れは大きく分けて以下です。
ステップ1：マイアプリ連携
Yoomとそれぞれのアプリを連携して、操作が行えるようにしていきます。
まずは基本的な設定方法を解説しているナビをご覧ください！
それでは、ここから今回のフローで使用するアプリのマイアプリ登録方法を解説します。
Webflowのマイアプリ連携
Yoom画面の左側にある「マイアプリ」→「新規接続」をクリックします。
アプリ一覧が表示されたらWebflowを選ぶか、検索バーにWebflowと入力してください。
以下の画面が表示されます。
アカウント名には任意の文字列（メールアドレスなど）、アクセストークンにはWebflowで取得した値を入力し、「追加」ボタンをクリックします。
▼参考：アクセストークンの取得方法
Webflowにログインし、Site Settings から「Apps & Integrations」 を選択してください。
API accessで「Generate API token」をクリックし、APIキーを発行しましょう。
名前は任意で設定可能です。
また、「CMS」「Forms」「Sites」の「Read and Write」権限を設定してください。
設定が完了したら「Generate token」で発行します。
APIキーが発行されるのでコピーし「アクセストークン」に貼り付けてください。
SPIRALのマイアプリ連携
先ほどと同様にSPIRALを選択してください。
以下の画面が表示されたら、こちらのページを参考に「アカウント名」と「アクセストークン」を設定してください。最後に「追加」をしましょう。
これでマイアプリ連携が完了です。
ステップ2：Yoomのテンプレートをマイプロジェクトへコピーする
こちらのバナーをクリックします。Yoomワークスペースの「マイプロジェクト」にテンプレートがコピーされます。
コピーすると以下のようにテンプレートがお使いのYoom管理画面にコピーされるので、OKを押して設定を進めていきましょう。
ステップ3：アプリトリガーの設定
まずは、アプリトリガー「コレクションのアイテムが作成されたら」をクリックしましょう。
(1/3)連携アカウントとアクションを選択
以下はあらかじめ設定済みのため操作は不要です。
→次へをクリック
(2/3)アプリトリガーのAPI接続設定
「サイトID」を設定します。
編集欄をクリックするとプルダウンが開き、候補が表示されます。
選択すると自動でIDが引用されます。もしくは、下記の方法でも取得できます。
設定できたら「テスト」を行ってください。
テストに成功したら「次へ」進みましょう。
(3/3)アプリトリガーのAPI接続設定
Webhookイベントとは…
Webflow上でコレクションアイテムが作成される（または更新される）と、発生します。
テスト操作を行うので、実際にWebflowで実行してみましょう。
完了したらYoomに戻り「テスト」をクリックします。
テストに成功すると、Webflowの情報がアウトプット(取得した値)され、このあとの設定でも使用します。
※アウトプット(取得した値)とは？
トリガーやオペレーション設定時に、「テスト」を実行して取得した値のことを指します。
後続のオペレーション設定時の値として利用でき、フローボットを起動する度に変動した値となります。
最後に「保存する」を押して次に進みましょう！
ステップ4：SPIRALのアクション設定
ここでは、SPIRAL内のアプリ・データベース連携と追加する情報の紐付けを行います。
「レコードを登録」をクリックしてください。
(1/2)連携アカウントとアクションを選択
以下はあらかじめ設定済みのため操作は不要です。
→次へをクリック
(2/2)API接続設定
編集欄をクリックすると、プルダウンが開き先ほど抽出したアウトプット(取得した値)が表示されます。アウトプット(取得した値)を引用し、設定しましょう。
「アプリID」
「データベースID」
◆レコード情報
「フィールドの識別名」
「値」
レコード情報追加ボタンをクリックすると、引用するコードのエリアを追加することも可能です。
任意で設定しましょう。
必要な項目を全て設定できたら「テスト」を実行しましょう。
テストに成功すると、SPIRALが自動更新されるので確認してみましょう。
最後に「保存する」をクリックしてください。
ステップ5：アプリトリガーを【ON】にする
全てのプロセスが設定完了すると、コンプリート画面がポップアップされます。
