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

■概要

ホームページ作成の際、HTMLやCSSのコーディングに時間を取られていませんか？特に、複数のページを作成する場合、その都度コードを記述するのは手間がかかり、本来のコンテンツ企画やデザインに集中できないという課題をお持ちかもしれません。このワークフローを活用すれば、Google スプレッドシートにホームページの構成要素となるデータを追加するだけで、GeminiがHTML・CSSを自動生成し、Google スプレッドシートに結果をまとめて記録するため、こうした作業の効率化が期待できます。

■このテンプレートをおすすめする方

• Google スプレッドシートで管理している情報から、手軽にホームページを作成したいと考えている方
• HTMLやCSSのコーディング知識がなくても、AIを活用してホームページ制作を効率化したい方
• 定型的なホームページ作成業務が多く、作業時間を短縮しコア業務に集中したい方

■このテンプレートを使うメリット

• Google スプレッドシートへのデータ追加をトリガーに、AIがHTML・CSSを自動生成するため、これまでコーディング作業に費やしていた時間を削減できます。
• 手作業によるコーディングミスや、データ転記の際に発生しがちなヒューマンエラーを防ぎ、品質の安定したホームページ作成に繋がります。

■フローボットの流れ

1. はじめに、Google スプレッドシートとGeminiをYoomと連携します。
2. 次に、トリガーとしてGoogle スプレッドシートを選択し、「行が追加されたら」というアクションを設定します。これにより、指定したGoogle スプレッドシートに新しい行が追加されるとフローが起動します。
3. 続いて、オペレーションでGeminiを選択し、「ホームページに必要なコンテンツを作成」アクションを設定し、追加された行のデータに基づいてコンテンツ案を生成させます。
4. 次に、Geminiの「サイトマップを作成」アクションを設定し、ホームページ全体の構造を定義します。
5. さらに、Geminiの「個別ページに必要な構成を作成」アクションで、各ページの具体的なレイアウトや要素を設計します。
6. そして、Geminiの「HTMLとCSSを出力」アクションを設定し、ここまでの情報をもとに実際のHTMLコードとCSSコードを生成させます。
7. 最後に、オペレーションでGoogle スプレッドシートを選択し、「レコードを追加する」アクションを設定します。生成されたHTMLとCSSを、元のGoogle スプレッドシートの対応する行、または新しいシートに追記して記録します。

※「トリガー」：フロー起動のきっかけとなるアクション、「オペレーション」：トリガー起動後、フロー内で処理を行うアクション

■このワークフローのカスタムポイント

• Geminiを使用する各オペレーションでは、どのような内容やデザインのホームページを作成したいか、具体的な指示をプロンプトとして任意に設定してください。プロンプトの工夫次第で、生成されるHTML・CSSの品質や方向性を調整できます。
• Google スプレッドシートの「レコードを追加する」オペレーションでは、生成されたHTMLやCSSをどのセルに書き出すか、また固定のテキスト情報（例：作成日など）や、フローの途中で取得した他の動的なデータをどのように埋め込むかなどを詳細に設定することが可能です。

■注意事項

• Google スプレッドシート、GeminiのそれぞれとYoomを連携してください。
• トリガーは5分、10分、15分、30分、60分の間隔で起動間隔を選択できます。
• プランによって最短の起動間隔が異なりますので、ご注意ください。