Claude Code で作ったランディングページを、そのまま公開する方法

Claude Code にランディングページを頼むと、よくできた index.html が手元に残ります。そこから先が、意外と手間です。リポジトリ、公開先、フォームの受け口、アクセス解析のタグ、DNS。

このガイドは、よくあるやり方と、Convika の MCP サーバーを Claude Code につないで、それぞれを一言で頼むやり方を比べます。コマンドを使わずに、ダッシュボードからファイルを公開する方法も説明します。

Claude Code から公開する 4 つの方法

Claude Code は、自分のパソコンで動いてファイルを編集するツールです。作ったページは、アーティファクトとして claude.ai に公開できます。

ただ、アーティファクトはバックエンドのない 1 枚のページで、アドレスも claude.ai のままです。申し込みを受けたい、自分のドメインで出したいなら、ほかの公開先に置きます。それぞれの違いは下の表のとおりです。

すでに公開しているアプリの一部なら、そのリポジトリに置くのが自然です。ローンチの告知、事前登録、広告の受け皿のような単独のページなら、Convika のほうが手入れが少なく済みます。

Vercel の無料の Hobby プランで公開するつもりなら、商用に使えるかを Vercel の Hobby プランは商用利用できる？ で先に確かめてください。

ホスティングの鍵を Claude Code に渡さずに公開する

Convika につなぐときは、ブラウザで Convika にログインするだけです。鍵をファイルや会話に貼り付けることはありません。

サインインの情報は Claude Code が安全に保存して自動で更新し、claude mcp remove convika を実行すれば、保存したトークンも削除されます（出典: Claude Code の MCP のドキュメント）。もう 1 つの違いは、届く範囲です。つないだあと Claude Code が使えるのは、ページの保存、プレビュー、公開、ロールバック、フォーム、アクセス解析、ドメインの設定といった、Convika のページのためのツールだけです。

公開先ごとに、Claude Code が届く範囲

Vercel の MCP サーバーもブラウザでサインインするので、サインインの方式だけでは差がつきません。

違うのは、つないだあとに届く範囲です。下の表は、各社のドキュメントで 2026 年 10 月 12 日に確かめました。

Claude Code が Convika でできること

つなぐときは、ブラウザで Convika にログインしたあと、「アクセス許可」の画面で、AI クライアントにアカウントへのアクセスを許すかを「許可する」か「拒否する」で選びます。そのあと Claude Code が使えるのは、Convika の 52 のツールです。中身は次のとおりです。

• ページ: ページの作成、新しいバージョンの保存、プレビューのリンク、公開、ロールバック、公開停止
• フォーム: フォームの追加、送信内容の読み取りと書き出し
• アクセス解析とゴール: 訪問数、流入元、デバイス、ボタンのクリック、AI が読んだ回数、Google 検索のクリック数と検索語句、コンバージョンのゴール
• ドメイン: サブドメインの接続と状態の確認、AI ボットの許可と拒否。CNAME と TXT のレコードは Convika が示し、DNS 事業者で追加するのは自分
• 共有: 紹介用のリンクと、作ったページをほかの人に引き渡すリンク

プランや支払いの変更、DNS 事業者へのログイン、ページの削除をするツールはありません。Convika のページは 1 つの HTML なので、触れられる環境変数やデータベースもありません。

公開する前に起きること

変更は保存のたびに新しいバージョンになり、Claude Code は既定で、非公開のプレビューのリンクを作って見せます。リンクにはランダムな 64 文字が入り、検索エンジンには載せないよう指示していて、1 時間で開けなくなります。

公開中のページが変わるのは Claude Code が公開したときだけで、Convika のツールは、公開は頼まれたときだけにするよう Claude Code に伝えています。公開（1 ページずつと、まとめて）、ロールバック、公開停止、ページのパスの変更、独自ドメインのアドレスでの配信を止めるツールと、独自ドメインを外すツールには、公開中のページを変えるツールだという印が付いています。毎回確かめたいなら、Claude Code の 権限の設定 で、次のコードのようにこの 7 つを確認ルール（ask）に入れておきます。Claude Code は、使うたびに承認を求めます。

{
  "permissions": {
    "ask": [
      "mcp__convika__publish_site",
      "mcp__convika__publish_pages",
      "mcp__convika__rollback_site",
      "mcp__convika__unpublish_site",
      "mcp__convika__move_page",
      "mcp__convika__disable_domain_route",
      "mcp__convika__remove_domain"
    ]
  }
}

元に戻すには

Claude Code に以前のバージョンに戻すよう頼むか、ダッシュボードの「バージョン履歴」で「この版に戻す」を押します。ページを止めたいときは、Claude Code に公開停止を頼むか、「公開を停止する」を押します。コンテンツは残り、あとで公開し直せます。

保存したバージョンは Free で 10 件、Pro で 50 件まで残り、公開中のバージョンと、いまのプレビューのバージョンは消えません。

CLI で公開するなら

Claude Code の 設定のドキュメント は、.env ファイルを読ませない例として、Read(./.env) と Read(./.env.*) を拒否ルール（deny）に入れる設定を載せています。ただし 権限のドキュメント によると、このルールが効くのは Claude Code のファイル操作と、cat のように Claude Code が認識するコマンドまでで、Python や Node のスクリプトが自分でファイルを開く場合は対象外です。そこまで防ぐなら、サンドボックスを有効にします。

トークンは、アカウント全体ではなく 1 つのプロジェクトに絞って作ります。Vercel も、作業に足りるいちばん狭いスコープを選ぶよう 勧めています。Claude のアーティファクトを共有したときにだれが見られるかは、アーティファクトを見られる人と、Google 検索に出るかどうか で説明しています。

Convika で公開する 5 つの手順

Convika の無料アカウントを作る

app.convika.com で登録します。Free プランはカード登録なしで使えます。

Claude Code に Convika をつなぐ

ターミナルで、次のコマンドを実行します。

claude mcp add --transport http convika https://mcp.convika.com

すべてのプロジェクトで使うときは、--scope user を付けます。

続けて Claude Code の中で /mcp を開くか、シェルで claude mcp login convika を実行し、ブラウザで Convika にログインして「許可する」を押します。オプションとログインの流れは、Claude Code の MCP のドキュメント にあります。

claude mcp add の代わりに、Convika のプラグインを入れてもつなげます。プラグインの publish-page スキルは、非公開のプレビューを見せてから、公開してよいかを聞きます。上のコマンドでつないだあとに入れるときは、先に claude mcp remove convika で外します（入れ方は Claude Code と Codex のスキルの違い）。

ページを保存して、プレビューを開く

Claude Code に「landing/index.html を Convika に新しいサイトとして保存して、プレビューのリンクを見せて」と頼みます。Claude Code がファイルを読み、HTML を送ります。

Convika は 1 ページを 1 つの HTML として保存し、ツールは Tailwind CSS v3 を CDN から読み込む書き方を求めます。Vite や Next.js などのビルドで作ったページは、先に「ビルドなしで動く 1 つの HTML ファイルにして」と頼んでください。画像は公開されている URL にするか、ファイルに埋め込みます。

フォームを付けて公開する

「見出しの下に、名前とメールアドレスの事前登録フォームを付けて。それから公開して」と頼みます。ページは yourproduct.convika.page のようなアドレスで公開されます。

プレビューから送ったテストの送信は確認だけで保存されないため、本番の登録者に混ざりません。

独自ドメインをつないで、結果を聞く

「launch.example.com をつないで」と頼むと、Convika が DNS に追加する CNAME と TXT のレコードを返します。ドメインを買ったサービスでそのレコードを追加すれば、SSL 証明書は自動で発行されます。「example.com をつないで」と頼んだときは、www.example.com をつなぎ、example.com を www.example.com に転送するための A レコードも返します。

公開から数日たったら、「今週、どこから来た人が登録した？いちばん押されたボタンはどれ？」と聞きます。Claude Code が Convika から、訪問数、UTM の流入元、デバイス、ボタンのクリック、フォームの送信を読んで答えます。

コマンドを使わずに公開する

ターミナルを使わなくても、Claude Code が作った HTML ファイルはダッシュボードから公開できます。管理画面で「HTMLファイルをアップロードする」を押し、「ファイルから」でファイルを選ぶか、「コードから」にコードを貼り付けて、「プレビューをつくる」を押します。プレビューを確かめたら、「ページを公開する」を押し、「このページを開ける人」で「一般公開」を選んで「次へ」を押します。はじめての公開では、続いて大きな「無料で公開する」のボタンが出ます。押すとすぐに公開され、ページの下に Convika のバナーが出ます。出したくないときは、その下の「Convika のバナーなしで公開する」から Pro のお申し込み画面に進みます。お申し込み画面の大きなボタン「1日間無料で申し込む」は、カードを登録して始める Pro のトライアルで、最初の 1 日間のあとは、解約しなければ月 ¥1,800 かかります。アップロードに AI クレジットは使いません。フォームは「フォームを追加する」、独自ドメインはページの画面の「独自ドメインをつなぐ」から、どちらもダッシュボードで追加できます。

Claude Code で作ったレポートやスライドを、Claude を使っていない人に送る方法は、ガイド Claude で作った HTML を、Claude のアカウントがない人にも見せる方法 にあります。スライドを URL で発表するまでの手順は、ガイド Claude・Gemini で作った HTML スライドを、URL で共有する方法 にあります。登録する前に見え方だけ確かめたいなら、Convika の 無料の HTML 公開ツール で、登録なしのプレビューのリンクを作れます。

Claude Design から来たとき

Claude Design のガイド によると、デザインは右上の「エクスポート」から「スタンドアロンHTMLとしてエクスポート」で書き出せるほか、「Claude Codeへのハンドオフ」で Claude Code に引き渡せます。

引き渡したら、「このデザインを 1 つの HTML ページにして」と頼み、上の手順 3 に進みます。

公開するだけなら Claude Code は不要です。書き出した HTML ファイルをそのままアップロードする手順は、ガイド Claude Design で作ったページを、誰でも開けるリンクで公開する方法 にあります。チャットで作ったページの公開は、ガイド Claude で作ったページを、自分のドメインで公開する方法 にあります。

Codex など、ほかの MCP クライアントで使う

リモートの MCP サーバーに対応したクライアントなら、同じサーバーを使えます。クライアントの MCP の設定に https://mcp.convika.com を追加し、ログインを済ませてください。このガイドで Claude Code に頼んだことは、同じ言い方で頼めます。

サブエージェントにページを作らせたいときや、1 つのサブエージェントだけに Convika のツールを使わせる設定（Claude Code の mcpServers や disallowedTools、Codex の disabled_tools）については、Claude Code と Codex のサブエージェントの違いをご覧ください。

Claude の Web 版やデスクトップ版では、コネクタとして追加します（くわしくは 公開と修正を Claude に任せる）。

よくある質問

Claude Code だけで Web サイトを公開できますか？

1 枚のページなら公開できます。Claude Code はページをアーティファクトとして claude.ai に公開でき、Claude Code のドキュメントによると、公開リンクはサインインなしでだれでも開けます（Team と Enterprise は、オーナーが公開共有を有効にしてから）。ただし、アーティファクトはバックエンドのない 1 枚のページで、申し込みフォームの送信を受け取れず、アドレスも claude.ai のままです。自分のドメインで出すなら、Vercel や Netlify のコマンドラインツールをインストールしてログインしておき、Claude Code に実行させるか、このガイドのように Convika をつなぎます。Claude Code で作ったレポートやスライドを、Claude を使っていない人に送るなら、ガイド Claude で作った HTML を、Claude のアカウントがない人にも見せる方法 があります。

Claude Code に .env を読ませない設定はできますか？

設定ファイルの拒否ルールに Read(./.env) と Read(./.env.*) を入れます。Claude Code の設定のドキュメントに、そのまま例があります。権限のドキュメントによると、このルールが効くのは Claude Code のファイル操作と、cat などの Claude Code が認識するコマンドまでで、Python や Node のスクリプトが自分でファイルを開く場合は防げません。そこまで防ぐならサンドボックスを使います。Convika で公開する場合は、ブラウザでのログインでつながるので、.env に入れる鍵はありません。

Vercel のトークンを Claude Code に渡しても大丈夫ですか？

トークンでできることは、そのスコープで決まります。Vercel のトークンは、アカウント全体、1 つのチーム、1 つのプロジェクトのどれかに絞れて、Vercel は作業に足りるいちばん狭いスコープを選ぶよう勧めています。Vercel の MCP サーバーはブラウザでサインインしますが、Vercel のドキュメントによると、Vercel のユーザーアカウントと同じアクセスを AI に渡します。Convika の接続で届くのは、Convika のページのためのツールだけです。プランや支払い、環境変数、DNS のレコード、ページの削除には届きません。

Claude Code と Convika をつなぐと何ができますか？

Convika の 52 のツールでページの作成から公開、運用の操作まで行えます。ページの作成と新しいバージョンの保存、プレビューのリンク、公開、ロールバック、公開停止ができます。フォームの追加と、送信内容の読み取りと書き出しも可能です。コンバージョンのゴールの設定と、アクセス解析と Google 検索の数字の読み取り、サブドメインの接続と、そのサブドメインを読める AI ボットの設定もできます。紹介用のリンクと、作ったページをほかの人に引き渡すリンクの作成も行えます。プランや支払いの変更、ページの削除、DNS 事業者へのログインはできません。

Claude Code が勝手に公開することはありませんか？

既定では勝手に公開しません。変更は保存のたびに新しいバージョンになり、Convika のツールは、まず非公開のプレビューを見せるよう Claude Code に伝えています。公開中のページが変わるのは Claude Code が公開したときだけで、ツールは、公開は頼まれたときだけにするよう伝えています。公開のツールには公開中のページを変える印が付いていて、Claude Code の権限の設定で、実行の前に毎回承認を求めるようにもできます。

Claude Code で行った変更を元に戻せますか？

Claude Code に以前のバージョンに戻すよう頼むか、ダッシュボードの「バージョン履歴」で「この版に戻す」を押します。ページを止めたいときは、公開停止を頼むか「公開を停止する」を押します。コンテンツは残り、あとで公開し直せます。保存したバージョンは Free で 10 件、Pro で 50 件まで残ります。

公開に Git リポジトリは必要ですか？

いりません。Convika が変更をバージョンとして残すので、Git がなくても、プレビューで確かめて、公開して、元に戻せます。HTML をリポジトリにも置いて、履歴を Git でも残すのはかまいません。

どんなページが公開できますか？

1 ページを 1 つの HTML ファイルとして、サイトのパスごとに公開できます。CSS とスクリプトは、ページの中に書くか CDN から読み込みます。Convika はランディングページのための公開先なので、ログインやデータベース、サーバーで動く処理が必要なアプリは、汎用の公開先に向いています。

Claude Code を使うと Convika の AI クレジットは減りますか？

減りません。ページを書くのは Claude Code なので、クレジットは使いません。クレジットを使うのは、ダッシュボードの「AIで直す」など、Convika に内蔵された AI でページを作ったり直したりするときだけです。

利用料金はどうなっていますか？

Free プランはカード登録なしで使えます。公開 1 ページまで、フォームの送信は月 50 件まで一覧に出て（超えた分も保存され、Pro で見られます）、独自ドメインは 1 つ、ページの下に Convika のバナーが出ます。Pro にするとバナーが消え、フォームの送信数と独自ドメインの数の上限もなくなります。Pro は月 ¥1,800 です。