.png)
・
.avif)
「WebflowとSquarespaceを併用していて、それぞれのデータを手動で連携させるのが大変…」
「Webflowで公開したコンテンツ情報を、Squarespaceの商品情報として登録する際に、コピー＆ペーストの作業でミスが発生してしまう…」
このように、複数のWebサイトビルダー間での手作業によるデータ連携に、課題を感じていませんか？
もし、<span class="mark-yellow">Webflowのアイテム情報を自動的にSquarespaceに商品として登録する仕組み</span>があれば、こうした日々の反復作業から解放され、入力ミスをなくし、より創造的な業務に集中できる貴重な時間を確保できます。
今回ご紹介する自動化の設定は、専門的な知識がなくてもノーコードで簡単に実現できます。
これまで手作業にかけていた時間や手間を削減し、業務をさらに効率化させましょう！
Yoomには<span class="mark-yellow">WebflowとSquarespaceを連携するためのテンプレート</span>が用意されています！
今すぐ試したい方は以下よりバナーをクリックしてスタートしましょう！
WebflowとSquarespaceのAPIを連携させれば、これまで手作業で行っていたデータ登録を自動化できます。
これにより、作業時間を短縮し、ヒューマンエラーを防止できるはずです。
これからご紹介する具体的な自動化例は、アカウント登録後すぐに試すことができます。
登録はわずか30秒で完了しますので、気になる内容があれば、ぜひクリックしてみてください！
Webflowで新しいブログ記事やポートフォリオなどのアイテムを公開するたびに、その内容をSquarespaceの商品として手動で登録する作業を自動化することで、<span class="mark-yellow">商品登録にかかる時間を短縮し、転記ミスをなくすことが可能です。</span>
この連携は、AIを用いて必要な情報だけを抽出して連携する処理を含んでいるため、業務にあわせた柔軟な自動化フローを実現します。
Webflow上の商品情報アイテムが更新された際に、その変更内容を検知してSquarespaceの在庫情報を自動で調節することで、<span class="mark-yellow">手動での在庫更新作業の手間や、更新漏れによる販売機会の損失を防ぎます。</span>
サイト間で在庫情報を同期させることができるので、顧客満足度の向上にも繋がるはずです。
それでは、さっそく実際にWebflowとSquarespaceを連携したフローを作成してみましょう！
今回はYoomを使用して、ノーコードでWebflowとSquarespaceの連携を進めていきます。
もしまだYoomのアカウントをお持ちでない場合は、こちらの登録フォームからアカウントを発行しておきましょう。
[Yoomとは]
今回は「Webflowでアイテムが公開されたら、テキスト抽出してSquarespaceで商品を作成する」フローを作成していきます！
作成の流れは大きく分けて以下です。
ここでは、Yoomとそれぞれのアプリを連携して、操作が行えるようにしていきます。
まずは基本的な設定方法を解説しているナビをご覧ください！
それでは、ここから今回のフローで使用するアプリのマイアプリ登録方法を解説します。
Webflowの場合
アプリ一覧の検索窓からWebflowを検索し、クリックします。
「アカウント名」と「アクセストークン」を設定します。
「アカウント名」は任意で管理用名称を設定してください。
連携先のアカウントを判別しやすい名称にすることがおすすめです。
Webflowにログインし、「Site Settings > Apps & Integrations > API access」と進み、発行したAPIトークンを「アクセストークン」に設定してください。
※APIトークンの発行時に「CMS」「Sites」の「Read and Write」権限を設定してください。
全ての設定が完了したら、「追加」をクリックしましょう。
マイアプリにWebflowが表示されていれば、連携完了です。
Squarespaceの場合
先ほどと同様に、検索窓からSquarespaceと検索しクリックします。
「アカウント名」と「アクセストークン」を設定します。
「アカウント名」は任意で管理用名称を設定してください。
「アクセストークン」の取得は、Squarespaceにログインし、管理画面から上記の注釈を参考にし、取得してください。
全ての設定が完了したら、「追加」をクリックしましょう。
これでSquarespaceのマイアプリ登録が完了です。
次にYoomのテンプレートサイトから使用するテンプレートをコピーします。
テンプレートを活用すれば、あらかじめ大枠が作成されており、それに沿って設定するだけで完成します。
下のバナーの「試してみる」をクリックしてください。
コピーすると以下のようにテンプレートがお使いのYoom管理画面にコピーされるので、OKを押して設定を進めていきましょう。
ここからはフローボットの設定を進めていきます。
まず、「コレクションのアイテムが公開されたら」をクリックしてください。
クリックすると以下の画面に切り替わります。
「タイトル」は任意で変更も可能です。
Webflowと連携するアカウントに間違いがないかを確認し、「次へ」をクリックしましょう。
「トリガーの起動間隔」は5分、10分、15分、30分、60分の間隔で選択可能です。
「サイトID」は、候補からマイアプリ連携をしたWebflowアカウントのサイトを選択してください。
「コレクションID」は、アイテムが登録・公開予定のコレクションを候補から選択してください。
ここで一度Webflowにログインし、該当サイトのCMSでコレクションにテスト用のアイテムを追加・公開しましょう。
これで「コレクションのアイテムが公開されたら」というアプリトリガーの条件が整います。
アイテムの追加・公開が完了したら、Yoomに戻り「テスト」を実行してください。
テストが成功すると、下記のような取得した値が表示されます。
取得した値はこのあとの設定でも使用します。
詳しく知りたい方は以下のリンク先をご覧ください。
また、Squarespaceに商品を作成することを想定して、上記よりも多くの情報をWebflowのカスタムフィールドから取得することをオススメします。
下記ページを参考に追加してください。
最後に「保存する」を押して、次に進みましょう！
Webflowに公開されているアイテムの情報から、Squarespaceの商品作成に必要な情報を抽出する設定を行います。
「テキスト抽出」をクリックしてください。
「変換タイプ」は抽出元となるテキストの文字数に応じて選択してください。
処理する文字数を増やすこともできますが、その場合は消費するタスク数も増えていくのでご注意ください。
設定できたら、「次へ」を押して進みましょう。
まず、「抽出対象となるテキスト」を取得した値から選択しましょう。
今回の例では、SKU・ISO・価格を抽出します。
次に「抽出したい項目」を、カンマ区切りで入力します。
ここではSKUとISOと価格を抽出するため以下のように設定しました。
最後に、「指示内容」を入力ます。
どのようなルールで抽出するのか、AIに分かりやすいような指示を設定してみましょう。
抽出設定で困ったことがあれば、こちらのページも参考にしてみてください。
すべての入力が完了したら、「テスト」を行いましょう。
取得した値が表示されていれば、テストは成功です。
「保存する」をクリックしてください。
「商品を作成」をクリックしてください。
クリックすると以下の画面に切り替わります。
Squarespaceと連携するアカウントに間違いがないかを確認し、「次へ」をクリックしましょう。
「storePageId」には、連携しているSquarespaceから表示される候補の中から選択してください。
「name」は、取得した値から選択可能です。
「description」も、取得した値から選択可能です。
取得した値を設定することで、商品が公開される度に、Squarespaceにも新しい商品が公開されるようになります。
文字を直接入力することもできますが、その場合は固定値となり、毎回同じ値がSquarespaceに反映されます。
以下3つの必須項目も、取得した値や手入力による固定値を使って設定していきましょう。
他の必須ではない項目も、必要に応じて設定してください。
設定が終わったら「テスト」ボタンを押してみましょう。
テストでは、実際にSquarespaceに商品が作成されます。
取得した値に、Squarespaceで作成された商品の内容が反映されていれば成功です！
実際にSquarespaceも確認してみると、しっかり商品が作成されています。
ここまで確認できたら最後に、「保存する」をクリックしてください。
これですべての設定が完了です。
設定が完了すると以下のようなメニューが表示されるので、トリガーをONにします。
作成したフローボットが正常に動作するか確認しておきましょう！
設定、お疲れさまでした。
以上が、Webflowでアイテムが公開されたら、テキストを抽出してSquarespaceで商品を作成するフローの連携手順になります！
今回はWebflowからSquarespaceへデータを連携する方法をご紹介しましたが、逆にSquarespaceからWebflowへのデータ連携を実施したい場合は、下記のテンプレートも併せてご利用ください。
Squarespaceで新しい注文が入るたびに、注文情報を自動でWebflowのCMSコレクションにアイテムとして追加することで、<span class="mark-yellow">注文データの管理や顧客リストの作成といった手作業をなくし、業務の効率化を図れます。</span>
Squarespaceで新しい商品を作成した際に、その商品情報を自動的にWebflowのCMSコレクションにもアイテムとして追加することで、<span class="mark-yellow">複数のプラットフォームで商品情報を同期させる手間を省き、情報の不整合を防ぎます。</span>
これにより、Webflowで構築したポートフォリオサイトやカタログサイトの情報を最新状態に保つことができるはずです。
WebflowやSquarespaceのAPIを使用することで、さまざまな業務を自動化することができます。
ここでは、複数のテンプレートをご紹介するので、気になるものがあればぜひ試してみてくださいね！
フォームアプリなどと連携することで、送信された内容をもとにアイテムを登録する業務を自動化できます。
手作業で入力する業務を削減できるため、業務の効率化が課題のときは、以下のテンプレートを試してみてください！
データベースなどのアプリと連携することで、Squarespaceで商品や注文情報が登録された際の転記作業を自動化できます。
テンプレートを設定するだけで手作業での転記を省けるため、管理データの精度が課題のときにおすすめです。
WebflowとSquarespaceの連携を自動化することで、<span class="mark-yellow">これまで手作業で行っていたCMSアイテムや商品情報の登録・更新作業の手間を削減し、ヒューマンエラーを防ぐことが可能です。</span>
これにより、担当者はデータ入力のような反復作業から解放され、サイトコンテンツの企画やマーケティング戦略の立案といった、本来注力すべきコア業務に集中できる環境が整うはずです！
今回ご紹介したような業務自動化を実現できるノーコードツール「Yoom」を使えば、プログラミングの知識がない方でも、直感的な操作で簡単に業務フローを構築可能です。
もし自動化に少しでも興味を持っていただけたなら、ぜひこちらから無料登録して、Yoomによる業務効率化を体験してみてください！
Q：この連携はYoomの無料プランで実現できますか？
A：はい、無料プランで月100タスクまで実現できます。
「タスク実行数」のカウント方法については下記ページをご参照ください。
Q：AIによるテキスト抽出はどの程度正確ですか？
A：抽出精度は高いですが、「抽出したい項目」と「指示内容」を具体的に入力することが大切です。
たとえば「タイトル,説明,期日」と抽出したい項目を指定し、「◯月◯日のような形式で期日を抜き出してください」など明確な指示を書くことで、より意図に近い結果が得られます。
また、抽出対象のフォーマットを整えておくことも、抽出精度を高めるポイントです。
詳しい設定については、下記のページをご確認ください。
Q：連携が失敗した場合のエラー通知や対処法は？
A：自動化が失敗した場合、Yoomに登録したメールアドレスに通知が届きます。
また、Yoom画面上に「認証に失敗しました」「権限が無い」「設定内容に誤りがある」などのエラーメッセージが表示されます。
エラーが起きた際の対応方法については下記のサイトをご参照ください。
ヘルプページで解決しない場合は、サポート窓口を利用することもできます。
.png)
.png)
.webp)
.webp)
