・
■概要
Webflowで新しいコンテンツやブログ記事を公開するたびに、開発タスクとしてGitHubに手動でIssueを作成する作業は、手間がかかる上に転記ミスも起こりがちではないでしょうか。このワークフローは、WebflowとGitHubを連携させることで、こうした定型業務の自動化を実現します。Webflowで新しいアイテムが公開されると、その情報をもとにGitHubのIssueが自動で作成され、開発チームへの共有を円滑にします。
■このテンプレートをおすすめする方
■このテンプレートを使うメリット
■フローボットの流れ
※「トリガー」：フロー起動のきっかけとなるアクション、「オペレーション」：トリガー起動後、フロー内で処理を行うアクション
■このワークフローのカスタムポイント
■注意事項
「Webflowでコンテンツを公開するたびに、GitHubで手動でIssueを作成して開発チームに連携している…」
「CMSの更新と開発タスクの管理が別々のツールで行われていて、二度手間や連携漏れが発生している…」
このように、WebflowとGitHub間での手作業による情報連携に、非効率さやストレスを感じていませんか？
もし、Webflowでのコンテンツ更新をトリガーに、GitHubのIssueやプルリクエストを自動で作成する仕組みがあれば、これらの煩わしい作業から解放され、手作業によるミスをなくし、よりスムーズな開発・コンテンツ運用プロセスを実現できます。
今回ご紹介する自動化の設定は、プログラミングの知識がなくても簡単に設定できるため、これまで自動化を諦めていた方でもすぐに導入することが可能です。
ぜひこの機会に作業をもっと楽にしましょう！
YoomにはWebflowとGitHubを連携するためのテンプレートが用意されているので、今すぐ試したい方は以下よりバナーをクリックしてスタートしましょう！
■概要
Webflowで新しいコンテンツやブログ記事を公開するたびに、開発タスクとしてGitHubに手動でIssueを作成する作業は、手間がかかる上に転記ミスも起こりがちではないでしょうか。このワークフローは、WebflowとGitHubを連携させることで、こうした定型業務の自動化を実現します。Webflowで新しいアイテムが公開されると、その情報をもとにGitHubのIssueが自動で作成され、開発チームへの共有を円滑にします。
■このテンプレートをおすすめする方
■このテンプレートを使うメリット
■フローボットの流れ
※「トリガー」：フロー起動のきっかけとなるアクション、「オペレーション」：トリガー起動後、フロー内で処理を行うアクション
■このワークフローのカスタムポイント
■注意事項
WebflowとGitHubのAPIを連携すれば、WebflowでのアクションをきっかけにGitHubでの操作を自動化したり、その逆の連携も可能になります。
これにより、コンテンツ管理と開発のワークフローがシームレスに繋がり、業務効率を向上させることができます。
ここでは、具体的な自動化の例をいくつかご紹介しますので、気になる内容があれば、ぜひクリックしてみてください！
Webflowで新しいブログ記事や製品情報などのアイテムを公開した際に、その情報を基にGitHubリポジトリに新しいIssueを自動で作成できます。
これにより、コンテンツ公開に伴う修正や確認タスクの作成漏れを防ぎ、開発チームへ迅速かつ正確に情報を伝達できるため、手動でのIssue作成の手間と時間を削減します。
■概要
Webflowで新しいコンテンツやブログ記事を公開するたびに、開発タスクとしてGitHubに手動でIssueを作成する作業は、手間がかかる上に転記ミスも起こりがちではないでしょうか。このワークフローは、WebflowとGitHubを連携させることで、こうした定型業務の自動化を実現します。Webflowで新しいアイテムが公開されると、その情報をもとにGitHubのIssueが自動で作成され、開発チームへの共有を円滑にします。
■このテンプレートをおすすめする方
■このテンプレートを使うメリット
■フローボットの流れ
※「トリガー」：フロー起動のきっかけとなるアクション、「オペレーション」：トリガー起動後、フロー内で処理を行うアクション
■このワークフローのカスタムポイント
■注意事項
Webflowで新しいアイテムが作成されたら、アイテム内の特定のテキスト情報を自動で抽出し、その内容を基にGitHubでプルリクエストを自動生成します。
こちらは正規表現などを用いたデータ抽出処理を含むため、コンテンツのドラフト作成と同時に開発関連のプルリクエストを起票でき、レビュープロセスを迅速に開始することが可能になります。
■概要
Webflowで管理しているコンテンツをGitHubのリポジトリに反映させる際、手作業でのプルリクエスト作成に手間や時間を要していませんか。また、手作業による情報転記は、ミスの原因にもなりかねません。このワークフローを活用することで、WebflowとGitHubの連携を自動化できます。Webflowでアイテムが公開されると、その内容を基にGitHubでプルリクエストが自動で作成され、コンテンツ更新と開発フローの連携を円滑にします。
■このテンプレートをおすすめする方
■このテンプレートを使うメリット
■フローボットの流れ
※「トリガー」：フロー起動のきっかけとなるアクション、「オペレーション」：トリガー起動後、フロー内で処理を行うアクション
■このワークフローのカスタムポイント
■注意事項
それでは、さっそく実際にWebflowとGitHubを連携したフローを作成してみましょう！
今回はYoomを使用して、ノーコードでWebflowとGitHubの連携を進めていきますので、もしまだYoomのアカウントをお持ちでない場合は、こちらの登録フォームからアカウントを発行しておきましょう。
[Yoomとは]
今回は「Webflowでアイテムが公開されたら、GitHubでIssueを作成する」フローを作成していきます！
作成の流れは大きく分けて以下です。
■概要
Webflowで新しいコンテンツやブログ記事を公開するたびに、開発タスクとしてGitHubに手動でIssueを作成する作業は、手間がかかる上に転記ミスも起こりがちではないでしょうか。このワークフローは、WebflowとGitHubを連携させることで、こうした定型業務の自動化を実現します。Webflowで新しいアイテムが公開されると、その情報をもとにGitHubのIssueが自動で作成され、開発チームへの共有を円滑にします。
■このテンプレートをおすすめする方
■このテンプレートを使うメリット
■フローボットの流れ
※「トリガー」：フロー起動のきっかけとなるアクション、「オペレーション」：トリガー起動後、フロー内で処理を行うアクション
■このワークフローのカスタムポイント
■注意事項
ここでは、Yoomとそれぞれのアプリを連携して、操作が行えるようにしていきます。
まずは基本的な設定方法を解説しているナビをご覧ください！
それではここから今回のフローで使用するアプリのマイアプリ登録方法を解説します。
Yoomの画面左側にある「マイアプリ」→「新規接続」をクリックしましょう。
「アプリ名で検索」でSlackを探すか、アプリ一覧から探してください。
以下の画面が表示されるのでWebflowで確認し入力しましょう。
入力後、マイアプリにWebflowが表示されていれば連携の完了です。
まず先にGitHubのアプリ連携を行います。
新規接続をクリックし、検索窓にGitHubと入力します。
表示された候補をクリックすると、サインイン画面に移行します。
GitHubに登録しているユーザー名またはメールアドレスとパスワードを入力し、サインインしてください。
登録メールアドレスに認証コードが送付されます。
届いた認証コードを入力して『確認する』をクリックしてください。
認証が正常に行われると、YoomのマイアプリにGitHubが表示されます。
続いてYoomのテンプレートをコピーします。
以下バナーのテンプレートの「このテンプレートを試してみる」のアイコンをクリックします。
■概要
Webflowで新しいコンテンツやブログ記事を公開するたびに、開発タスクとしてGitHubに手動でIssueを作成する作業は、手間がかかる上に転記ミスも起こりがちではないでしょうか。このワークフローは、WebflowとGitHubを連携させることで、こうした定型業務の自動化を実現します。Webflowで新しいアイテムが公開されると、その情報をもとにGitHubのIssueが自動で作成され、開発チームへの共有を円滑にします。
■このテンプレートをおすすめする方
■このテンプレートを使うメリット
■フローボットの流れ
※「トリガー」：フロー起動のきっかけとなるアクション、「オペレーション」：トリガー起動後、フロー内で処理を行うアクション
■このワークフローのカスタムポイント
■注意事項
以下の画像のような画面が表示されたらテンプレートのコピーは完了です。
Webflowでコレクションのアイテムが公開されたことを自動化のトリガーにするための設定を行います。
以下の赤枠をクリックしましょう。
連携アカウントとアクションを選択する画面が表示されるので、今回連携するWebflowのアカウントを確認し「次へ」をクリックします。
アプリトリガーのAPI接続設定が表示されるので、設定を進めていきましょう。
トリガーの起動間隔は5分・10分・15分・30分・60分から選択できます。
※ご利用プランによって、設定できるトリガーの最短間隔が違うので、その点は要チェックです。
なお、基本的にはそのプランの最短の起動間隔にしてお使いいただくことをおすすめします。
サイトIDとコレクションIDを下記のように候補から入力しましょう。
ここでWebflowに移動し、設定したコレクションでアイテムを公開してください。
フローボットに戻り、「テスト」をクリックします。
Webflowから取得した値が表示されているか確認しましょう。
この後、この取得した値の内容を入力に使用することができます。
テスト成功後「保存する」をクリックしましょう。
Webflowでアイテムが公開されたらGitHubでIssueを作成するための設定を行います。
以下の赤枠をクリックしましょう。
連携アカウントとアクションを選択する画面が表示されるので、今回連携するGitHubのアカウントを確認し「次へ」をクリックします。
以下の画面が表示されるのでGitHubで確認し入力しましょう。
タイトルには以下のようにWebflowから取得した値から「name」を選択し、入力します。
内容にはWebflowから取得した値よりdescriptionを選択し、入力します。
入力後「テスト」をクリックし、実際にGitHubでIssueが作成されているか確認しましょう。
確認ができたら「保存する」をクリックします。
※下記はIssueの作成イメージです。
以下の画面の赤枠部分「トリガーをON」をクリックすることで、フローボットが自動で起動します。
設定お疲れ様でした！
今回はWebflowからGitHubへデータを連携する方法をご紹介しましたが、逆にGitHubからWebflowへのデータ連携を実施したい場合は、下記のテンプレートも併せてご利用ください。
開発側の進捗をコンテンツ管理側に自動で反映させることができ、チーム全体の情報共有がよりスムーズになります。
GitHubのリポジトリで新しいIssueが作成された際に、そのIssueのタイトルや内容をWebflowのCMSコレクションにアイテムとして自動で追加します。
この連携により、開発タスクの発生をWebflow側で迅速に把握でき、関連コンテンツの準備や更新作業を迅速に開始できます。
■概要
WebflowとGitHubを連携させて業務効率化を図りたいと考えているものの、手作業での情報反映に課題を感じていませんか。Issueの作成のたびにWebflowに手動でアイテムを追加する作業は、時間もかかり、転記ミスの原因にもなり得ます。このワークフローを活用すれば、GitHubで新しいIssueが作成された際に、Webflowのコレクションへアイテムを自動で追加できます。これにより、手作業による連携の手間をなくし、スムーズな情報共有を実現します。
■このテンプレートをおすすめする方
■このテンプレートを使うメリット
■フローボットの流れ
※「トリガー」：フロー起動のきっかけとなるアクション、「オペレーション」：トリガー起動後、フロー内で処理を行うアクション
■このワークフローのカスタムポイント
■注意事項
GitHubでプルリクエストが作成されたら、その情報をWebflowのCMSに新しいアイテムとして自動登録します。
これにより、コードの変更やレビュー状況をWebサイトの管理画面上で一覧化できるため、マーケティング担当者やコンテンツ編集者が開発の進捗を簡単に確認できるようになります。
■概要
GitHubでの開発進捗をWebflowサイトに反映させる際、プルリクエストの情報を手作業でコピー＆ペーストしていませんか？この作業は手間がかかる上に、転記ミスや更新漏れの原因にもなり得ます。このワークフローを活用すれば、GitHubとWebflowの連携が自動化され、プルリクエストが作成されると同時にWebflowのコレクションにアイテムが追加されるため、こうした課題を円滑に解決します。
■このテンプレートをおすすめする方
■このテンプレートを使うメリット
■フローボットの流れ
※「トリガー」：フロー起動のきっかけとなるアクション、「オペレーション」：トリガー起動後、フロー内で処理を行うアクション
■このワークフローのカスタムポイント
■注意事項
今回ご紹介した連携以外でも、WebflowやGitHubのAPIを活用してさまざまな業務を自動化することが可能です。
もし気になるものがあればぜひこちらもお試しになってみてください！
Webflowの情報を様々なアプリに自動登録ができるため、業務の効率化やヒューマンエラーの削減が実現できます。
また、Googleフォームの回答をWebflowに登録することも可能なためユーザーからの入力情報をスムーズに反映させることが可能です。
■概要
Googleフォームで集めたお問い合わせやイベントの申し込み情報を、手作業でWebflowのCMSに転記していませんか？
この作業は手間がかかるだけでなく、コピー＆ペーストのミスや更新漏れが発生する原因にもなります。
このワークフローを活用すれば、Googleフォームに回答が送信されると、その内容が自動でWebflowのコレクションにアイテムとして追加されるため、こうした課題をスムーズに解消できます。
■このテンプレートをおすすめする方
■このテンプレートを使うメリット
■フローボットの流れ
※「トリガー」：フロー起動のきっかけとなるアクション、「オペレーション」：トリガー起動後、フロー内で処理を行うアクション
■このワークフローのカスタムポイント
■注意事項
■概要
Webflowのフォームが送信されたらGoogleスプレッドシートに追加するフローです。
■このテンプレートをおすすめする方
1.Webflowを活用してWebサイトを構築している方
・Webflowで自社サイトやサービスを運営している企業
・フォーム内容をGoogleスプレッドシートに自動で追加したい方
2.Googleスプレッドシートで情報管理をしている方
・GoogleスプレッドシートでWebflowのフォーム内容を管理している方
・顧客情報の管理でGoogleスプレッドシートを活用している方
■このテンプレートを使うメリット
Webflowのフォームは、問い合わせやリード情報の取得に役立ちますが、都度ダッシュボードから確認するのは手間です。
また、Googleスプレッドシートにフォーム内容を手動で追加している場合、時間がかかり非効率的です。
このテンプレートは、Webflowのフォーム内容を自動でGoogleスプレッドシートに追加することができるため、ダッシュボードからフォーム内容を確認する手間を減らすことができます。
データ入力も自動化することができるため、手作業に比べてデータの正確性が高まり、情報管理を効率化することができます。
また、Googleスプレッドシートへの情報の追加がスピーディーに行われるため、チーム内の情報共有をスムーズにすることが可能です。
■注意事項
・Webflow、GoogleスプレッドシートのそれぞれとYoomを連携してください。
■概要
Webflowで注文が発生したらMicrosoft Excelに追加するフローです。
■このテンプレートをおすすめする方
1.Webflowで自社の商品やサービスの販売をしている方
・自社のWebサイトを運営している企業
・注文情報の管理効率化でWebflowとMicrosoft Excelの連携を自動化したい方
2.受注業務でMicrosoft Excelを利用している方
・Webflowからの注文情報をMicrosoft Excelで一元管理している方
・Microsoft Excelへの情報入力を手動で行っている方
■このテンプレートを使うメリット
Microsoft ExcelでWebflowからの注文情報を一元管理している場合、手動によるデータ入力は時間がかかり非効率的です。
また、手動によるデータ入力はヒューマンエラーが発生や作業効率の低下を招く可能性があります。
Microsoft Excelへのデータ入力を自動化したい方に、このテンプレートは適しています。
Webflowで注文が発生するとMicrosoft Excelに自動で注文情報を追加することができるため、手動による作業を効率化することが可能です。
Microsoft Excelへのデータ入力が自動化されることで、作業時間の削減とヒューマンエラーの発生を低減することができます。
■注意事項
・Webflow、Microsoft ExcelのそれぞれとYoomを連携してください。
・Microsoft365（旧Office365）には、家庭向けプランと一般法人向けプラン（Microsoft365 Business）があり、一般法人向けプランに加入していない場合には認証に失敗する可能性があります。
■概要
Webflowでコレクションのアイテムが作成されたらAirtableに追加するフローです。
■このテンプレートをおすすめする方
1.Webflowでコンテンツ管理をしている方
・WebflowのコレクションをAirtableでも管理している方
・コレクションの追加をAirtableに手動で行っている方
2.Airtableでデータ管理をしている方
・WebflowのコレクションをAirtableで一元管理している方
・WebflowとAirtableを連携して業務を効率化したい方
■このテンプレートを使うメリット
Webflowで作成された情報をAirtableで管理している場合、手動による追加作業が必要となるため、非効率的です。
また、Airtableへの手動による情報追加はミスの発生リスクを高める可能性があり、効率化したいと感じているかもしれません。
このテンプレートは、Webflowでコレクションのアイテムが作成されるとAirtableに自動で追加することができ、手動による作業が不要になります。
Webflowにおけるデータ更新が頻繁に行われる場合でも、Airtableへの情報追加がスピーディーに行われるため、チーム全体で常に最新の情報を確認することができます。
作業が効率化されることで、コレクションの管理や分析業務の時間を確保することが可能です。
■注意事項
・Webflow、AirtableのそれぞれとYoomを連携してください。
■概要
Webflowでコレクションのアイテムが作成されたらNotionに追加するフローです。
■このテンプレートをおすすめする方
1.WebflowでWebサイトの構築や運用をしている方
・Webサイトのコンテンツ管理でNotionを利用している方
・Notionへのデータ追加作業を効率化したい方
2.Notionを利用してデータ管理をしている方
・WebflowのコレクションをNotionで一元管理している方
・WebflowとNotionを連携して業務を効率化したい方
■このテンプレートを使うメリット
WebflowはWebサイトの構築や運用に適したツールで、業務に合わせて利用できるのがメリットです。
しかし、コンテンツ管理を別のツールで行っている場合、データの追加を手動で行う必要があり、手間だと感じているかもしれません。
このテンプレートは、Webflowでコレクションのアイテムが作成されるとNotionに自動で追加することができます。
WebflowからNotionへのデータ連携が自動化されるため、手動による作業が不要となり、効率的にコンテンツ管理をすることができます。
また、Notionへのデータ連携が自動化されることで、常に最新の情報をチームメンバーが確認できるため、業務をスムーズに進めることが可能です。
■注意事項
・Webflow、NotionのそれぞれとYoomを連携してください。
GitHubにIssueが作成されたら様々なアプリに自動登録ができるため、タスク管理や進捗共有が迅速に行えるようになり、チーム全体の連携がスムーズになります。
また、Salesforceの情報をGitHubに追加することもできるため、顧客要望に基づいた迅速な対応や改善が可能です。
■概要
GitHubでIssueが作成されたら、自動的にJira Softwareに課題を登録するフローボットです。
Jira SoftwareとGitHubの課題情報を同期する際などにご利用ください。
■注意事項
・GitHub、Jira SoftwareそれぞれとYoomを連携してください。
・GitHubにタスクが追加されてから5~15分後にJiraにも情報が同期されます。
■概要
GitHubで管理しているIssueを、カスタマーサポートが利用するHubSpotへ手作業で転記していませんか？この作業は手間がかかるだけでなく、情報の入力ミスや対応漏れの原因にもなり得ます。このワークフローは、GitHubとHubSpotを連携し、新しいIssueが作成された際に自動でHubSpotにチケットを作成するため、開発とサポートチーム間の連携を円滑にし、顧客対応の効率化を実現します。
■このテンプレートをおすすめする方
■このテンプレートを使うメリット
■フローボットの流れ
※「トリガー」：フロー起動のきっかけとなるアクション、「オペレーション」：トリガー起動後、フロー内で処理を行うアクション
■このワークフローのカスタムポイント
■注意事項
■概要
GitHubで新しいIssueが作成された際に、手動でGoogleカレンダーにタスクを登録していませんか？この作業は手間がかかるだけでなく、登録漏れによる対応遅延のリスクも伴います。このワークフローを活用すれば、GitHubとGoogleカレンダーを連携させ、Issue作成をトリガーに自動でカレンダーへ予定を追加できます。これにより、タスク管理の効率化と抜け漏れ防止を実現します。
■このテンプレートをおすすめする方
■このテンプレートを使うメリット
■フローボットの流れ
※「トリガー」：フロー起動のきっかけとなるアクション、「オペレーション」：トリガー起動後、フロー内で処理を行うアクション
■このワークフローのカスタムポイント
■注意事項
■概要
GitHubでの開発プロジェクトにおいて、Pull RequestやIssueが作成されるたびにTrelloへ手動でカードを作成する作業は、手間がかかる上に更新漏れのリスクも伴います。このような情報連携の課題は、開発のスピードを妨げる要因になりかねません。このワークフローを活用すれば、GitHubでIssueが作成・更新されるとTrelloにカードが自動で作成されるため、開発とタスク管理の連携を円滑にし、業務の効率化を実現します。
■このテンプレートをおすすめする方
■このテンプレートを使うメリット
■フローボットの流れ
※「トリガー」：フロー起動のきっかけとなるアクション、「オペレーション」：トリガー起動後、フロー内で処理を行うアクション
■このワークフローのカスタムポイント
■注意事項
■概要
SalesforceでToDoオブジェクトが登録されたらGitHubに追加するフローです。
■このテンプレートをおすすめする方
1.SalesforceのToDoオブジェクトを利用する営業・サポート担当者
・顧客からの問い合わせや要望、社内タスクなどをSalesforceのToDoで管理して開発チームへの対応依頼をGitHubに登録したい方
・ToDoを手動でGitHubに転記する手間を省いて業務効率を向上させたい方
・SalesforceとGitHubの情報連携を強化して顧客対応と開発対応の連携をスムーズにしたい方
2.GitHubを利用する開発チーム
・SalesforceのToDoに登録された顧客からの問題や要望をGitHub上で管理して開発プロセスに組み込みたい方
・営業・サポートチームからの情報をリアルタイムに把握して迅速な対応をしたい方
■このテンプレートを使うメリット
Salesforceは顧客管理に非常に強力なツールですが、ToDoオブジェクトが登録されるたびにGitHubに手動でISSUEを追加するのは、手入力ミスや情報の漏れが発生する可能性があります。
このフローを活用すれば、SalesforceでToDoオブジェクトが登録されたら自動的にGitHubに必要な情報が追加されて、営業担当者や開発チームはSalesforceとGitHubの両方を確認する必要がなくなり、最新の情報を効率的に共有することができます。
また、手作業での入力作業が不要になるため業務効率が向上して入力ミスを防ぐこともできます。
■注意事項
・Salesforce、GitHubのそれぞれとYoomを連携してください。
・Salesforceはチームプラン・サクセスプランでのみご利用いただけるアプリとなっております。フリープラン・ミニプランの場合は設定しているフローボットのオペレーションやデータコネクトはエラーとなりますので、ご注意ください。
・チームプランやサクセスプランなどの有料プランは、2週間の無料トライアルを行うことが可能です。無料トライアル中には制限対象のアプリを使用することができます。
WebflowとGitHubの連携を自動化することで、これまで手作業で行っていたコンテンツ更新と開発タスク間の情報転記作業をなくし、ヒューマンエラーを根本から防ぐことができます。
これにより、コンテンツチームと開発チームの連携が強化され、担当者はそれぞれが本来注力すべき創造的な業務に集中できる環境が整うでしょう！
今回ご紹介したような業務自動化を実現できるノーコードツール「Yoom」を使えば、プログラミングの知識がない方でも、直感的な操作で簡単に業務フローを構築できます。
もし自動化に少しでも興味を持っていただけたなら、ぜひこちらの登録フォームから無料登録してYoomによる業務効率化を体験してみてください！
Q：特定の条件を満たすアイテム公開時のみ、今回のフローを実行するようにできますか？
A：はい、可能です。
有料プランで使える「分岐」機能を使用することで、特定のキーワードや特定カテゴリアイテム作成時にのみフローを進めることができます。
Q：Issue作成後、Slackなど別ツールへも通知できますか？
A：はい、可能です。
フローボットの画面でIssue作成した後の「＋」をクリックするとオペレーションを追加でき、次のアクションの設定が可能です。
検索窓に「Slack」と入力し、メッセージを送信するアクションを設定することでSlackへ通知できます。
Q：連携が失敗した場合、通知はどうなりますか？
A：自動化が失敗した場合、Yoomに登録したメールアドレスに通知が届きます。
また、エラー時の対応方法については、こちらをご覧ください。
ヘルプページで解決しない場合は、サポート窓口を利用することもできます。
