・
.avif)
「OpenAIで生成したコンテンツをWebflowのCMSに手作業で登録している…」
「Webflowのフォームから来た問い合わせ内容を、わざわざOpenAIにコピペして要約してもらっている…」
このように、OpenAIとWebflowをそれぞれ活用しているものの、両者間でのデータ連携は手作業に頼ってしまい、手間や時間、そして転記ミスなどの課題を感じていませんか？
もし、<span class="mark-yellow">OpenAIによる文章生成や要約の結果をWebflowへ自動でアイテム登録する仕組み</span>があれば、こうした日々の定型業務をもう少し簡単に行えるようになるはずです。結果としてコンテンツの更新頻度向上や、より創造的なコア業務に集中できる貴重な時間を確保できるはずです！
今回ご紹介する自動化の設定は、プログラミングの知識がなくても簡単に設定可能です。
これまで自動化を諦めていた方でもすぐに実践できます。ぜひこの機会に導入し、日々の業務をさらに効率化させましょう！
Yoomには<span class="mark-yellow">OpenAIとWebflowを連携するためのテンプレート</span>が用意されているので、今すぐ試したい方は以下よりバナーをクリックしてスタートしましょう！
OpenAIとWebflowのAPIを連携させることで、これまで手動で行っていたコンテンツの生成から登録までの一連のフローを自動化できます。
例えば、フォームで受け付けた内容をOpenAIが自動で要約し、その結果をWebflowのCMSアイテムとして追加するなど、様々な業務を効率化することが可能です。
ここでは具体的な自動化の例を複数ご紹介しますので、ぜひクリックしてみてください！
Webサイトのフォームから送信された問い合わせや申し込み内容を、担当者が都度確認して手動で要約し、WebflowのCMSに登録する作業を自動化します。
この連携により、<span class="mark-yellow">フォーム送信をトリガーとしてOpenAIが内容を素早く要約し、Webflowにアイテムとして自動追加される</span>ため、対応の迅速化と手作業による転記ミスや要約の質のばらつきを防ぐことができます。
特定のメールアドレスに届いたプレスリリースやブログ記事の原稿などを、手動でWebflowに登録している作業を自動化するための連携です。
特定のメール受信をきっかけに、<span class="mark-yellow">メール本文のテキストを自動で抽出し、OpenAIがその内容を要約した上でWebflowにアイテムとして登録する</span>ため、メールを起点としたコンテンツ更新フローを効率化し、スピーディな情報発信を実現します。
それでは、さっそく実際にOpenAIとWebflowを連携したフローを作成してみましょう！
今回はYoomを使用して、ノーコードでOpenAIとWebflowの連携を進めていきますので、もしまだYoomのアカウントをお持ちでない場合は、こちらの登録フォームからアカウントを発行しておきましょう。
※今回連携するアプリの公式サイト：OpenAI／Webflow
[Yoomとは]
今回は「フォームが送信されたら、OpenAIで内容を要約してWebflowにアイテムを追加する」フローを作成していきます！
作成の流れは大きく分けて以下です。
ここでは、Yoomとそれぞれのアプリを連携して、操作が行えるようにしていきます。
まずは基本的な設定方法を解説しているナビをご覧ください！
それでは、ここから今回のフローで使用するアプリのマイアプリ登録方法を解説します。
アプリ一覧の検索窓からOpenAIを検索し、クリックします。
以下の画面が表示されるのでアカウント名とアクセストークンを入力し、「追加」をクリックしましょう。
詳しい設定方法については、こちらをご参照ください。
先ほどと同様に、検索窓からWebflowと検索しクリックします。
「アカウント名」と「アクセストークン」を設定します。
「アカウント名」は、任意で管理用名称を設定してください。
「アクセストークン」は、Webflowにログインして取得します。
Webflowにログインし、Site Settings から「Apps & Integrations」 を選択してください。
API accessで「Generate API token」をクリックし、APIキーを発行しましょう。
名前は任意で設定可能です。
また、「CMS」「Sites」の「Read and Write」権限を設定してください。
設定が完了したら「Generate token」で発行します。
発行されたAPIキーをコピーしましょう。
Yoomに戻り、コピーしたAPIキーを「アクセストークン」に貼り付けてください。
最後に「追加」をクリックします。
これでWebflowのマイアプリ登録が完了です。
次にYoomのテンプレートサイトから使用するテンプレートをコピーします。
テンプレートはあらかじめ大枠が作成されているため、それに沿って設定するだけで完成します！
下のバナーの「試してみる」をクリックしてください。
コピーすると以下のようにテンプレートがお使いのYoom管理画面にコピーされるので、OKを押して設定を進めていきましょう。
Yoomのフローボットを動かす引き金となるアクションのことを「アプリトリガー」と呼びます。まずはこのトリガーの設定を行いましょう。
まず、「フォーム」をクリックしてください。
フォームは元から設定されており、NameやDescriptionなどの基本情報を送信できるようになっています。
その他Webflowへ反映したいデータがある場合は設問を追加しましょう。
なお、設問以外のフォームのカスタマイズも可能ですが、一部有料プランの機能も含まれています。有料プランにはトライアル期間があるので、気になる方はお試しください！
詳しい設定方法についてはこちらを参照してください。
下へスクロールすると、「完了ページの設定」が表示されます。回答を送信した後の「回答を受け付けました」などのメッセージを任意で指定可能です。
また、さらに下部には共有フォーム利用時のフローボット起動者設定があります。
これはフォームに回答が送信された際に、どのユーザーをフローボットの起動者とするかを選択する項目です。
なお、この設定で、万が一フローにエラーが発生したときの通知が誰に届くかを管理できます。
任意で必要があれば変更し、「次へ」をクリックしましょう。
フォームの表示設定と詳細設定が、表示されます。ここでは「取得した値」という項目に作成した設問が表示されています。
ここで各項目に仮のテスト回答を入力していきましょう。取得した値に入力したテスト回答を基にOpenAIなどでコンテンツを生成します。
入力する内容は、架空の情報（「山田テスト」や「テスト会社」など）でも問題ありませんが、のちのOpenAIでの設定時に指定したプロンプトが指定した意図に沿うか確認するためにも、実際の運用時に等しい回答データを入力することをおすすめします。
完了したら「保存する」を押してください。
「テキストの生成（Chat completion）」を、クリックしてください。
OpenAIと連携するアカウントに間違いがないかを確認し、「次へ」をクリックしましょう。
「メッセージコンテンツ」は、フォームからの回答データを用いてどのようなコンテンツを作成したいのかプロンプトを設定しましょう。
この際、下記画像のように、取得した値から前アクションで入力したフォームの回答値を交えてプロンプトを設定してください。
取得した値は変数となるためフォームから送信された回答ごとに異なるデータに置き換わります。なお、取得した値を活用せずテキストを直接入力した箇所は固定値のため定型文となります。
そのため、プロンプトを直接入力することで毎回同じ指示をAIに投げかけることが可能です。
「モデルID」は、コンテンツ生成時に利用するモデルを選択しましょう。
入力欄をクリックすると連携済みのOpenAIアカウントから利用可能なモデルが候補として表示されます。
その他の項目も任意で設定可能なので、注釈を参考に設定してみてください。
完了したら「テスト」を実行しましょう。
テストが成功すると、OpenAIによって生成されたテキストがテスト成功画面と取得した値に反映されます。
内容を確認し、「保存する」をクリックしてください。
追加するアイテムの設定をしていきます。
「コレクションにアイテムを追加」を、クリックしてください。
クリックすると以下の画面に切り替わります。
Webflowと連携するアカウントに間違いがないかを確認し、「次へ」をクリックしましょう。
「サイトID」と「コレクションID」を候補から選択してください。
候補は、連携しているアカウントに紐づいて表示されます。
「フィールド」は「サイトID」と「コレクションID」を選択することで、それに準じたフィールドが表示されます。
生成したコンテンツを入力したいフィールドを候補から選択してください。
「値」は、フィールドにあった内容を「取得した値」から設定します。
先ほどOpenAIで生成したテキストも同様に設定してみましょう。
なお、「＋フィールド情報を追加」をクリックすることでその他のフィールドも追加できます。
最後に下書きにするかをプルダウンで選択し、「テスト」を行ってください。
テストに成功すると、以下の画面が表示されます。
また、実際にアイテムが追加されるので、Webflowを確認してみましょう。
確認できたら、Yoomに戻り「保存する」を押してください。
これですべての設定が完了です。
設定が完了すると以下のようなメニューが表示されるので、トリガーをONにします。
作成したフローボットが正常に動作するか確認しておきましょう！お疲れさまでした。
以上が、フォームが送信されたら、OpenAIで内容を要約してWebflowにアイテムを追加するフローの連携手順になります！
今回はOpenAIからWebflowへデータを連携する方法をご紹介しましたが、逆にWebflowからOpenAIへのデータ連携を実施したい場合は、下記のテンプレートも併せてご利用ください。
Webflowでのアクションを起点として、OpenAIの機能を活用する自動化も簡単に実現できます。
WebflowのCMSに新しいアイテムが作成されたことを関係者に都度手動で連絡している、といった状況を解決する連携です。
このテンプレートを使えば、<span class="mark-yellow">Webflowにアイテムが追加されると、その内容がOpenAIによって自動で要約され、関係者へメールで通知される</span>ため、情報共有の漏れや遅延を防ぎ、チーム全体の認識をスムーズに合わせることが可能になります。
Webflowサイトのフォームから送信された問い合わせ内容を担当者が手動で確認し、要約してSlackやメールで報告するフローを自動化します。
この連携により、<span class="mark-yellow">フォームが送信された際に、入力内容がOpenAIによって要約され、担当者へ素早くメール通知される</span>ため、顧客へのレスポンス速度を向上させ、機会損失を防ぐことに繋がります。
OpenAIやWebflowのAPIを活用することで、文章生成やデザイン作成、フォーム送信後のデータ管理まで幅広い業務をスムーズに効率化できます。
Yoomにはこれらの業務を自動化できるテンプレートが多数用意されているので、ぜひご活用ください！
OpenAIを活用することで、文章生成や翻訳、要約などの知的業務を効率化できます。Slackやフォーム、メールなどと連携させることで、問い合わせ対応や社内連絡のスピードを向上できます。
また、Google スプレッドシートやDriveと組み合わせることで、AIを活用したデータ整備や情報共有もスムーズに行えます。
Webflowを利用した自動化により、フォーム送信や注文発生時のデータ登録、コンテンツ更新を効率化できます。
他ツールと連携することで、Web制作やマーケティング業務をスムーズに行え、サイト運営の省力化にもつながります。
特にHubSpotやNotion、Shopifyなどと組み合わせることで、データの一元管理や情報更新の自動化が可能です。
OpenAIとWebflowの連携を自動化することで、<span class="mark-yellow">これまで手作業で行っていたコンテンツの生成、要約、転記といった一連の作業を簡略化でき、さらにはヒューマンエラーを減少させることもできます。</span>
これにより、担当者はコンテンツの更新や管理にかかる時間を削減し、サイトの分析や企画立案といった、より戦略的で付加価値の高いコア業務に集中できる理想的な環境が整います！
今回ご紹介したような業務自動化を実現できるノーコードツール「Yoom」を使えば、プログラミングの知識がない方でも、画面上の指示に従って操作するだけで直感的に業務フローを構築可能です。
もしAIとWebサイト運営の連携による業務効率化に少しでも興味を持っていただけたなら、ぜひこちらから無料登録して、Yoomがもたらす新しい働き方を体験してみてください！
Q：OpenAIへの指示（プロンプト）はどこまで細かく設定できますか？
A：OpenAIへのプロンプトは、目的や出力形式、文体、長さ、読者層、構成、トーンなどを細かく指定できます。
例えば「200字以内で要約して」「箇条書きでまとめて」「フレンドリーな文体で」といった指示も可能です。
Q：AIが生成した内容を、公開前に人間が確認するステップを挟めますか？
A：はい、可能です。
Webflowのアクション設定で「下書き」にするかを選択できるので、安全かつ管理しやすく運用できます。
Q：連携が失敗した場合、どのようにエラーを検知し対処できますか？
A：自動化が失敗した場合、Yoomに登録したメールアドレスに通知が届きます。
また、Yoom画面上に「認証に失敗しました」「設定内容に誤りがある」などのエラーメッセージが表示されます。
エラーが起きた際の対応方法については下記のサイトをご参照ください。
ヘルプページで解決しない場合は、サポート窓口を利用することもできます。
.webp)
.webp)
