・
Webサイト制作の現場で、「デザイン案はあるけれど、そこからHTMLやCSSを組む作業に時間がかかってしまう…」「ちょっとした定型的なパーツなら、AIでもっと手軽に生成できたら業務が楽になるのに…」と感じることはありませんか？
特に、クライアントからの細かな要望や修正依頼が重なると、コーディング作業に追われてしまいがちです。
もし、<span class="mark-yellow">Webサイトのデザイン指示やテキストベースの要望に基づいてAIがHTMLやCSSなどのコードを自動で生成し、Web制作の初期工程やパーツ作成を効率化できる仕組み</span>があれば、これらの悩みから解放され、より創造性が求められるデザイン設計やユーザー体験の最適化といったコア業務に集中できる貴重な時間を生み出すことができます！
今回ご紹介する自動化の設定は、ノーコードで簡単に設定できて、手間や時間もかからないので、ぜひ自動化を導入して作業をもっと楽にしましょう！
Yoomには<span class="mark-yellow">AIを活用してWebサイトのパーツを自動生成する業務フロー自動化のテンプレート</span>が用意されているので、「まずは試してみたい！」という方は、以下のバナーをクリックして、すぐに自動化を体験してみましょう！
Web制作のプロセスにおいて、AIを活用してHTMLやCSSなどのコード生成を自動化し、業務効率を向上させる具体的な方法をテンプレートを交えて紹介します。これにより、手作業によるコーディングの時間を削減し、より迅速なWebサイト構築を実現できるので、気になる内容があれば、ぜひクリックしてみてください！
<span class="mark-yellow">GoogleフォームなどのフォームサービスにWeb制作の依頼が送信されると、その内容を基にAIがHTMLやCSSなどのコードを自動生成する</span>ことができます。依頼受付からコーディングの初稿作成までのプロセスを大幅に短縮し、制作業務の効率化を実現できます！
<span class="mark-yellow">DiscordなどのチャットツールにWeb制作の依頼が送信されると、AIがHTMLやCSSなどのコードを自動生成し、返信する</span>ことができるため、リアルタイムなコミュニケーションの中で迅速にWebパーツのプロトタイプを作成し、制作スピードを向上させることが可能です！
<span class="mark-yellow">Google スプレッドシートなどのスプレッドシートサービスにWeb制作の依頼情報が追加されると、そのデータを基にAIがHTMLやCSSなどのコードを自動生成する</span>ことも可能です。リスト形式で管理された複数の制作案件も効率的に処理し、制作の生産性を高めることができます！
それではここから代表的な例として、GoogleフォームにWeb制作の依頼が回答された際に、その内容を基にAIがHTMLやCSSなどのコードを自動生成し、指定されたチャネルに送信するフローを解説していきます！
ここではYoomを使用してノーコードで設定をしていくので、もしまだYoomのアカウントをお持ちでない場合は、こちらの登録フォームからアカウントを発行しておきましょう。
[Yoomとは]
今回は大きく分けて以下のプロセスで作成します。
ここでは、Yoomとそれぞれのアプリを連携して、操作が行えるようにしていきます。
まず、Yoomにログインしたあと左メニューにあるマイアプリを押し、右の新規接続というボタンを押します。
Googleフォームの連携
1.検索する
検索ボックスにGoogleフォームと入力し、Googleフォームのアイコンをクリックします。
2.ログインする
「Sing in with Google」をクリックしてログインしましょう。
3.アカウントの選択
連携したいアカウントを選択します。
※表示されたアカウント以外を連携したい場合は「別のアカウントを使用」をクリックし、連携したいアカウントでログインしてください。
画面が遷移しますので「次へ」をクリックします。
4.追加アクセスの選択
Yoomが信頼できることの確認が求められるので「続行」を選択します。
Yooｍの画面に戻り、下記の表示が出たら連携完了です！
Slackの連携
1.検索する
検索ボックスにSlackと入力し、Slackのアイコンをクリックします。
2.連携を許可する
YoomとSlackとの連携を行います。下記設定を行った後、「Allow」をクリックします。
3.チャンネルにYoomアプリを追加する
Slackサービス上で、Yoomからメッセージを送信するSlackチャンネルを開き、下記の図のとおり、1〜3の順に設定を行います。
※管理者による承認が必要な場合があります。詳しくはこちらの公式ヘルプをご参照ください。
最後に、画面が遷移するのでYoomアプリを追加したいので「追加」をクリックします。
Yooｍの画面に戻り、下記の表示が出たら連携完了です！
※Slackのマイアプリ登録についての詳細はこちらのヘルプページをご覧ください。
ここからいよいよフローを作っていきます！
簡単に設定できるようテンプレートがありますので、まずはこちらをコピーしましょう。Yoomにログインし、以下バナーの「試してみる」をクリックしてください。
1.上記バナーの「詳細を見る」をクリック
2.画面が切り替わったら「このテンプレートを試してみる」をクリック
3.Yoomの登録がまだの場合は、登録を行う
※既に登録が完了している場合はログイン画面が表示されるので、ログイン情報を入力してください。
4.下記のようにお使いのYoom管理画面にテンプレートがコピーされるので、OKを押して設定を進めていきます。
1.それでは、最初の設定を始めましょう！まずは、下の赤枠をクリックしてくださいね。
2.画面が切り替わりますので、ここで連携するアカウントとアクションを設定しましょう。タイトルやアカウント情報は、ステップ1で入力した内容がそのまま表示されます。タイトルはわかりやすい名前に自由に変更可能です。
トリガーアクションはテンプレート通り「フォームに回答が送信されたら」のままで問題ありません。
設定が終わったら「次へ」をクリックして進んでください。
3.ここでは、トリガーとして使用するGoogleフォームの設定を行います。
もしまだ対象のGoogleフォームを作成していない場合は、このタイミングで作成してください。
今回は、下記のようなGoogleフォームを準備しました。
また、この後のテスト操作で、実際にフォームから回答を送信する必要があるため、忘れずに入力しておいてください。
Googleフォームの準備が整ったら、Yoom画面に戻り下記項目を入力してください。
入力が完了したら、「テスト」を実行してみてください。成功すれば、下部にアウトプットが表示されます。
Googleフォームで送信した内容がきちんと反映されていれば問題ありません！
※Googleフォームをトリガーに設定した場合の回答データの取得方法については、こちらを参考にしてみてくださいね。
最後に、「保存する」を押して次のステップへ進みましょう。
1.つぎに、先ほどファイルから読み取った文字を、AIを用いて分析するための設定をしましょう。まずは、下の赤枠をクリックしてくださいね。
2.画面が切り替わるので、タイトルやアクションは先ほどと同様に、修正・確認をしてください。
アクションは、デフォルトで「テキストを生成｜500文字以内（3タスク）」が選択されています。こちらは変更可能なので、（）内に表記されている消費タスク量に注意して選択してください。
設定が完了したら、「次へ」をクリックして進みましょう。
3.ここでは、AIに対しての具体的な指示を設定します。
プロンプト欄をクリックすると、下記のようなアウトプットが表示されるので、先ほど生成したテキストを選択しましょう。
言語欄には、入力欄下の注釈を参考に指定の言語を入力しましょう。
入力が完了したら、「テスト」を実行し、成功するか確認してください。
下記のような生成結果がアウトプットされればOKです!
最後に、「保存する」を押して次のステップへ進みましょう。
1.先ほど生成したテキストをSlackに送信するための設定をしましょう。まずは、下の赤枠をクリックしてくださいね。
2.次に、連携アカウントとアクションを設定します。
タイトルやアクションは前のステップと同様に、修正・確認をして次に進んでください。
3.ここでは、Slackに送信する内容を具体的に設定していきます。
今回は、ステップ1でYoomアプリを追加した赤枠のチャンネルにメッセージを送信する予定です。
Slackの準備ができたら、Yoom画面に戻ります。
下記を参考に、それぞれの項目を入力してください。
入力が完了したら、「テスト」を実行してください。無事に成功すると、Slackにメッセージが送信されているはずなので確認してみましょう。
下記のように、指定したメッセージがSlackに届いていればOKです!
最後に、「保存する」を押して次のステップへ進みましょう。
お疲れ様でした！これですべての設定が完了です。設定が完了すると以下のようなメニューが表示されるので、トリガーをONにします。
これですべての設定が完了したので、動作確認をしてみましょう!
他にも、Web制作に関するテンプレートを用意しています！
例えば以下のような自動化はいかがでしょうか。
Web制作におけるAI活用は、<span class="mark-yellow">これまで時間と手間がかかっていたコーディング作業の一部を自動化し、ヒューマンエラーのリスクを低減させながら、制作スピードを大幅に向上させることができます。</span>
これにより、Webデザイナーや開発者は、より創造的なデザイン考案やユーザー体験の向上といったコア業務に集中できる環境が整います！
今回ご紹介したような業務自動化を実現できるノーコードツールYoomを使えば、プログラミングの知識がない方でも、直感的な操作で簡単に業務フローを構築可能です。
もしAIを活用したWeb制作の効率化に少しでも興味を持っていただけたなら、ぜひこちらから無料登録して、Yoomによる業務効率化を体験してみてください！
.png)
.webp)
.webp)