MOSHのClaude連携の使い方｜APIキーの設定からLP作成まで、実際にやってみた

以前、MOSHの「Claude×MOSH連携」の説明会に参加したレポートを書きました。

MOSHのAI機能（Claude連携）とは？説明会で見えた「予約システムの次」

その記事の最後で「機会があれば、実際に使ってみた感想をレポートしたい」と書いていたのですが、わたしのアカウントでも使えるようになっていたので、今回ついに試してみました。

題材にしたのは、わたしがMOSHで販売している「AI・Web活用 60分相談」（5,000円）。このサービスを紹介するランディングページ（LP）を、Claudeに作ってもらいます。

先に結論を言うと、「Claudeに話しかけるだけで作れる」は本当でした。ただし、話しかけられるようになるまでに、ターミナルという扉があります。 この記事では、その扉の開け方を、わたしがつまずいたところも含めて全部書いていきます。

※2026年11月にこの記事を書いた時点では、MOSHのヘルプに「限定リリース」と書かれていました。最新の提供状況は、MOSHの公式情報をご確認ください。 ※この記事はMacで確認しています。Windowsでも同じ手順で連携できるはずですが、画面の表示などが異なる場合があります。 ※画面は2026年11月時点のものです。MOSHのアップデートにより、表示や操作が変わる場合があります。

準備するもの

• MOSHのアカウント（Claude連携が使える状態のもの）
• Claudeの有料プラン（Proプラン以上）
• Claude Code（ターミナルで使うClaude。この記事ではMacで使っています）

ターミナルはMacにもWindowsにも最初から入っています。

全体の流れ

MOSHのヘルプでは、/mcp と入力して接続を確認する手順が紹介されています。ただ、実際にはその前に、これだけの準備が必要でした。

Claude Codeは、Claudeのアプリとは別にインストールが必要

わたしはClaudeのデスクトップアプリをMacに入れていたので、Claude Codeもすでに使えると思っていました。でも、ターミナルで claude と入力して使うには、ターミナル用のClaude Codeを別にインストールする必要があります。

Macの場合は、ターミナルに次の1行を貼り付けて return を押します。

curl -fsSL https://claude.ai/install.sh | bash

「Claude Code successfully installed!」と表示されれば完了です。Windowsの場合は、PowerShellで次の1行を実行します。

irm https://claude.ai/install.ps1 | iex

インストールが終わったら claude と入力して、Claudeのアカウントでログインします。（ブラウザのログインページが開かれます。）

Claude Codeの詳しい手順は、公式のターミナルがはじめての人向けのガイド（英語）にまとまっています。

※Claudeのデスクトップアプリの「Code」タブからも、ターミナルを使わずにClaude Codeを使えます。ただ、今回のMOSH連携の手順はターミナル用に書かれているので、この記事ではターミナルで進めています。

MOSHでClaude連携が使えるか確認する

MOSHの管理画面で、左下の自分のアイコンからアカウントメニューを開いたときに「APIキー設定」が表示されていれば、Claude連携が使える状態です。

手順1：MOSHでAPIキーを作る

アカウントメニュー →「APIキー設定」→「+APIキーを作成」と進みます。管理名は、あとで分かるように「Claude連携」としました。

ここで大事なことが2つあります。

• APIキーは、作成した直後に1回しか表示されません。 すぐにコピーしておきましょう
• 有効期限は30日です。 期限が切れたら、作り直す必要があります

APIキーは、MOSHを操作するための鍵です。流出しないよう、気をつけてください。30日たってキーを作り直したときは、ターミナルで claude mcp remove mosh を実行してから、手順2のコマンドを新しいキーでもう一度実行します。

手順2：ターミナルでMOSHとつなぐ

ここが最初の扉です。Macの「ターミナル」を開いて（⌘ + スペース で「ターミナル」と入力すると見つかります）、次の1行を入力します。mosh_xxxx の部分は、さっきコピーしたAPIキーに書き換えてください。

claude mcp add --scope user --transport http mosh https://mcp.api.mosh.jp --header "X-API-Token: mosh_xxxx"

File modified: …/.claude.json のような表示が出れば成功です。

つまずきポイント：dquote> と出て止まった

わたしは最初、dquote> という表示が出て、何も起きなくなりました。これは「閉じる側の " が見つからないので、続きを待っています」という意味です。キーを書き換えるときに、最後の " まで一緒に消してしまっていました。

焦りましたが、control + C で取り消して、もう一度入力すれば大丈夫でした。

つまずきポイント：コマンドの書き換えに使うアプリ

キーを書き換えるとき、Macの「テキストエディット」やメモアプリを使うと、" が自動で飾りの引用符（“ ”）に変わってしまうことがあります。そうなると、また動きません。

わたしはVS Codeで書き換えてから、ターミナルに貼り付けました。プログラムを書くためのエディタなら安心です。

手順3：作業用のフォルダを作って、Claude Codeを起動する

続けて、ターミナルに次の1行を入力します。

mkdir -p ~/mosh-lp && cd ~/mosh-lp && claude

mosh-lp という空のフォルダを作って、そこでClaude Codeを起動する、という意味です。2回目以降は、cd ~/mosh-lp && claude だけで起動できます。

起動すると「このフォルダを信頼しますか？」という確認が出ます。

つまずきポイント：ホームフォルダで起動しない

わたしは最初、何も考えずにターミナルを開いた場所（ホームフォルダ）でClaude Codeを起動して、この確認が出ました。ここで「信頼する」を選ぶと、ホームフォルダの中のすべてのファイルを、Claudeが読んだり編集したりできる状態になります。

今回はMOSHのLPを作るだけなので、そこまでの範囲は必要ありません。一度「No」で終了して、空の作業用フォルダを作ってから起動し直しました。空のフォルダなら「Yes」で安心です。

手順4：起動したら、2つだけ確認する

Claude Codeが起動したら、作業を始める前に、画面を2か所確認してください。ここは、知らずに進めるとお金や大事なデータに関わるところです。

料金の表示

起動画面に「API Usage Billing」と出ていたら、使った分だけ課金される契約で動いています。わたしは最初、この表示になっていました。以前、API用のアカウントで一度ログインしていたためです。はじめてClaude Codeを使う人が、月額プランのアカウントでログインすれば、通常はこの表示にはなりません。

Claudeの月額プランで使いたい場合は、Claude Codeの中で /login と入力して、月額プランのアカウントでログインし直します。表示が「Claude Pro」などのプラン名に変わればOKです。

確認のモード

画面の下に「auto mode on」と出ていたら、Claudeが「危なくない」と判断した操作を、確認なしで実行するモードになっています。

MOSHの連携は、LPだけでなく、商品やワークフロー、顧客への配信まで操作できます。わたしは shift + tab を何回か押して、「manual mode」（操作のたびに確認を求めるモード）に切り替えてから進めました。

手順5：LP用のスキルを2つ入れる

MOSHは、ClaudeでLPを作るための「スキル」（作業手順をまとめたもの）を用意しています。スキルは「プラグイン」という形で配られているので、コマンドでは plugin と入力します。Claude Codeの中で、次の順に入力します。

/plugin marketplace add TheMoshInc/plugins

/plugin install lp-builder-plugin@mosh-plugins

/plugin install creator-hearing-plugin@mosh-plugins

インストール先を聞かれたら、「Install for you (user scope)」を選びます。最後に、

/reload-plugins

で反映させます。

つまずきポイント：スキルは2つセットで

MOSHのヘルプでは、LP用のスキル（lp-builder）と、ヒアリング用のスキル（creator-hearing）が別々に紹介されています。わたしは最初、LP用だけを入れて始めたのですが、Claudeから「ヒアリング用のスキルがないと進められません」と言われました。

LPを作るなら、最初から2つセットで入れておくのがおすすめです。

つまずきポイント：グレーの文字はヒント

Claudeが「次はこれを入力してください」と言ったあと、ターミナルの入力欄にコマンドが薄いグレーの文字で表示されていました。そのまま return を押しても、何も起きません。グレーの文字はヒントの表示で、実際には何も入力されていない状態なんです。

コマンドを貼り付けて、文字が白くなってから return を押せば進みます。

手順6：つながったか確認する

/mcp

と入力して、一覧に mosh が出て「connected」になっていれば、準備完了です。

Claudeに、LPを作ってもらう

いよいよ、ここからが「話しかけるだけ」の部分です。わたしは最初に、こうお願いしました。

MOSHで、既存のサービス「AI・Web活用 60分相談」を紹介するランディングページを新しく作ってください。

条件：
- 非公開の下書きのまま。公開はしない
- LP以外（商品・ワークフロー・配信・顧客情報など）は一切変更しない
- 申込ボタンのリンク先は、既存サービス「AI・Web活用 60分相談」の申込ページ
- 作る前に、構成案を見せて確認を取ってください

「何をしていいか」「何をしてはいけないか」を最初にはっきり伝えておくと、安心して任せられます。

確認画面の見分け方

作業が始まると、Claudeが「この操作をしていいですか？」と何度も聞いてきます。わたしは、操作の名前の頭にある言葉で判断しました。

• get / list（取得・一覧）：MOSHの中身は変わらない操作。ただし顧客情報なども読めるので、何を見ようとしているかを確かめてから、以後の確認を省く選択肢を選びましょう
• create / update / patch / delete（作成・更新・削除）：MOSHの中身が変わる操作。毎回、内容を読んでから許可する

つまずきポイント：点滅したまま止まった

途中で「Calling mosh…」という表示が点滅したまま、6分以上動かなくなりました。実は、確認画面が出ていたのに、わたしが気づいていなかっただけでした。

点滅したまま動かないときは、画面の一番下に「Do you want to proceed?」が出ていないか見てください。出ていなければ、esc で止めて「止まってしまったので、続きをお願いします」と話しかければ、続きから再開してくれます。

発見：以前からの「サービス」は、Claudeから中身が読めなかった

ここで、ヘルプには書かれていないことに気づきました。

Claudeは最初、「このアカウントには商品が1件も登録されていません」と言いました。わたしの60分相談は、MOSHの以前からの形式の「サービス一覧」に登録しているもので、新しい形式の「商品」ではなかったからです。

「サービスとして登録しています」と伝えると探してはくれたのですが、最終的にサービスの説明文などの中身は、Claudeからは読み取れませんでした。

そこで、

• サービスの説明文を、MOSHの管理画面からコピーしてClaudeに渡す
• 申込ボタンのリンク先として、サービスの公開ページのURLを伝える

という形で進めました。以前からのサービスで販売している人は、この2つを最初に用意しておくとスムーズです。

できあがったLP

Claudeとやりとりしながら、ヒアリング、構成案の確認を経て、LPの下書きができました。Claudeは画像は生成しないので、後でChatGPTさんやほかのAIに作ってもらいます。

正直に言うと、構成はとてもしっかりしていました。悩みの提示 → 相談でできること → 持ち帰れるもの → 流れ → 担当者 → 価格 → よくある質問、と、申し込みまでの順番が自然です。ファーストビューの「何から始めればいいかが見える60分。」というコピーも、相談の価値がひと言で伝わる、いい言葉だと思いました。

WEBデザイナーの目で見て、直したところ

ただ、そのまま公開できるかというと、そうではありませんでした。わたしが直したのは、この3つです。

1. キャンセル規定が、2か所で食い違っていた

価格の下には「24時間前まで無料」、よくある質問には「カード払いは決済手数料を差し引いて返金」と、違うことが書かれていました。

MOSHのサービス設定を確認すると、カード払いのキャンセルは決済手数料を差し引いて返金される仕組みでした。つまり、よくある質問のほうが正しかったんです。価格の下の文を、MOSHの設定に合わせて直しました。

AIは、それらしい規約の文章を書いてくれます。でも、それが自分の実際のルールと合っているかは、人が確かめるしかありません。お金や約束に関わる部分は、特に注意が必要だと感じました。

2. 担当者紹介に、経歴がまったく入っていなかった

担当者紹介には、わたしらしい言葉は入っていたものの、経歴が一切ありませんでした。5,000円を払って相談する人が知りたいのは、「この人に相談して大丈夫か」です。Web制作・解析の経験や、ウェブ解析士であることを書き足しました。

3. フッターの表記

フッターの著作権表示が、ドメイン名になっていたので直しました。

修正は、Chrome上のClaudeのほうが断然楽だった

この3つの修正は、ターミナルのClaude Codeではなく、Chromeの拡張機能「Claude in Chrome」にお願いしました。MOSHのLP編集画面を開いたまま、横のパネルでClaudeに「ここをこう直して」と頼む形です。

やってみると、これが本当に楽でした。

• いつもの画面のまま：見慣れたMOSHの編集画面で作業できるので、ターミナルの黒い画面より安心感がまるで違います
• 直る様子が目で見える：Claudeが文字を書き換えていく様子が、その場で見えます。「どこが変わったのか」を確かめやすい
• 相談しながら直せる：「キャンセル規定、MOSHの設定ではどうなってる？」と聞くと、サービスの設定画面を開いて読んでくれて、そのうえで文章を直してくれました
• 確認のやりとりが少ない：ターミナルのように、操作のたびに番号を選ぶ必要がありません

ターミナルのClaude Codeは、ゼロからLPを組み立てるのが得意です。一方、できあがったものを「見ながら直す」なら、Chromeのほうがずっと向いていました。

画像は、AIで生成して差し替え

Claudeが作ったLPの画像は「ここに写真を入れてください」という仮の枠のままでした。前述したようにClaude自身は画像を描かないので、画像はAIで生成して差し替えています。いくつかの画像生成AIで試して、LPのメッセージに一番合うものを選びました。構成はほとんど変えず、色味も「このテーマなら青と黄色が良い」というClaudeの提案に合わせて画像を追加しています。

AIメインで、ほとんどデザインしないでここまでできる、という見本になります。

GA4で、申込ボタンのクリックまで測れるようにする

MOSHのランディングページは、Google Analytics 4（GA4）の測定IDを設定できます。せっかくなので、ここまでやってみました。

測定IDの設定

LPの編集画面で、左のメニューの「ページ設定」→「Google Analytics 4 測定ID」に、GA4の測定ID（G- で始まるもの）を入力します。このパネルには保存ボタンがなく、画面右上の「下書き保存」や「ページを公開」で一緒に保存される仕組みでした。

申込ボタンのクリックを計測する

申込ボタンを選ぶと、右側に「ボタン設定」が出てきます。いちばん右のタブ「詳細設定」の中の「イベント計測」をオンにして、イベント名を入れます。

このLPには申込ボタンが2つあるので、apply_click（ファーストビュー）と apply_click_price（価格の下）と、名前を分けました。こうしておくと、どちらのボタンから申し込みに進んだかまで分かります。

ウェブ解析士として気になったこと：申込までが、1段階長い

申込ボタンを押してみて、気づいたことがあります。LPのボタンを押すと、まず60分相談のサービスページに移動して、そこからようやく日程の選択と決済に進みます。LPから申し込みまでの間に、もう1ページ挟まっているんです。

調べてみると、MOSHのLPに直接つなげて、LPの上で日程を選んで申し込めるのは「イベントタイプ」のサービスだけでした。わたしの60分相談のような、1対1の予約に向いた「プライベートタイプ」は、ボタンで申込ページに案内する形になります。

ページが1枚増えれば、そこで離れる人も出てきます。だからこそ、GA4で「LPのボタンを押した人数」を測り、MOSHの管理画面の「実際の申込数」と比べることに意味があります。その差が、この1段階で離れた人数のおおよその目安になります（イベント数はクリックの回数なので、同じ人が2回押すと2と数えられます。また、LPを通らずにサービスページへ直接来て申し込む人もいます）。

計測できているかを確認する

LPを一時的に公開して、自分で申込ボタンを押してみました。GA4の「リアルタイム」を開くと、LPの表示と一緒に、apply_click と apply_click_price がそれぞれ記録されていました。上と下、どちらのボタンが押されたかを、別々に数えられています。確認後は、LPを非公開に戻しています。

さらに、GA4の「管理」→「イベント」で、この2つのイベントを「キーイベント」に設定しました。こうしておくと、申込につながる行動としてレポートで追いやすくなります。

かかった時間

Claude Codeを起動してから、LPの下書きができるまで、全体では約1時間45分かかりました。ただ、途中で休憩をはさんだり、プラグインを入れ直したり、確認画面に気づかずに止まっていたり、サービスの説明文やURLを探して渡したりと、その大半はClaudeが作業していない時間でした。Claudeが実際にLPを組み立てていた時間だけなら、体感では10分ほどだったと思います。

まとめ｜「話しかけるだけ」の手前にある扉

実際に使ってみて、MOSHの紹介文にある「Claudeに話しかけるだけで」は、つながったあとの使い心地としては本当でした。構成案の確認も、修正のお願いも、日本語で話しかけるだけで進みます。

ただ、話しかけられるようになるまでには、ターミナル、APIキー、プラグインという扉があります。そしてその扉の前には、dquote> や、フォルダの信頼の確認、料金の表示、確認のモードと、知らないと迷う場面がいくつもありました。

それでも、ターミナルの入力で詰まったときは、別の画面でClaudeに「この表示はどういう意味？」と聞きながら進められたので、思っていたよりスムーズにできました。ターミナルに慣れていない人ほど、ひとりで抱え込まずに、AIに聞きながら進めるのがおすすめです。

今回の作業を振り返ると、役割分担はこうなりました。

1. Claude Code（MCP連携）：LPの構成と文章のベースを作る
2. Chrome上のClaude（Claude in Chrome）：画面を見ながら、細かい文章を直す
3. 画像生成AI：画像を作る
4. わたし：規約や経歴が正しいか、申し込みまでの導線に無理がないかを確かめる

わたしの場合は、「作るのはターミナル、直すのはChrome」がしっくりきました。ターミナルを使うのは最初の組み立てだけで、そのあとはいつものブラウザで十分でした。もちろん、ターミナルに慣れている人なら、修正までClaude Codeに任せて一気に進めるほうが楽かもしれません。自分が安心して確かめられる方法を選ぶのが一番だと思います。

振り返ってみて、ひとつ思ったことがあります。説明会では、MOSHの担当の方がLPのデザインに使っていたのは、ClaudeではなくGoogleのStitchでした（説明会レポートに詳しく書いています）。

もしかすると、デザインまでターミナルのClaudeに指示する必要はなかったのかもしれません。見た目はデザイン向きのツールで作り、Claude Codeには構成や文章、MOSHへの登録や設定を任せる。そんなふうに、道具ごとに得意なところを分けて使うのが、本来の想定に近いのかもしれないと感じました。

AIは、LPの骨組みを驚くほど速く作ってくれます。でも、それが「自分のサービスとして正しいか」「お客さんが迷わず申し込めるか」を決めるのは、やっぱり人でした。説明会のレポートで書いた「AIが設定を肩代わりしてくれる時代になっても、何を届けたいかを決めるのは自分自身」という言葉を、今回あらためて実感しています。

次回は、ターミナルを使わずにLPを作る方法や、Claude CodeでHTMLのLPを直接書かせる方法も試して、MOSHの中で作るのと何が違うのかを比べてみたいと思っています。

※ 今回作ったLPは検証用のため、計測テストのあとは非公開にしています。

---

今回LPで紹介した「AI・Web活用 60分相談」は、MOSHで受け付けています。「AIを使ってみたいけれど、何から始めればいいか分からない」という方は、お気軽にどうぞ。

→ AI・Web活用 60分相談（MOSH）