Claude ウェブサイトデザイン｜Artifacts と Vision 実装
「Claude でウェブサイトをデザインしたい」というニーズは、ランディングページのモック、コーポレートサイトのリデザイン、ポートフォリオの初稿づくりなど、目的によって最適な入口が変わります。Anthropic は Artifacts・Claude Design・Vision 入力という 3 系統の機能を用意しており、本記事ではどの入口がどのフェーズに向くかを公式情報ベースで整理します。最後に、デザインシステムの適用と Claude Code への handoff まで含めた実践フローも示します。
Claude でウェブサイトをデザインする入口は大きく 3 つ あります。Artifacts は claude.ai のチャット欄から HTML / Tailwind を即プレビューでき、ランディングページや 1 枚モノの初稿に最適です。Free / Pro / Team / Enterprise の全プランで使え、Publish 機能で URL 共有まで一気に進めます。
本格的なサイト全体のデザインには Claude Design(Anthropic Labs、2026-04-17 公開)が中心になります。Claude Opus 4.7 をエンジンに、デザインシステムをワークスペースに登録すると、以降の出力は カラー・タイポ・コンポーネント がブランドに揃った状態で生成されます。Pro / Max / Team / Enterprise の Research Preview として提供されています。
既存のデザインカンプや手描きワイヤーから入る場合は Vision 入力(画像添付)を使い、HTML / Tailwind / React へ変換します。仕上げは Canva・PDF・PPTX・スタンドアロン HTML で書き出すか、Claude Code への handoff バンドル でそのまま実装フェーズに引き渡すルートが標準です。
目次 (8)
Claude でウェブサイトをデザインする 3 つの入口
ウェブサイトのデザイン工程を Claude に任せるとき、用途の規模で 3 つのレイヤーに整理できます。
- Artifacts(claude.ai 内) — チャットで「LP を Tailwind で作って」と頼むと、右ペインに HTML / React がレンダリングされ、その場でプレビューできます。Anthropic は Artifacts を「significant and self-contained, typically over 15 lines」のコンテンツ用ウィンドウと定義しており、代表例として HTML サイトと React コンポーネントを挙げています(出典: Anthropic Help Center — Artifacts)。
- Claude Design(Anthropic Labs) — Claude.ai のチャットや Claude Code とは別の 専用キャンバス で、サイト全体のページ群や状態遷移を一貫して組み立てます。Claude Opus 4.7 を使い、登録済みデザインシステムを全画面に適用します(出典: Claude Design アナウンス)。
- Vision 入力(画像添付) — Figma スクリーンショットや手描きワイヤーを画像として渡し、HTML / Tailwind / React に変換させるアプローチ。既存のデザイン資産を活かす際に有効です。
最初は Artifacts で 1 ページを動かして感覚を掴み、サイト全体のデザイン整合まで詰める段階で Claude Design に乗り換える、という順序が最短です。
Artifacts で HTML / Tailwind デザインを即プレビュー
Artifacts は 2024 年 6 月にプレビュー公開、2024 年 8 月 27 日に全プランで GA となりました(出典: Anthropic ブログ — Artifacts)。ウェブサイトデザインの用途では次の使い方が定番です。
- ランディングページの初稿 — 「ヒーロー / 機能 3 つ / CTA / フッター構成の LP を Tailwind で」と一文で投げ、右ペインで即プレビュー。
- コンポーネント単位の試作 — カードレイアウト、料金表、フォームなどを単独 Artifact として生成し、後でまとめる。
- 編集とイテレーション — 「ヒーローを左寄せに」「CTA を 2 つに増やして A/B 用のコピーを別案で」のように自然言語で差分修正。バージョン履歴を辿って別案に戻すことも可能です。
- Publish と共有 — Free / Pro プランのユーザーは Artifact を publish と remix でき、URL 共有でレビュー依頼ができます。Team プランでは Projects 内に Artifact を置いて組織内コラボレーションが可能です(出典: Artifacts ブログ)。
Artifacts はモバイル(iOS / Android)からも利用でき、移動中に LP の文言調整を Claude に頼むといった軽量な運用にも耐えます。
Claude Design で UI を会話から組み立てる
Anthropic Labs が 2026-04-17 に公開した Claude Design は、サイト全体のデザインに踏み込むときの中核ツールです。Claude.ai のチャットや Claude Code とは別の デザイン専用ワークスペース で、Claude Opus 4.7 を使い、ページ群・状態遷移・コンポーネント階層を一貫した文脈で生成します。
Anthropic は Claude Design のコンセプトを「describe what you need and Claude builds a first version」と説明しており、白紙のアートボードを最初のプロンプトで埋めるところに価値を置いています。具体的な機能は次の通りです。
- チャット起点のプロトタイプ生成 — 「コーポレートサイトの IR ページを 3 案」のように自然文で投げると、すぐに編集可能な UI が立ち上がる。
- デザインシステムの自動適用 — オンボーディング時に登録した色・タイポ・コンポーネントが、以降の全出力に反映される。
- マルチ入力 — テキスト・画像・DOCX / PPTX / XLSX・サイトの web capture・コードリポジトリのスキャンが起点として使える。
- インライン編集と調整ノブ — 個別要素にコメントを残し、テキスト直編集や間隔・色のスライダー調整を加え、Claude に「他画面にも反映」を依頼できる。
- マルチ書き出し — Canva・PDF・PPTX・スタンドアロン HTML の 4 系統に書き出し可能。
- Claude Code への handoff — 完成デザインを 1 アクションで handoff バンドル化し、実装フェーズへ送る。
提供は Research Preview として Claude Pro / Max / Team / Enterprise に同梱され、Free プランでは現状利用できません。
Vision 入力でデザインカンプから実装へ
既にデザインカンプがある、もしくは紙の手描きワイヤーから始めたい場合は、Claude の Vision 入力(画像添付)が直接の出発点になります。Figma の書き出し PNG や手描き写真をチャットに添付し、「これを HTML + Tailwind で再現して」と依頼すると、レイアウト・色・タイポを推定して 1 枚モノに変換します。
実務では次の手順が安定しています。
- カンプ画像をアップロード — Figma の Export 機能で PNG / SVG を出し、Claude に添付する。
- 再現方針を一文で指定 — 「Tailwind + セマンティック HTML、
<section>で 4 ブロック、レスポンシブ前提」のように制約を明示。 - 初稿を Artifacts で受け取る — その場でプレビューし、ズレている箇所だけ会話で詰める。
- 微修正を Claude Design に持ち込む — 複数画面に統一して反映する段階で、Claude Design のキャンバスに移植する。
Vision 入力は「デザインの再現精度」よりも「実装の出発点として 7-8 割形にする」位置付けで使うのが現実的です。残りの 2-3 割は手で詰めるか、Claude Code で実装精度を上げるフェーズに引き継ぎます。
デザインシステムを Claude に食わせて統一感を保つ
ウェブサイトデザインで最大の摩擦は、ページごとに色やタイポがズレていく現象です。Claude Design はオンボーディング時にコードベースや既存アセットを読み込み、カラーパレット・タイポグラフィ・コンポーネント・レイアウトパターン をルール化します(出典: Set up your design system in Claude Design)。
公式の推奨手順は次の 4 段階です。
- 組織の作成または切り替え — Claude Design を開き、組織を選択またはオンボーディングを完了する。
- ブランド・プロダクトアセットのアップロード — コードベース、プロトタイプ、スライドデック、個別アセットなど複数形式に対応。
- 生成されたデザインシステムの確認 — カラー・タイポ・コンポーネント・レイアウトパターンを検証し、不足分を手で補う。
- チームへの公開 — Published トグルをオンにして、組織内の全プロジェクトで参照可能にする。
この準備を 30 分かけておくと、以降の全出力が「自社のサイトらしさ」を保ったまま量産できます。逆にデザインシステム未登録のままプロトタイプを増やすと、ページ間で色・余白・タイポがバラつき、本番化フェーズで大きな手戻りが発生します。
Claude Code で実装フェーズに引き継ぐ
デザインが固まったら、実装は Claude Code への handoff が最短ルートです。Claude Design は完成画面を「handoff bundle」として 1 アクションでパッケージ化でき、VS Code / JetBrains の Claude Code 拡張、あるいはターミナル CLI からそのまま Next.js / React / Astro プロジェクトに展開できます(出典: Claude Code 製品ページ)。
handoff バンドルには、デザインに対応した HTML / Tailwind マークアップ、コンポーネント分割の方針、画像アセットの参照が含まれており、Claude Code はこれを起点に複数ファイルの実装を一貫して進められます。git 連携・ビルド実行・テスト実行までセットで動かせるため、デザインから本番デプロイまでの距離が大幅に縮みます。
なお、handoff 後の実装フェーズでは、フレームワーク選定(Next.js / Astro / Vite)とホスティング先(Vercel / Cloudflare Pages / Netlify)を早めに決めておくと、Claude Code の出力がそのままデプロイに乗ります。
プランとライセンス — どの機能がどのプランで使えるか
ウェブサイトデザインに使う 3 機能の対応プランは次の通りです。
- Artifacts — Free / Pro / Team / Enterprise の全プランで利用可能。Free / Pro は publish と remix、Team は Projects 内共有(出典: Artifacts ブログ)。
- Claude Design — Pro / Max / Team / Enterprise の Research Preview に同梱。Free は対象外。Enterprise は管理者設定で有効化が必要(出典: Claude Design アナウンス)。
- Vision 入力 — Pro / Max 以上で安定利用。複数画像の同時添付やコンテキスト保持を多用する場合は Max 20x の枠が現実的。
個人開発者が LP やポートフォリオを作るだけなら Pro で十分、社内チームでサイト全体を継続的にデザインするなら Team / Enterprise の組織共有が前提になります。
始め方 — 最短ルートのまとめ
最後に、ウェブサイトデザインを Claude で立ち上げる最短ルートをまとめます。
- LP 1 枚で感覚を掴む — Artifacts に「目的 + 構成 + Tailwind 指定」を 1 行で投げ、初稿を受け取る。
- デザインシステムを登録する — Claude Design でカラー・タイポ・コンポーネントを 30 分でセットアップする。
- サイト全体に拡張する — Claude Design のキャンバスでページ群と状態遷移を一貫して組み、書き出し形式を選ぶ。
- Vision 入力で既存資産を取り込む — Figma カンプや手描きワイヤーを画像で渡し、HTML / Tailwind に変換する。
- Claude Code に handoff — handoff バンドルを Claude Code に渡し、フレームワーク上で実装・デプロイまで進める。
Artifacts → Claude Design → Claude Code の 3 段ロケットを意識しておくと、デザインフェーズで詰まる箇所が大きく減ります。まずは Pro プランで Artifacts と Vision を試し、サイト全体の整合が必要になった段階で Claude Design の Research Preview に進む、という順序がコスト効率も学習コストも最も低いルートです。
