【結論】解決策 / 実行コマンド
Claude CodeでLPを作る場合は、最初に構成、CTA、対象読者、ブランド、アクセシビリティ、計測要件を文書化します。
画像を直接生成できないと断定する必要はなく、画像入力、外部生成API、既存アセットを利用できます。
最初から全自動で公開せず、ローカルプレビュー、モバイル確認、フォーム検証、ライセンス確認を行います。
# ターミナルで実行：作業用プロジェクトを作成
mkdir lp-project && cd lp-project
# ターミナルで実行：Gitを初期化
git init
# ターミナルで実行：Claude CodeをPlanモードで起動
claude --permission-mode plan
# 別ターミナルで実行：実装後にローカルプレビュー
python -m http.server 8000具体的な手順・設定方法
requirements.mdへ見出し、CTA、料金、FAQ、フォーム、計測、SEO要件を書きます。
Claudeへ情報設計と変更予定ファイルを先に提示させます。
実装後にスマートフォン幅、キーボード操作、コントラスト、画像代替文、フォームエラーを確認します。
実践プロンプト / 活用テクニック
# 起動後のセッション内で入力
requirements.mdに従い、index.htmlとstyles.cssだけでLPを作成してください。
対象読者は中小企業の担当者、主CTAは無料相談です。
セマンティックHTML、適切なlabel、フォーカス表示、レスポンシブ対応を必須とします。
最初に構成案を提示し、承認後に実装してください。注意点・よくあるエラーと対処法
TailwindのCDN版は試作には便利ですが、本番ではCSP、サイズ、バージョン固定を確認してください。
ダミーの問い合わせフォームを本番公開すると送信できないため、バックエンド、スパム対策、プライバシー通知が必要です。
ロゴ、写真、アイコン、フォントの商用利用条件を確認してください。