.avif)
・
「Webflowに新しいCMSアイテムを追加したら、その内容をOpenAIで要約してチームに共有したい」
「Webflowのフォームから問い合わせが来たら、内容をOpenAIで分析して担当者に通知したいけど、毎回手作業でコピー＆ペーストするのは面倒…」
このように、WebflowとOpenAIを連携させる際の手作業に、非効率や手間を感じていませんか？
<span class="mark-yellow">Webflowのデータ更新をきっかけに、OpenAIが自動でテキスト処理を行い、その結果を必要な場所に通知</span>することが日常的に可能となったらどうでしょうか？
それが実現できたら、煩雑な定型業務から解放され、コンテンツの企画やサイト改善といった業務に集中できる時間を生み出すことができるかもしれません！
今回ご紹介するYoomの自動化フローボットの設定は、プログラミングの知識がなくても簡単に設定できます。これまで自動化を諦めていた方でもすぐに実践可能です。
ぜひこの機会に、面倒な手作業をなくし、業務をもっと効率化させましょう！
Yoomには<span class="mark-yellow">WebflowとOpenAIを連携するためのテンプレート</span>が用意されているので、今すぐ試したい方は以下よりバナーをクリックしてスタートしましょう！
WebflowとOpenAIのAPIを連携させれば、Webflow上のコンテンツ作成やフォーム送信といったアクションをトリガーに、OpenAIによるテキストの要約、分析、翻訳などの処理を自動的に実行することが可能になります。
これにより、コンテンツのレビュープロセスの迅速化や、問い合わせ内容の迅速な把握によって、業務全体のスピードと質の向上が図れます。
ここでは具体的な自動化の例を複数ご紹介しますので、気になる内容があれば、ぜひクリックしてみてください！
WebflowのCMSに新しいブログ記事や実績紹介などのアイテムが追加された際、その内容を<span class="mark-yellow">手動でコピー＆ペーストすることなく、OpenAIが自動で要約を作成</span>します。続けて関係者にメールで共有できるので、コンテンツのレビューや共有プロセスを効率化し、情報の即時性を高めます。
Webflowサイトのお問い合わせフォームや資料請求フォームから送信された内容を、<span class="mark-yellow">OpenAIが自動で要約し、その結果が素早くメール通知</span>されます。
長文の問い合わせ内容も迅速に把握できるので、スピーディーな顧客対応の実現が期待できるでしょう。
それでは、さっそく実際にWebflowとOpenAIを連携したフローを作成してみましょう！
今回はYoomを使用して、ノーコードでWebflowとOpenAIの連携を進めていきます。
もしまだYoomのアカウントをお持ちでない場合は、こちらの登録フォームからアカウントを発行しておきましょう。
※今回連携するアプリの公式サイト：Webflow／OpenAI
[Yoomとは]
今回は「Webflowでアイテムが作成されたら、OpenAIで内容を要約してメールで通知する」フローを作成していきます！
作成の流れは大きく分けて以下です。
Yoomを利用していない方は、こちらから無料登録をしてください。
すでにYoomを利用している方はログインしましょう。
まずはYoomとフローボットで使用するアプリを接続していきましょう。これをマイアプリ連携といいます。
基本的な操作を説明しているナビをご用意しているので、まずはそちらをご確認ください。
それではこれから各アプリの連携方法を解説します。
アプリを検索してアイコンをクリックすると、以下の画面が表示されます。注釈に沿って、管理画面から情報を取得してください。
アクセストークンのコピーは赤枠をクリックします。
コピーしたら、「アクセストークン」に情報を貼り付けて[追加]をクリック。これでWebflowの登録が完了！
アプリを検索してアイコンをクリックすると、以下の画面が表示されます。こちらも「アカウント名」と「アクセストークン」を管理画面から取得します。
「アクセストークン」に情報を貼り付けて[追加]をクリックしましょう。2つ目のOpenAIの登録も完了です！
OpenAIのマイアプリ登録方法については、こちらを確認してください。
これで2つのアプリがYoomアカウントに接続できました。
※ChatGPT（OpenAI）を使ったアクションを動かすには、OpenAIのAPI有料プランに契約しておく必要があります。APIの利用料金が発生した時にスムーズに支払いができるよう、契約内容を整えておきましょう。
Yoomアカウントに対象のアプリの新規接続が完了していることを確認できたら、テンプレートをコピーします。
テンプレートは自動化の大枠があらかじめ作成されており、それに沿って設定するだけで自動化が完成するため、初心者の方にもおすすめです！
以下バナーの「試してみる」をクリックしてください。
コピーが完了すると、以下のように表示されます。
コピーされたテンプレートは、Yoomアカウントの『マイプロジェクト』に格納されるので、こちらも確認してみてくださいね。
さっそく、フローボットの設定を進めていきます！
Yoomアカウントの画面左側のマイプロジェクトから「【コピー】Webflowでアイテムが作成されたら、OpenAIで内容を要約してメールで通知する」をクリックしてください。
以下画面のようにテンプレート内容が表示されます。
トリガー（フローボットの起点となるアクション）の「コレクションのアイテムが作成されたら」をクリックしてください。
移行後の画面で連携するアカウント情報が正しいかを確認してください。
確認後、[次へ]をクリックして進みましょう。
以下の画面に移行します。
「サイトID」は、入力バーをクリックすると『候補』に連携したアカウントに基づいた情報が表示されます。ここから今回の連携で使用するサイトIDを選択しましょう。
設定後に[テスト]を押します。
すると、以下のように「テスト成功」と表示され、サイトの詳細情報を取得できます。内容を確認して[次へ]をクリックしてください。
次の画面に進んだらフローボットの起動条件となるイベント（指定したサイトにアイテムを実際に追加するアクション）を実行し、[テスト]をクリックします。
テストが成功すると、以下のように作成した内容が取得できました！
テスト完了を確認して『保存する』を押しましょう。
このステップで取得した値はこの後のステップで活用できます。後続のアクションを設定する際に変数として活用できるので、ここで得た情報をそのままメールの本文などに反映できるようになります！
なお、OpenAIでテキスト生成を行う際プロンプトなどに取り込みたいデータや、メール送信の際に使用したいデータが取得できていない場合、こちらのページに記載されている操作を参考に取得した値の追加を行ってください。
取得した値の確認や追加ができたら「保存する」を押して次へ進みましょう。
次に、2つ目の「テキストの生成（Chat completion）」をクリックします。
連携するアカウント情報を確認して、[次へ]を押しましょう。
次の画面で「メッセージコンテンツ」に情報を入力します。
以下の画像のように、前ステップで取得した値を設定しましょう。このように取得した値を変数として引用することで、フローボット起動毎に異なる値が反映されます。
なお、取得した値を活用せずテキストを直接入力した箇所は固定値のため定型文となります。そのため、プロンプトについては固定で入力することで、毎回同じプロンプトでのテキスト生成が自動化可能です。
「モデル」は入力バーをクリックして表示された『候補』から選択します。
その他の項目も、注釈に沿って情報を入力しましょう。
【+ 〇〇を追加】と青く表示されているテキストをクリックすると、設定項目を増やすことができます。
情報を設定した後、[テスト]を押しましょう。テストに成功すると、以下の値を取得できます。
内容を確認して、[保存する]を押してください。
もしも使用制限を超えた場合は、以下のような画面となりフローボットが停止してしまうので、この部分も留意しつつ運用してくださいね。
エラーコードについては、こちらのページで確認してください。（エラーメッセージに記載されているURLです。）
最後に、3つ目の「メールを送る」をクリックします。
下にスクロールし、メールを送付する際の「メール内容」の設定を行います。通知先のアドレスなどを設定しましょう。
たとえば、進捗確認を日々行っている担当スタッフやチーム責任者のメールアドレスを設定しておくと、アイテム作成の報告を各スタッフがその都度報告する必要がなくなり、情報共有の手間が減りそうです！
※送信先10（To,CC,BCCの合計）ごとに、1タスク消費します。例えば送信先が5個の場合は1タスク、送信先が15個の場合は2タスク消費します。タスク実行についてはこちらをチェック。
以下の画像のように、前ステップから取得した値を引用して設定することも可能です。取得した値を引用することで、メール受信毎に最新の生成データを受け取ることができるようになります。
「本文」にテキストを直接入力した固定値や【：】などの記号を挿入することで、全体を見やすく整えるのがおすすめです。
Yoomからメールを送るフローについては、こちらのページで詳しく解説されているので、要チェック！
なお、カスタマイズとして、画面最下部に「添付ファイル」を追加する項目や「事前確認設定」として、実行前に確認ができる設定を行う項目があります。
運用状況に合わせて設定の有無を調整してくださいね。
（私は今回、設定せずにフローボットを作成します。）
[次へ]をクリックし、次の画面でメール内容の確認を行いましょう。送信内容に問題がなければ、[テスト]を押します。
テストが成功すると、以下のように表示されて指定した宛先にメールが届きました。
メールの到達を確認した後は、[保存する]をクリックしましょう。
以下の画面がポップアップ表示されるので、赤枠部分「トリガーをON」をクリックすることで、フローボットが自動で起動します。
簡単に自動化フローボットが作成できましたね！
今回はWebflowからOpenAIへデータを連携する方法をご紹介しました。
逆にOpenAIで生成・処理したテキストをWebflowのCMSアイテムとして自動で追加することも可能です。コンテンツ作成の自動化などに興味がある場合は、下記のテンプレートも併せてご利用ください。
外部のフォーム（例えばYoomのフォームボットなど）で受け付けた問い合わせやフィードバックをOpenAIで要約・整形できます。
<span class="mark-yellow">その結果をWebflowのCMSコレクションに新しいアイテムとして自動で追加</span>することで、FAQコンテンツの拡充や顧客の声のデータベース化を効率的に行えるはずです。
特定のメールアドレスに届いたプレスリリースやニュースレターなどの内容を自動で抽出し、OpenAIで要約した上で、<span class="mark-yellow">Webflowのブログ記事やニュースセクションに下書きアイテムとして自動登録</span>することで、コンテンツ収集から作成までの初動をスピードアップさせます。
WebflowとOpenAIのAPIを活用することで、Web制作やコンテンツ管理、要約・分析業務をスムーズに効率化できます。
Yoomにはこれらの業務を自動化できるテンプレートが多数用意されているので、ぜひご活用ください！
Webflowでの自動化は、Webコンテンツの管理や更新、通知業務を効率化します。
例えば、Webflow上での新規アイテム作成や公開時の処理を他ツールと連携することで、手作業を減らし運用のスピードを向上できます！
OpenAIによる自動化は、文字起こしや要約、応答生成などの情報処理業務を効率化します。
例えば、通話やフォーム、ファイルなどのデータを自動で分析・要約し、他ツールに連携することで業務負担を軽減し、迅速な対応を可能にします。
WebflowとOpenAIの連携を自動化することで、<span class="mark-yellow">これまで手作業で行っていたコンテンツの要約作成や問い合わせ内容の転記といった作業の手間が減り、ヒューマンエラーの抑制にもつながるでしょう。</span>コピー＆ペーストなどの単純作業から解放されて、ストレスフリーな作業環境が実現できそうですね！
今回ご紹介したような業務自動化を実現できるノーコードツール「Yoom」を使えば、プログラミングの知識がない方でも、直感的な操作で簡単に業務フローを構築可能です！
もし自動化に少しでも興味を持っていただけたなら、ぜひこちらから無料登録して、Yoomによる業務効率化を体験してみてください！
Q：この連携はWebflowのどのプランで利用可能ですか？
A：Yoom上でWebflowをフローボットに組み込んで構成・運用することは、どのWebflowのプランでも可能です。
ただし、今回のように<span class="mark-yellow">有料プランに加入する必要のあるアプリやYoomのチームプラン・サクセスプランでのみ使用可能なアクション</span>をフローボットに組み込む場合には、使いたいアクションに応じた設定を行わなければなりません。
使用したいツールやアクションがあれば、実現に必要な最適プランを事前に調べておいた方が良いでしょう。
Q：要約以外にどんなテキスト処理ができますか？
A：OpenAIは翻訳、キーワード抽出、感情分析、文章の分類など多様な処理が可能です。
Webflowもしくは別のアプリ・ツールのデータを使うことで、個々のコンテンツに合わせた詳細な処理結果を導き出せるようになるでしょう。
（例：データベースツールで追加したキーワードをもとに、OpenAIで文章を生成してWebflowに反映する など）
Q：良い要約を生成させるプロンプトのコツは？
A：「初心者でもわかりやすく」「〇〇文字以内で」「以下の条件を加味して」など、具体的なプロンプトを入力すると、ニーズに近い結果を得られるでしょう。
このプロンプトも、事前にOpenAIやGeminiなどのAI生成ツールで生成、取得するのもいいかもしれません。
.png)
.png)
.webp)
.webp)
