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