CC Tips: Claude Code×Claude Designで学ぶWebサイト制作からインターネット公開までの完全ガイド

• サイトの目的・ターゲット・料金・サービス内容など既知の情報をまとめてClaude Codeに渡すと、掲載すべきコンテンツ構成案を提案してもらえる
• Claude Designに渡す前に配色・デザインテイスト・アニメーション有無・レスポンシブ対応などを明文化したプロンプトをClaude Codeに作らせると、意図とのズレが減る
• Claude Designでは全体変更はプロンプト欄、局所修正は「コメント」機能を使い分けると効率的
• Claude Designの「ツイーク」機能でAIに雰囲気・モーションの複数案を出させ、比較検討できる
• Claude Designでダウンロードしたファイルはそのまま公開せず、必ずClaude Codeに「サーバー公開用に整理・修正して」と依頼してから使う(JSエラーやレスポンシブ崩れを防げる)
• Googleフォームの埋め込みHTMLをコピーしてClaude Codeに「既存の問い合わせフォームと差し替えて」と依頼すると安全にフォーム機能を実装できる
• モデル選択はデザイン起こしなど複雑な作業ではOpus以上を使うと精度が上がる