Webサイト制作の現場で、
「デザイン案はあるけれど、そこからHTMLやCSSを組む作業に時間がかかってしまう…」
「ちょっとした定型的なパーツなら、AIでもっと手軽に生成できたら業務が楽になるのに…」 と感じることはありませんか？
特に、クライアントからの細かな要望や修正依頼が重なると、コーディング作業に追われてしまいがちです。
もし、Webサイトのデザイン指示やテキストベースの要望に基づいてAIがHTMLやCSSなどのコードを自動で生成し、Web制作の初期工程やパーツ作成を効率化できる仕組み があれば、これらの悩みから解放され、より創造性が求められるデザイン設計やユーザー体験の最適化といったコア業務に集中できる貴重な時間を生み出すことができます！
今回ご紹介する自動化の設定は、ノーコードで簡単に設定できて、手間や時間もかからないので、ぜひ自動化を導入して作業をもっと楽にしましょう！
とにかく早く試したい方へ YoomにはAIを活用してWebサイトのパーツを自動生成する業務フロー自動化のテンプレート が用意されているので、「まずは試してみたい！」という方は、以下のバナーをクリックして、すぐに自動化を体験してみましょう！
GoogleフォームにWeb制作依頼が回答されたら、AIでHTML/CSSを生成してSlackに送信する
試してみる
■概要
Web制作の依頼をGoogleフォームで受け付けているものの、都度内容を確認してHTML/CSSの雛形を作成し、担当者に共有する作業は手間がかかるのではないでしょうか。このワークフローを活用すれば、Googleフォームに回答が送信されると、その内容を基にAIがHTML/CSSコードを自動で生成し、Slackへ通知します。これにより、制作の初動を効率化し、より創造的な業務へ時間を充てることが可能になります。
■このテンプレートをおすすめする方
Googleフォームで受け付けたWeb制作依頼の初動対応を効率化したい制作担当者の方 AIを活用してHTML/CSSの雛形作成を自動化し、生産性を高めたいディレクターの方 依頼内容からコード生成、チームへの共有までを一気通貫で自動化したい方
■このテンプレートを使うメリット
Googleフォームへの回答を基にAIがHTML/CSSを自動で生成するため、手作業でのコーディング時間を短縮できます。 依頼の受付からコード生成、Slackでの共有までが自動化されるため、業務プロセスが標準化され、属人化を防ぎます。
■フローボットの流れ
はじめに、GoogleフォームとSlackをYoomと連携します。 次に、トリガーでGoogleフォームを選択し、「フォームに回答が送信されたら」というアクションを設定します。 次に、オペレーションでAI機能の「テキストを生成」アクションを設定し、Googleフォームの回答内容を基にHTML/CSSを生成するよう指示します。 最後に、オペレーションでSlackの「チャンネルにメッセージを送る」アクションを設定し、生成されたコードを指定のチャンネルに送信します。 ※「トリガー」：フロー起動のきっかけとなるアクション、「オペレーション」：トリガー起動後、フロー内で処理を行うアクション■このワークフローのカスタムポイント
AI機能の「テキストを生成」アクションでは、Googleフォームの回答内容などを組み合わせて、生成したいHTML/CSSの要件に沿ったプロンプトを任意で設定してください。 Slackの「チャンネルにメッセージを送る」アクションでは、通知先として任意のチャンネルIDを設定してください。
■注意事項
Googleフォーム、SlackのそれぞれとYoomを連携してください。 トリガーは5分、10分、15分、30分、60分の間隔で起動間隔を選択できます。 プランによって最短の起動間隔が異なりますので、ご注意ください。 Googleフォームをトリガーとして使用した際の回答内容を取得する方法は「Googleフォームトリガーで、回答内容を取得する方法 」を参照ください。
生成AIでWebサイトを作成するには？ 生成AIを活用すれば、従来のような複雑なコーディングやデザインの専門知識がなくとも、効率的にWebサイトを立ち上げられます。目的に応じて、AIがサイト全体を構築してくれるツールと、運用や業務を効率化する仕組みを使い分けるのが得策です。
Webサイト作成ツールを使用する まずは、AIがサイトのデザインや構成を提案・生成してくれるツールの活用を検討しましょう。
Wix Wixは、AIとの対話を通じて業種や目的に最適化されたサイトを生成するツールです。 AIの質問にいくつか答えるだけで、プロ品質のレイアウトや画像、テキストが配置された土台が完成します。Wixの最大の特徴は、AI生成後のカスタマイズ性が非常に高い点にあります。AIが作成した構成をベースにしつつ、ドラッグ＆ドロップで調整可能なため、オリジナリティを追求したいビジネスサイトの構築に適しています。
Jimdo JimdoのAIビルダーは、極限まで「手軽さ」を追求したサイト作成ツールです。 SNSアカウントやGoogleビジネスプロフィールの情報からコンテンツを自動取得する機能を備えており、自分で写真や文章を用意する手間を省けます。複雑な設定を排したシンプルな設計のため、専門知識のない初心者でも迷うことなく、短時間でスマートフォン表示に最適化されたホームページを公開できます。
【免責事項】 ご利用の際は、各サイト・ツールの利用規約や注意事項をご確認のうえ、ご自身の判断のもとでご活用ください。外部サービスの利用に伴うサポートやトラブル等につきましては対応いたしかねますので、あらかじめご了承ください。
Yoomを使用する ノーコードツールのYoomを活用すれば、各種ツールに届いたWeb制作依頼をトリガーにして、AIが自動でHTML/CSSコードを生成するワークフローを構築できます。コーディングの手間を減らし、制作の初動をスムーズに効率化することが可能です。
※AIが生成するコードやデザインには、一部修正が必要な場合や、最新のブラウザ環境での検証が必要な場合があります。
Yoomを使って、AIでWebサイトパーツを自動生成し、業務を効率化する方法 Web制作のプロセスにおいて、AIを活用してHTMLやCSSなどのコード生成を自動化し、業務効率を向上させる具体的な方法をテンプレートを交えて紹介します。これにより、手作業によるコーディングの時間を削減し、より迅速なWebサイト構築を実現できるので、気になる内容があれば、ぜひクリックしてみてください！
フォームサービスからの依頼でAIがWebサイトパーツを自動生成する GoogleフォームなどのフォームサービスにWeb制作の依頼が送信されると、その内容を基にAIがHTMLやCSSなどのコードを自動生成する ことができます。依頼受付からコーディングの初稿作成までのプロセスを大幅に短縮し、制作業務の効率化を実現できます！
GoogleフォームにWeb制作依頼が回答されたら、AIでHTML/CSSを生成してSlackに送信する
試してみる
■概要
Web制作の依頼をGoogleフォームで受け付けているものの、都度内容を確認してHTML/CSSの雛形を作成し、担当者に共有する作業は手間がかかるのではないでしょうか。このワークフローを活用すれば、Googleフォームに回答が送信されると、その内容を基にAIがHTML/CSSコードを自動で生成し、Slackへ通知します。これにより、制作の初動を効率化し、より創造的な業務へ時間を充てることが可能になります。
■このテンプレートをおすすめする方
Googleフォームで受け付けたWeb制作依頼の初動対応を効率化したい制作担当者の方 AIを活用してHTML/CSSの雛形作成を自動化し、生産性を高めたいディレクターの方 依頼内容からコード生成、チームへの共有までを一気通貫で自動化したい方
■このテンプレートを使うメリット
Googleフォームへの回答を基にAIがHTML/CSSを自動で生成するため、手作業でのコーディング時間を短縮できます。 依頼の受付からコード生成、Slackでの共有までが自動化されるため、業務プロセスが標準化され、属人化を防ぎます。
■フローボットの流れ
はじめに、GoogleフォームとSlackをYoomと連携します。 次に、トリガーでGoogleフォームを選択し、「フォームに回答が送信されたら」というアクションを設定します。 次に、オペレーションでAI機能の「テキストを生成」アクションを設定し、Googleフォームの回答内容を基にHTML/CSSを生成するよう指示します。 最後に、オペレーションでSlackの「チャンネルにメッセージを送る」アクションを設定し、生成されたコードを指定のチャンネルに送信します。 ※「トリガー」：フロー起動のきっかけとなるアクション、「オペレーション」：トリガー起動後、フロー内で処理を行うアクション■このワークフローのカスタムポイント
AI機能の「テキストを生成」アクションでは、Googleフォームの回答内容などを組み合わせて、生成したいHTML/CSSの要件に沿ったプロンプトを任意で設定してください。 Slackの「チャンネルにメッセージを送る」アクションでは、通知先として任意のチャンネルIDを設定してください。
■注意事項
Googleフォーム、SlackのそれぞれとYoomを連携してください。 トリガーは5分、10分、15分、30分、60分の間隔で起動間隔を選択できます。 プランによって最短の起動間隔が異なりますので、ご注意ください。 Googleフォームをトリガーとして使用した際の回答内容を取得する方法は「Googleフォームトリガーで、回答内容を取得する方法 」を参照ください。
チャットツールからの依頼でAIがWebサイトパーツを自動生成する DiscordなどのチャットツールにWeb制作の依頼が送信されると、AIがHTMLやCSSなどのコードを自動生成し、返信する ことができるため、リアルタイムなコミュニケーションの中で迅速にWebパーツのプロトタイプを作成し、制作スピードを向上させることが可能です！
DiscordでWeb制作依頼が送信されたら、AIでHTML/CSSを生成して自動返信する
試してみる
■概要
Discordで受けたWeb制作依頼への対応に、手間や時間がかかっていませんか？依頼ごとに手動でHTML/CSSを記述して返信するのは、特に簡単な修正や定型的な要望の場合、非効率に感じることもあるかもしれません。このワークフローを活用すれば、Discordの特定チャンネルにWeb制作依頼が投稿されると、AIが内容を解釈してHTML/CSSコードを自動で生成し、返信までを完結させることが可能です。
■このテンプレートをおすすめする方
Discordを窓口として、Web制作やコーディングの依頼を管理している方 AIを活用して、HTML/CSSの簡単なコード生成プロセスを自動化したいと考えている方 Web制作関連の定型的なコミュニケーションを効率化したいチームリーダーの方
■このテンプレートを使うメリット
依頼メッセージの受信からコード生成、返信までが自動化されるため、対応時間を短縮し、より重要な制作業務に集中できます。 手動でのコーディングやメッセージのコピー＆ペーストが不要になることで、コードの記述ミスや返信漏れなどのヒューマンエラーを防ぎます。
■フローボットの流れ
はじめに、DiscordをYoomと連携します 次に、トリガーでDiscordを選択し、「チャンネルでメッセージが送信されたら」というアクションを設定します 次に、オペレーションでAI機能を選択し、「テキスト生成」アクションで依頼内容を基にHTML/CSSを生成するよう設定します 最後に、オペレーションで再度Discordを選択し、「メッセージを送信」アクションで生成されたコードを指定のチャンネルに返信します ※「トリガー」：フロー起動のきっかけとなるアクション、「オペレーション」：トリガー起動後、フロー内で処理を行うアクション■このワークフローのカスタムポイント
Discordのトリガー設定では、フローを起動させたいサーバーIDやチャンネルIDを任意で設定してください。 AI機能のテキスト生成オペレーションでは、Discordのメッセージ内容を引用し、より精度の高いコードを生成するためのプロンプトを任意で設定できます。
■注意事項
DiscordとYoomを連携してください。 トリガーは5分、10分、15分、30分、60分の間隔で起動間隔を選択できます。 プランによって最短の起動間隔が異なりますので、ご注意ください。
スプレッドシートサービスの情報に基づいてAIがWebサイトパーツを自動生成する Google スプレッドシートなどのスプレッドシートサービスにWeb制作の依頼情報が追加されると、そのデータを基にAIがHTMLやCSSなどのコードを自動生成する ことも可能です。リスト形式で管理された複数の制作案件も効率的に処理し、制作の生産性を高めることができます！
Google スプレッドシートにWeb制作依頼が追加されたら、AIでHTML/CSSを生成してMicrosoft Teamsに送信する
試してみる
■概要
Google スプレッドシートでWeb制作の依頼を管理する中で、依頼内容を基に毎回HTML/CSSの雛形を作成し、Microsoft Teamsで共有する作業に手間を感じていませんか？このワークフローを活用すれば、Google スプレッドシートに行が追加されるだけで、AIが依頼内容に応じたHTML/CSSを自動で生成し、Microsoft Teamsの指定チャネルへ送信までを完結させることができます。Web制作の初動を効率化し、依頼管理のプロセスを円滑にします。
■このテンプレートをおすすめする方
Web制作の依頼をGoogle スプレッドシートで管理しているWebディレクターやプロジェクトマネージャーの方 AIを活用してHTML/CSSのコーディング作業を効率化したいと考えているフロントエンドエンジニアの方 Microsoft Teamsでの情報共有の抜け漏れを防ぎ、制作フローを自動化したいと考えている方
■このテンプレートを使うメリット
Google スプレッドシートへの依頼追加を起点に、AIがHTML/CSSを自動生成するため、手作業でのコーディング時間を短縮できます。 依頼内容に基づいた定型的なコード生成が自動化されるため、制作フローが標準化され、業務の属人化解消に繋がります。
■フローボットの流れ
はじめに、Google スプレッドシートとMicrosoft TeamsをYoomと連携します。 次に、トリガーでGoogle スプレッドシートを選択し、「行が追加されたら」というアクションを設定します。 次に、オペレーションでAI機能の「テキスト生成」アクションを設定し、スプレッドシートの依頼内容を基にHTML/CSSを生成するように指示します。 最後に、オペレーションでMicrosoft Teamsの「チャネルにメッセージを送る」アクションを設定し、生成されたコードを指定のチャネルに送信します。 ※「トリガー」：フロー起動のきっかけとなるアクション、「オペレーション」：トリガー起動後、フロー内で処理を行うアクション
■このワークフローのカスタムポイント
Google スプレッドシートのトリガー設定では、連携したいスプレッドシートのIDやタブ名を任意で設定してください。 AI機能のテキスト生成では、Google スプレッドシートから取得した依頼内容の値を引用し、目的に応じたHTML/CSSを生成するためのプロンプトを自由にカスタマイズできます。 Microsoft Teamsへの通知設定では、メッセージを送信したいチームIDやチャネルID、本文の内容を任意で設定することが可能です。
■注意事項
Google スプレッドシート、Microsoft TeamsのそれぞれとYoomを連携してください。 トリガーは5分、10分、15分、30分、60分の間隔で起動間隔を選択できます。 プランによって最短の起動間隔が異なりますので、ご注意ください。 Microsoft365（旧Office365）には、家庭向けプランと一般法人向けプラン（Microsoft365 Business）があり、一般法人向けプランに加入していない場合には認証に失敗する可能性があります。 Google スプレッドシートをアプリトリガーとして使用する際の注意事項は「【アプリトリガー】Google スプレッドシートのトリガーにおける注意事項 」を参照してください。
GoogleフォームとSlackを連携するフローを作ってみよう それではここから代表的な例として、GoogleフォームにWeb制作の依頼が回答された際に、その内容を基にAIがHTMLやCSSなどのコードを自動生成し、指定されたチャネルに送信するフローを解説していきます！
ここではYoomを使用してノーコードで設定をしていくので、もしまだYoomのアカウントをお持ちでない場合は、会員登録フォーム からアカウントを発行しておきましょう。
[Yoomとは]
フローの作成方法 今回は大きく分けて以下のプロセスで作成します。
GoogleフォームとSlackのマイアプリ連携 テンプレートをコピー Googleフォームのトリガー設定、AIによるテキスト生成設定、Slackのアクション設定 トリガーをONにし、フローが起動するかを確認
GoogleフォームにWeb制作依頼が回答されたら、AIでHTML/CSSを生成してSlackに送信する
試してみる
■概要
Web制作の依頼をGoogleフォームで受け付けているものの、都度内容を確認してHTML/CSSの雛形を作成し、担当者に共有する作業は手間がかかるのではないでしょうか。このワークフローを活用すれば、Googleフォームに回答が送信されると、その内容を基にAIがHTML/CSSコードを自動で生成し、Slackへ通知します。これにより、制作の初動を効率化し、より創造的な業務へ時間を充てることが可能になります。
■このテンプレートをおすすめする方
Googleフォームで受け付けたWeb制作依頼の初動対応を効率化したい制作担当者の方 AIを活用してHTML/CSSの雛形作成を自動化し、生産性を高めたいディレクターの方 依頼内容からコード生成、チームへの共有までを一気通貫で自動化したい方
■このテンプレートを使うメリット
Googleフォームへの回答を基にAIがHTML/CSSを自動で生成するため、手作業でのコーディング時間を短縮できます。 依頼の受付からコード生成、Slackでの共有までが自動化されるため、業務プロセスが標準化され、属人化を防ぎます。
■フローボットの流れ
はじめに、GoogleフォームとSlackをYoomと連携します。 次に、トリガーでGoogleフォームを選択し、「フォームに回答が送信されたら」というアクションを設定します。 次に、オペレーションでAI機能の「テキストを生成」アクションを設定し、Googleフォームの回答内容を基にHTML/CSSを生成するよう指示します。 最後に、オペレーションでSlackの「チャンネルにメッセージを送る」アクションを設定し、生成されたコードを指定のチャンネルに送信します。 ※「トリガー」：フロー起動のきっかけとなるアクション、「オペレーション」：トリガー起動後、フロー内で処理を行うアクション■このワークフローのカスタムポイント
AI機能の「テキストを生成」アクションでは、Googleフォームの回答内容などを組み合わせて、生成したいHTML/CSSの要件に沿ったプロンプトを任意で設定してください。 Slackの「チャンネルにメッセージを送る」アクションでは、通知先として任意のチャンネルIDを設定してください。
■注意事項
Googleフォーム、SlackのそれぞれとYoomを連携してください。 トリガーは5分、10分、15分、30分、60分の間隔で起動間隔を選択できます。 プランによって最短の起動間隔が異なりますので、ご注意ください。 Googleフォームをトリガーとして使用した際の回答内容を取得する方法は「Googleフォームトリガーで、回答内容を取得する方法 」を参照ください。
ステップ1：マイアプリ連携 まずは基本的なナビをご覧ください。
GoogleフォームはGoogle スプレッドシートと同様の手順で連携できます。
Slackも下記のナビで解説しています。
ステップ2：テンプレートをコピー ここからいよいよフローを作っていきます！
簡単に設定できるようテンプレートがありますので、まずはこちらをコピーしましょう。
Yoomにログインし、以下バナーの「試してみる」をクリックしてください。
GoogleフォームにWeb制作依頼が回答されたら、AIでHTML/CSSを生成してSlackに送信する
試してみる
■概要
Web制作の依頼をGoogleフォームで受け付けているものの、都度内容を確認してHTML/CSSの雛形を作成し、担当者に共有する作業は手間がかかるのではないでしょうか。このワークフローを活用すれば、Googleフォームに回答が送信されると、その内容を基にAIがHTML/CSSコードを自動で生成し、Slackへ通知します。これにより、制作の初動を効率化し、より創造的な業務へ時間を充てることが可能になります。
■このテンプレートをおすすめする方
Googleフォームで受け付けたWeb制作依頼の初動対応を効率化したい制作担当者の方 AIを活用してHTML/CSSの雛形作成を自動化し、生産性を高めたいディレクターの方 依頼内容からコード生成、チームへの共有までを一気通貫で自動化したい方
■このテンプレートを使うメリット
Googleフォームへの回答を基にAIがHTML/CSSを自動で生成するため、手作業でのコーディング時間を短縮できます。 依頼の受付からコード生成、Slackでの共有までが自動化されるため、業務プロセスが標準化され、属人化を防ぎます。
■フローボットの流れ
はじめに、GoogleフォームとSlackをYoomと連携します。 次に、トリガーでGoogleフォームを選択し、「フォームに回答が送信されたら」というアクションを設定します。 次に、オペレーションでAI機能の「テキストを生成」アクションを設定し、Googleフォームの回答内容を基にHTML/CSSを生成するよう指示します。 最後に、オペレーションでSlackの「チャンネルにメッセージを送る」アクションを設定し、生成されたコードを指定のチャンネルに送信します。 ※「トリガー」：フロー起動のきっかけとなるアクション、「オペレーション」：トリガー起動後、フロー内で処理を行うアクション■このワークフローのカスタムポイント
AI機能の「テキストを生成」アクションでは、Googleフォームの回答内容などを組み合わせて、生成したいHTML/CSSの要件に沿ったプロンプトを任意で設定してください。 Slackの「チャンネルにメッセージを送る」アクションでは、通知先として任意のチャンネルIDを設定してください。
■注意事項
Googleフォーム、SlackのそれぞれとYoomを連携してください。 トリガーは5分、10分、15分、30分、60分の間隔で起動間隔を選択できます。 プランによって最短の起動間隔が異なりますので、ご注意ください。 Googleフォームをトリガーとして使用した際の回答内容を取得する方法は「Googleフォームトリガーで、回答内容を取得する方法 」を参照ください。
下記のようにお使いのYoom管理画面にテンプレートがコピーされるので、OKを押して設定を進めていきます。
ステップ3：Googleフォームのトリガー設定 それでは、最初の設定を始めましょう！
まずは、下の赤枠をクリックしてくださいね。
画面が切り替わりますので、ここで連携するアカウントとアクションを設定しましょう。
設定が終わったら「次へ」をクリックして進んでください。
ここでは、トリガーとして使用するGoogleフォームの設定を行います。
もしまだ対象のGoogleフォームを作成していない場合は、このタイミングで作成してください。
今回は、下記のようなGoogleフォームを準備しました。
また、この後のテスト操作で実際にフォームから回答を送信する必要があるため、忘れずに入力しておいてください。
Googleフォームの準備が整ったら、Yoom画面に戻り下記項目を入力してください。
トリガーの起動間隔 ：ご利用プラン フォームID ：入力欄の下にある説明を参考に、先ほど作成したGoogleフォームのIDを入力してください。
入力が完了したら、テストしてください。
成功すると、下部に取得した値が表示されます。
※Googleフォームをトリガーに設定した場合の回答データの取得方法については、「Googleフォームトリガーで、回答内容を取得する方法 」を参考にしてみてくださいね。
最後に、「完了」を押して次のステップへ進みましょう。
ステップ4：AIによるテキスト生成設定 つぎに、先ほどファイルから読み取った文字を、AIを用いて分析するための設定をしましょう。
まずは、下の赤枠をクリックしてくださいね。
画面が切り替わるので、タイトルやアクションは先ほどと同様に修正・確認をしてください。
言語欄には、入力欄下の注釈を参考に指定の言語を入力しましょう。
続いて、AIモデルを選択しましょう。
入力が完了したらテストし、成功するか確認してください。
下記のような生成結果が表示されればOKです!
最後に、「完了」を押して次のステップへ進みましょう。
ステップ5：Slackのアクション設定 先ほど生成したテキストをSlackに送信するための設定をしましょう。
まずは、下の赤枠をクリックしてくださいね。
次に、連携アカウントとアクションを設定します。
タイトルやアクションは前のステップと同様に、修正・確認をして次に進んでください。
ここでは、Slackに送信する内容を具体的に設定していきます。
投稿先のチャンネルID ：入力欄をクリックすると、下記のように候補が表示されますのでチャンネルIDを選択してください。
メッセージ ：入力欄をクリックすると、下図のように取得した値が表示されます。
入力が完了したらテストしてください。
無事に成功すると、Slackにメッセージが送信されているはずなので確認してみましょう。
下記のように、指定したメッセージがSlackに届いていればOKです!
最後に、「完了」を押して次のステップへ進みましょう。
ステップ6：トリガーをONにして動作確認 お疲れ様でした！これですべての設定が完了です。設定が完了すると以下のようなメニューが表示されるので、トリガーをONにします。
これですべての設定が完了したので、動作確認をしてみましょう!
Web制作に関するその他の自動化例 他にも、Web制作に関するテンプレートを用意しています！
例えば以下のような自動化はいかがでしょうか。
Googleフォームの回答をもとに、AIで記事コンテンツの草案を制作してSlackに通知する
試してみる
■概要
手作業で記事コンテンツを作成するのは時間がかかり、アイデア出しも大変な作業ではないでしょうか。また、作成した内容をチームに共有する際にも手間が発生することがあります。このワークフローを活用すれば、Googleフォームへの回答送信をきっかけに、AI機能が自動で記事コンテンツの草案を生成し、Slackへ通知するため、これらの課題をスムーズに解消できます。
■このテンプレートをおすすめする方
収集した情報を元に手作業で記事作成を行っているコンテンツ担当者の方 AIを活用して記事作成の初動を効率化し、発想の幅を広げたい方 チーム内での記事コンテンツの確認や共有を迅速に行いたい方 ■このテンプレートを使うメリット
Googleフォームの回答から記事草案の生成、Slackへの通知までが自動化されるため、手作業に費やしていた時間を削減できます。 手作業による情報の転記ミスや、通知漏れといったヒューマンエラーのリスク軽減に繋がります。 ■フローボットの流れ
はじめに、GoogleフォームとSlackをYoomと連携します。 次に、トリガーでGoogleフォームを選択し、「フォームに回答が送信されたら」というアクションを設定します。 続いて、オペレーションでAI機能の「テキストを生成する」アクションを設定し、フォームの回答内容などを用いて記事草案を作成するよう指示します。 最後に、オペレーションでSlackの「チャンネルにメッセージを送る」アクションを設定し、生成されたAIによる記事草案を指定したチャンネルに通知します。 ※「トリガー」：フロー起動のきっかけとなるアクション、「オペレーション」：トリガー起動後、フロー内で処理を行うアクション
■このワークフローのカスタムポイント
Googleフォームのトリガー設定では、起動対象としたいフォームを任意で指定してください。 AI機能のオペレーションでは、記事草案を生成するための指示（プロンプト）を自由にカスタマイズでき、定型文を組み込んだり、Googleフォームで取得した回答内容を変数としてプロンプト内に設定することも可能です。 Slackへの通知オペレーションでは、通知先のチャンネルやダイレクトメッセージを任意で設定できます。また、通知メッセージの本文も、固定のテキストだけでなく、AIが生成した草案やフォームの回答といった前段階の情報を変数として埋め込むなど、柔軟なカスタムが可能です。 ■注意事項
Googleフォーム、SlackのそれぞれとYoomを連携してください。 トリガーは5分、10分、15分、30分、60分の間隔で起動間隔を選択できます。 プランによって最短の起動間隔が異なりますので、ご注意ください。 Googleフォームをトリガーとして使用した際の回答内容を取得する方法は「Googleフォームトリガーで、回答内容を取得する方法 」を参照ください。
Googleフォームに開発依頼が回答されたら、AIでJavaScriptコードを生成してSlackに送信する
試してみる
■概要
開発依頼をGoogleフォームで受け付けているものの、その後のコード生成や担当者への共有を手作業で行うのは手間ではないでしょうか。特に、依頼内容を基にしたコード作成や関係者への迅速な情報伝達は、対応の遅れやヒューマンエラーを招く可能性があります。このワークフローを活用すれば、Googleフォームに回答が送信されると、AIが自動でJavaScriptコードを生成し、その結果をSlackへ通知するため、これらの課題を解消し、開発業務の初動を円滑に進めることができます。
■このテンプレートをおすすめする方
Googleフォームで受け付けた開発依頼に基づき、手作業でコード生成や通知を行っている方 AIを活用してJavaScriptコード生成を自動化し、開発プロセスを効率化したい開発担当者の方 開発依頼の受付から担当者への情報共有までのリードタイムを短縮したいプロジェクトマネージャーの方 ■このテンプレートを使うメリット
Googleフォームへの回答を起点に、AIによるコード生成、Slackへの通知までが自動化されるため、これまで手作業に費やしていた時間を短縮できます。 手動での情報伝達やコードのコピー＆ペーストといった作業が不要になるため、連絡漏れや転記ミスといったヒューマンエラーの発生を防ぎます。 ■フローボットの流れ
はじめに、GoogleフォームとSlackをYoomと連携します。 次に、トリガーとしてGoogleフォームを選択し、「フォームに回答が送信されたら」というアクションを設定します。この際、開発依頼を受け付ける特定のフォームを指定します。 次に、オペレーションでAI機能を選択し、「テキストを生成する」アクションを設定します。ここで、Googleフォームから受け取った依頼内容を基にJavaScriptコードを生成するようAIに指示します。 最後に、オペレーションでSlackを選択し、「チャンネルにメッセージを送る」アクションを設定します。AIによって生成されたJavaScriptコードと、必要に応じてフォームの回答内容を、指定したSlackチャンネルや担当者に送信します。 ※「トリガー」：フロー起動のきっかけとなるアクション、「オペレーション」：トリガー起動後、フロー内で処理を行うアクション
■このワークフローのカスタムポイント
Googleフォームのトリガー設定では、実際に開発依頼を受け付けている任意のフォームを指定してください。 AI機能の「テキストを生成する」オペレーションでは、生成したいJavaScriptコードの仕様に合わせて、AIへの指示（プロンプト）を自由にカスタマイズできます。Googleフォームで取得した依頼内容（例えば、「〇〇機能のボタンを作成する」など）を変数としてプロンプト内に組み込むことで、より具体的なコード生成が可能です。 Slackへの通知オペレーションでは、通知先のチャンネルやダイレクトメッセージの宛先を任意で設定できます。また、メッセージ本文には、AIが生成したコードだけでなく、Googleフォームの回答内容や固定のテキストを変数として含めるなど、柔軟なカスタマイズが可能です。 ■注意事項
Googleフォーム、SlackのそれぞれとYoomを連携してください。 トリガーは5分、10分、15分、30分、60分の間隔で起動間隔を選択できます。 プランによって最短の起動間隔が異なりますので、ご注意ください。 Googleフォームをトリガーとして使用した際の回答内容を取得する方法は「Googleフォームトリガーで、回答内容を取得する方法 」を参照ください。
Google スプレッドシートに開発依頼が追加されたら、AIでJavaScriptコードを生成してMicrosoft Teamsに送信する
試してみる
■概要
Google スプレッドシートで開発依頼を管理しているものの、依頼内容に基づいてJavaScriptコードを生成し、Microsoft Teamsへ通知する作業に手間を感じていませんか。 特に、手作業でのコード生成やコピペ、通知作業はミスが発生しやすく、貴重な開発時間を圧迫する要因となりがちです。 このワークフローを活用すれば、Google スプレッドシートへの依頼追加をトリガーに、AIがJavaScriptコードを自動生成し、Microsoft Teamsへ送信する一連の流れを自動化でき、こうした課題の解消に貢献します。
■このテンプレートをおすすめする方
Google スプレッドシートで開発依頼を管理し、手作業での通知に課題を感じている方 AIを活用してJavaScriptのコード生成を効率化したいと考えている開発担当者の方 Microsoft Teamsを主要なコミュニケーションツールとして利用し、情報共有を迅速化したい方 ■このテンプレートを使うメリット
Google スプレッドシートへの情報追加からコード生成、Microsoft Teamsへの通知までを自動化し、手作業に費やしていた時間を削減できます。 手作業によるコードの記述ミスや、Microsoft Teamsへの通知漏れといったヒューマンエラーのリスクを軽減し、業務品質の向上に繋がります。 ■フローボットの流れ
はじめに、Google スプレッドシートとMicrosoft TeamsをYoomと連携します。 次に、トリガーでGoogle スプレッドシートを選択し、「行が追加されたら」というアクションを設定します。これにより、指定したスプレッドシートに新しい開発依頼が追加された際にフローが起動します。 次に、オペレーションでAI機能の「テキストを生成する」アクションを設定し、Google スプレッドシートから取得した依頼内容を元にJavaScriptコードを生成するよう指示します。 最後に、オペレーションでMicrosoft Teamsの「チャネルにメッセージを送る」アクションを設定し、生成されたJavaScriptコードを指定したチャネルに送信します。 ※「トリガー」：フロー起動のきっかけとなるアクション、「オペレーション」：トリガー起動後、フロー内で処理を行うアクション
■このワークフローのカスタムポイント
Google スプレッドシートのトリガー設定では、開発依頼が記載されている任意のスプレッドシートIDやシート名を指定してください。 AI機能のオペレーションでは、JavaScriptコードを生成するためのプロンプトを任意でカスタムできます。Google スプレッドシートから取得した依頼内容（例えば、機能概要や仕様など）を変数としてプロンプトに組み込むことで、より精度の高いコード生成が可能です。 Microsoft Teamsへの通知オペレーションでは、通知先のチームやチャネルを任意で設定できます。また、メッセージ本文も固定テキストだけでなく、Google スプレッドシートの情報やAIによって生成されたコードを変数として埋め込み、状況に応じた通知内容にカスタムできます。 ■注意事項
Google スプレッドシート、Microsoft TeamsのそれぞれとYoomを連携してください。 トリガーは5分、10分、15分、30分、60分の間隔で起動間隔を選択できます。 プランによって最短の起動間隔が異なりますので、ご注意ください。 Microsoft365（旧Office365）には、家庭向けプランと一般法人向けプラン（Microsoft365 Business）があり、一般法人向けプランに加入していない場合には認証に失敗する可能性があります。 Google スプレッドシートをアプリトリガーとして使用する際の注意事項は「【アプリトリガー】Google スプレッドシートのトリガーにおける注意事項 」を参照してください。
まとめ Web制作におけるAI活用は、これまで時間と手間がかかっていたコーディング作業の一部を自動化し、ヒューマンエラーのリスクを低減させながら、制作スピードを大幅に向上させることができます。
これにより、Webデザイナーや開発者は、より創造的なデザイン考案やユーザー体験の向上といったコア業務に集中できる環境が整います！
今回ご紹介したような業務自動化を実現できるノーコードツールYoomを使えば、プログラミングの知識がない方でも、直感的な操作で簡単に業務フローを構築可能です。
もしAIを活用したWeb制作の効率化に少しでも興味を持っていただけたなら、ぜひ会員登録フォーム から無料登録して、Yoomによる業務効率化を体験してみてください！
よくあるご質問
Q：AI出力のコード精度を上げるプロンプト指定方法はありますか？
A：
はい、あります。 AIに「あなたはプロのフロントエンドエンジニアです」などの役割（ロール）を与えた上で、使用するフレームワーク（Tailwind CSS、Bootstrap等）や、レスポンシブ対応の有無、アクセシビリティへの配慮などを具体的に指示に盛り込むことで精度が向上します。また、一度に全てを生成させるのではなく、「構成案の作成」→「HTMLの生成」→「CSSの生成」とテキスト生成ステップを分けることで、より詳細で正確なコードを得やすくなります。
Q：コードの構文エラーを自動で検知・修正できますか？
A：
はい、可能です。まずは、後続にAI機能のテキスト生成アクションを追加してください。そこで生成したコードを渡し、「以下のコードに構文エラーがないかチェックし、修正が必要な場合は修正後のコードのみを出力してください」と指示を出すことで、自動的なセルフチェック・修正フローを構築できます。これにより、人間が確認する前の段階で、動作の可能性が高いコードを担保できます。
Q：HTMLとCSSを別ファイルとして分離保存できますか？
A：
はい、可能です。 AIに一度のステップでHTMLとCSSの両方を出力させた後、後続にAIによるテキスト抽出アクションを追加します。次に、抽出したい項目で「HTML,CSS」と設定することで、それぞれのコードを分離して取得できます。
