MoteRakuの使い方｜AIが作ったHTMLを貼るだけでWordPressのページを公開

この記事のサービス

MoteRaku

AI が作った HTML を貼るだけでページを公開できる WordPress プラグイン。

• 無料会員から
• 有料：AI生成・アフィリ・フォーム

MoteRakuを開く →

これで何ができるか

ChatGPT・Claude・Gemini などの AI に作ってもらった HTML と CSS を、WordPress に貼るだけでページとして公開できます。MoteRaku のページは、テーマを使わない白紙のページで表示されるので、テーマの CSS に崩されません。メニューや投稿の一覧は WordPress の中身を差し込めます。

使える人：カツプロの無料会員から（プラグインは無料）。アフィリエイト・お問い合わせフォームなどの拡張と、AI 連携は有料会員（Tier 1）の機能です。

はじめ方

まず動画で流れを見てください（音は出ません。製品サイトとカツプロのマイページの画面です）。

1. 製品サイトを開く：moteraku.com で、できることと、作れるサイトの見本を見られます。
2. はじめ方の4ステップ：カツプロに無料登録 → プラグインを有効化 → AI のコードを貼る → 反映先を選んで公開、の順です。くわしい手順は製品サイトの「使い方ガイド」にあります。
3. 無料と有料の違いを確かめる：ページ作り・共通ヘッダーとフッター・一覧ページのデザイン・SEO の設定などは無料会員で使えます。AI 連携・アフィリエイト・商品検索・お問い合わせフォームは有料会員（Tier 1）です。
4. ZIP をダウンロードして WordPress に入れる：ダウンロードのページから ZIP を取り、WordPress の管理画面「プラグイン → 新規追加 → プラグインのアップロード」で選んで有効化します（ZIP は解凍しなくてかまいません）。WordPress 6.0 以上・PHP 8.0 以上で動きます。
5. 連携キーを貼る：カツプロのマイページ「AI と連携」の「連携キー」で「コピー」を押し、WordPress の「MoteRaku → ライセンス連携」に貼って「保存して連携を確認」を押します。これでページの作成・編集・設定が使えるようになります。

連携したら、WordPress の左のメニューに「MoteRaku」が増えます。「新規追加」でページを作り、AI が作った HTML を HTML 欄に、CSS を CSS 欄に貼ります。編集画面の右側「MoteRaku 反映先」で、フロントページ・投稿の一覧・共通ヘッダーやフッターなど、どこに使うかを選んで公開します。

MoteRakuをダウンロードする →

解説動画：ダウンロードから使い方まで（声つき・約8分）

WordPress の管理画面での操作は、こちらの動画でくわしく説明しています（2026年7月24日にカツチャンネルで公開した動画です）。

よくある使い方

• トップページだけ AI のデザインにする：MoteRaku のページを作り、反映先で「サイトのフロントページに使う」を選びます。記事はこれまでどおりテーマで表示されます。
• 見本のデザインを使う：デザインギャラリー で持ち帰った見本のコードを貼れば、そのままページにできます。
• メニューはいつもの場所で直す：AI に頼むとき、メニューの場所に {MENU} とだけ書いてもらうと、WordPress の「外観 → メニュー」の中身が入ります。