・
【簡単設定】AIを活用してホームページを自動作成する方法
■概要ホームページ作成の際、HTMLやCSSのコーディングに時間を取られていませんか？特に、複数のページを作成する場合、その都度コードを記述するのは手間がかかり、本来のコンテンツ企画やデザインに集中できないという課題をお持ちかもしれません。このワークフローを活用すれば、Google スプレッドシートにホームページの構成要素となるデータを追加するだけで、GeminiがHTML・CSSを自動生成し、Google スプレッドシートに結果をまとめて記録するため、こうした作業の効率化が期待できます。■このテンプレートをおすすめする方- Google スプレッドシートで管理している情報から、手軽にホームページを作成したいと考えている方
- HTMLやCSSのコーディング知識がなくても、AIを活用してホームページ制作を効率化したい方
- 定型的なホームページ作成業務が多く、作業時間を短縮しコア業務に集中したい方
■このテンプレートを使うメリット- Google スプレッドシートへのデータ追加をトリガーに、AIがHTML・CSSを自動生成するため、これまでコーディング作業に費やしていた時間を削減できます。
- 手作業によるコーディングミスや、データ転記の際に発生しがちなヒューマンエラーを防ぎ、品質の安定したホームページ作成に繋がります。
■フローボットの流れ- はじめに、Google スプレッドシートとGeminiをYoomと連携します。
- 次に、トリガーとしてGoogle スプレッドシートを選択し、「行が追加されたら」というアクションを設定します。これにより、指定したGoogle スプレッドシートに新しい行が追加されるとフローが起動します。
- 続いて、オペレーションでGeminiを選択し、「ホームページに必要なコンテンツを作成」アクションを設定し、追加された行のデータに基づいてコンテンツ案を生成させます。
- 次に、Geminiの「サイトマップを作成」アクションを設定し、ホームページ全体の構造を定義します。
- さらに、Geminiの「個別ページに必要な構成を作成」アクションで、各ページの具体的なレイアウトや要素を設計します。
- そして、Geminiの「HTMLとCSSを出力」アクションを設定し、ここまでの情報をもとに実際のHTMLコードとCSSコードを生成させます。
- 最後に、オペレーションでGoogle スプレッドシートを選択し、「レコードを追加する」アクションを設定します。生成されたHTMLとCSSを、元のGoogle スプレッドシートの対応する行、または新しいシートに追記して記録します。
※「トリガー」：フロー起動のきっかけとなるアクション、「オペレーション」：トリガー起動後、フロー内で処理を行うアクション■このワークフローのカスタムポイント- Geminiを使用する各オペレーションでは、どのような内容やデザインのホームページを作成したいか、具体的な指示をプロンプトとして任意に設定してください。プロンプトの工夫次第で、生成されるHTML・CSSの品質や方向性を調整できます。
- Google スプレッドシートの「レコードを追加する」オペレーションでは、生成されたHTMLやCSSをどのセルに書き出すか、また固定のテキスト情報（例：作成日など）や、フローの途中で取得した他の動的なデータをどのように埋め込むかなどを詳細に設定することが可能です。
■注意事項- Google スプレッドシート、GeminiのそれぞれとYoomを連携してください。
- トリガーは5分、10分、15分、30分、60分の間隔で起動間隔を選択できます。
- プランによって最短の起動間隔が異なりますので、ご注意ください。
- Googleスプレッドシートをアプリトリガーとして使用する際の注意事項は「【アプリトリガー】Googleスプレッドシートのトリガーにおける注意事項」を参照してください。
- Google スプレッドシートで管理している情報から、手軽にホームページを作成したいと考えている方
- HTMLやCSSのコーディング知識がなくても、AIを活用してホームページ制作を効率化したい方
- 定型的なホームページ作成業務が多く、作業時間を短縮しコア業務に集中したい方
- Google スプレッドシートへのデータ追加をトリガーに、AIがHTML・CSSを自動生成するため、これまでコーディング作業に費やしていた時間を削減できます。
- 手作業によるコーディングミスや、データ転記の際に発生しがちなヒューマンエラーを防ぎ、品質の安定したホームページ作成に繋がります。
- はじめに、Google スプレッドシートとGeminiをYoomと連携します。
- 次に、トリガーとしてGoogle スプレッドシートを選択し、「行が追加されたら」というアクションを設定します。これにより、指定したGoogle スプレッドシートに新しい行が追加されるとフローが起動します。
- 続いて、オペレーションでGeminiを選択し、「ホームページに必要なコンテンツを作成」アクションを設定し、追加された行のデータに基づいてコンテンツ案を生成させます。
- 次に、Geminiの「サイトマップを作成」アクションを設定し、ホームページ全体の構造を定義します。
- さらに、Geminiの「個別ページに必要な構成を作成」アクションで、各ページの具体的なレイアウトや要素を設計します。
- そして、Geminiの「HTMLとCSSを出力」アクションを設定し、ここまでの情報をもとに実際のHTMLコードとCSSコードを生成させます。
- 最後に、オペレーションでGoogle スプレッドシートを選択し、「レコードを追加する」アクションを設定します。生成されたHTMLとCSSを、元のGoogle スプレッドシートの対応する行、または新しいシートに追記して記録します。
- Geminiを使用する各オペレーションでは、どのような内容やデザインのホームページを作成したいか、具体的な指示をプロンプトとして任意に設定してください。プロンプトの工夫次第で、生成されるHTML・CSSの品質や方向性を調整できます。
- Google スプレッドシートの「レコードを追加する」オペレーションでは、生成されたHTMLやCSSをどのセルに書き出すか、また固定のテキスト情報（例：作成日など）や、フローの途中で取得した他の動的なデータをどのように埋め込むかなどを詳細に設定することが可能です。
- Google スプレッドシート、GeminiのそれぞれとYoomを連携してください。
- トリガーは5分、10分、15分、30分、60分の間隔で起動間隔を選択できます。
- プランによって最短の起動間隔が異なりますので、ご注意ください。
- Googleスプレッドシートをアプリトリガーとして使用する際の注意事項は「【アプリトリガー】Googleスプレッドシートのトリガーにおける注意事項」を参照してください。
「デザインの知識がないから、ホームページ作成は難しそう…」
「ホームページを作りたいけど、コーディングに時間がかかって他の業務が進まない…」
このように、ホームページ作成に関する専門知識の不足や、制作にかかる時間と手間にお悩みではありませんか？
もし、簡単なテキスト指示や入力データをもとにAIが自動でHTMLやCSSを生成し、ホームページの骨子をスピーディーに作成できる仕組みがあれば、これらの悩みから解放され、専門知識がない方でも手軽に情報発信の基盤を構築し、ビジネスの可能性を広げる時間を創出できます！
今回ご紹介する自動化の設定は、ノーコードで簡単に設定できて、手間や時間もかからないので、ぜひ自動化を導入して作業をもっと楽にしましょう！
とにかく早く試したい方へ
YoomにはAIを活用してホームページを作成する業務フロー自動化のテンプレートが用意されているので、「まずは試してみたい！」という方は、以下のバナーをクリックして、すぐに自動化を体験してみましょう！
■概要ホームページ作成の際、HTMLやCSSのコーディングに時間を取られていませんか？特に、複数のページを作成する場合、その都度コードを記述するのは手間がかかり、本来のコンテンツ企画やデザインに集中できないという課題をお持ちかもしれません。このワークフローを活用すれば、Google スプレッドシートにホームページの構成要素となるデータを追加するだけで、GeminiがHTML・CSSを自動生成し、Google スプレッドシートに結果をまとめて記録するため、こうした作業の効率化が期待できます。■このテンプレートをおすすめする方- Google スプレッドシートで管理している情報から、手軽にホームページを作成したいと考えている方
- HTMLやCSSのコーディング知識がなくても、AIを活用してホームページ制作を効率化したい方
- 定型的なホームページ作成業務が多く、作業時間を短縮しコア業務に集中したい方
■このテンプレートを使うメリット- Google スプレッドシートへのデータ追加をトリガーに、AIがHTML・CSSを自動生成するため、これまでコーディング作業に費やしていた時間を削減できます。
- 手作業によるコーディングミスや、データ転記の際に発生しがちなヒューマンエラーを防ぎ、品質の安定したホームページ作成に繋がります。
■フローボットの流れ- はじめに、Google スプレッドシートとGeminiをYoomと連携します。
- 次に、トリガーとしてGoogle スプレッドシートを選択し、「行が追加されたら」というアクションを設定します。これにより、指定したGoogle スプレッドシートに新しい行が追加されるとフローが起動します。
- 続いて、オペレーションでGeminiを選択し、「ホームページに必要なコンテンツを作成」アクションを設定し、追加された行のデータに基づいてコンテンツ案を生成させます。
- 次に、Geminiの「サイトマップを作成」アクションを設定し、ホームページ全体の構造を定義します。
- さらに、Geminiの「個別ページに必要な構成を作成」アクションで、各ページの具体的なレイアウトや要素を設計します。
- そして、Geminiの「HTMLとCSSを出力」アクションを設定し、ここまでの情報をもとに実際のHTMLコードとCSSコードを生成させます。
- 最後に、オペレーションでGoogle スプレッドシートを選択し、「レコードを追加する」アクションを設定します。生成されたHTMLとCSSを、元のGoogle スプレッドシートの対応する行、または新しいシートに追記して記録します。
※「トリガー」：フロー起動のきっかけとなるアクション、「オペレーション」：トリガー起動後、フロー内で処理を行うアクション■このワークフローのカスタムポイント- Geminiを使用する各オペレーションでは、どのような内容やデザインのホームページを作成したいか、具体的な指示をプロンプトとして任意に設定してください。プロンプトの工夫次第で、生成されるHTML・CSSの品質や方向性を調整できます。
- Google スプレッドシートの「レコードを追加する」オペレーションでは、生成されたHTMLやCSSをどのセルに書き出すか、また固定のテキスト情報（例：作成日など）や、フローの途中で取得した他の動的なデータをどのように埋め込むかなどを詳細に設定することが可能です。
■注意事項- Google スプレッドシート、GeminiのそれぞれとYoomを連携してください。
- トリガーは5分、10分、15分、30分、60分の間隔で起動間隔を選択できます。
- プランによって最短の起動間隔が異なりますので、ご注意ください。
- Googleスプレッドシートをアプリトリガーとして使用する際の注意事項は「【アプリトリガー】Googleスプレッドシートのトリガーにおける注意事項」を参照してください。
- Google スプレッドシートで管理している情報から、手軽にホームページを作成したいと考えている方
- HTMLやCSSのコーディング知識がなくても、AIを活用してホームページ制作を効率化したい方
- 定型的なホームページ作成業務が多く、作業時間を短縮しコア業務に集中したい方
- Google スプレッドシートへのデータ追加をトリガーに、AIがHTML・CSSを自動生成するため、これまでコーディング作業に費やしていた時間を削減できます。
- 手作業によるコーディングミスや、データ転記の際に発生しがちなヒューマンエラーを防ぎ、品質の安定したホームページ作成に繋がります。
- はじめに、Google スプレッドシートとGeminiをYoomと連携します。
- 次に、トリガーとしてGoogle スプレッドシートを選択し、「行が追加されたら」というアクションを設定します。これにより、指定したGoogle スプレッドシートに新しい行が追加されるとフローが起動します。
- 続いて、オペレーションでGeminiを選択し、「ホームページに必要なコンテンツを作成」アクションを設定し、追加された行のデータに基づいてコンテンツ案を生成させます。
- 次に、Geminiの「サイトマップを作成」アクションを設定し、ホームページ全体の構造を定義します。
- さらに、Geminiの「個別ページに必要な構成を作成」アクションで、各ページの具体的なレイアウトや要素を設計します。
- そして、Geminiの「HTMLとCSSを出力」アクションを設定し、ここまでの情報をもとに実際のHTMLコードとCSSコードを生成させます。
- 最後に、オペレーションでGoogle スプレッドシートを選択し、「レコードを追加する」アクションを設定します。生成されたHTMLとCSSを、元のGoogle スプレッドシートの対応する行、または新しいシートに追記して記録します。
- Geminiを使用する各オペレーションでは、どのような内容やデザインのホームページを作成したいか、具体的な指示をプロンプトとして任意に設定してください。プロンプトの工夫次第で、生成されるHTML・CSSの品質や方向性を調整できます。
- Google スプレッドシートの「レコードを追加する」オペレーションでは、生成されたHTMLやCSSをどのセルに書き出すか、また固定のテキスト情報（例：作成日など）や、フローの途中で取得した他の動的なデータをどのように埋め込むかなどを詳細に設定することが可能です。
- Google スプレッドシート、GeminiのそれぞれとYoomを連携してください。
- トリガーは5分、10分、15分、30分、60分の間隔で起動間隔を選択できます。
- プランによって最短の起動間隔が異なりますので、ご注意ください。
- Googleスプレッドシートをアプリトリガーとして使用する際の注意事項は「【アプリトリガー】Googleスプレッドシートのトリガーにおける注意事項」を参照してください。
AIによるホームページ作成を自動化する方法
普段お使いの様々なツールから得た情報を元に、AIがホームページのHTMLやCSSを自動作成する連携方法を、具体的なテンプレートを使って紹介します！気になる内容があれば、ぜひクリックしてみてください！
データベースサービスのデータを使ってAIでホームページを作成する
Google スプレッドシートなどのデータベースサービスに登録された情報をトリガーとして、AIがホームページのHTMLやCSSを自動生成し、情報を同じシートに集約することができるので、データベースと連携したホームページ作成作業を自動化し、コンテンツ管理と制作の効率を大幅に向上させましょう！
■概要ホームページ作成の際、HTMLやCSSのコーディングに時間を取られていませんか？特に、複数のページを作成する場合、その都度コードを記述するのは手間がかかり、本来のコンテンツ企画やデザインに集中できないという課題をお持ちかもしれません。このワークフローを活用すれば、Google スプレッドシートにホームページの構成要素となるデータを追加するだけで、GeminiがHTML・CSSを自動生成し、Google スプレッドシートに結果をまとめて記録するため、こうした作業の効率化が期待できます。■このテンプレートをおすすめする方- Google スプレッドシートで管理している情報から、手軽にホームページを作成したいと考えている方
- HTMLやCSSのコーディング知識がなくても、AIを活用してホームページ制作を効率化したい方
- 定型的なホームページ作成業務が多く、作業時間を短縮しコア業務に集中したい方
■このテンプレートを使うメリット- Google スプレッドシートへのデータ追加をトリガーに、AIがHTML・CSSを自動生成するため、これまでコーディング作業に費やしていた時間を削減できます。
- 手作業によるコーディングミスや、データ転記の際に発生しがちなヒューマンエラーを防ぎ、品質の安定したホームページ作成に繋がります。
■フローボットの流れ- はじめに、Google スプレッドシートとGeminiをYoomと連携します。
- 次に、トリガーとしてGoogle スプレッドシートを選択し、「行が追加されたら」というアクションを設定します。これにより、指定したGoogle スプレッドシートに新しい行が追加されるとフローが起動します。
- 続いて、オペレーションでGeminiを選択し、「ホームページに必要なコンテンツを作成」アクションを設定し、追加された行のデータに基づいてコンテンツ案を生成させます。
- 次に、Geminiの「サイトマップを作成」アクションを設定し、ホームページ全体の構造を定義します。
- さらに、Geminiの「個別ページに必要な構成を作成」アクションで、各ページの具体的なレイアウトや要素を設計します。
- そして、Geminiの「HTMLとCSSを出力」アクションを設定し、ここまでの情報をもとに実際のHTMLコードとCSSコードを生成させます。
- 最後に、オペレーションでGoogle スプレッドシートを選択し、「レコードを追加する」アクションを設定します。生成されたHTMLとCSSを、元のGoogle スプレッドシートの対応する行、または新しいシートに追記して記録します。
※「トリガー」：フロー起動のきっかけとなるアクション、「オペレーション」：トリガー起動後、フロー内で処理を行うアクション■このワークフローのカスタムポイント- Geminiを使用する各オペレーションでは、どのような内容やデザインのホームページを作成したいか、具体的な指示をプロンプトとして任意に設定してください。プロンプトの工夫次第で、生成されるHTML・CSSの品質や方向性を調整できます。
- Google スプレッドシートの「レコードを追加する」オペレーションでは、生成されたHTMLやCSSをどのセルに書き出すか、また固定のテキスト情報（例：作成日など）や、フローの途中で取得した他の動的なデータをどのように埋め込むかなどを詳細に設定することが可能です。
■注意事項- Google スプレッドシート、GeminiのそれぞれとYoomを連携してください。
- トリガーは5分、10分、15分、30分、60分の間隔で起動間隔を選択できます。
- プランによって最短の起動間隔が異なりますので、ご注意ください。
- Googleスプレッドシートをアプリトリガーとして使用する際の注意事項は「【アプリトリガー】Googleスプレッドシートのトリガーにおける注意事項」を参照してください。
- Google スプレッドシートで管理している情報から、手軽にホームページを作成したいと考えている方
- HTMLやCSSのコーディング知識がなくても、AIを活用してホームページ制作を効率化したい方
- 定型的なホームページ作成業務が多く、作業時間を短縮しコア業務に集中したい方
- Google スプレッドシートへのデータ追加をトリガーに、AIがHTML・CSSを自動生成するため、これまでコーディング作業に費やしていた時間を削減できます。
- 手作業によるコーディングミスや、データ転記の際に発生しがちなヒューマンエラーを防ぎ、品質の安定したホームページ作成に繋がります。
- はじめに、Google スプレッドシートとGeminiをYoomと連携します。
- 次に、トリガーとしてGoogle スプレッドシートを選択し、「行が追加されたら」というアクションを設定します。これにより、指定したGoogle スプレッドシートに新しい行が追加されるとフローが起動します。
- 続いて、オペレーションでGeminiを選択し、「ホームページに必要なコンテンツを作成」アクションを設定し、追加された行のデータに基づいてコンテンツ案を生成させます。
- 次に、Geminiの「サイトマップを作成」アクションを設定し、ホームページ全体の構造を定義します。
- さらに、Geminiの「個別ページに必要な構成を作成」アクションで、各ページの具体的なレイアウトや要素を設計します。
- そして、Geminiの「HTMLとCSSを出力」アクションを設定し、ここまでの情報をもとに実際のHTMLコードとCSSコードを生成させます。
- 最後に、オペレーションでGoogle スプレッドシートを選択し、「レコードを追加する」アクションを設定します。生成されたHTMLとCSSを、元のGoogle スプレッドシートの対応する行、または新しいシートに追記して記録します。
- Geminiを使用する各オペレーションでは、どのような内容やデザインのホームページを作成したいか、具体的な指示をプロンプトとして任意に設定してください。プロンプトの工夫次第で、生成されるHTML・CSSの品質や方向性を調整できます。
- Google スプレッドシートの「レコードを追加する」オペレーションでは、生成されたHTMLやCSSをどのセルに書き出すか、また固定のテキスト情報（例：作成日など）や、フローの途中で取得した他の動的なデータをどのように埋め込むかなどを詳細に設定することが可能です。
- Google スプレッドシート、GeminiのそれぞれとYoomを連携してください。
- トリガーは5分、10分、15分、30分、60分の間隔で起動間隔を選択できます。
- プランによって最短の起動間隔が異なりますので、ご注意ください。
- Googleスプレッドシートをアプリトリガーとして使用する際の注意事項は「【アプリトリガー】Googleスプレッドシートのトリガーにおける注意事項」を参照してください。
チャットツールの投稿内容を使ってAIでホームページを作成する
Slackなどのチャットツールでの特定の投稿内容を基に、AIがホームページのHTMLやCSSを自動で作成し、Notionなどのドキュメント管理ツールに保存するフローも構築できます。チーム内でのアイデア出しからホームページのプロトタイプ作成までをシームレスに繋げ、スピーディーなウェブサイト展開を実現します。
■概要
Slackでのアイデア投稿からホームページ作成、そしてNotionへの情報集約といった一連の作業に、手間や時間を取られていませんか？ 特にHTMLやCSSの知識がない場合、ホームページ作成は大きな負担になりがちです。 このワークフローを活用すれば、Slackへの投稿をきっかけにGeminiがHTML・CSSを自動生成し、その内容をNotionへスムーズにまとめることが可能になり、Webサイト制作の初動を効率化できます。
■このテンプレートをおすすめする方
- Slackでホームページのアイデアを議論し、迅速に形にしたい企画担当者の方
- HTMLやCSSの専門知識なしに、ホームページのドラフトを作成したい方
- GeminiとNotionを活用し、Web制作プロセスと情報管理を効率化したいチームの方
■このテンプレートを使うメリット
- Slackへの投稿からNotionへの記録までが自動化されるため、手作業による情報入力や転記の時間を短縮できます。
- GeminiがHTML・CSSを生成するため、コーディングの専門知識がなくてもホームページの基本的な構造を作成でき、業務の属人化を防ぎます。
■フローボットの流れ
- はじめに、Slack、Gemini、NotionをYoomと連携します。
- 次に、トリガーでSlackを選択し、「指定のテキストを含むメッセージがチャンネルに投稿されたら」というアクションを設定します。
- 続いて、オペレーションでGeminiを選択し、「ホームページに必要なコンテンツを作成」するアクションを設定します。
- さらに、Geminiで「サイトマップを作成」、「個別ページに必要な構成を作成」、「HTMLとCSSを出力」するアクションを順に設定します。
- 最後に、オペレーションでNotionを選択し、「レコードを追加する」アクションを設定し、生成されたHTMLやCSSなどの情報をNotionのデータベースに保存します。
※「トリガー」：フロー起動のきっかけとなるアクション、「オペレーション」：トリガー起動後、フロー内で処理を行うアクション
■このワークフローのカスタムポイント
- Geminiへの指示（プロンプト）を任意に設定することで、生成したいホームページのテーマやスタイル、コンテンツ内容を指定し、HTML・CSSの出力を調整できます。
- Notionの「レコードを追加する」アクションでは、保存するデータベースやプロパティを指定したり、Geminiで生成した情報以外にも固定のテキストや日付などを動的に埋め込んだりすることが可能です。
■注意事項
- Slack、Gemini、NotionのそれぞれとYoomを連携してください。
- トリガーは5分、10分、15分、30分、60分の間隔で起動間隔を選択できます。
- プランによって最短の起動間隔が異なりますので、ご注意ください。
■概要
Slackでのアイデア投稿からホームページ作成、そしてNotionへの情報集約といった一連の作業に、手間や時間を取られていませんか？ 特にHTMLやCSSの知識がない場合、ホームページ作成は大きな負担になりがちです。 このワークフローを活用すれば、Slackへの投稿をきっかけにGeminiがHTML・CSSを自動生成し、その内容をNotionへスムーズにまとめることが可能になり、Webサイト制作の初動を効率化できます。
■このテンプレートをおすすめする方
- Slackでホームページのアイデアを議論し、迅速に形にしたい企画担当者の方
- HTMLやCSSの専門知識なしに、ホームページのドラフトを作成したい方
- GeminiとNotionを活用し、Web制作プロセスと情報管理を効率化したいチームの方
■このテンプレートを使うメリット
- Slackへの投稿からNotionへの記録までが自動化されるため、手作業による情報入力や転記の時間を短縮できます。
- GeminiがHTML・CSSを生成するため、コーディングの専門知識がなくてもホームページの基本的な構造を作成でき、業務の属人化を防ぎます。
■フローボットの流れ
- はじめに、Slack、Gemini、NotionをYoomと連携します。
- 次に、トリガーでSlackを選択し、「指定のテキストを含むメッセージがチャンネルに投稿されたら」というアクションを設定します。
- 続いて、オペレーションでGeminiを選択し、「ホームページに必要なコンテンツを作成」するアクションを設定します。
- さらに、Geminiで「サイトマップを作成」、「個別ページに必要な構成を作成」、「HTMLとCSSを出力」するアクションを順に設定します。
- 最後に、オペレーションでNotionを選択し、「レコードを追加する」アクションを設定し、生成されたHTMLやCSSなどの情報をNotionのデータベースに保存します。
※「トリガー」：フロー起動のきっかけとなるアクション、「オペレーション」：トリガー起動後、フロー内で処理を行うアクション
■このワークフローのカスタムポイント
- Geminiへの指示（プロンプト）を任意に設定することで、生成したいホームページのテーマやスタイル、コンテンツ内容を指定し、HTML・CSSの出力を調整できます。
- Notionの「レコードを追加する」アクションでは、保存するデータベースやプロパティを指定したり、Geminiで生成した情報以外にも固定のテキストや日付などを動的に埋め込んだりすることが可能です。
■注意事項
- Slack、Gemini、NotionのそれぞれとYoomを連携してください。
- トリガーは5分、10分、15分、30分、60分の間隔で起動間隔を選択できます。
- プランによって最短の起動間隔が異なりますので、ご注意ください。
フォームの回答内容を使ってAIでホームページを作成する
フォームで収集した回答内容を活用して、AIがホームページのHTMLやCSSを自動生成し、Microsoft Excelなどの表計算ソフトに結果をまとめることも可能です。アンケート結果やユーザーからの要望を直接ホームページコンテンツに反映させるプロセスを自動化し、よりユーザーニーズに即したウェブサイトを効率的に作成できます。
■概要フォームからの回答をもとに手作業でホームページのHTMLやCSSを作成し、さらにその内容をMicrosoft Excelにまとめる作業は、時間と手間がかかるのではないでしょうか。特に複数のページや頻繁な更新が必要な場合、その負担は大きくなりりがちです。このワークフローを活用すれば、フォームへの回答をトリガーとしてGeminiがHTMLとCSSを自動生成し、Microsoft Excelへその情報を記録するため、これらの課題をスムーズに解消し、効率的なWebサイト制作・管理を実現します。■このテンプレートをおすすめする方- フォーム回答から手作業でWebページを作成し、Microsoft Excelで管理している方
- GeminiのようなAIを活用して、Webサイト制作の効率化を図りたいと考えている方
- 定型的なホームページ作成や更新作業の時間を短縮し、コア業務に集中したい方
■このテンプレートを使うメリット- フォーム回答からHTML/CSS生成、Microsoft Excelへの記録までを自動化することで、これまで手作業に費やしていた時間を削減できます。
- 手作業によるコーディングミスや、Microsoft Excelへのデータ転記漏れといったヒューマンエラーのリスクを軽減します。
■フローボットの流れ- はじめに、GeminiとMicrosoft ExcelをYoomと連携します。
- 次に、トリガーでYoomのフォームトリガー機能を選択し、「フォームが送信されたら」というアクションを設定します。このフォームには、ホームページ作成に必要な情報を入力する項目を設けます。
- 次に、オペレーションでGeminiを選択し、「ホームページに必要なコンテンツを作成」アクションを設定し、フォームの回答内容を基にコンテンツを生成します。
- 続けて、Geminiの「サイトマップを作成」アクションを設定し、生成されたコンテンツに基づいたサイトマップを作成します。
- さらに、Geminiの「個別ページに必要な構成を作成」アクションを設定し、各ページの具体的な構成案を作成します。
- 次に、Geminiの「HTMLとCSSを出力」アクションを設定し、これまでの情報を基に実際のHTMLコードとCSSコードを生成します。
- 最後に、オペレーションでMicrosoft Excelを選択し、「レコードを追加する」アクションを設定し、生成されたHTML、CSS、その他関連情報を指定のExcelシートに記録します。
※「トリガー」：フロー起動のきっかけとなるアクション、「オペレーション」：トリガー起動後、フロー内で処理を行うアクション■このワークフローのカスタムポイント- Geminiを活用する各オペレーションでは、どのようなホームページのHTML・CSSを作成するのか、より詳細な指示をプロンプトで設定することが可能です。例えば、特定のデザインテイストや機能要件などを具体的に指示できます。
- Microsoft Excelの「レコードを追加する」オペレーションでは、記録する項目に固定値を設定したり、フォームの回答内容やGeminiが生成したデータを動的な値として埋め込んだりするなど、柔軟なカスタムが可能です。
■注意事項- Gemini、Microsoft ExcelのそれぞれとYoomを連携してください。
- Microsoft365（旧Office365）には、家庭向けプランと一般法人向けプラン（Microsoft365 Business）があり、一般法人向けプランに加入していない場合には認証に失敗する可能性があります。Microsoft Excelのデータベースを操作するオペレーションの設定に関しては「【Excel】データベースを操作するオペレーションの設定に関して」をご参照ください。
- トリガーは5分、10分、15分、30分、60分の間隔で起動間隔を選択できます。
- プランによって最短の起動間隔が異なりますので、ご注意ください。
- フォーム回答から手作業でWebページを作成し、Microsoft Excelで管理している方
- GeminiのようなAIを活用して、Webサイト制作の効率化を図りたいと考えている方
- 定型的なホームページ作成や更新作業の時間を短縮し、コア業務に集中したい方
- フォーム回答からHTML/CSS生成、Microsoft Excelへの記録までを自動化することで、これまで手作業に費やしていた時間を削減できます。
- 手作業によるコーディングミスや、Microsoft Excelへのデータ転記漏れといったヒューマンエラーのリスクを軽減します。
- はじめに、GeminiとMicrosoft ExcelをYoomと連携します。
- 次に、トリガーでYoomのフォームトリガー機能を選択し、「フォームが送信されたら」というアクションを設定します。このフォームには、ホームページ作成に必要な情報を入力する項目を設けます。
- 次に、オペレーションでGeminiを選択し、「ホームページに必要なコンテンツを作成」アクションを設定し、フォームの回答内容を基にコンテンツを生成します。
- 続けて、Geminiの「サイトマップを作成」アクションを設定し、生成されたコンテンツに基づいたサイトマップを作成します。
- さらに、Geminiの「個別ページに必要な構成を作成」アクションを設定し、各ページの具体的な構成案を作成します。
- 次に、Geminiの「HTMLとCSSを出力」アクションを設定し、これまでの情報を基に実際のHTMLコードとCSSコードを生成します。
- 最後に、オペレーションでMicrosoft Excelを選択し、「レコードを追加する」アクションを設定し、生成されたHTML、CSS、その他関連情報を指定のExcelシートに記録します。
- Geminiを活用する各オペレーションでは、どのようなホームページのHTML・CSSを作成するのか、より詳細な指示をプロンプトで設定することが可能です。例えば、特定のデザインテイストや機能要件などを具体的に指示できます。
- Microsoft Excelの「レコードを追加する」オペレーションでは、記録する項目に固定値を設定したり、フォームの回答内容やGeminiが生成したデータを動的な値として埋め込んだりするなど、柔軟なカスタムが可能です。
- Gemini、Microsoft ExcelのそれぞれとYoomを連携してください。
- Microsoft365（旧Office365）には、家庭向けプランと一般法人向けプラン（Microsoft365 Business）があり、一般法人向けプランに加入していない場合には認証に失敗する可能性があります。Microsoft Excelのデータベースを操作するオペレーションの設定に関しては「【Excel】データベースを操作するオペレーションの設定に関して」をご参照ください。
- トリガーは5分、10分、15分、30分、60分の間隔で起動間隔を選択できます。
- プランによって最短の起動間隔が異なりますので、ご注意ください。
Google スプレッドシートのデータからAIでホームページを作成するフローを作ってみよう
それではここから代表的な例として、Google スプレッドシートに追加されたデータをもとに、AIでホームページのHTML・CSSを作成してシートにまとめるフローを解説していきます！
ここではYoomを使用してノーコードで設定をしていくので、もしまだYoomのアカウントをお持ちでない場合は、こちらの登録フォームからアカウントを発行しておきましょう。
[Yoomとは]
フローの作成方法
今回は大きく分けて以下のプロセスで作成します。
- Google スプレッドシートとGeminiのマイアプリ連携
- テンプレートをコピー
- Google スプレッドシートのトリガー設定（例：新しい行が追加されたら）
- OpenAIのアクション設定（ホームページのHTML・CSS生成プロンプト設定）
- Google スプレッドシートへのアクション設定（生成されたHTML・CSSを指定のセルに書き込む）
- トリガーをONにし、フローが起動するかを確認
サンプルケース
以下のように、「ホームページを構成するための基本情報（AIへの入力）」を行として管理します。
行が追加されたら、AIが読み取り、ページ案・構造・HTMLを生成します。
①サイト：構成
②生成結果
◆ポイント：項目は一意の値（ユニークキー）で設定してくださいね。重複しているとエラーが発生します。
準備ができたら、下のバナーからフローボットテンプレートをコピーしてみましょう。
■概要ホームページ作成の際、HTMLやCSSのコーディングに時間を取られていませんか？特に、複数のページを作成する場合、その都度コードを記述するのは手間がかかり、本来のコンテンツ企画やデザインに集中できないという課題をお持ちかもしれません。このワークフローを活用すれば、Google スプレッドシートにホームページの構成要素となるデータを追加するだけで、GeminiがHTML・CSSを自動生成し、Google スプレッドシートに結果をまとめて記録するため、こうした作業の効率化が期待できます。■このテンプレートをおすすめする方- Google スプレッドシートで管理している情報から、手軽にホームページを作成したいと考えている方
- HTMLやCSSのコーディング知識がなくても、AIを活用してホームページ制作を効率化したい方
- 定型的なホームページ作成業務が多く、作業時間を短縮しコア業務に集中したい方
■このテンプレートを使うメリット- Google スプレッドシートへのデータ追加をトリガーに、AIがHTML・CSSを自動生成するため、これまでコーディング作業に費やしていた時間を削減できます。
- 手作業によるコーディングミスや、データ転記の際に発生しがちなヒューマンエラーを防ぎ、品質の安定したホームページ作成に繋がります。
■フローボットの流れ- はじめに、Google スプレッドシートとGeminiをYoomと連携します。
- 次に、トリガーとしてGoogle スプレッドシートを選択し、「行が追加されたら」というアクションを設定します。これにより、指定したGoogle スプレッドシートに新しい行が追加されるとフローが起動します。
- 続いて、オペレーションでGeminiを選択し、「ホームページに必要なコンテンツを作成」アクションを設定し、追加された行のデータに基づいてコンテンツ案を生成させます。
- 次に、Geminiの「サイトマップを作成」アクションを設定し、ホームページ全体の構造を定義します。
- さらに、Geminiの「個別ページに必要な構成を作成」アクションで、各ページの具体的なレイアウトや要素を設計します。
- そして、Geminiの「HTMLとCSSを出力」アクションを設定し、ここまでの情報をもとに実際のHTMLコードとCSSコードを生成させます。
- 最後に、オペレーションでGoogle スプレッドシートを選択し、「レコードを追加する」アクションを設定します。生成されたHTMLとCSSを、元のGoogle スプレッドシートの対応する行、または新しいシートに追記して記録します。
※「トリガー」：フロー起動のきっかけとなるアクション、「オペレーション」：トリガー起動後、フロー内で処理を行うアクション■このワークフローのカスタムポイント- Geminiを使用する各オペレーションでは、どのような内容やデザインのホームページを作成したいか、具体的な指示をプロンプトとして任意に設定してください。プロンプトの工夫次第で、生成されるHTML・CSSの品質や方向性を調整できます。
- Google スプレッドシートの「レコードを追加する」オペレーションでは、生成されたHTMLやCSSをどのセルに書き出すか、また固定のテキスト情報（例：作成日など）や、フローの途中で取得した他の動的なデータをどのように埋め込むかなどを詳細に設定することが可能です。
■注意事項- Google スプレッドシート、GeminiのそれぞれとYoomを連携してください。
- トリガーは5分、10分、15分、30分、60分の間隔で起動間隔を選択できます。
- プランによって最短の起動間隔が異なりますので、ご注意ください。
- Googleスプレッドシートをアプリトリガーとして使用する際の注意事項は「【アプリトリガー】Googleスプレッドシートのトリガーにおける注意事項」を参照してください。
- Google スプレッドシートで管理している情報から、手軽にホームページを作成したいと考えている方
- HTMLやCSSのコーディング知識がなくても、AIを活用してホームページ制作を効率化したい方
- 定型的なホームページ作成業務が多く、作業時間を短縮しコア業務に集中したい方
- Google スプレッドシートへのデータ追加をトリガーに、AIがHTML・CSSを自動生成するため、これまでコーディング作業に費やしていた時間を削減できます。
- 手作業によるコーディングミスや、データ転記の際に発生しがちなヒューマンエラーを防ぎ、品質の安定したホームページ作成に繋がります。
- はじめに、Google スプレッドシートとGeminiをYoomと連携します。
- 次に、トリガーとしてGoogle スプレッドシートを選択し、「行が追加されたら」というアクションを設定します。これにより、指定したGoogle スプレッドシートに新しい行が追加されるとフローが起動します。
- 続いて、オペレーションでGeminiを選択し、「ホームページに必要なコンテンツを作成」アクションを設定し、追加された行のデータに基づいてコンテンツ案を生成させます。
- 次に、Geminiの「サイトマップを作成」アクションを設定し、ホームページ全体の構造を定義します。
- さらに、Geminiの「個別ページに必要な構成を作成」アクションで、各ページの具体的なレイアウトや要素を設計します。
- そして、Geminiの「HTMLとCSSを出力」アクションを設定し、ここまでの情報をもとに実際のHTMLコードとCSSコードを生成させます。
- 最後に、オペレーションでGoogle スプレッドシートを選択し、「レコードを追加する」アクションを設定します。生成されたHTMLとCSSを、元のGoogle スプレッドシートの対応する行、または新しいシートに追記して記録します。
- Geminiを使用する各オペレーションでは、どのような内容やデザインのホームページを作成したいか、具体的な指示をプロンプトとして任意に設定してください。プロンプトの工夫次第で、生成されるHTML・CSSの品質や方向性を調整できます。
- Google スプレッドシートの「レコードを追加する」オペレーションでは、生成されたHTMLやCSSをどのセルに書き出すか、また固定のテキスト情報（例：作成日など）や、フローの途中で取得した他の動的なデータをどのように埋め込むかなどを詳細に設定することが可能です。
- Google スプレッドシート、GeminiのそれぞれとYoomを連携してください。
- トリガーは5分、10分、15分、30分、60分の間隔で起動間隔を選択できます。
- プランによって最短の起動間隔が異なりますので、ご注意ください。
- Googleスプレッドシートをアプリトリガーとして使用する際の注意事項は「【アプリトリガー】Googleスプレッドシートのトリガーにおける注意事項」を参照してください。
ステップ1:マイアプリ連携の設定
ここでは連携するアプリ情報をYoomに登録する設定を行います。Yoomのワークスペースにログイン後、マイアプリ画面で「＋新規接続」をクリックします。
Yoomで使えるアプリ一覧が表示されます。検索窓から今回連携するアプリを検索し、マイアプリ登録を進めてください。
Google スプレッドシート
下記をご参照ください。
Gemini
検索結果からアプリ名をクリックすると、GeminiとYoomの連携確認画面が表示されます。
- アカウント名
- 任意の値を設定してください。
- アクセストークン
- 以下のサイトから取得可能です。
右上の【APIキーを作成】をクリックします。
生成されたAPIキーをアクセストークンのフィールドに入力します。
追加ボタンをクリックしたら、マイアプリ連携の完了です。
ステップ2:テンプレートをコピー
マイアプリ連携が完了したら、フローボットテンプレートの設定に進みます。下のバナーからテンプレートのコピーに進んでくださいね。
■概要ホームページ作成の際、HTMLやCSSのコーディングに時間を取られていませんか？特に、複数のページを作成する場合、その都度コードを記述するのは手間がかかり、本来のコンテンツ企画やデザインに集中できないという課題をお持ちかもしれません。このワークフローを活用すれば、Google スプレッドシートにホームページの構成要素となるデータを追加するだけで、GeminiがHTML・CSSを自動生成し、Google スプレッドシートに結果をまとめて記録するため、こうした作業の効率化が期待できます。■このテンプレートをおすすめする方- Google スプレッドシートで管理している情報から、手軽にホームページを作成したいと考えている方
- HTMLやCSSのコーディング知識がなくても、AIを活用してホームページ制作を効率化したい方
- 定型的なホームページ作成業務が多く、作業時間を短縮しコア業務に集中したい方
■このテンプレートを使うメリット- Google スプレッドシートへのデータ追加をトリガーに、AIがHTML・CSSを自動生成するため、これまでコーディング作業に費やしていた時間を削減できます。
- 手作業によるコーディングミスや、データ転記の際に発生しがちなヒューマンエラーを防ぎ、品質の安定したホームページ作成に繋がります。
■フローボットの流れ- はじめに、Google スプレッドシートとGeminiをYoomと連携します。
- 次に、トリガーとしてGoogle スプレッドシートを選択し、「行が追加されたら」というアクションを設定します。これにより、指定したGoogle スプレッドシートに新しい行が追加されるとフローが起動します。
- 続いて、オペレーションでGeminiを選択し、「ホームページに必要なコンテンツを作成」アクションを設定し、追加された行のデータに基づいてコンテンツ案を生成させます。
- 次に、Geminiの「サイトマップを作成」アクションを設定し、ホームページ全体の構造を定義します。
- さらに、Geminiの「個別ページに必要な構成を作成」アクションで、各ページの具体的なレイアウトや要素を設計します。
- そして、Geminiの「HTMLとCSSを出力」アクションを設定し、ここまでの情報をもとに実際のHTMLコードとCSSコードを生成させます。
- 最後に、オペレーションでGoogle スプレッドシートを選択し、「レコードを追加する」アクションを設定します。生成されたHTMLとCSSを、元のGoogle スプレッドシートの対応する行、または新しいシートに追記して記録します。
※「トリガー」：フロー起動のきっかけとなるアクション、「オペレーション」：トリガー起動後、フロー内で処理を行うアクション■このワークフローのカスタムポイント- Geminiを使用する各オペレーションでは、どのような内容やデザインのホームページを作成したいか、具体的な指示をプロンプトとして任意に設定してください。プロンプトの工夫次第で、生成されるHTML・CSSの品質や方向性を調整できます。
- Google スプレッドシートの「レコードを追加する」オペレーションでは、生成されたHTMLやCSSをどのセルに書き出すか、また固定のテキスト情報（例：作成日など）や、フローの途中で取得した他の動的なデータをどのように埋め込むかなどを詳細に設定することが可能です。
■注意事項- Google スプレッドシート、GeminiのそれぞれとYoomを連携してください。
- トリガーは5分、10分、15分、30分、60分の間隔で起動間隔を選択できます。
- プランによって最短の起動間隔が異なりますので、ご注意ください。
- Googleスプレッドシートをアプリトリガーとして使用する際の注意事項は「【アプリトリガー】Googleスプレッドシートのトリガーにおける注意事項」を参照してください。
- Google スプレッドシートで管理している情報から、手軽にホームページを作成したいと考えている方
- HTMLやCSSのコーディング知識がなくても、AIを活用してホームページ制作を効率化したい方
- 定型的なホームページ作成業務が多く、作業時間を短縮しコア業務に集中したい方
- Google スプレッドシートへのデータ追加をトリガーに、AIがHTML・CSSを自動生成するため、これまでコーディング作業に費やしていた時間を削減できます。
- 手作業によるコーディングミスや、データ転記の際に発生しがちなヒューマンエラーを防ぎ、品質の安定したホームページ作成に繋がります。
- はじめに、Google スプレッドシートとGeminiをYoomと連携します。
- 次に、トリガーとしてGoogle スプレッドシートを選択し、「行が追加されたら」というアクションを設定します。これにより、指定したGoogle スプレッドシートに新しい行が追加されるとフローが起動します。
- 続いて、オペレーションでGeminiを選択し、「ホームページに必要なコンテンツを作成」アクションを設定し、追加された行のデータに基づいてコンテンツ案を生成させます。
- 次に、Geminiの「サイトマップを作成」アクションを設定し、ホームページ全体の構造を定義します。
- さらに、Geminiの「個別ページに必要な構成を作成」アクションで、各ページの具体的なレイアウトや要素を設計します。
- そして、Geminiの「HTMLとCSSを出力」アクションを設定し、ここまでの情報をもとに実際のHTMLコードとCSSコードを生成させます。
- 最後に、オペレーションでGoogle スプレッドシートを選択し、「レコードを追加する」アクションを設定します。生成されたHTMLとCSSを、元のGoogle スプレッドシートの対応する行、または新しいシートに追記して記録します。
- Geminiを使用する各オペレーションでは、どのような内容やデザインのホームページを作成したいか、具体的な指示をプロンプトとして任意に設定してください。プロンプトの工夫次第で、生成されるHTML・CSSの品質や方向性を調整できます。
- Google スプレッドシートの「レコードを追加する」オペレーションでは、生成されたHTMLやCSSをどのセルに書き出すか、また固定のテキスト情報（例：作成日など）や、フローの途中で取得した他の動的なデータをどのように埋め込むかなどを詳細に設定することが可能です。
- Google スプレッドシート、GeminiのそれぞれとYoomを連携してください。
- トリガーは5分、10分、15分、30分、60分の間隔で起動間隔を選択できます。
- プランによって最短の起動間隔が異なりますので、ご注意ください。
- Googleスプレッドシートをアプリトリガーとして使用する際の注意事項は「【アプリトリガー】Googleスプレッドシートのトリガーにおける注意事項」を参照してください。
下のポップアップが表示されたら「OK」をクリックして設定をスタート！
コピーしたテンプレートは、フローボットに追加されます。フローボットは左のメニューバーからアクセス可能です。
ステップ3：アプリトリガー「行が追加されたら」
テンプレートの1つ目の工程をクリックし、フローボットのトリガー（起点）を設定します。この工程では、Google スプレッド上で新しく制作するサイトの概要の追加を定期間隔で検知する設定を行います。
（1/2）連携アカウントとアクションを選択
この画面では、以下の項目が設定済みです。
- アプリ
- Google スプレッドシートと連携するアカウント情報
- トリガーアクション
次へをクリックして進みましょう。
（2/2）アプリトリガーのAPI接続設定
- トリガー起動間隔
- フローの起動間隔を選択します。最短は5分間隔で起動できます。※ご契約のプランによって最短の起動間隔が異なります。
- スプレッドシートID
- シートID
- 各フィールドをクリックすると表示されるプルダウンメニューに候補が表示されます。選択するとIDが引用されます。
設定ができたら下へスクロールします。
- テーブルの範囲
- それぞれ該当する列を入力します。
設定ができたらテストボタンをクリックします。
テスト結果が表示されます。この画面は、YoomとGoogle スプレッドシートが正常に連携でき、情報が取得できた結果です。さらに下へスクロールすると、取得できた値の一覧が表示されます。以降の工程でこの値を引用します。
取得した値は、後の工程で引用します。
- 取得した値について
最後に「完了」をクリックして次に進みます。
ステップ4：アプリと連携する「ホームページに必要なコンテンツを作成」
テンプレートの2つ目の工程をクリックします。この工程はGeminiにホームページ用のコンテンツを自動生成する設定を行います。
（1/2）連携アカウントをアクションを選択
この画面では以下の項目が事前設定済みです。
- アプリ
- Geminiと連携するアカウント情報
- アクション
次へをクリックします。
（2/2）API接続設定
- モデル
事前設定では「models/gemini-2.0-flash」が指定されています。モデルは複数の中から選択可能です。
- システムプロンプト
以下のようにして、「優秀なWeb制作ディレクター」としての立場を明確にし、出力すべきコンテンツの品質基準を与えるとよいです。
- ユーザープロンプト
コンテンツを作るため、シートから取得した値を引用して指示文を作成します。
そのほかの設定ができたら、テストボタンをクリックします。
この画面は、YoomとGeminiが正常に連携でき、情報が生成・取得できた結果です。さらに下へスクロールすると、取得できた値の一覧が表示されます。次の工程で件名と本文の値を引用します。
完了をクリックして次に進みましょう。
ステップ5：アプリと連携する「サイトマップを作成」
テンプレートの3つ目の工程をクリックします。この工程では、サイトマップを生成する指示文を設定します。
（1/2）連携アカウントをアクションを選択
この画面では以下の項目が事前設定済みです。
- アプリ
- Geminiと連携するアカウント情報
- アクション
次へをクリックします。
（2/2）API接続設定
- モデル
事前設定では「models/gemini-2.0-flash」が指定されています。
- システムプロンプト
以下のようにして、「優秀なWeb制作ディレクター」としての立場を明確にし、出力すべきコンテンツの品質基準を与えるとよいです。
- ユーザープロンプト
コンテンツを作るため、シートから取得した値を引用して指示文を作成します。
設定ができたら、テストボタンをクリックします。
成功すると、生成された結果が取得できます。
「完了」をクリックして次に進みましょう。
ステップ6：アプリと連携する「個別ページに必要な構成を作成」
テンプレートの4つ目の工程をクリックします。この工程では、ページ構成を生成する指示文を設定します。
（1/2）連携アカウントをアクションを選択
この画面では以下の項目が事前設定済みです。
- アプリ
- Geminiと連携するアカウント情報
- アクション
- モデル
次へをクリックします。
（2/2）API接続設定
- モデル
事前設定では「models/gemini-2.0-flash」が指定されています。
- システムプロンプト
以下のようにして、「優秀なWeb制作ディレクター」としての立場を明確にし、出力すべきコンテンツの品質基準を与えるとよいです。
- ユーザープロンプト
構成を作るため、Geminiで生成した値を引用して指示文を作成します。
設定ができたら、テストボタンをクリックします。
成功すると、生成された結果が取得できます。
「完了」をクリックして次に進みましょう。
ステップ7：アプリと連携する「HTMLとCSSを出力」
テンプレートの5つ目の工程をクリックします。この工程では、HTMLとCSSを生成する指示文を設定します。
（1/2）連携アカウントをアクションを選択
この画面では以下の項目が事前設定済みです。
- アプリ
- Geminiと連携するアカウント情報
- アクション
次へをクリックします。
（2/2）API接続設定
- モデル
事前設定では「models/gemini-2.0-flash」が指定されています。
- システムプロンプト
以下のようにして、「優秀なWeb制作ディレクター」としての立場を明確にし、出力すべきコンテンツの品質基準を与えるとよいです。
- プロンプト
HTML・CSSを作るため、これまでGeminiで生成した値を引用して指示文を作成します。
設定ができたら、テストボタンをクリックします。
成功すると、結果が取得できます。
成功すると、生成された結果が取得できます。
「完了」をクリックして次に進みましょう。
ステップ8：データベースを操作する「レコードを追加する」
テンプレートの6つ目をクリックします。この工程では、これまでGeminiが生成した結果をGoogle スプレッドシートにまとめる設定を行います。
（1/2）データベースの連携
この画面では、以下の項目が設定済みです。
- アプリ
- Google スプレッドシートと連携するアカウント情報
- アクション
下へスクロールします。
データベースの連携
これまでの操作と同じで、フィールドをクリックして連携しているシートの情報を表示させます。該当の項目を選ぶと、IDが引用されます。
- スプレッドシートID
- 編集欄をクリックすると、プルダウンメニューが表示され、連携したアカウントに権限があるシートが候補として表示されます。選択すると、IDを引用できます。
- スプレッドシートのタブ名
- 同じく編集欄をクリックすると、候補が表示されるので、選択します。
- テーブル範囲
- ヘッダの始まりがA1で最後がDの場合は、A1:Dと入力します。
入力ができたら次へをクリックします。
（2/2）データベース操作の詳細設定
前の画面で指定したスプレッドシートを読み込むと、ヘッダの項目と空白のフィールドが表示されます。
この項目に対して、どの値を紐づけるかを指定していきます。
コマンドオペレーションのタブから、該当の項目・値を選んでいきます。編集欄をクリック＜プルダウンメニュー＜前の工程で取得した値の引用コードを選択して埋め込んでいきます。
全ての枠に、値の紐付けができたらテストボタンをクリックします。成功すると、連携したシートに行が追加されます。
「完了」をクリックして次の操作に進みましょう。
ステップ9（最終）:アプリトリガーをONにする
全ての工程が設定されると、設定完了のコンプリート画面が表示されます。
トリガーをONにして、フローボットを起動します。
トリガーのON/OFFは右上のトグルから切り替えが可能です。シートAを追加すると、シートCが更新されるようになりました。プログラミング不要で、フローボットの設定が簡単に完了しました。
Web制作に関するその他の自動化例
他にも、Web制作に関する様々な自動化の実現が可能です！
例えば以下のような自動化はいかがでしょうか。
■概要
「GoogleフォームにWeb制作依頼が回答されたら、AIでHTML/CSSを生成してSlackに送信する」ワークフローは、AIの力を借り、依頼受付から初期デザインまでを自動化する業務ワークフローです。手間を省きつつ迅速な共有を実現します。
■このテンプレートをおすすめする方
- Googleフォームでweb制作の依頼を受けつつ、コーディング工数を減らしたいWebデザイナーやエンジニアの方
- AIの力で自動的にHTML/CSSを作成し、効率的に初期デザインを用意したい方
- 生成されたデザインをSlackでスピーディーにチーム共有し、コミュニケーションを円滑にしたいプロジェクトマネージャーの方
- ワイヤーフレームから試作までを自動化し、よりクリエイティブな業務に専念したい制作リーダーの方
■このテンプレートを使うメリット
- コーディング初期工程を自動化し、数分でHTML/CSSを生成。手作業時間を削減！
- AIによる均一なデザイン品質を担保し、Slack連携でチーム共有も高速化
■概要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フォームへの回答送信をきっかけに、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フォームで集めたアンケートやお問い合わせの回答は、件数が増えるほど内容の確認や整理に時間がかかるものです。特に自由記述の長文回答を一つひとつ確認し、要点をまとめる作業は手間がかかります。このワークフローを活用すれば、Googleフォームに新しい回答が送信された際に、その内容を生成AIが自動で要約し、指定のGoogle スプレッドシートへ格納するため、回答の概要を効率的に把握できるようになります。
■このテンプレートをおすすめする方- Googleフォームで収集したアンケート回答の確認や管理に手間を感じている方
- 生成AIを活用して、フォームの回答内容を自動で要約し業務を効率化したい方
- Googleスプレッドシートへの手作業でのデータ転記をなくしたいと考えている方
■このテンプレートを使うメリット- Googleフォームの回答を生成AIが自動で要約し転記するため、内容の確認や整理にかかる時間を短縮できます。
- 手作業での転記がなくなることで、入力間違いやコピー＆ペーストのミスといったヒューマンエラーの発生を防ぎます。
■フローボットの流れ- はじめに、GoogleフォームとGoogle スプレッドシートをYoomと連携します。
- 次に、トリガーでGoogleフォームを選択し、「フォームに回答が送信されたら」というアクションを設定します。
- 続いて、オペレーションでAI機能の「要約する」を選択し、トリガーで取得したフォームの回答内容を要約するように設定します。
- 最後に、オペレーションでGoogle スプレッドシートの「レコードを追加する」アクションを設定し、要約したテキストを指定のシートに格納します。
※「トリガー」：フロー起動のきっかけとなるアクション、「オペレーション」：トリガー起動後、フロー内で処理を行うアクション
■このワークフローのカスタムポイント- Google スプレッドシートにレコードを追加する際、どの列にどの情報を格納するかを自由に設定できます。AIによる要約結果だけでなく、フォームから取得した回答日時などの情報を指定の列に自動で追加することが可能です。
- また、特定の列に「未対応」のような固定のステータス情報を文字として入力するなど、業務に合わせた柔軟な設定も行えます。
■注意事項- Googleフォーム、Google スプレッドシートのそれぞれとYoomを連携してください。
- トリガーは5分、10分、15分、30分、60分の間隔で起動間隔を選択できます。
- プランによって最短の起動間隔が異なりますので、ご注意ください。
- Googleフォームをトリガーとして使用した際の回答内容を取得する方法は「Googleフォームトリガーで、回答内容を取得する方法」を参照ください。
■概要Slackでのチャット対応は迅速さが求められる一方、その内容を後から参照するためにNotionへ手作業で転記するのは手間がかかり、重要な情報が埋もれてしまうこともあるのではないでしょうか。
このワークフローを活用すれば、Slackへの投稿をトリガーにAIが返信内容を生成し、その内容をNotionへ自動で追加することが可能になり、コミュニケーションの効率化と情報管理の精度向上を実現できます。
■このテンプレートをおすすめする方- Slackでの顧客対応やチーム内コミュニケーションが多く、返信作成に時間を要している方
- Slackのやり取りをNotionで記録・管理しており、手作業での転記に手間を感じている方
- AIを活用して定型的な返信業務を効率化し、その他の業務に集中したいと考えている方
■このテンプレートを使うメリット- Slackのメッセージに対してAIが返信案を自動生成するため、返信作成にかかる時間を短縮し、迅速な対応を支援します。
- AIが生成した返信内容やSlackの投稿情報が自動でNotionに記録されるため、手作業による転記ミスや記録漏れを防ぎます。
■フローボットの流れ- はじめに、SlackとNotionをYoomと連携します。
- トリガーでSlackの「メッセージがチャンネルに投稿されたら」というアクションを設定し、特定のチャンネルを指定します。
- 次に、AI機能「テキストを生成する」アクションを選択し、Slackの投稿内容を元に返信テキストを生成するよう指示します。
- 最後に、Notionの「レコードを追加する」アクションを設定し、Slackの投稿情報とAIが生成した返信テキストを指定のデータベースへ追加します。
※「トリガー」：フロー起動のきっかけとなるアクション、「オペレーション」：トリガー起動後、フロー内で処理を行うアクション
■このワークフローのカスタムポイント- AI機能でテキストを生成する際には、Slackから取得した情報を変数としてプロンプトに組み込むことで、より状況に応じた動的なメッセージを作成できます。
- Notionへレコードを追加するアクションでは、前段のステップで取得した様々な値を変数として活用することが可能です。
■注意事項- Slack、NotionのそれぞれとYoomを連携してください。
■概要
「GoogleフォームにWeb制作依頼が回答されたら、AIでHTML/CSSを生成してSlackに送信する」ワークフローは、AIの力を借り、依頼受付から初期デザインまでを自動化する業務ワークフローです。手間を省きつつ迅速な共有を実現します。
■このテンプレートをおすすめする方
- Googleフォームでweb制作の依頼を受けつつ、コーディング工数を減らしたいWebデザイナーやエンジニアの方
- AIの力で自動的にHTML/CSSを作成し、効率的に初期デザインを用意したい方
- 生成されたデザインをSlackでスピーディーにチーム共有し、コミュニケーションを円滑にしたいプロジェクトマネージャーの方
- ワイヤーフレームから試作までを自動化し、よりクリエイティブな業務に専念したい制作リーダーの方
■このテンプレートを使うメリット
- コーディング初期工程を自動化し、数分でHTML/CSSを生成。手作業時間を削減！
- AIによる均一なデザイン品質を担保し、Slack連携でチーム共有も高速化
- 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 スプレッドシートのトリガーにおける注意事項」を参照してください。
■このテンプレートをおすすめする方
- 収集した情報を元に手作業で記事作成を行っているコンテンツ担当者の方
- 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を活用して、フォームの回答内容を自動で要約し業務を効率化したい方
- Googleスプレッドシートへの手作業でのデータ転記をなくしたいと考えている方
■このテンプレートを使うメリット
- Googleフォームの回答を生成AIが自動で要約し転記するため、内容の確認や整理にかかる時間を短縮できます。
- 手作業での転記がなくなることで、入力間違いやコピー＆ペーストのミスといったヒューマンエラーの発生を防ぎます。
■フローボットの流れ
- はじめに、GoogleフォームとGoogle スプレッドシートをYoomと連携します。
- 次に、トリガーでGoogleフォームを選択し、「フォームに回答が送信されたら」というアクションを設定します。
- 続いて、オペレーションでAI機能の「要約する」を選択し、トリガーで取得したフォームの回答内容を要約するように設定します。
- 最後に、オペレーションでGoogle スプレッドシートの「レコードを追加する」アクションを設定し、要約したテキストを指定のシートに格納します。
■このワークフローのカスタムポイント
- Google スプレッドシートにレコードを追加する際、どの列にどの情報を格納するかを自由に設定できます。AIによる要約結果だけでなく、フォームから取得した回答日時などの情報を指定の列に自動で追加することが可能です。
- また、特定の列に「未対応」のような固定のステータス情報を文字として入力するなど、業務に合わせた柔軟な設定も行えます。
■注意事項
- Googleフォーム、Google スプレッドシートのそれぞれとYoomを連携してください。
- トリガーは5分、10分、15分、30分、60分の間隔で起動間隔を選択できます。
- プランによって最短の起動間隔が異なりますので、ご注意ください。
- Googleフォームをトリガーとして使用した際の回答内容を取得する方法は「Googleフォームトリガーで、回答内容を取得する方法」を参照ください。
このワークフローを活用すれば、Slackへの投稿をトリガーにAIが返信内容を生成し、その内容をNotionへ自動で追加することが可能になり、コミュニケーションの効率化と情報管理の精度向上を実現できます。
■このテンプレートをおすすめする方
- Slackでの顧客対応やチーム内コミュニケーションが多く、返信作成に時間を要している方
- Slackのやり取りをNotionで記録・管理しており、手作業での転記に手間を感じている方
- AIを活用して定型的な返信業務を効率化し、その他の業務に集中したいと考えている方
■このテンプレートを使うメリット
- Slackのメッセージに対してAIが返信案を自動生成するため、返信作成にかかる時間を短縮し、迅速な対応を支援します。
- AIが生成した返信内容やSlackの投稿情報が自動でNotionに記録されるため、手作業による転記ミスや記録漏れを防ぎます。
■フローボットの流れ
- はじめに、SlackとNotionをYoomと連携します。
- トリガーでSlackの「メッセージがチャンネルに投稿されたら」というアクションを設定し、特定のチャンネルを指定します。
- 次に、AI機能「テキストを生成する」アクションを選択し、Slackの投稿内容を元に返信テキストを生成するよう指示します。
- 最後に、Notionの「レコードを追加する」アクションを設定し、Slackの投稿情報とAIが生成した返信テキストを指定のデータベースへ追加します。
■このワークフローのカスタムポイント
- AI機能でテキストを生成する際には、Slackから取得した情報を変数としてプロンプトに組み込むことで、より状況に応じた動的なメッセージを作成できます。
- Notionへレコードを追加するアクションでは、前段のステップで取得した様々な値を変数として活用することが可能です。
■注意事項
- Slack、NotionのそれぞれとYoomを連携してください。
まとめ
AIを活用してホームページ作成を自動化することで、これまで専門知識や多くの時間を要していたウェブサイト制作の手間を削減し、誰でも手軽にアイデアを形にすることが可能になります。
これにより、情報発信のハードルが下がり、ビジネスの企画やコンテンツの質向上といった、より創造的な業務に集中できる環境が整います！
今回ご紹介したような業務自動化を実現できるノーコードツールYoomを使えば、プログラミングの知識がない方でも、直感的な操作で簡単に業務フローを構築できるので、もし自動化に少しでも興味を持っていただけたなら、ぜひこちらから無料登録して、Yoomによる業務効率化を体験してみてください！
プログラミング知識なしで手軽に構築できます。
