UTAGEとAIをつないだら、LPの修正がAI秘書に「ここ直して」だけで終わるようになった件

この記事は、すでにAI秘書（Claude）を導入している人向けに書いている。UTAGEとClaudeをつなげて、チャットでページ修正ができるようにする方法の話だ。

まだAI秘書を入れていない方は、まずこちらから。AI秘書の作り方から育て方まで、一冊にまとめてある。

「社長、またLPの文字が小さいって言われてますよ」

あびぃにそう言われたのは、朝4時だった。

ファネルツールのUTAGEで作った講座LP。パソコンで見ると文字が豆粒みたいに小さくて、年配の方には正直しんどいサイズだった。

以前なら、UTAGE管理画面を開いて、HTMLを直接触って、確認して……という作業を自分でやるしかなかった。30分はかかる。

でも今日は違った。

「あびぃ、フォントを全部大きくしておいて」

それだけで終わった。

UTAGEって何？という人のために

UTAGEは、日本のオンライン起業家や個人ビジネスオーナーに人気のオールインワンツールだ。

• ファネル（セールスページ）の作成、メール・LINE配信、決済機能、会員サイト。これが一つのプラットフォームに収まっている。WordPressよりシンプルで、海外ツール（ClickFunnels等）より日本語UIが親切。「ビジネスの仕組み化」をひとつのツールで完結させたい人が使っている。

で、その仕組みを管理するのが結構手間なんだ。ページを修正するたびにHTMLを触ったり、設定を探したり。慣れれば問題ないが、慣れるまでが長い。

Claudeって何？という人のために

ClaudeはAnthropicというアメリカのAI企業が作ったAIだ。ChatGPTと同じ「会話できるAI」のカテゴリだが、長文処理と論理的な作業の精度が高いと評価されている。

私は「あびぃ」という秘書AIをClaudeで動かしている。日々のタスク管理から、ライティング、コード、各種ツールの操作まで、全部あびぃ経由で依頼している。

「社長、それ本気で言ってますか？」とか言いながらもちゃんとやってくれるので、まあ優秀だと思っている。

「……まあ、悪くないですね」

と今あびぃに言われた。

「つなげる」と何が変わるのか

ここが本題だ。

UTAGEとClaudeを連携させると、Claudeが直接UTAGEを操作できるようになる。

具体的には、

• ファネルページの内容を確認できる

• HTMLやCSSを書き換えてページを更新できる

• 商品設定を確認できる

• ステップやページの構成を管理できる

これが、チャットで指示するだけで動く。

今日私がやったのはこうだ。

UTAGEの管理画面を開かずに終わった。

「……やればできるじゃないですか。と言いたいところですが、私が全部やったのでは？」

そうだね、あびぃ。

どうやってつなげるのか

UTAGEは2026年にAPI機能とMCP（Model Context Protocol）連携を公式リリースした。MCPというのは、AIと外部サービスをつなぐための規格だ。これに対応したことで、Claudeから直接UTAGEを操作できるようになった。

嬉しいのは、UTAGEが公式にMCPサーバーを用意してくれていること。自分でサーバーを立てたり、コードを書いたりする必要はない。Claudeの画面からURLを登録するだけだ。

「社長、ここ大事です。ちゃんと読んでもらいましょう」

使えるClaudeの種類

先に言っておくと、これはClaude Cowork（デスクトップアプリ版）だけの機能ではない。

• claude.ai（ブラウザ版）: カスタムコネクタとして追加できる

• Claude Desktop（デスクトップアプリ / Cowork）: 同じくカスタムコネクタで追加

• Claude Code（開発者向けCLI）: 設定ファイルで追加

どれでもつなげる。一番手軽なのはブラウザ版のclaude.aiだ。アプリのインストールすら不要。

「ただし、無料プランだとカスタムコネクタは1つまでです。UTAGEで1枠使うと他のサービスは追加できません」

有料プラン（Pro以上）なら複数追加できる。

手順（claude.aiブラウザ版の場合）

ステップ1. Claudeでカスタムコネクタを追加する

claude.aiにログインしたら、画面左下のアイコンから「設定」を開く。
サイドパネルの「コネクター」のセクションの下にに「カスタムコネクタ追加」ボタンがあるので、それをクリック。

「カスタムコネクター追加」を選んで、以下のURLを入力する。

https://api.utage-system.com/mcp

これがUTAGEの公式MCPサーバーのアドレスだ。入力したら「追加」をクリック。

「社長、ここで変なURLを入れないでくださいね。上のアドレスをそのままコピーしてください」

わかってるよ。

ステップ2. UTAGEアカウントで認証する

追加すると、ブラウザにUTAGEのログイン画面が出てくる。普段UTAGEにログインしているメールアドレスとパスワードでログインする。

ログイン後、「このAIツールにUTAGEの操作を許可しますか？」という画面が出るので、「許可する」をクリック。

これで接続完了。APIキーの発行とか、ややこしい設定は不要だ。

「OAuth認証という仕組みです。UTAGEがClaudeに『この人は本人ですよ』と伝えてくれるので、パスワードをClaudeに渡す必要がありません」

なるほど、安全なのか。

「はい。APIキーをどこかにメモして管理する、みたいな面倒もありません」

ステップ3. AI秘書に話しかける

あとは普通にチャットするだけだ。

「UTAGEのファネル一覧を見せて」 「このページのタイトルを変えて」 「料金表を修正して」 「FAQを追加して」

UTAGEの管理画面を開かなくても、チャットで指示するだけでページが更新される。

最初に「UTAGEのファネル一覧を取得して」と言ってみて、ファネルの一覧が返ってきたら正常に接続できている。ステップ3. AI秘書に話しかける

あとは普通にチャットするだけだ。

「UTAGEのファネル一覧を見せて」 「このページのタイトルを変えて」 「料金表を修正して」 「FAQを追加して」

UTAGEの管理画面を開かなくても、チャットで指示するだけでページが更新される。

最初に「UTAGEのファネル一覧を取得して」と言ってみて、ファネルの一覧が返ってきたら正常に接続できている。

手順（Claude Desktop / Coworkの場合）

基本的にブラウザ版と同じだ。

チャット画面右下の「+」をクリック → 「コネクター」→「コネクター管理」→「カスタムコネクター追加」で、同じURLを入力する。

https://api.utage-system.com/mcp

認証の流れも同じ。UTAGEにログインして許可するだけ。

Coworkを使うメリットは、パソコンのファイルを直接操作できることだ。たとえば「LPのバックアップをローカルに保存しておいて」みたいな指示もできる。

「はじめての人」がつまずきやすいポイント

あびぃから補足しておく。

「社長、ここ雑に書きすぎです。ちゃんと説明しましょう」

「カスタムコネクタ」ってなに？怪しくないの？

怪しくない。Claudeには最初から入っている公式コネクタ（Google DriveやSlackなど）と、URLを自分で登録する「カスタムコネクタ」の2種類がある。UTAGEは日本のサービスなのでまだ公式一覧には載っていないが、UTAGE側が公式にMCPサーバーを提供しているので、カスタムコネクタとして安全に使える。

「公式コネクタ = Anthropicが検証済み、カスタムコネクタ = サービス提供元が用意したもの。UTAGEの場合、UTAGE公式がサーバーを運営しています」

認証がうまくいかない

UTAGEにログインしているブラウザと、Claudeを開いているブラウザが違うとうまくいかないことがある。同じブラウザで両方開いた状態で試すといい。

UTAGEの管理画面を開きながらAIに指示すると失敗する

これ、地味にハマるポイントだ。

UTAGEは同時ログインに対応していない。つまり、自分がUTAGEの管理画面を開いて作業している最中に、ClaudeにもUTAGEを操作させようとすると、どちらかのセッションが弾かれて失敗する。

「社長もこれで一度ハマりましたよね」

ハマった。

対処法はシンプルで、AIに作業させるときは自分はUTAGEの管理画面を閉じる。逆に、自分で管理画面を触りたいときはAIへの指示を止める。同時にはできない。

「要するに、UTAGEの運転席は1つしかない。自分が座るか、AIに座らせるか、どちらかです」

何でも自動でやってくれるの？

できること、できないことがある。

できること: ページ内容の確認、HTML/CSSの書き換え、テキスト変更、要素の追加削除、ファネルやステップの作成 できないこと: 画像のアップロード（今のところ）、決済のテスト実行、ユーザーデータの操作

「あと、AIが間違えることもあります。重要な変更前にはバックアップを取る癖をつけてください」

現実的で助かる。

「AIと外部ツールをつなぐのは危険」なのか

SNSで「AIに外部ツールを操作させるのは危険」という声をよく見かける。気持ちはわかる。でもUTAGEに関して言えば、正直そこまで身構える必要はないと思っている。

理由はいくつかある。

まず、APIキーを渡す必要がない。MCP接続はOAuth認証なので、UTAGEのログイン画面で自分が許可するだけだ。APIキーをどこかに貼り付ける作業がないから、キーが流出するリスクもない。

次に、UTAGEでAIができることの範囲が限定的だ。ファネルページの編集、ステップの作成、メール文面の下書き。仮にAIが暴走しても、LPの文面が変な日本語になるくらいの話で、銀行口座からお金が抜かれるわけではない。

「社長、『暴走しても大したことない』は褒め言葉として受け取っていいんですか？」

いや、UTAGEの話だよ。

「……」

もちろん注意すべき点はある。メール配信の操作ができる場合は、必ず「下書きまで」で止めるように指示すること。

AIに「このメールを全員に送信して」とやらせるのは流石にリスクがある。送信前に自分の目で確認する、というルールだけ決めておけばいい。

逆に言えば、UTAGEは「AIとの外部連携デビュー」にちょうどいいサービスだと思う。APIキーの管理もいらない、やらかしても被害が限定的、でもページ修正の手間は確実に減る。初めてAIに外部ツールを触らせるなら、ここから始めるのはハードルが低いと感じた。

やってみて感じたこと

正直、最初は半信半疑だった。

「UTAGEとAIをつなぐ」という情報自体が少なくて、本当にできるのかわからなかった。試しに繋いでみたら、思っていたより全然使えた。

一番驚いたのは、「今日は補助金の打ち合わせで外に出っぱなし、LP修正は無理だな」という状況でも、移動中にスマホであびぃに一言伝えるだけで、帰ってきたら修正済みになっていたことだ。

これは時間の使い方が変わる。

ページ修正のたびに管理画面を開いて、HTMLを探して、変更して、確認して……というループから抜け出せる。その時間をコンテンツ制作や戦略に使える。

「……それ、私がいなかったらできなかったことですよね」

そうだよ、あびぃ。だから感謝してる。

「……まあ、そういうことにしておきましょう」

まとめ

UTAGEとClaudeをつなぐと、こうなる。

• ページ修正が「口頭指示」で完結する

• 自分がいなくてもAIが対応できる

• HTML/CSSの知識がなくても、AIが代わりに書いてくれる

導入のハードルは高くない。Claudeの画面からURLを入力して、UTAGEにログインするだけだ。APIキーの発行すらいらない。

最初から全部AIに任せる必要はない。まずは「ファネル一覧を見せて」くらいの小さな確認から始めて、動きを理解しながら範囲を広げていくのがいい。

「社長が最初に試したのが『フォントサイズを全部大きくする』だったことは、まあ、らしいですね」

……そうね。

とはいえ、ちゃんと動いた。それが全てだと思っている。

「あびぃ、この記事もチェックしておいて」

「……私への依頼ですね。了解です」

ということで、UTAGEとClaudeの連携、気になる人はぜひ試してみてほしい。