Google スプレッドシートに追加されたデータをもとに、AIでホームページのHTML・CSSを作成してシートにまとめる

Yoomのテンプレートを使えば、ノーコードで簡単に

Google スプレッドシート

と

Gemini

を自動連携できます。

■概要

ホームページ作成の際、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 Driveに文書が格納されたら、AIで要約してGoogle スプレッドシートの管理シートに追加する

Google Driveに追加されたファイルをAIで読み取り要約し、Google スプレッドシートへ自動記録するフローです。文書確認や転記の手間を減らし、入力ミスを抑えて情報共有を早められます。

詳細を見る

Google スプレッドシートに行が追加されたらMicrosoft Teamsでチームを作成する

Google スプレッドシートに行が追加されるとMicrosoft Teamsのチームを自動生成するフローです。手作業の転記や二重入力をなくし、作成漏れや入力ミスを抑えながら立ち上げを早められます。

詳細を見る

Google スプレッドシートで行が追加されたらジョーシスで従業員を登録する

Google スプレッドシートに行を追加するとジョーシスへ従業員を自動登録するフローです。転記作業を省き入力ミスの発生を抑え、入社手続きの負担を軽減できます。

詳細を見る

1日1回前日の取引データをスマレジから取得して、Google スプレッドシートに転記する

スマレジの前日売上を毎朝設定時刻に自動取得し、Google スプレッドシートへ転記するフローです。毎日の手入力や入力ミスを減らし、正確なデータで報告・分析できます。

詳細を見る

Google スプレッドシートで特定条件の行が追加されたら、KommoにContactを追加する

YoomでGoogle スプレッドシートの行追加をきっかけにKommoへContactを登録するフローです。転記作業や入力ミスを減らし、顧客情報を正確かつ素早く共有できます。

詳細を見る

LINEで特定のWebhookイベントを受け取ったら、Google スプレッドシートをリアルタイムで更新する

LINE公式アカウントの問い合わせや予約を受信するとGoogle スプレッドシートへ自動記録するフローです。転記の手間や入力ミスを抑え、顧客データを常に最新に保てます。

詳細を見る

すべてのテンプレートを見る

使用しているアプリについて

Google スプレッドシート

YoomではGoogleスプレッドシートのAPIをノーコードで活用することができます。スプレッドシートとYoomを連携することで、スプレッドシートへの情報入力を自動化したり、スプレッドシートの雛形を元に書類を自動的に作成することが可能です。また、Yoomのデータベースにスプレッドシートの情報を同期し、様々な用途で活用することも可能です。