機能は vibe コーディングでサッと作れたのに、画面が平面的で「いかにも AI が作った感」が抜けない——。Claude Design（ベータ） は、その *見栄えを整える* 部分を担う Anthropic のデザインツールです。作りたいものを言葉で伝えると Claude が下書きを作り、クリックとスライダーで調整し、HTML に書き出すか Vercel / Claude Code に引き継いで本物のサイトとして公開できます。
必要なもの
- Claude の Pro / Max / Team プラン（Enterprise は既定でオフ。管理者が Organization settings で有効化する必要があります）
- ブラウザ
ステップ1 — Claude Design を開く
claude.ai/designにアクセス（または製品ページの Start designing をクリック）- ログインすると、デザインキャンバスが開きます。
ステップ2 — 言葉で伝えて下書きを作る
具体的に書きましょう。以下をコピペして書き換えてください:
> フィンテックのスタートアップ向けのランディングページを作って。セクション: ヒーロー、主要機能3つ、お客様の声、料金、最後にCTA。トーン: 信頼感がありミニマル。メインカラー: 濃いブルー（#1E3A8A）。
Claude が最初のバージョンを作るので、それを見て反応しながら繰り返し調整していきます。
ステップ3 — 自分のブランドを取り込む（任意）
自社のデザインシステムがありますか？ GitHub repo、デザインファイル、ローカルのコードベース から取り込めます。すると Claude は実際のコンポーネントを使って構築し、出力をデザインシステムと照合して、あなたが気づく前に不一致を直してくれます。
ステップ4 — 調整する（ここが肝心）
下書きの上で直接いじれます:
- 要素をクリックして コメント を残す（「このボタンを大きく」）
- テキストをダブルクリックしてその場で編集
- Claude が生成するスライダー で余白や色を微調整
- 要素を ドラッグ して移動・リサイズ・整列
ちょっとしたコツ: 最初に「比較用に3案」と頼み、ブランドカラーとフォントを早めに固定しておくと、仕上がりがぐっと一貫します。
ステップ5 — 書き出す / 公開する
- HTML / PDF / PPTX に書き出し
- 連携ツールへ送信: Vercel、Wix、Canva など
- コードで作り込みを続けるなら、
/design-syncまたは/designで Claude Code に引き継ぎ
知っておくと便利
- Claude Design は ベータ で、それ自体はホスティングサービスではありません——HTML の書き出し、または Vercel / Wix 連携で公開します。
- Enterprise では、管理者が Organization settings で有効化するまで表示されません。