▲ Anthropic 公式ドキュメント（support.claude.ai）にて仕組みが解説されています
日本語でプロンプトを入力するだけ。コーディング不要。
ブランドカラー・フォント・コンポーネントを自動適用。
入力と同時にプレビューが更新される高速ワークフロー。
ワンクリックでスタイルや内容を切り替えられる。
▲ claude.ai/design にアクセスすると歓迎画面が表示される
Google Translate の翻訳ポップアップが出た場合は「日本語」を選択するか「×」で閉じてOK。サイト自体は日本語インターフェースで操作できます。
▲ クロードデザイン ホーム画面
「ワイヤーフレーム」か「高忠実度」を選択して新規プロジェクトを作成します。
過去に作ったプロジェクトが並びます。「例」タブには参考テンプレートも。
ブランドカラー・フォント・コンポーネントを事前に登録しておくと、自動で反映されます。
▲ プロジェクト作成時に「スキルと設計システム」ダイアログが表示される
シンプルな骨格デザイン。構造確認に最適。
カラー・フォント・画像まで含む完成形に近いデザイン。
初めての方は「高忠実度」を選ぶと、見栄えのある結果がすぐ得られます。スキルには「アニメーション」「インタラクティブなプロトタイプ」「PPTX形式でエクスポート」などが選べます。
▲ チャット左パネル「まずは文脈から始めましょう」
例：「Claude Design の始め方を解説したサイトを作って。初心者向けでわかりやすく。」
スクリーンショット・Figmaファイル・コードベースをドラッグ＆ドロップで追加できます。
右のキャンバスにリアルタイムでデザインが生成されます。
▲ 構造・スタイル・言語・カラーパレットなど複数の選択肢をまとめて確認してくれる
1ページランディング／トップガイド形式など、レイアウト方針を選択。
手書き風・パステル・レトロ・ミニマルなど細かいスタイルを指定。
日本語のみ／英日バイリンガルから選択。
「今すぐ試す」など最終的にユーザーに促す行動を設定。
▲ 「更新されたToDoリスト」— 各セクションを自動で順番に作成していく
カラー・フォント・全体スタイルを確定
トップのメインビジュアルから順にコンテンツを構築
一貫したスタイルでパーツを配置し、最後に行動喚起ボタンを追加
自動的にセルフレビューして完成。キャンバスでプレビュー確認
▲ 完成例：「Claude Design のはじめかた」サイト — かわいいスタイルで自動生成
▲ キャンバス全体表示 — 各セクションの構成が確認できる
右上の「プレビュー」ボタンでブラウザ表示を確認。
「保存」ボタン、またはPPTX形式でエクスポート可能。
マスコット・カラー・フォントをパネルからワンクリック変更。
右上「共有」ボタンでリンクを発行して他の人に見せられる。
Claudeアカウントでログインするだけ。
高忠実度を選ぶと見栄えの良い結果に。
具体的に書くほどイメージ通りになる。
スタイル・構成・CTAなどを一緒に決める。
気に入らない部分はチャットで「もっと〜にして」と追加指示。
claude.ai/design にアクセスして、まずは「ポートフォリオサイトを作って」と入力してみてください。デザインの知識は一切不要です。AIが全部ガイドしてくれます。