ManusでWordPressテーマを丸ごと生成する方法｜プロンプト一発でテーマパッケージを作りLocalに実装する

はじめに

前回の記事ではフリーランスWeb制作者として独立するための準備ステップを解説しました。今回は最新のAIエージェントツールManusを使って、プロンプトを入力するだけでWordPressテーマ一式を自動生成し、Local（ローカル開発環境）に実装するまでの手順を紹介します。これまでの連載でHTML・CSS・PHP・WordPressを一から学んできた知識があるからこそ、AIが生成したコードを読み解いて活用できます。今回はその集大成とも言える使い方です。

1. Manusとは

1.1 AIエージェントツールとしての特徴

Manus（manus.im）は中国発のAIエージェントツールです。チャット形式で指示を出すとブラウザ操作・コード生成・ファイル作成などを自律的に実行してくれます。

項目内容
特徴複雑なタスクを自律的に実行するAIエージェント
得意なことコード生成・ファイル構成の作成・Web調査
利用形態ウェブブラウザから使用（アカウント登録が必要）
料金無料枠あり（月間クレジット制）

1.2 ChatGPTやClaudeとの違い

ツール特徴
ChatGPT・Claudeテキスト回答が中心。コードを生成してもファイル化はユーザーが行う
Manus自律的にファイルを生成・整理してZIPでダウンロードできる

💡 Manusはコードを「書いてもらう」だけでなく「ファイルとして出力してもらえる」点が大きな違いです： WordPressテーマのように複数ファイルで構成される成果物を一括で生成・ダウンロードできるため、テーマ開発の初期工数を大幅に削減できます。

2. 今回作るWordPressテーマの概要

2.1 参考サイトと仕上がりのイメージ

今回は和食レストランのWebサイトをイメージして、以下の要件でテーマを生成します。

項目内容
デザインテイスト和風・高級感・落ち着き・重厚感
配色黒・金・白を基調
フォントNoto Serif JP・Noto Sans JP
ページ構成トップページ・料理紹介・店舗案内・アクセス・予約・ブログ

2.2 生成するテーマに含まれる機能

  • レスポンシブ対応（スマホ・タブレット・PC）
  • カスタム投稿タイプ（料理紹介）
  • テーマカスタマイザー（色・ロゴ・フッター文言）
  • パンくずリスト
  • OGP対応
  • SEO構造（h1/h2/h3・metaタグ・構造化データ）
  • お問い合わせフォーム（Contact Form 7対応）
  • スクロールフェードインアニメーション

3. Manusへのプロンプトの書き方

3.1 プロンプトの構成要素

Manusに質の高いWordPressテーマを生成してもらうには、以下の要素を漏れなく記述することが重要です。

要素内容
参考URLデザインや構成の参考にしたいサイトのURL
デザイン要件色・フォント・雰囲気・アニメーションの指定
ページ構成トップページと下層ページそれぞれの構成
機能要件レスポンシブ・SEO・カスタム投稿タイプなど
追加仕様アクセシビリティ・BEM記法・パフォーマンスなど
出力形式の指定WordPressテーマ一式をZIPで出力することを明示する

3.2 今回使うプロンプトの全文

以下のプロンプトをそのままManusにコピーして使えます。参考URLと店舗情報の部分を自分のサイトに合わせて書き換えてください。

以下のURLのホームページおよび下層ページを参考に、同様の構成・
デザインテイストを持つ高品質なWordPressテーマを生成してください。

【参考URL】
https://（参考にしたいサイトのURL）

【デザイン要件】
・和風・高級感・落ち着き・重厚感のあるデザイン
・黒・金・白を基調とした配色
・背景に和紙風テクスチャや淡いグラデーションを使用
・フォントは「Noto Serif JP」または「Noto Sans JP」を使用
・余白を広めに取り、視認性と高級感を演出
・スクロール時のフェードインなど、控えめなアニメーションを採用

【トップページ構成】
・フルスクリーンのメインビジュアル（スライダー対応）
・店舗紹介セクション
・料理紹介セクション
・こだわり・コンセプト紹介
・店舗情報（営業時間・住所・電話番号）
・アクセス（地図埋め込み）
・予約導線（ボタン or 外部リンク）
・フッターに店舗情報・SNS・コピーライト

【下層ページ構成】
・料理紹介ページ（写真＋説明）
・店舗案内ページ（内観・外観・席情報）
・アクセスページ（Google Map 埋め込み）
・予約ページ（外部予約リンク or フォーム）
・ブログ（任意）

【機能要件】
・レスポンシブ対応（スマホ・タブレット・PC）
・WordPressテーマとして利用可能な形式で出力
・HTML / CSS / JavaScript / PHP を適切に分離
・画像はダミー画像でOK（後で差し替え予定）
・文章は参考サイトの雰囲気を踏襲しつつ著作権に配慮した
  オリジナル文章に書き換える
・SEOを意識した構造（h1/h2/h3・metaタグ・構造化データ）
・高速表示を意識した軽量コード（不要なライブラリは使用しない）
・キャッシュや遅延読み込みに配慮した構造
・管理画面から編集しやすい構造（カスタムフィールド・
  ブロックエディタ対応）
・メインビジュアルは管理画面から画像変更可能
・料理紹介はカスタム投稿タイプで管理可能にする
・お問い合わせフォーム（Contact Form 7想定）に対応
・グローバルメニューは管理画面から編集可能
・パンくずリストを実装
・OGP設定に対応

【追加仕様】
・アクセシビリティに配慮したコントラストとフォントサイズ
・ページ速度を意識した画像の遅延読み込み（lazyload）
・CSSはBEM記法で整理
・JavaScriptは必要最低限に抑える
・テーマカスタマイザーで色・ロゴ・フッター文言を変更可能にする

以上を踏まえて、WordPressテーマ一式のコードを生成してください。
最終的にすべてのファイルをZIP形式でダウンロードできるよう
まとめてください。

💡 プロンプトは詳細であればあるほど精度が上がります： 「高品質なWordPressテーマを作って」だけでは抽象的すぎて期待した結果が得られません。上記のように構成・機能・仕様を細かく指定することで、実用に近いコードが生成されます。

4. Manusでテーマを生成する手順

4.1 Manusにログインしてタスクを作成する

  1. manus.im にアクセスしてアカウントを作成またはログインします。
  2. 「New Task」または「新しいタスク」をクリックします。
  3. テキストエリアに上記のプロンプトを貼り付けます。
  4. 「Send」または「送信」をクリックします。

4.2 生成中の動作を確認する

Manusはタスクを受け取ると自律的に作業を開始します。作業ログが画面に表示され、以下のような手順で進んでいきます。

Manusの作業ログ例：

[1] 参考URLにアクセスしてデザインと構成を分析中...
[2] WordPressテーマのフォルダ構成を設計中...
[3] style.cssにテーマ情報とベーススタイルを生成中...
[4] functions.phpにカスタム投稿タイプを登録中...
[5] index.php・header.php・footer.phpを生成中...
[6] front-page.php（トップページ）を生成中...
[7] single-menu.php（料理紹介個別ページ）を生成中...
[8] page-access.php（アクセスページ）を生成中...
[9] ファイルをZIPにまとめています...
[10] 完了。ダウンロードリンクを生成しました。

生成にかかる時間は数分〜10分程度です。作業中はログを眺めながら待ちましょう。

4.3 ZIPファイルをダウンロードする

生成が完了するとダウンロードリンクが表示されます。クリックしてZIPファイルをダウンロードします。

ダウンロードされるZIPの中身（例）：

japanese-restaurant-theme/
├── style.css
├── index.php
├── functions.php
├── header.php
├── footer.php
├── front-page.php
├── page.php
├── single.php
├── archive.php
├── archive-menu.php
├── single-menu.php
├── page-access.php
├── page-reservation.php
├── 404.php
├── searchform.php
├── sidebar.php
├── css/
│   ├── base.css
│   ├── layout.css
│   └── components.css
├── js/
│   └── main.js
├── images/
│   └── dummy/（ダミー画像群）
└── screenshot.png

5. Localでのセットアップ手順

5.1 Localとは

Local（localwp.com）はWordPressのローカル開発環境を簡単に作れる無料ツールです。インストールするだけでパソコン上でWordPressを動かせます。

Localのインストール手順：
1. localwp.com にアクセスする
2. 「Download」からOS（Windows・Mac）に対応した
   インストーラーをダウンロードする
3. インストーラーを実行してLocalをインストールする
4. Localを起動する

5.2 Localで新しいWordPressサイトを作る

  1. Localを起動して左下の「＋」ボタンをクリックします。
  2. 「Create a new site」を選択します。
  3. サイト名を入力します（例：japanese-restaurant）。
  4. 「Choose your environment」で「Preferred」を選択して「Continue」をクリックします。
  5. WordPressの管理者ユーザー名・パスワード・メールアドレスを設定して「Add Site」をクリックします。
  6. サイトが作成されるまで数分待ちます。

5.3 テーマフォルダを配置する

Localでサイトが作成されると、パソコン上にWordPressのファイルが展開されます。

テーマの配置手順：

1. ダウンロードしたZIPファイルを解凍する
   → japanese-restaurant-theme/ フォルダができる

2. LocalのサイトのWordPressフォルダを開く
   → Localのサイト名を右クリック
   → 「Open site folder」または「Reveal in Finder/Explorer」を選択

3. 以下のパスにテーマフォルダをコピーする
   → app/public/wp-content/themes/japanese-restaurant-theme/

4. フォルダが正しく配置されているか確認する
   → app/public/wp-content/themes/ の中に
     japanese-restaurant-theme/ があればOK

⚠️ ZIPファイルのまま配置しても有効化できません： 必ず解凍してフォルダの状態で配置してください。

5.4 管理画面でテーマを有効化する

  1. LocalのサイトパネルでサイトのURLをクリックしてWordPressを開きます。
  2. 管理画面（/wp-admin）にログインします。
  3. 「外観」→「テーマ」を開きます。
  4. 生成されたテーマ（例：Japanese Restaurant Theme）がサムネイル付きで表示されているか確認します。
  5. 「有効化」をクリックします。

⚠️ このステップでエラーが出る場合があります： AIが生成したコードには文法エラーやWordPressの要件との不整合が含まれていることがあります。次回の記事ではこのエラーを解消する方法を詳しく解説します。

5.5 必要なプラグインをインストールする

テーマを有効化したらManusが生成したテーマが依存しているプラグインをインストールします。

プラグインインストールの理由
Contact Form 7お問い合わせフォームの動作に必要
Classic Editor（任意）ブロックエディターに慣れていない場合
Regenerate Thumbnailsダミー画像を差し替えたあとサムネイルを再生成する

6. 生成されたテーマをLocalで確認する

6.1 トップページの確認

  1. Localの「Open Site」ボタンをクリックしてサイトのトップページを開きます。
  2. 以下の要素が表示されているか確認します。
確認項目：
✅ ヘッダー（ロゴ・グローバルナビ）が表示されている
✅ フルスクリーンのメインビジュアルが表示されている
✅ 各セクション（店舗紹介・料理紹介・こだわりなど）が表示されている
✅ フッター（店舗情報・SNS・コピーライト）が表示されている
✅ スマートフォン表示（Chrome DevToolsで確認）でレイアウトが崩れていない

6.2 管理画面でコンテンツを確認する

確認項目：
✅ 「料理紹介」カスタム投稿タイプが管理画面のサイドバーに表示されている
✅ 「外観」→「メニュー」でグローバルナビが設定できる
✅ 「外観」→「カスタマイズ」でロゴ・カラーが変更できる

6.3 Chrome DevToolsでエラーを確認する

確認手順：
1. F12で開発者ツールを開く
2. Consoleタブでエラーを確認する
3. Networkタブで404エラーになっているリソースを確認する

7. Manusを使う上での注意点

7.1 著作権に関する注意

注意点：
・参考URLのサイトのコンテンツ（テキスト・画像）をそのまま使用しない
・Manusは参考サイトの雰囲気を参考にしたオリジナルコンテンツを生成する
・ダミー画像は必ず自社の素材に差し替える
・生成されたコードのライセンスを確認する

⚠️ 参考URLはあくまで「デザインの方向性の参考」として使いましょう： Manusに対して「このサイトのコンテンツをコピーして」という指示は著作権上問題があります。今回のプロンプトのように「参考にして・雰囲気を踏まえて・オリジナル文章で」という指定が重要です。

7.2 生成されたコードの品質について

AIが生成するコードはそのまま本番環境で使えるとは限りません。

リスク対応策
PHPの文法エラーエラーメッセージを確認して修正する（次回解説）
WordPressの非推奨関数が使われているコードレビューして最新の書き方に修正する
セキュリティ上の問題esc_html()・wp_nonce などの漏れを確認する
不要なライブラリが読み込まれているfunctions.php を確認して整理する

💡 「コードを読める」ことがAI活用の前提になります： この連載でHTML・CSS・PHP・WordPressを学んできた理由がここにあります。AIが生成したコードを検証・修正できる知識があることで、AIツールを安全かつ効果的に使いこなせます。

8. 動作確認チェックリスト

✓ Manusでプロンプトを送信してZIPファイルがダウンロードできたか

✓ ZIPを解凍してフォルダ構成を確認したか

✓ Localで新しいWordPressサイトを作成したか

✓ wp-content/themes/ にテーマフォルダを配置したか

✓ 管理画面「外観」→「テーマ」にテーマが表示されているか

✓ テーマを有効化してトップページが表示されるか確認したか

✓ Contact Form 7など必要なプラグインをインストールしたか

✓ スマートフォン表示（DevToolsのデバイスツールバー）でレイアウトを確認したか

✓ Chrome DevToolsのコンソールに表示されているエラーをメモしたか

まとめ

今回はManusを使ってプロンプト一発でWordPressテーマを生成し、Localに実装するまでの手順を解説しました。ポイントをまとめると：

  • ManusはAIエージェントツールで複数ファイルの生成・整理・ZIPダウンロードまで自律的に実行できる
  • プロンプトにはデザイン要件・ページ構成・機能要件・追加仕様を詳細に記述するほど精度が上がる
  • 参考URLはデザインの方向性の参考として使い、コンテンツのコピーには使わない
  • LocalはWordPressのローカル開発環境ツールで、テーマフォルダをwp-content/themes/に配置するだけで使える
  • 生成されたコードには文法エラーや品質の問題が含まれることがあるため、必ずChrome DevToolsでエラーを確認する
  • AIが生成したコードを読んで修正できるかどうかが、AIツールを安全に使えるかどうかの分かれ目になる

次の記事では、Manusが生成したWordPressテーマを有効化する前に発生するエラーの解消方法を解説します。PHPエラー・テンプレートの不整合・プラグインの依存関係など、よくある問題と解決策をまとめてお届けします。お楽しみに！

スポンサーリンク

コメント

タイトルとURLをコピーしました