Google スプレッドシートとYoomの連携イメージ
アプリ同士の連携方法

2025-05-29

【簡単設定】AIを活用してホームページを自動作成する方法

k.hieda

「デザインの知識がないから、ホームページ作成は難しそう…」

「ホームページを作りたいけど、コーディングに時間がかかって他の業務が進まない…」

このように、ホームページ作成に関する専門知識の不足や、制作にかかる時間と手間にお悩みではありませんか?

もし、<span class="mark-yellow">簡単なテキスト指示や入力データをもとにAIが自動でHTMLやCSSを生成し、ホームページの骨子をスピーディーに作成できる仕組み</span>があれば、これらの悩みから解放され、専門知識がない方でも手軽に情報発信の基盤を構築し、ビジネスの可能性を広げる時間を創出できます!

今回ご紹介する自動化の設定は、ノーコードで簡単に設定できて、手間や時間もかからないので、ぜひ自動化を導入して作業をもっと楽にしましょう!

とにかく早く試したい方へ

Yoomには<span class="mark-yellow">AIを活用してホームページを作成する業務フロー自動化のテンプレート</span>が用意されているので、「まずは試してみたい!」という方は、以下のバナーをクリックして、すぐに自動化を体験してみましょう!

[[211156]]

AIによるホームページ作成を自動化する方法

普段お使いの様々なツールから得た情報を元に、AIがホームページのHTMLやCSSを自動作成する連携方法を、具体的なテンプレートを使って紹介します!気になる内容があれば、ぜひクリックしてみてください!

データベースサービスのデータを使ってAIでホームページを作成する

<span class="mark-yellow">Google スプレッドシートなどのデータベースサービスに登録された情報をトリガーとして、AIがホームページのHTMLやCSSを自動生成し、情報を同じシートに集約する</span>ことができるので、データベースと連携したホームページ作成作業を自動化し、コンテンツ管理と制作の効率を大幅に向上させましょう!

[[211156]]

チャットツールの投稿内容を使ってAIでホームページを作成する

<span class="mark-yellow">Slackなどのチャットツールでの特定の投稿内容を基に、AIがホームページのHTMLやCSSを自動で作成し、Notionなどのドキュメント管理ツールに保存する</span>フローも構築できます。チーム内でのアイデア出しからホームページのプロトタイプ作成までをシームレスに繋げ、スピーディーなウェブサイト展開を実現します。

[[211205]]

フォームの回答内容を使ってAIでホームページを作成する

<span class="mark-yellow">フォームで収集した回答内容を活用して、AIがホームページのHTMLやCSSを自動生成し、Microsoft Excelなどの表計算ソフトに結果をまとめる</span>ことも可能です。アンケート結果やユーザーからの要望を直接ホームページコンテンツに反映させるプロセスを自動化し、よりユーザーニーズに即したウェブサイトを効率的に作成できます。

[[211223]]

Google スプレッドシートのデータからAIでホームページを作成するフローを作ってみよう

それではここから代表的な例として、Google スプレッドシートに追加されたデータをもとに、AIでホームページのHTML・CSSを作成してシートにまとめるフローを解説していきます!

ここではYoomを使用してノーコードで設定をしていくので、もしまだYoomのアカウントをお持ちでない場合は、こちらの登録フォームからアカウントを発行しておきましょう。

[Yoomとは]

フローの作成方法

今回は大きく分けて以下のプロセスで作成します。

  • Google スプレッドシートとGeminiのマイアプリ連携
  • テンプレートをコピー
  • Google スプレッドシートのトリガー設定(例:新しい行が追加されたら)
  • OpenAIのアクション設定(ホームページのHTML・CSS生成プロンプト設定)
  • Google スプレッドシートへのアクション設定(生成されたHTML・CSSを指定のセルに書き込む)
  • トリガーをONにし、フローが起動するかを確認
サンプルケース

以下のように、「ホームページを構成するための基本情報(AIへの入力)」を行として管理します。

行が追加されたら、AIが読み取り、ページ案・構造・HTMLを生成します。

①サイト:構成

②生成結果

◆ポイント:項目は一意の値(ユニークキー)で設定してくださいね。重複しているとエラーが発生します。

準備ができたら、下のバナーからフローボットテンプレートをコピーしてみましょう。

[[203060]]

ステップ1:マイアプリ連携の設定

ここでは連携するアプリ情報をYoomに登録する設定を行います。Yoomのワークスペースにログイン後、マイアプリ画面で「+新規接続」をクリックします。

Yoomで使えるアプリ一覧が表示されます。検索窓から今回連携するアプリを検索し、マイアプリ登録を進めてください。

Google スプレッドシート

検索結果からアプリ名をクリックすると、Google スプレッドシートとYoomの連携確認画面が表示されます。

  • 「Sign in with Google」ボタンをクリックします。
  • Googleアカウントのログイン画面が表示されます。メールアドレス・パスワードの入力を行います。すでにChromeでログインしている場合は、連携するアカウントの選択画面が表示されるため、該当のアカウントを選択します。
  • ログインまたはアカウント選択が完了すると、Yoomがアクセス権限を求める画面に切り替わります。

 

権限を付与すると、Google スプレッドシートのマイアプリ登録が完了します。

Gemini

検索結果からアプリ名をクリックすると、GeminiとYoomの連携確認画面が表示されます。

右上の【APIキーを作成】をクリックします。

生成されたAPIキーをアクセストークンのフィールドに入力します。

追加ボタンをクリックしたら、マイアプリ連携の完了です。

ステップ2:テンプレートをコピー

マイアプリ連携が完了したら、フローボットテンプレートの設定に進みます。下のバナーからテンプレートのコピーに進んでくださいね。

[[203060]]

下のポップアップが表示されたら「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が更新されるようになりました。<span class="mark-yellow">プログラミング不要で、フローボットの設定が簡単に完了しました。</span>

トリガーが【ON】になると、各種通知の送信先を選択できるお知らせがポップアップされます。デフォルトでは登録しているメールへ通知ですが、普段使っているチャットアプリでも通知を受け取れて便利です。

Web制作に関するその他の自動化例 

他にも、Web制作に関する様々な自動化の実現が可能です!
例えば以下のような自動化はいかがでしょうか。

[[214563,214571,207228,149700,206950]]

まとめ

AIを活用してホームページ作成を自動化することで、<span class="mark-yellow">これまで専門知識や多くの時間を要していたウェブサイト制作の手間を削減し、誰でも手軽にアイデアを形にすることが可能になります。</span>

これにより、情報発信のハードルが下がり、ビジネスの企画やコンテンツの質向上といった、より創造的な業務に集中できる環境が整います!

今回ご紹介したような業務自動化を実現できるノーコードツールYoomを使えば、プログラミングの知識がない方でも、直感的な操作で簡単に業務フローを構築できるので、もし自動化に少しでも興味を持っていただけたなら、ぜひこちらから無料登録して、Yoomによる業務効率化を体験してみてください!

この記事を書いた人
k.hieda
Webプランナー・ディレクター歴10年目。Web制作会社勤務時代は、クライアントへ改修と運用プランの提案と制作進行がメインでした。現在はパラレルワーカーです。Yoomのコンテンツ事業部でブログの制作、個人事業では企業の外部広報案件を受けています。民泊を始めるのでルーチンワーク効率化の徹底を目指しています!
タグ
Google スプレッドシート
Gemini
連携
AI
自動
自動化
アプリ連携
No items found.
Yoomのハイパーオートメーションとは?
従来のRPAでは単純な繰り返し作業しか自動化できず、その設定作業はとても複雑なものでした。
AI・API・RPA・OCRなど様々な技術を組み合わせた「ハイパーオートメーション」なら、これまでは実現できなかった多くの作業を、これまでよりも簡単に自動化することが可能です。
Yoomのハイパーオートメーションとは?
従来のRPAでは単純な繰り返し作業しか自動化できず、その設定作業はとても複雑なものでした。
AI・API・RPA・OCRなど様々な技術を組み合わせた「ハイパーオートメーション」なら、これまでは実現できなかった多くの作業を、これまでよりも簡単に自動化することが可能です。
Yoomについて詳しく見る
お役立ち資料
Yoomがわかる!資料3点セット
資料ダウンロード
3分でわかる!Yoomサービス紹介資料
資料ダウンロード
Before Afterでわかる!Yoom導入事例集
資料ダウンロード
お役立ち資料一覧を見る