【AI活用】30分でLP完成!?ランディングページを爆速で作る最新Claude Codeの使い方｜デザインもコード作成もコレだけで完成します!

概要

広告代理店のスタッフが、既存サービスサイトのURLを読み込ませるだけでデザインルールをMDファイル化し、Claude CodeとPowerShellを連携させてランディングページ(LP)を一式生成した事例を紹介する対談動画。プログラミング未経験でも構成案からHTML/CSS/JSまで一括生成できた体験が語られている。

主なポイント

• 参考にしたい既存サイトのURLをClaudeに渡すだけで、ブランドカラー・フォント・HTML構造などのデザインシステムをMarkdownファイルにまとめさせられる
• 事前に「問い合わせが来やすいLP構成」を自分でブラッシュアップしておき、それとデザインMDファイルを組み合わせて指示を作成
• 「クロードコードでどんな作業が必要か」と初心者目線で聞くと、AI自身が必要な指示文(プロンプト)や作業手順まで提案してくれる
• Claude(チャット版)はコード生成はできてもローカルのフォルダ/ファイル操作はできないが、Claude Codeはアプリ経由でPCを直接操作しファイル一式を自動生成できる
• 「入力ファイルを1つのフォルダにまとめておくと、長い指示なしで一貫した生成ができる」という運用ルールをAIが提示
• 1回の指示でCSS・JS・HTMLなど複数ファイルが一括生成され、生成完了レポートも自動出力される
• 生成されたindex.htmlをブラウザで開くと、その場でデザイン済みLPを確認できる
• SEO効果を狙うなら「SEOに効果的な構造でHTMLを生成してください」など、公開後の運用を見据えた詳細な指示を追加すると精度が上がる
• 生成されたHTML/CSSファイルをそのままサーバーに設置すれば公開可能な状態になっている
• 従来はライター・デザイナー・コーダー・エンジニアの4人が最低1週間かかっていた工程が、数十分規模に短縮された

実践に使えること

• 参考にしたい既存サイトのURLをClaude Codeに渡し、デザインシステムをMDファイルとして自動抽出させる
• LPの構成案(問い合わせ・資料請求を得やすい型)を事前にAIと壁打ちして作り、デザインMDと組み合わせて指示文を作る
• 「何をすればいいか」をAI自身に聞き、指示文の叩き台を作らせてから実行する進め方を試す
• 初回生成後は細部(使用したい写真の差し替えなど)を追加指示で修正する前提で進める
• LPを本番運用する目的(広告誘導・SEOなど)を伝え、構造面まで踏み込んだ指示を加える