きっかけは、SNSで見かけた「Claude Designで画面をデザインして、ボタン一つでReplitに送ると動くアプリが自動でビルドされる」という投稿です。コピペも環境構築も不要で、デザインからデプロイまで一気通貫でつながる、という触れ込みでした。

ただ、こういう「ワンクリックで全部できます」系の話を聞くと、まず気になるのが「で、どこからお金がかかるの？」というところです。Claude Design側は無料なのか。Replit側でいつクレジットやカード登録を求められるのか。「ワンクリック」というのも、本当にワンクリックなのか。

というわけで、架空のクリエイティブスタジオのポートフォリオサイトを題材に、デザイン作成から公開URLの発行まで全部通してみました。この記事では、各ステップで何が起きたか、特に「課金トリガーがどこで顔を出すか」を中心に、実際に確認できたことだけを時系列で記録していきます。

検証の前提

題材は、架空のクリエイティブスタジオ「STUDIO NOCTURNE」のポートフォリオサイトです。実在の案件ではなく、連携の挙動を見るためのニュートラルな題材として用意しました。

検証中は、こんなルールを徹底しています。

• クレジットカードは登録しない

• Replitは無料のStarterプランのまま進める

• 課金やアップグレードを求められたら、その時点を記録して一旦止める

要するに「カードを出さずにどこまで行けるか」を見ていく、という方針です。

ステップ1：Claude Designでデザインを作る

Claude Designは、ClaudeのWeb画面の左ナビから「Design」を選ぶか、claude.ai/design に直接アクセスすれば開けます。画面は左がチャット、右がキャンバスという構成で、チャットで作りたいものを説明すると、Claudeがキャンバス上にリアルタイムで生成していきます。

今回はポートフォリオサイトの詳細なプロンプト（配色、フォント、セクション構成、インタラクションの指定）を一度に渡しました。出てきたデザインは、指定をほぼそのまま反映してくれていて、ここでまず軽く感心しました。漆黒の背景にオフホワイトのテキスト、アクセントのコーラルをロゴとピリオドの一点だけに効かせる、みたいな細かい注文までちゃんと守られています。

費用面で一つ押さえておきたいのが、Claude Designは追加課金ではなく、チャットやClaude Code、Coworkと同じ使用量プールから消費するという点です。Design専用の枠が別にあるわけではありません。なので追加費用はかからないものの、普段のClaude利用枠は食います。しかもDesignは比較的重いモデルで動くので、消費は速めとされています。ここは頭に入れておいた方がよさそうです。

ちなみに、いきなりDesignの画面で「ランディングページ作って」と雑に投げると、Claudeが要件を聞き返してくる往復のたびに枠を消費します。先に普通のチャットで企画とプロンプトを固めてからDesignに持っていくと、消費を抑えられます。今回はプロンプトを作り込んでから挑んだので、ほぼ一発でデザインが決まりました。地味ですが効きます。

ステップ2：Replitを送信先として追加する

デザインができたら、画面右上のメニューを開きます。ここに「共有リンク」「輸出（エクスポート）」「送信先...」の3つのタブがあります。PDFやHTMLとして書き出すのが「輸出」、他サービスに送るのが「送信先」と用途が分かれていて、Replit連携は後者です。

で、「送信先...」を開いてみたら、最初は「Claude Code」しか並んでいませんでした。Replitは最初から繋がっているわけではなく、「目的地を追加する」から自分で追加する必要があります。

ここが最初の発見でした。「ボタン一つでReplitへ送信」と聞いていたものの、実際にはデフォルトでReplitが繋がっているわけではなく、初回は連携先を追加するひと手間がいる。「ワンクリック」の前に、いわば「ゼロ手目」があるわけです。とはいえ一度きりの作業なので、身構えるほどのことではありません。

追加できる送信先には、Adobe、Base44、Canva、Gamma、Lovable、Miro、Replit、Vercel、Wixなどが並んでいます。ここで日本語UIの小さな罠が一つ。日本語表示だと一部のサービス名が意味で翻訳されてしまいます。Lovableが「愛らしい」になるのは普段から見慣れているので「ああ、いつものね」とすぐ分かったのですが、問題はReplitでした。なんと「返信」と表記されていて、最初はこれがReplitだと気づけず、リストを上から下まで何度か見返してしまいました。言われてみればReply（返信）からの誤訳なのですが、初見だとまず分からないと思います。覚えておくと迷わずに済みます。

ステップ3：Replitコネクタを連携する

「返信」（＝Replit）を選ぶと、コネクタの連携画面が出ます。これはClaudeから自然言語でReplitを操作できるようにする、MCPコネクタの連携です。

連携で許可するのは、アプリの作成・更新・デザイン取り込みなどを担う5つのツール。Anthropic製ではなくReplitが提供するサードパーティのコネクタなので、その旨の注意書きも画面に出ています。ここはきちんと表示されるので安心材料でした。

「連携させる」を押すと、Replitアカウントの認証（OAuth）画面に進みます。求められた権限は「アプリへのアクセス」「アプリの作成・管理」「ログイン状態の維持」の3つ。いずれも今回やりたいこと（デザインをアプリ化する）にちょうど必要な範囲で、支払いや課金まわりの権限は含まれていません。あとからReplitの設定でいつでも解除できる旨も書かれていました。

そしてこの連携自体は、当然というか、無料でした。

ステップ4：デザインをReplitに送ってアプリ化する

連携が済んだら、Claude Designのチャットに「このデザインをReplitに送って、動くアプリとしてビルドして」と打つだけです。

これでコネクタが動き、デザインがReplitに渡ってビルドが始まります。途中、外部フォントを自己完結型ファイルにまとめたり、SVGの扱いを直したりといった処理を、Claudeが勝手に挟みながら進めてくれていました。このあたりの自己修正を眺めているのが、地味に面白かったです。最終的に「取り込み完了、ポートフォリオが動くアプリとしてビルドされました」となり、ReplitのワークスペースURLが発行されました。

ヒーロー、ワークギャラリー、アバウト、コンタクトの全セクションと、ホバーやスクロールのアニメーションまで、そのまま動く状態でビルドされていました。

そしてこの取り込み・ビルドの段階でも、課金やカード登録を求められることはありませんでした。ここまで全部タダで来ています。

ステップ5：Replitワークスペースで確認する

発行されたURLを開くと、Replitのワークスペースに入ります。初回だと、属性アンケート、友達紹介プログラム、コラボレーター招待といったオンボーディングの案内が次々に出てきます。「お、ここで課金の話か？」と一瞬構えますが、どれも機能紹介や任意の勧誘で、課金を強制されるものではありませんでした。

そして、オンボーディングの最後にプラン比較画面が出てきます。今回の検証で「課金」という選択肢が初めて明確に提示されたのが、ここです。確認できたプランは次の通りでした。

• Starter（無料）：探索用。無料の日次Agentクレジット、フルスタックアプリ用の内蔵DB、1プロジェクトまでの公開、プライベート/パスワード保護デプロイを含む

• Replit Core（月20ドル）：個人プロジェクト・シンプルなアプリ向け。月20ドル分のクレジット、コラボ5人まで、全リージョンでの公開、ワークスペース無制限、「Made with Replit」バッジの除去など

• Replit Pro（月100ドル）：商用・プロ向け。月100ドル分のクレジット、コラボ15人まで、最も強力なモデルへのアクセス、DBのロールバックなど

• Enterprise：カスタム価格。SSO/SAMLなど

ポイントは、この時点で自分のアカウントに「Current plan（現在のプラン）」として無料のStarterが付いていたことです。つまり、ここまでの全工程を、知らないうちにStarterのまま課金なしで通ってきていたわけです。「Continue with Starter」を選べば、そのまま無料で先に進めます。

ステップ6：公開（デプロイ）する

ワークスペースで「Publish」を押すと、公開設定のダイアログが開きます。ドメイン（〇〇.replit.app形式）と公開範囲（Public/Privateの選択）が表示され、その下に「Publish」ボタン。

ここで一番驚いたのが、このダイアログに料金の表示が一切なかったことです。「いや、最後にここで金額出るやろ」と身構えていたら、本当に何も出ない。「Publish」を押すと、公開処理のパイプライン（プロビジョニング、セキュリティスキャン、ビルド、バンドル、プロモート）が順に走って、1分弱で公開完了。発行されたURLを開いたら、デザイン通りのポートフォリオがちゃんと表示されました。

っっz

公開後のステータス画面で、このアプリのデプロイタイプが「Static（静的）」になっているのを確認できました。Replitのデプロイは静的・オートスケール・リザーブドVM・スケジュールの4種類があって、このうち静的デプロイはStarterの無料枠（1プロジェクトの公開）に収まります。今回のようなポートフォリオやLPはバックエンドがいらない静的サイトなので、無料枠でそのまま公開まで到達できた、というわけです。

結局、公開の最終段階まで、カード登録も課金確認も一度も出てきませんでした。

確認できたこと

今回の検証で分かったことを整理します。

費用については、デザイン作成（Claude使用枠内）、Replit連携、OAuth承認、アプリの取り込み・ビルド、静的サイトとしての公開まで、全部追加の支払いなしで完走できました。少なくとも静的サイトなら、デザインから公開URLの発行まで、カードを登録せずに到達できます。課金がはっきり選択肢として出てきたのは、オンボーディング中のプラン比較画面だけで、それも任意でした。

「ワンクリック」という表現は、厳密には少し盛っています。初回はReplitを送信先に追加して、コネクタを連携するひと手間が必要です。ただ、一度繋いでしまえば、あとはチャットで指示するだけでビルドが走るので、二回目以降は本当にスムーズだと思います。

注意点としては、Claude Designは追加課金こそないものの、Claudeの使用枠（チャットやClaude Codeと共通のプール）を消費します。あと、今回無料で公開できたのは「静的サイトだったから」です。バックエンドやデータベースを伴うアプリ（オートスケールやリザーブドVMでの公開が必要なもの）だと、デプロイの段階で費用が発生します。ここは題材によって結果が変わるので、「無料で公開できた」というのはあくまで静的サイトに限った話、という点はきちんと線を引いておきます。

「本当にこんなにあっさり公開まで行けるの？」というのは、文章よりも動画の方が伝わると思います。デプロイから公開サイトの動作まで、一本にまとめました。

まとめ

Claude DesignからReplitへの連携は、静的サイトを題材にする限り、デザインから公開まで無料で通せました。課金は最後のプラン画面で任意の選択肢として現れるだけで、途中で強制されることはありません。

「ワンクリック」というほど単純ではなく初回の連携設定はいりますが、一度繋いでしまえばデザインからデプロイまでをあっという間に行える、かなり実用的なワークフローだと感じました。冒頭にも書いた通り、ここまで簡単に、しかも無料で公開まで行けるとは思っていなかったので、素直に良い体験でした。バックエンドを伴うアプリで同じことを試したら課金がどこで出るのか、これは次回の検証課題として残しておきます。