LP制作に使う

LP制作に使う

Claude DesignでLPを作った具体的な事例を紹介します。

※Claude Design: Anthropic Labsが開発したAIビジュアルデザインツール。テキストプロンプトからUI・スライド・マーケ資料などを生成する。※LP: ランディングページの略。特定のCTAに向けて設計されたWebページ。

使ったプロンプト

新しいSaaSプロダクトのランディングページを作ってください。

プロダクト: TaskFlow（タスク管理ツール）
ターゲット: 中小企業のプロジェクトマネージャー
キャッチコピー: チームの仕事を、もっとシンプルに。

セクション構成:
1. ヒーロー（キャッチコピー + CTA + モックアップ画像エリア）
2. 課題提起（3つのペイン）
3. 機能紹介（3カラム）
4. お客様の声（2件）
5. 料金プラン（3プラン）
6. FAQ（5問）
7. 最終CTA

カラー: ダークネイビー（#1E3A5F）× ホワイト × アクセントカラー（#00D4AA）
スタイル: モダン・プロフェッショナル・信頼感

※プロンプト: AIへの指示文。Claude Designでは自然言語でデザインを指示する。※CTA: Call To Action（行動喚起）。ボタンやリンクでユーザーに次の行動を促す要素。

作成時間

プロンプト入力から初稿完成まで：約3分

その後の修正（5回ほど）：約30分

修正の流れ

1. ヒーローのキャッチコピーのフォントサイズを大きく
2. 料金プランカードにおすすめバッジを追加
3. 全体的に余白を増やしてゆとりを出す
4. モバイルビューを確認・微調整
5. CTAボタンのコピーを変更

最終的な使い方

完成したLPデザインを：

• スクリーンショットで社内レビューに使用
• Claude Codeに渡してHTML/CSSに変換
• デザイナーに渡してFigmaで詳細を詰めてもらう

という形で活用しました。

※Claude Code: AnthropicのAIコーディングツール。Claude DesignのデザインをそのままコードにするCLIツール。※Figma: デザイナーが多く使うUIデザインツール。Claude Designの主要な比較対象。