・
「Webflowで管理している商品情報を、WooCommerceにも登録しないといけない…」
「Webflowサイトで受けた注文を、WooCommerceに手作業で入力していて時間がかかるし、ミスも怖い…」
このように、WebflowとWooCommerce間でのデータ連携を手作業で行うことに、非効率さやストレスを感じていませんか？
もし、<span class="mark-yellow">Webflowのアイテム作成や新規注文といったアクションをきっかけに、WooCommerceへ自動でデータが登録される仕組み</span>があれば、こうした日々の定型業務を削減できます。
入力ミスや二度手間の心配なく、商品開発やマーケティング戦略といったより創造的な業務に時間を使えるようになるでしょう！
今回ご紹介する自動化の設定は、プログラミングの知識がなくても簡単に設定可能です。
ぜひこの機会に導入して、ECサイト運営をもっとスマートにしましょう！
Yoomには<span class="mark-yellow">WebflowとWooCommerceを連携するためのテンプレート</span>が用意されています。
今すぐ試したい方は以下よりバナーをクリックしてスタートしましょう！
WebflowとWooCommerceのAPIを連携させることで、これまで手作業で行っていた両ツール間のデータ転記作業を自動化し、業務効率を向上させることが可能になります。
例えば、Webflowに登録した商品情報を自動でWooCommerceに反映させたり、Webflowでの注文をWooCommerceに自動で登録したりと、様々な業務を自動化可能です。
ここでは具体的な自動化の例をいくつかご紹介しますので、気になる内容があれば、ぜひクリックしてみてください！
WebflowのCMSコレクションで管理している商品情報を、EC機能のためにWooCommerceにも手動で登録している場合、この自動化が非常に役立ちます。
Webflowに新しいアイテムを追加するだけで、その情報がWooCommerceに商品として自動作成できるため、<span class="mark-yellow">商品登録にかかる二度手間を排除し、情報の同期ミスを防ぐ</span>ことができます。
この連携はWebflowのデータを直接WooCommerceに連携するシンプルな構成のため、設定も簡単です。
Webflowで構築したサイト上で新規注文が発生した際に、その注文情報を手動でWooCommerceに転記しているようなケースに最適な自動化です。
この連携を設定すれば、Webflowでの注文発生をトリガーとして、注文情報が自動的にWooCommerceに登録されます。
<span class="mark-yellow">注文処理のタイムラグをなくし、迅速な顧客対応を実現</span>でき、顧客情報の正確な一元管理にも繋がります。
それでは、さっそく実際にWebflowとWooCommerceを連携したフローを作成してみましょう！
今回はYoomを使用して、ノーコードでWebflowとWooCommerceの連携を進めていきます。
もしまだYoomのアカウントをお持ちでない場合は、こちらの登録フォームからアカウントを発行しておきましょう。
[Yoomとは]
今回はWebflowでアイテムが作成されたら、WooCommerceで商品を作成するフローを作成していきます！
作成の流れは大きく分けて以下です。
Yoomとそれぞれのアプリを連携して、アプリごとの操作を行えるようにしましょう。この設定は初回のみ必要です。
先ずは、基本的な設定方法を解説しているナビをご覧ください！
それでは、今回のフローで使用するWebflowとWooCommerceのマイアプリ登録方法を解説していきます。
1.Webflowの登録方法
Webflowを検索すると下記画面が表示されます。
アカウント名にはメールアドレスなど任意の名前を設定してください。
アクセストークンはWebflowにログインして発行し、ペーストします。
任意のアカウントでWebflowにログインし、「Site Settings」ボタンを押し、画面右にある「Generate API token」をクリックしましょう。
発行するAPIトークンに任意の名前を設定します。
続いて、「CMS」と「Site」の項目に「Read and Write」の権限を設定してAPIトークンを発行してください。
APIトークンが発行されたらコピーして、Yoomの連携画面にペーストしてください。
「追加」ボタンを押せばWebflowとの連携完了です！
2.WooCommerceの登録方法
先ほどのマイアプリ画面に戻り、今度はWooCommerceを検索しましょう。
注釈を確認しながら、「アカウント名」「Consumer Key」「Consumer Secret」を入力してください。
入力できたら、「追加」ボタンをクリックしWooCommerceの連携完了です！
Yoomのテンプレートを使用することで、画面の指示に従って設定するだけで、誰でも簡単に連携フローが完成します。
まずは下記バナーをクリックして、移行先の画面で「このテンプレートを試す」ボタンをクリックしてください。
テンプレートのコピーが完了したら、下記画面が表示されます。
「OK」ボタンをクリックして設定を始めましょう！
まず最初に、Webflowのトリガー設定を行います！
「コレクションのアイテムが作成されたら」という項目をクリックしてください。
タイトルは任意で設定できます。
Webflowと連携するアカウントやアクション内容に誤りが無いか確認し、次のページに進みましょう。
サイトIDは、枠内をクリックすると候補が表示されるので、使用したいものを選択してください。
設定できたらテストを実行し、「次へ」をクリックしましょう。
続いて、Webhookの動作テストを行います。Webflowの画面を開き、テスト用にコレクションのアイテムを作成してください。
（架空の情報で大丈夫ですよ！）
作成が完了したらYoomの画面に戻って、「テスト」をクリックしてください。
テストが成功したら、Webflowに先ほど作成したアイテムの情報が取得した値（アウトプット）に表示されます。
確認ができたら設定を保存してください。
※下記画像は見本のため表示されていませんが、実際はWebflowから取得した情報が各項目の横に表示されます。
※取得した値（アウトプット）とは、トリガーやオペレーション設定時に、「テスト」を実行して取得した値のことです。詳しくは、こちらのヘルプページをご確認ください。
次に、Webflowで登録したアイテムの情報をWooCommerceの商品に自動で反映させるための設定を行います。
「商品を作成」という項目をクリックしましょう。
次のページもデフォルトで設定されているため、確認後次のページに進んでください。
TOPページURLは、欄外の注釈を参考にWooCommerceのURLから設定してください。
商品名は、下記画面の通り設定されています。
この設定により、Webflowにアイテムが作成されたら「アイテム名」を取得し、WooCommerceの商品名に自動で反映することが可能です。
商品説明は、自由に設定できます。
例えば、下記画像のように設定するとWebflowのアイテムから「description」を自動で反映することが可能です。
用途に合わせて使用したいアウトプットやメッセージの内容を変更して使用してみましょう！
設定できたら、テストを実行してください。
テストが成功すると、WooCommerceに自動的に商品が作成されるので確認しましょう。
確認後再びYoomの画面に戻ったら、「保存する」ボタンをクリックしてください。
すべての設定が完了すると、以下のような画面が表示されるので「トリガーをON」にしましょう。
これで、「Squareで顧客が登録されたら、boardにも顧客を追加する」フローの完成です！
ここまでは、WebflowからWooCommerceへデータを連携する方法をご紹介しました。
逆にWooCommerceからWebflowへのデータ連携を実施したい場合もあるかと思います。
その場合は、下記のテンプレートも併せてご利用ください！
WooCommerceをメインの商品データベースとして利用しており、新商品をWebflowで構築したサイトにも反映させる必要がある場合に有効な自動化です。
WooCommerceで新商品を作成すると、その情報が自動的にWebflowのアイテムとして追加されるため、<span class="mark-yellow">Webサイトへの商品掲載をスピーディーに行い、手作業による掲載漏れや情報間違いを防ぎます。</span>
WooCommerceで受け付けた注文情報を、Webflow上の顧客データベースや注文履歴コレクションにも反映させたい場合に活用できます。
この連携により、WooCommerceの注文情報がWebflowのCMSアイテムとして自動で追加可能です。
これにより、<span class="mark-yellow">顧客情報や購買履歴をWebflow側で一元的に管理し、サイト上でのパーソナライズ施策などに役立てる</span>ことができます。
今回ご紹介した連携以外でも、WebflowやWooCommerceのAPIを活用してさまざまな業務を自動化することが可能です。
もし気になるものがあれば、こちらも試してみてください！
Webflowで新規注文が発生した際、その情報を自動的にGoogleスプレッドシートやMicrosoft Excelに追加することができます。
また、Webflowのフォーム送信をトリガーに、NotionやSalesforceにデータを自動で追加したり、HubSpotにチケットを作成することで、業務の効率化が可能です。
特に、データ管理の負担を軽減したいECサイト運営者に最適です。
WooCommerceで作成した顧客情報をSquareやSlackに自動追加する設定で、手動での転記作業を削減できます。
さらに、GoogleフォームやTypeformで得た回答をもとに、顧客情報をWooCommerceに追加することで、オンラインショップで顧客データ管理の効率化が可能です。
これにより、マーケティング活動の迅速化や、顧客データの正確な管理が可能になります。
WebflowとWooCommerceの連携により、<span class="mark-yellow">これまで手作業で行っていた商品情報や注文情報のデータ転記作業をなくし、ヒューマンエラーのリスクを削減できます。</span>
これにより、担当者は面倒な繰り返し作業から解放され、ECサイトの売上向上に直結する商品企画やマーケティングといった、本来注力すべきコア業務に集中できる環境が整うでしょう！
今回ご紹介したような業務自動化は、ノーコードツール「Yoom」を使えば、プログラミングの知識がない方でも直感的な操作で簡単に業務フローを構築可能です。
もし自動化に少しでも興味を持っていただけたなら、ぜひこちらから無料登録して業務の効率化を体験してみてください。
Q：連携できる具体的なデータ項目を教えてください。
A：今回の連携ではWebflowから「アイテムID」「サイトID」「下書きかどうか」「作成日時」「アイテム名」「スラッグ」「アーカイブかどうか」「最終更新日時」「ワークスペースID」「コレクションID」「最終公開日時」「ロケール」「description」の項目を取得することも可能です。
業務内容に合わせてお好みでカスタマイズしてみてください！
Q：連携が失敗した場合、エラーに気づく仕組みはありますか？
A：連携が失敗すると、Yoomに登録する際に設定したメールアドレスに通知が届きます。
通知先は、メールの他にSlackやChatworkも設定できます。
詳しくはこちらをご確認ください。
エラー内容を確認し、修正が必要な場合は、Yoomのヘルプページを参考にしてみましょう。
また、サポート窓口を利用することも可能です。
Q：連携はリアルタイムですか？どのくらいの時間差がありますか？
A：Webhookを利用したトリガーで設定しているためリアルタイムで連携可能です。
トリガー発生からアクション実行までのタイムラグが無いため、業務の迅速化を実現できますよ。
.png)
.png)
.png)
.webp)
.webp)
