・
「デザインの知識がないから、ホームページ作成は難しそう…」
「ホームページを作りたいけど、コーディングに時間がかかって他の業務が進まない…」
このように、ホームページ作成に関する専門知識の不足や、制作にかかる時間と手間にお悩みではありませんか？
もし、<span class="mark-yellow">簡単なテキスト指示や入力データをもとにAIが自動でHTMLやCSSを生成し、ホームページの骨子をスピーディーに作成できる仕組み</span>があれば、これらの悩みから解放され、専門知識がない方でも手軽に情報発信の基盤を構築し、ビジネスの可能性を広げる時間を創出できます！
今回ご紹介する自動化の設定は、ノーコードで簡単に設定できて、手間や時間もかからないので、ぜひ自動化を導入して作業をもっと楽にしましょう！
Yoomには<span class="mark-yellow">AIを活用してホームページを作成する業務フロー自動化のテンプレート</span>が用意されているので、「まずは試してみたい！」という方は、以下のバナーをクリックして、すぐに自動化を体験してみましょう！
普段お使いの様々なツールから得た情報を元に、AIがホームページのHTMLやCSSを自動作成する連携方法を、具体的なテンプレートを使って紹介します！気になる内容があれば、ぜひクリックしてみてください！
<span class="mark-yellow">Google スプレッドシートなどのデータベースサービスに登録された情報をトリガーとして、AIがホームページのHTMLやCSSを自動生成し、情報を同じシートに集約する</span>ことができるので、データベースと連携したホームページ作成作業を自動化し、コンテンツ管理と制作の効率を大幅に向上させましょう！
<span class="mark-yellow">Slackなどのチャットツールでの特定の投稿内容を基に、AIがホームページのHTMLやCSSを自動で作成し、Notionなどのドキュメント管理ツールに保存する</span>フローも構築できます。チーム内でのアイデア出しからホームページのプロトタイプ作成までをシームレスに繋げ、スピーディーなウェブサイト展開を実現します。
<span class="mark-yellow">フォームで収集した回答内容を活用して、AIがホームページのHTMLやCSSを自動生成し、Microsoft Excelなどの表計算ソフトに結果をまとめる</span>ことも可能です。アンケート結果やユーザーからの要望を直接ホームページコンテンツに反映させるプロセスを自動化し、よりユーザーニーズに即したウェブサイトを効率的に作成できます。
それではここから代表的な例として、Google スプレッドシートに追加されたデータをもとに、AIでホームページのHTML・CSSを作成してシートにまとめるフローを解説していきます！
ここではYoomを使用してノーコードで設定をしていくので、もしまだYoomのアカウントをお持ちでない場合は、こちらの登録フォームからアカウントを発行しておきましょう。
[Yoomとは]
今回は大きく分けて以下のプロセスで作成します。
以下のように、「ホームページを構成するための基本情報（AIへの入力）」を行として管理します。
行が追加されたら、AIが読み取り、ページ案・構造・HTMLを生成します。
①サイト：構成
②生成結果
◆ポイント：項目は一意の値（ユニークキー）で設定してくださいね。重複しているとエラーが発生します。
準備ができたら、下のバナーからフローボットテンプレートをコピーしてみましょう。
ここでは連携するアプリ情報をYoomに登録する設定を行います。Yoomのワークスペースにログイン後、マイアプリ画面で「＋新規接続」をクリックします。
Yoomで使えるアプリ一覧が表示されます。検索窓から今回連携するアプリを検索し、マイアプリ登録を進めてください。
検索結果からアプリ名をクリックすると、Google スプレッドシートとYoomの連携確認画面が表示されます。
権限を付与すると、Google スプレッドシートのマイアプリ登録が完了します。
検索結果からアプリ名をクリックすると、GeminiとYoomの連携確認画面が表示されます。
右上の【APIキーを作成】をクリックします。
生成されたAPIキーをアクセストークンのフィールドに入力します。
追加ボタンをクリックしたら、マイアプリ連携の完了です。
マイアプリ連携が完了したら、フローボットテンプレートの設定に進みます。下のバナーからテンプレートのコピーに進んでくださいね。
下のポップアップが表示されたら「OK」をクリックして設定をスタート！
コピーしたテンプレートは、マイプロジェクトに追加されます。マイプロジェクトは左のメニューバーからアクセス可能です。
テンプレートの1つ目の工程をクリックし、フローボットのトリガー（起点）を設定します。この工程では、Google スプレッド上で新しく制作するサイトの概要の追加を定期間隔で検知する設定を行います。
この画面では、以下の項目が設定済みです。
次へをクリックして進みましょう。
設定ができたら下へスクロールします。
設定ができたらテストボタンをクリックします。
テスト結果が表示されます。この画面は、YoomとGoogle スプレッドシートが正常に連携でき、情報が取得できた結果です。さらに下へスクロールすると、取得できた値の一覧が表示されます。以降の工程でこの値を引用します。
この項目と値をYoomでは「アウトプット」と定義しています。
この値は、後の工程で引用します。
保存するをクリックして次に進みます。
テンプレートの2つ目の工程をクリックします。この工程はGeminiにホームページ用のコンテンツを自動生成する設定を行います。
この画面では以下の項目が事前設定済みです。
次へをクリックします。
設定ができたら、テストボタンをクリックします。
この画面は、YoomとGeminiが正常に連携でき、情報が生成・取得できた結果です。さらに下へスクロールすると、取得できた値の一覧が表示されます。次の工程で件名と本文の値を引用します。
保存するをクリックして次に進みましょう。
テンプレートの3つ目の工程をクリックします。この工程では、サイトマップを生成する指示文を設定します。
この画面では以下の項目が事前設定済みです。
次へをクリックします。
設定ができたら、テストボタンをクリックします。
成功すると、生成された結果が取得できます。
保存するをクリックして次に進みましょう。
テンプレートの4つ目の工程をクリックします。この工程では、ページ構成を生成する指示文を設定します。
この画面では以下の項目が事前設定済みです。
次へをクリックします。
設定ができたら、テストボタンをクリックします。
成功すると、生成された結果が取得できます。
保存するをクリックして次に進みましょう。
テンプレートの5つ目の工程をクリックします。この工程では、HTMLとCSSを生成する指示文を設定します。
この画面では以下の項目が事前設定済みです。
次へをクリックします。
設定ができたら、テストボタンをクリックします。
成功すると、結果が取得できます。
成功すると、生成された結果が取得できます。
保存するをクリックして次に進みましょう。
テンプレートの6つ目をクリックします。この工程では、これまでGeminiが生成した結果をGoogle スプレッドシートにまとめる設定を行います。
この画面では、以下の項目が設定済みです。
下へスクロールします。
これまでの操作と同じで、フィールドをクリックして連携しているシートの情報を表示させます。該当の項目を選ぶと、IDが引用されます。
入力ができたら次へをクリックします。
前の画面で指定したスプレッドシートを読み込むと、ヘッダの項目と空白のフィールドが表示されます。
この項目に対して、どの値を紐づけるかを指定していきます。
コマンドオペレーションのタブから、該当の項目・値を選んでいきます。編集欄をクリック＜プルダウンメニュー＜前の工程で取得した値の引用コードを選択して埋め込んでいきます。
全ての枠に、値の紐付けができたらテストボタンをクリックします。成功すると、連携したシートに行が追加されます。
保存するをクリックして次の操作に進みましょう。
全ての工程が設定されると、設定完了のコンプリート画面が表示されます。
トリガーをONにして、フローボットを起動します。
トリガーのON/OFFは左上のトグルから切り替えが可能です。シートAを追加すると、シートCが更新されるようになりました。<span class="mark-yellow">プログラミング不要で、フローボットの設定が簡単に完了しました。</span>
トリガーが【ON】になると、各種通知の送信先を選択できるお知らせがポップアップされます。デフォルトでは登録しているメールへ通知ですが、普段使っているチャットアプリでも通知を受け取れて便利です。
他にも、Web制作に関する様々な自動化の実現が可能です！
例えば以下のような自動化はいかがでしょうか。
AIを活用してホームページ作成を自動化することで、<span class="mark-yellow">これまで専門知識や多くの時間を要していたウェブサイト制作の手間を削減し、誰でも手軽にアイデアを形にすることが可能になります。</span>
これにより、情報発信のハードルが下がり、ビジネスの企画やコンテンツの質向上といった、より創造的な業務に集中できる環境が整います！
今回ご紹介したような業務自動化を実現できるノーコードツールYoomを使えば、プログラミングの知識がない方でも、直感的な操作で簡単に業務フローを構築できるので、もし自動化に少しでも興味を持っていただけたなら、ぜひこちらから無料登録して、Yoomによる業務効率化を体験してみてください！
.avif)
.webp)
.webp)