AIが自動でWebサイトを構築！Manusでランディングページを作成する方法

「プログラミングは難しい…。」「デザインのセンスがない…。」そんな悩みを持つ方にとって、Webサイト制作はこれまで非常に高い壁でした。
しかし、AIエージェントの進化によって、その常識が大きく塗り替えられようとしています。
今回ご紹介する「Manus（マナス）」は、自分の言葉で指示を出すだけで、AIが自律的にWebサイトを構築してくれる革新的なツールです。
従来のテンプレートを選んでパーツを並べる方式とは一線を画す、その魅力と活用法を詳しく解説します！

💻Manusとは？

Manusは、文章による指示（プロンプト）を通じて、幅広いビジネス業務を自律的にこなす万能なAI秘書のような存在です。
単に指示に答えるだけのチャットボットではなく、目標を達成するために必要な工程を自分で判断し、実行まで担ってくれるのが大きな特徴です。
リサーチやデータ分析、資料作成、コーディングなどを横断的に実行でき、その強力なスキルの一つとしてWebサイト制作にも対応しています。

▼Webサイト制作における主な特徴

Manusを使えば、特別な技術を持たない人でも、プロフェッショナルな印象を与えるWebサイトを手にすることが可能です。

• プロンプトによる一括生成：サイトの目的を伝えるだけで、ヘッダー、メインビジュアル、サービス紹介、問い合わせフォームといった必要なセクションが自動的に配置されます。
• ビジュアル編集モード：AIが作成した後に、「ここをもっと青くして」「フォントを柔らかいものに変えて」といった修正指示を出すことも可能です。
  直感的なコントロールパネルを使い、コードを一行も書かずに細かな調整が行えます。
• SEOへの配慮：検索エンジンに評価されやすいHTML構造や、適切なメタタグ（ページの説明文など）もAIが自動で設定してくれます。
  公開した直後から、検索で見つかりやすい状態を整えられるのは大きな利点です。

▼利用するメリット

Manusは「手軽さ」だけでなく、その後の運用についても柔軟な設計がなされています。

• コードの透明性：AIが書いたコードは整理されており、技術的な知識があれば内容を確認したり、他の環境へ持ち出したりすることも考慮されています。
• バージョン管理機能：編集を重ねる中で「前のデザインの方が良かった」と感じたとき、過去の状態にいつでも戻せる履歴管理機能が備わっています。
• モバイル対応も万全：特別な操作をすることなく、スマートフォンで見ても美しいレスポンシブデザインが自動的に適用されます。

▼料金システム

Manusの無料プランでは、初回登録時に1,000クレジットが付与されます。

また、年払いにすると約 17% 割引があります。

この他にTeamプランも用意されており、複数人でクレジットを共有したり、チーム単位で管理可能です。

⭐YoomはManusで作ったサイトからの通知やデータ連携を自動化できます！

👉Yoomとは？ノーコードで業務自動化につながる！

Manusで素晴らしいサイトが完成した後の「運用」において、強力なパートナーとなるのが「Yoom」です。
例えば、Manusで作成したサイトにお問い合わせが届いたとき、その情報を一つひとつ手作業で管理するのは大変ですよね。
Yoomを使えば、サイトからの通知をトリガーにして、SlackやLINEなどのチャットツールへ素早く内容を飛ばすことができます。気になる方はぜひチェックしてみてください！

Zoho Mailの特定のフォルダでメールを受信したら、Slackに通知する

試してみる

---

■概要

Zoho Mailで受信した重要なメールを、都度Slackにコピー＆ペーストして共有する作業に手間を感じていませんか？手作業での通知は、対応漏れや遅延の原因にもなり得ます。
このワークフローを活用すれば、Zoho Mailの特定のフォルダでメールを受信した際、自動でSlackに通知を送ることが可能です。Zoho MailとSlackの連携を自動化し、重要な情報の共有を効率化しましょう。

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

• Zoho Mailで受信した特定メールのSlackへの共有を手作業で行っている方
• Zoho MailとSlackの連携で、チームへの情報共有を迅速化したいと考えている方
• 重要なメールの見落としを防ぎ、コミュニケーションを円滑にしたいと考えている方

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

• Zoho Mailでのメール受信をトリガーに自動で通知が飛ぶため、手動でSlackに転記していた時間を削減できます。
• Zoho MailとSlackの連携を自動化することで、通知漏れや共有の遅延といったヒューマンエラーを防ぎます。

■フローボットの流れ

1. はじめに、Zoho MailとSlackをYoomと連携します
2. 次に、トリガーでZoho Mailを選択し、「特定のフォルダにメールが届いたら」というアクションを設定します。
3. 次に、Zoho Mailの「メール内容の取得」アクションを設定し、メール本文の内容を取得します。
4. 最後に、オペレーションでSlackを選択し、「チャンネルにメッセージを送る」アクションを設定し、Zoho Mailで受信したメールの内容を通知します。

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

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

• Zoho Mailのトリガー設定では、通知のきっかけとしたいアカウントIDやフォルダIDを任意で設定してください
• Slackへの通知設定では、通知先のチャンネルを任意で指定できます。また、通知するメッセージの本文は、固定のテキストだけでなく、Zoho Mailで受信したメールの件名や本文などを変数として埋め込むことが可能です

■注意事項

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

詳細を見る 試してみる

フォームに回答があったら、内容をLINEに通知する

試してみる

---

■概要

フォームからの問い合わせや申し込みは、ビジネスチャンスに直結する重要な接点ですが、回答に気づくのが遅れたり、確認を忘れてしまうことはないでしょうか。このワークフローを活用すれば、フォームに回答があった際に、その内容を自動でLINE公式アカウントに通知できます。これにより、対応漏れや遅れを防ぎ、顧客への迅速なアプローチを可能にします。

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

• Webサイトのフォームからの問い合わせ対応を迅速化したいと考えているご担当者の方
• 外出先や移動中でも、スマートフォンで手軽にフォームの回答内容を確認したい方
• フォームの回答内容を、関係者にリアルタイムで共有する仕組みを構築したい方

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

• フォームに回答があると即座にLINE公式アカウントへ通知が届くため、対応漏れや確認の遅れを防ぎ、機会損失のリスクを軽減します
• これまで手動で行っていた回答内容の確認や共有作業が自動化され、本来注力すべきコア業務に時間を割くことができます

■フローボットの流れ

1. はじめに、LINE公式アカウントとYoomを連携します
2. 次に、トリガーでYoomメールトリガーを選択し、「フォームに回答があったら」というアクションを設定し、対象のフォームと紐付けます
3. 最後に、オペレーションでLINE公式アカウントの「テキストメッセージを送信」アクションを設定し、フォームの回答内容を含む通知メッセージを作成します

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

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

• LINE公式アカウントでメッセージを送信するアクションでは、通知を送りたい相手を任意で設定することが可能です
• 送信するメッセージの本文には、固定のテキストだけでなく、フォームから受け取った回答者の名前や問い合わせ内容などを変数として埋め込めます

■注意事項

• LINE公式アカウントとYoomと連携させる必要があります。
• LINEでメッセージを送信する場合、予めユーザーIDが必要となります。ユーザーIDの確認方法は以下をご参照ください。
  https://intercom.help/yoom/ja/articles/10756296

詳細を見る 試してみる

🤔Manusを実際に使ってみた

Webサイト制作を実際に試し、リサーチや資料作成まで横断的にこなす「万能なAI秘書」として、どこまで実務に活用できるのかを検証しました。

今回は、具体的な利用シナリオを2つ用意しています。

検証条件

以下の条件で行います。

• OS：Windows11
• 使用ツール：Manus（Webブラウザ/無料版）

検証内容とポイント

1．期間限定キャンペーン用のランディングページ（LP）の構築と公開

構成設計からデザイン、公開作業までをManusに任せた場合、スピードと完成度はどのレベルに到達するのか検証します。

▼検証項目

1. 要件に基づいた構築が自律的に行われるか
2. 指示した配色やフォーム機能が正しく反映されているか
3. 外部からアクセス可能なURLが実際に生成されるか

2．インバウンド観光客向けの多言語対応Webハンドブック作成

多言語での情報整理は、手作業だと時間も工数もかかります。
そこで、構成から翻訳まで効率化できるかを検証します。

▼検証項目

1. 日本語と英語の対訳精度が実用レベルで保たれているか
2. 外部リソースがクリック可能な状態で配置されているか
3. デザインの整った1枚のWebページとして完成しているか

検証方法

 公式サイトにアクセスし、画面右上の「登録」ボタンからGoogle アカウントで登録を行います。

登録が完了したら、チャット欄の下にある『ウェブサイトを作成』をクリックします。

ウェブサイトを作成するためのチャット欄が表示されるので、ここから各検証を行っていきます。

✅検証①期間限定キャンペーン用のランディングページ（LP）の構築と公開

短期間での立ち上げが求められるキャンペーンLP制作において、設計から公開までを効率化できるのか。その実用性を検証します。

入力したプロンプトは以下の通りです。

【プロンプト】

新しい期間限定キャンペーン用ランディングページを作成して公開してください。
【目的】
新しいAIニュースレターの事前登録を受け付けるための紹介サイトを公開したい
【サイト情報】
・ サイトタイトル：AIフロンティア最新報
・公開目的：事前登録（メールアドレス収集）
・想定デバイス：PC／スマホ両方
【デザイン要件】
全体のトーン：青色を基調とした洗練されたデザイン
【セクション構成】
1. ファーストビュー（タイトル、サブコピー、登録フォーム）
2. ニュースレターの特徴（3つ程度のポイント）
3. 想定される配信コンテンツ例

💡プロンプトに迷った場合

Manusでは、チャット入力に加えて、「何を構築したいですか？」から選べる用途別のクイック選択や、「アイデアを探る」に用意されたユースケーステンプレートを使って制作を始めることができます。
表示された文章を自分の用途に合わせて書き換えるだけで、プロンプトの作成が完了します。

【検証結果】

結論から述べると、Manusは期待を上回る精度でLPを完成させました。

検証ポイントで評価すると、以下になります。

驚くべきは、プロンプトで細かく指示していない部分まで自動で補完してくれる点です。

セクション構成やコピーの配置、フォームの位置などが、LP制作の基本に沿って自然に設計されました。

更に、指示に含めていなかった「法務関連」や「サポート」といったフッター構造までが自律的に用意されています。
単なる見た目だけの構築ではなく、公開サイトとしての体裁が短時間で整いました。

サイト完成後は、公開ボタンを押すだけですぐにWeb上にアップされます。

独自ドメインのカスタマイズや購入もManus上で完結するため、外部サービスを行き来する必要がなく、公開までをスムーズに進められます。

【失敗したことやポイント】

検証を通じて、Manusを使いこなすための重要なポイントが2つ見えてきました。

1. 情報の優先順位を明確に伝える：精度の高いサイトを作るコツは、ユーザーの行動を意識した優先順位を伝えることです。
   「一番上に最新の記事を表示する」「問い合わせボタンは目立つ色にする」といった具体的な導線指示を加えることで、より実用的なサイトへと仕上がります。
2. クレジットの消費構造を理解する：今回の検証では、最初の作成で93クレジット、その後の色味修正だけで50クレジットを消費しました。(※タスクの複雑さによって消費量は変動します)
   Manusは修正を繰り返すたびにクレジットを消費する仕組みのため、後から「こまめに直せばいい」と考えるのは得策ではありません。
   最初のプロンプトでいかに詳細な要件（色、構成、フォントの雰囲気など）を具体的に整理して伝えるかが、コストパフォーマンスを最大化する鍵となります。

✅検証②インバウンド観光客向けの多言語対応Webハンドブック作成

急増する訪日外国人観光客向けのソリューションとして、東京・浅草エリアの観光情報をまとめた「多言語Webハンドブック」の作成をManusに指示しました。
単なる翻訳サイトではなく、日本語と英語が併記された実用的な1枚のWebページを作成し、現場で共有できるレベルか検証します。
プロンプトの内容は以下の通りです。

【プロンプト】

東京の浅草周辺の観光ガイドWebページを作成して公開してください。
【ページの目的】
海外からのインバウンド観光客向けに、浅草エリアの観光情報を「日本語と英語の併記」でわかりやすく案内する、多言語Webハンドブックを1枚のWebページとして作成・公開したい
【言語要件】
・「日本語 → 英語」の順で書いてください。
・ 日本語と英語がどの情報に対応しているかが一目でわかるよう明確にしてください。
【コンテンツ要件】
1. ページタイトル 2. エリア概要 3. 観光スポット情報(代表的な観光スポットを3箇所) 4.おすすめの飲食店3か所 5. 地図リンク（クリック可能な外部リンク）
【デザイン要件】
「スマホでも読みやすい」レイアウトを意識

【検証結果】

検証の結果、Manusは観光ガイドとして極めて実用性の高いページを自律的に構築しました。

検証ポイントで評価すると、以下になります。

驚くべきは、こちらがデザインの詳細を指定しなかったにもかかわらず、コンテンツの内容から「和モダン・エレガント」という最適なトーンをManusが自律的に選択した点です。

↓

日本語と英語のペアが視覚的に分かりやすく配置されており、情報量に偏りもありません。
また、単なる情報の羅列ではなく、「お茶好きの観光客には外せないスポット」や「ハラル認証」に関する記述など、インバウンド客のニーズを的確に捉えたライティングが行われています。

地図情報は実際にクリック可能な外部リンクとして正しく機能しています。

完成後に「中国語と韓国語を追加してほしい」と追加指示を出したところ、わずか約3分で5言語対応のページへとアップデートされました。
この修正スピードは、従来のWeb制作フローでは考えられない速さです。

【失敗したことやポイント】

非常に精度の高いページが完成しましたが、より現場で「使いやすい」ツールにするためには、以下の工夫が必要です。

• ビジュアルの華やかさを補強する：スマホ最適化を優先した結果、レイアウトは非常に安定していますが、観光サイトとしての「ワクワク感」や「華やかさ」はやや控えめな印象を受けました。
  視覚的なインパクトを重視する場合は、プロンプトで具体的な「画像配置」や「配色」の追加指示を出すのが鉄則です。
• “拾い読み”を意識した構造化の指示：文章中心の構成では、短時間で内容を把握したい場面では視認性が十分とは言えません。
  「重要情報をアイコン付きで強調する」「箇条書きを多用する」など、瞬時に要点が伝わる表現をプロンプトで指定することで、情報コンテンツ全体の完成度をさらに高められます。

🖊️検証結果まとめ

従来であれば、Webサイト制作には、デザインツールとノーコードツールを行き来しながら、数日単位の作業が必要でした。

Manusでは、その初期構築を短時間で完了でき、ベースとなるページがすぐに立ち上がります。
制作の初期工程を大幅に圧縮できる点は、実務において非常に大きなメリットです。

💡Yoomでできること

Yoomは、業務を自動化するハイパーオートメーションプラットフォームです。
これまで手動で利用していた各ツールをメインとした自動化フローが、直感的な操作で実現可能です。
もし自動化に少しでも興味を持っていただけたなら、ぜひ登録フォームから無料登録して、Yoomによる業務効率化を体験してみてください！

フォームに回答があったら、入力内容をSlackに通知する

試してみる

---

■概要

Yoomフォームに新しく回答が送信されたら、入力内容をSlackに通知するフローです。

フォームで取得した内容を自動的にSlackに通知することができるので、情報管理が楽になりかつ抜け漏れをなくすことができます。

Slackの通知先のチャンネルや通知内容は自由に変更してご利用ください。

YoomフォームトリガーをGoogleフォームトリガーに変更して作成することもできます。

Googleフォームをトリガーとして使用した際の回答内容を取得する方法は下記を参照ください。

https://intercom.help/yoom/ja/articles/6807133

‍

■注意事項

・SlackとYoomを連携してください。

詳細を見る 試してみる

Gmailでメールを受信したら、Telegramに自動で通知する

試してみる

---

■概要

日々Gmailに届く重要事項をTelegramで共有する際、業務が立て込んでいて作業が遅れてしまうことはありませんか？
特に緊急性の高い連絡や顧客からの問い合わせなど、迅速な対応が求められるメールを手作業で確認し通知するのは手間がかかります。
このワークフローを活用すれば、Gmailで特定のメールを受信した際に、自動でTelegramに通知することが可能になります。
自動化フローの導入により、業務の迅速化が図れるでしょう。

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

• Gmailで受信する重要なメールを、Telegramを通じて迅速に関係者へ共有したい方
• メールの確認漏れや通知の遅延を防ぎ、コミュニケーションを円滑にしたい方
• 手作業による情報伝達の非効率さを解消し、業務の自動化を進めたい方

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

• Gmailで特定のメールを受信すると、自動でTelegramに必要な情報が通知されるため、手作業による確認や転記の時間を短縮することができます。
• 手動での情報伝達に伴う通知漏れや遅延、内容の誤りといったヒューマンエラーのリスクを軽減し、確実な情報共有を実現します。

■フローボットの流れ

1. はじめに、GmailとTelegramをYoomと連携します。
2. トリガーでGmailの「特定のキーワードに一致するメールを受信したら」を選択し、検知したいメールの条件（キーワード、差出人、件名など）を指定します。
3. 最後に、Telegramの「メッセージを送信」アクションを設定します。通知先のチャットIDやメッセージ内容を指定し、Gmailで受信したメールの情報（件名、本文の一部など）をメッセージに含めることも可能です。

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

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

• Gmailのトリガー設定では、通知のきっかけとなるメールの条件（特定のキーワード、差出人アドレス、件名に含まれる文言など）を任意で設定してください。
• Telegramでメッセージを送信するアクションを設定する際に、通知先のチャットIDやグループを任意で指定できます。また、送信するメッセージ本文は、固定のテキストだけでなく、Gmailで受信したメールの件名や本文の一部など、前段のトリガーで取得した情報を変数として埋め込むことが可能です。

■注意事項

• Gmail、TelegramのそれぞれとYoomを連携してください。

詳細を見る 試してみる