【神機能】Claude Designで「人がデザインしたような」Webサイトを作る手順ガイド

概要

Claude Designの「デザインシステム」機能を軸に、量産型のAI生成LPをプロ品質のサイトへ仕上げる全工程を解説した動画。参考画像からデザインシステムを作り、サイト・メニュー表・Instagram投稿まで同じブランドスタイルで統一して生成し、最終的にClaude Codeへ引き継いで完成させる流れを実演している。

主なポイント

• プロンプト自体もAIに作らせる: Claudeの通常チャットに「やりたいことを数秒で伝え、詳細プロンプトをMarkdown形式で出して」と依頼し、.mdファイルとしてダウンロードしてClaude Designに添付する。
• 最初の出力は「AIっぽい」: テンプレートなしでMD添付だけだと誰でも作れるレベルの量産型デザインになる。ここから参考デザインで差別化する。
• Pinterestでインスピレーションを集める: 「ウェブデザイン アイスクリーム」などで検索し、模倣ではなく雰囲気の参考として画像を保存する。
• デザインシステム機能が最強: GitHub・Figma・画像やロゴ素材から約5分で、余白・色・角丸・ボタン・フォームなどの規則を含むデザインシステムを自動生成できる。既存のコーポレートサイトがあればFigmaデータの読み込みが最も強力。
• デザインシステム適用で見た目が一変: 作成したデザインシステムを選び、「フルビューポートのヒーロー+スクロール連動パララックス」などと指示するだけで統一感のあるデザインに更新される。
• 調整UIが自動で付く: アクセントカラー、フレーバー最大数、価格表示、パララックスの強さなどをボタン・スライダーで調整できる。
• 画像はChatGPTで生成して差し替える: Claude Designは画像生成ができないため、ChatGPTで背景透過しやすい商品画像を作り、Claude Designに入れて画質の低い部分を置き換える。
• Claude Codeへ引き継ぎ: 共有→その他の形式→「Claude Codeに送る」でプロンプトをコピーし、新規フォルダでClaude Codeに貼り付けて実装。トークン節約のためSonnetを選択している。
• 同じデザインシステムでブランド素材も量産: ドキュメント形式でA4メニュー表、4枚カルーセルのInstagram投稿(PNG書き出し可)を、質問に答えるだけで数分で作成できる。
• 画像が欠けた場合の対処: Claude Designからローカル保存したZIPのassetsフォルダの画像をClaude Codeのプロジェクトに追加し、差し替えを指示する。

実践に使えること

• 自分の事業やテーマについて、Claudeチャットで「Markdownの詳細プロンプトを作って」と依頼し、Claude Designに添付して最初の叩き台を作る。
• Pinterest等で好みのデザイン参考を数枚集め、ロゴ・素材とともにClaude Designの「デザインシステム」に登録して自社ブランド用のシステムを作る。
• そのデザインシステムを選択して、サイト・メニュー・SNS画像・資料を作り、全ての制作物のトーンを統一する。
• 仕上げの細かい修正や公開準備が必要になったら、「Claude Codeに送る」でコードベースへ移行する。
• 画像はChatGPT等で生成して差し替え、画質面の弱さを補う。