Claude でウェブサイトを作る方法｜Artifacts と Claude Code
「Claude でウェブサイトを作りたい」と検索したとき、最初に迷うのが入り口の選び方です。claude.ai のチャット欄に貼れる Artifacts、ターミナルから本格的なフロントエンドプロジェクトを動かす Claude Code、そしてスクリーンショットを渡してデザインから実装する Vision 入力。同じ「サイトを作る」でも、用途とアウトプットの形が全く違います。本記事では Anthropic 公式情報をベースに、3 つのアプローチの使い分けとデプロイまでの動線を整理します。
Claude でウェブサイトを作るルートは大きく 3 つ あります。Artifacts は claude.ai のチャット欄から HTML / React コンポーネントを即座にプレビュー・共有できる手軽なルートで、全プラン(Free / Pro / Max / Team / Enterprise)で利用可能です。プロトタイプやランディングページの初稿に最適です。
本格的なサイト構築には Claude Code が中心になります。VS Code や JetBrains 等の IDE 拡張、あるいはターミナルから Claude を呼び出し、Next.js / React / Vite / Astro 等のフレームワーク上で複数ファイルにまたがる変更を一貫して任せられます。git 連携・テスト実行・依存解決まで含めて、ローカル開発からデプロイ前の検証まで対応可能です。
デザインから入りたい場合は Vision 入力(画像添付)を活用します。Figma スクショや手描きワイヤーを Claude に渡し、HTML / Tailwind / React へ変換する流れが定着しつつあります。完成物は Artifacts なら "Publish" でリンク共有、本格サイトなら Vercel / Cloudflare Pages / Netlify 等への自分のデプロイが標準ルートです。
目次 (13)
Claude でウェブサイトを作る 3 つのアプローチ
Claude を使ったウェブサイト構築は、用途の規模で 3 つのレイヤーに分かれます。
- Artifacts(claude.ai 内) — チャット欄に「ランディングページを作って」と頼むと、右ペインに HTML / React がレンダリングされ、その場でプレビュー・編集・共有ができます。Anthropic は Artifacts を「significant and self-contained, typically over 15 lines」のコンテンツ向けの専用ウィンドウと定義しており、HTML サイト・React コンポーネント・SVG・ドキュメントを代表例に挙げています(出典: Anthropic Help Center - Artifacts)。
- Claude Code(IDE / ターミナル) — VS Code / JetBrains 拡張やターミナル CLI から Claude を呼び出し、Next.js / React / Vite 等の本格プロジェクトを構築します。複数ファイルにまたがる変更を Claude が理解した上で書き換え、git・テスト・ビルドコマンドを実行できます。
- API + 自前パイプライン — Messages API から HTML / コードを生成し、自分のアプリやサイトジェネレーターに組み込むアプローチ。複数記事の量産・LP 自動生成・CMS 連携などのバッチ用途で採用されます。
最初は Artifacts で「動く HTML」を作って感覚を掴み、本格サイトに育てる段階で Claude Code へ移行する、という順序が最も詰まりにくいルートです。
Artifacts でその場プレビューを試す
Artifacts は 2024 年 6 月にプレビュー公開、2024 年 8 月 27 日に全プランで GA(一般提供)になりました(出典: Anthropic ブログ - Artifacts)。使い方はシンプルで、claude.ai のチャットに「○○なランディングページを HTML / Tailwind で」と書くだけです。右側に Artifact ウィンドウが開き、即座にプレビューされます。
主な機能は次のとおりです。
- 編集とイテレーション — 「ヒーロー画像を上に」「CTA ボタンを 2 つに」のように自然言語で差分修正可能。バージョン履歴を遡って別案を試すこともできます。
- コード閲覧 / コピー / ダウンロード — ウィンドウ右上のメニューから HTML / JSX 本体を取り出してエクスポートできます。
- エラー自動修正 — JS エラーが出た場合、"Try fixing with Claude" ボタンでエラー情報を Claude に渡して修正させられます。
- 永続ストレージ(Pro 以上) — AI-powered な共有アプリでは最大 20MB の永続ストレージを personal / shared で構成できます。
Free プランでも Artifacts 自体は使えますが、MCP インテグレーションや永続ストレージは Pro / Max / Team / Enterprise が必要な点に注意してください。
Claude Code で本格的なフロントエンド開発
ランディングページの 1 枚から、Next.js + Tailwind + Supabase で組む実プロダクトに踏み込む段階で出番になるのが Claude Code です。Anthropic の公式ページでは Claude Code を「ローカルマシン上でコードを読み・書き換え・テストを実行し、コマンドライン経由で git ワークフローやデプロイに統合できる開発ツール」と位置づけています(出典: Claude Code 製品ページ)。
ウェブサイト構築に直接効くのは次の能力です。
- マルチファイル協調 —
pages/、components/、styles/を横断して変更を反映。新しいページを追加すると、ルーティング・ナビゲーション・型定義まで揃えて差分を出します。 - ローカル実行と検証 —
npm run devで開発サーバーを立ち上げ、ブラウザ確認 → 修正 → 再ビルドのループを Claude 主導で回せます。 - git / デプロイ連携 — ブランチ作成・コミット・PR 作成までターミナル上で完結。本記事を運用する Clauder Navi も、Claude Code が build / rsync / Xserver deploy までを担うパイプラインで運用されています。
VS Code / JetBrains 用の IDE 拡張がある一方、ターミナル CLI 単体での利用も推奨されており、SSH 越しのリモートサーバー作業や CI/CD への組み込みも可能です。
デザインから実装するワークフロー(Vision 入力)
「Figma で作ったデザインを HTML にしたい」「手描きのワイヤーからプロトタイプを起こしたい」というニーズは、Claude の Vision 入力(画像添付) で対応できます。Anthropic API は PDF / 画像 / テキストファイルをアップロードして文脈に取り込む Files API を提供しており、Claude.ai / Claude Desktop からも画像をドラッグ&ドロップで添付できます(出典: Claude Platform - Features Overview)。
実用的なワークフローは次のとおりです。
Step 1: スクリーンショットを Claude に渡す
Figma のフレームを画像エクスポート、または競合サイトの 1 ページを丸ごとスクリーンショットして Claude に添付します。「このレイアウトを Tailwind + React で再現して」と依頼します。
Step 2: Artifacts でラフ実装を確認
返ってきた JSX を Artifact プレビューで確認し、「ヒーロー画像位置を中央に」「フォントサイズを大きく」と差分指示で修正します。375px 幅(モバイル)での見え方も同時に確認すると失敗が減ります。
Step 3: Claude Code でプロジェクトに統合
Artifact で完成した HTML / JSX を、Claude Code に貼って「これを app/page.tsx に組み込み、ナビとフッターを既存共通コンポーネントに合わせて」と指示すると、既存プロジェクトの規約に沿った形で統合できます。
Step 4: ローカルプレビュー / モバイル検証
npm run dev で立ち上げ、PC + iPhone の両方で動作確認。デザイントークン(色・余白・タイポ)が既存サイトとズレていないか目視チェックします。
Step 5: デプロイ
完成版を Vercel / Cloudflare Pages / Netlify / 自前サーバーへ push。GitHub 連携経由なら、Claude Code が git push した時点で本番デプロイまで一気通貫で進みます。
デプロイ先と公開の選択肢
Claude で作ったサイトをどこに置くかは、規模で 3 通りに分かれます。
- Artifacts を Publish して共有 — Free プランから利用可能で、生成した HTML / React Artifact に固有 URL が振られ、コミュニティに公開できます。プロトタイプ・LP 単発・ポートフォリオ 1 ページなら、これだけで完結します(出典: Anthropic ブログ - Artifacts GA 発表)。
- Vercel / Cloudflare Pages / Netlify — Next.js / Astro / Vite で組んだ本格サイトの定番。GitHub に push すれば自動ビルド・デプロイされ、独自ドメイン割当・PR プレビューも標準装備です。Claude Code が
git pushまで担えば運用は完全に自動化できます。 - 自前サーバー(Xserver / VPS / EC2 等) — Laravel や PHP との連携、CMS 機能を持つサイトはこちらが向きます。Claude Code から SSH / rsync で本番反映するパターンが現実的です。Clauder Navi も同型の運用です。
料金プランと向き不向き
Claude を使ったウェブサイト構築でかかるコストは、用途で大きく変わります。
- Free — Artifacts の Publish / 共有まで可能。1 日のメッセージ上限があるため、ラフプロトタイプや 1 枚 LP 試作までが現実的な範囲です。
- Pro($20/月) — Artifacts の永続ストレージ・MCP 連携が有効化。個人開発者・フリーランスの主力プラン。
- Max($100 / $200 月) — 利用回数が Pro の 5 倍 / 20 倍。Claude Code を毎日重く使う層向け。
- Team / Enterprise — Projects 内で Artifacts を共同編集。複数人で同じサイトを育てるチーム向け。
Claude Code は Pro / Max のサブスクリプションに含まれるため、API 従量課金とは別ルートで使えます。月の利用量が多くなる場合、Max プランの方が API より安く済むケースが多くなります。
よくある質問
Q. Claude で作ったウェブサイトを商用利用できますか? できます。生成された HTML / コードの著作権・利用条件は Anthropic 利用規約に従いますが、生成コードを商用プロダクトに組み込むことに制限はありません。ただし画像生成は別系統(Claude 単体では画像を生成しない)ので、ヒーロー画像等は別途用意してください。
Q. ノーコードで完結しますか? Artifacts での 1 枚 LP なら、コードを 1 行も書かずに完成→ Publish まで可能です。ただし独自ドメインの割当や複数ページ構成、外部 DB 連携を行う段階で、最低限のフロントエンド知識と Claude Code / GitHub の操作が必要になります。
Q. WordPress や Webflow との連携は? Webflow は公式 MCP サーバーを提供しており、Claude Desktop / Claude Code から CMS と Designer を自然言語で操作できます(参考: 既存記事 Claude で使う Webflow MCP)。WordPress は MCP 経由のサードパーティ連携が複数あり、記事下書きや CPT 操作を Claude から行う構成も可能です。
まとめ
Claude でウェブサイトを作る道は、Artifacts で即試す軽量ルート、Claude Code で本格構築する開発ルート、Vision でデザインから入るルートの 3 つに整理できます。最初の 1 ページは Artifacts で動かし、規模が育つタイミングで Claude Code + Vercel / Cloudflare Pages へ移行する流れが、詰まりにくく学習コストも低い王道です。Webflow や WordPress 等の既存 CMS と組み合わせる場合は MCP 連携が現実解となります。
