Rapidly Building Landing Pages with Claude Code

ランディングページ制作にClaude Codeを活用する

ランディングページ（LP）はビジネスの成長に直結する重要なページです。Claude Codeを使えば、ヒーロー、特徴紹介、料金、CTA、FAQといった定番セクションを高品質なコードで素早く構築できます。

プロンプトの設計

> SaaSプロダクトのランディングページを作って。
> Astro + Tailwind CSSで。
> Hero、Features（3カラム）、Pricing（3プラン）、
> Testimonials、FAQ、CTAフッターのセクション構成で。

ヒーローセクション

// src/components/Hero.astro
---
const headline = "チームの生産性を10倍にする";
const subheadline = "AIアシスタントが日常のタスクを自動化し、あなたのチームを本当に重要な仕事に集中させます。";
---

<section class="relative bg-gradient-to-b from-blue-50 to-white dark:from-gray-900 dark:to-gray-800 pt-32 pb-20 px-4">
  <div class="max-w-4xl mx-auto text-center">
    <h1 class="text-5xl md:text-6xl font-extrabold text-gray-900 dark:text-white mb-6 leading-tight">
      {headline}
    </h1>
    <p class="text-xl text-gray-600 dark:text-gray-300 mb-10 max-w-2xl mx-auto">
      {subheadline}
    </p>
    <div class="flex flex-col sm:flex-row gap-4 justify-center">
      <a href="/signup" class="bg-blue-600 text-white px-8 py-4 rounded-lg text-lg font-medium hover:bg-blue-700 transition">
        無料で始める
      </a>
      <a href="#demo" class="border-2 border-gray-300 dark:border-gray-600 px-8 py-4 rounded-lg text-lg font-medium hover:bg-gray-50 dark:hover:bg-gray-700 transition">
        デモを見る
      </a>
    </div>
    <p class="mt-4 text-sm text-gray-500">クレジットカード不要 ・ 14日間無料トライアル</p>
  </div>
</section>

料金セクション

// src/components/Pricing.tsx
const plans = [
  { name: 'Free', price: 0, features: ['ユーザー3人まで', '基本機能', 'メールサポート'], cta: '始める', popular: false },
  { name: 'Pro', price: 2980, features: ['ユーザー無制限', '全機能', '優先サポート', 'API連携'], cta: '14日間無料', popular: true },
  { name: 'Enterprise', price: null, features: ['カスタム機能', '専任担当', 'SLA', 'SSO'], cta: 'お問い合わせ', popular: false },
];

export function Pricing() {
  return (
    <section id="pricing" className="py-20 px-4 bg-gray-50 dark:bg-gray-900">
      <div className="max-w-6xl mx-auto">
        <h2 className="text-3xl font-bold text-center mb-4 dark:text-white">料金プラン</h2>
        <p className="text-center text-gray-600 dark:text-gray-400 mb-12">あらゆる規模のチームに最適なプラン</p>
        <div className="grid md:grid-cols-3 gap-8">
          {plans.map((plan) => (
            <div
              key={plan.name}
              className={`bg-white dark:bg-gray-800 rounded-2xl p-8 shadow-sm relative ${
                plan.popular ? 'ring-2 ring-blue-600 scale-105' : ''
              }`}
            >
              {plan.popular && (
                <span className="absolute -top-3 left-1/2 -translate-x-1/2 bg-blue-600 text-white text-xs px-3 py-1 rounded-full">
                  人気
                </span>
              )}
              <h3 className="text-xl font-bold dark:text-white">{plan.name}</h3>
              <div className="mt-4 mb-6">
                {plan.price !== null ? (
                  <span className="text-4xl font-extrabold dark:text-white">${plan.price.toLocaleString()}</span>
                ) : (
                  <span className="text-4xl font-extrabold dark:text-white">要相談</span>
                )}
                {plan.price !== null && <span className="text-gray-500 ml-1">/月</span>}
              </div>
              <ul className="space-y-3 mb-8">
                {plan.features.map((f) => (
                  <li key={f} className="flex items-center gap-2 text-gray-600 dark:text-gray-300">
                    <span className="text-green-500">✓</span> {f}
                  </li>
                ))}
              </ul>
              <button className={`w-full py-3 rounded-lg font-medium transition ${
                plan.popular
                  ? 'bg-blue-600 text-white hover:bg-blue-700'
                  : 'bg-gray-100 dark:bg-gray-700 hover:bg-gray-200 dark:hover:bg-gray-600 dark:text-white'
              }`}>
                {plan.cta}
              </button>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

FAQセクション

// src/components/FAQ.tsx
import { useState } from 'react';

const faqs = [
  { q: '無料トライアルに制限はありますか？', a: 'すべての機能を14日間無料でご利用いただけます。' },
  { q: '解約はいつでもできますか？', a: 'はい、いつでもワンクリックで解約可能です。' },
  { q: 'データのエクスポートはできますか？', a: 'CSV・JSON形式でいつでもエクスポートできます。' },
];

export function FAQ() {
  const [openIndex, setOpenIndex] = useState<number | null>(null);

  return (
    <section className="py-20 px-4 max-w-3xl mx-auto">
      <h2 className="text-3xl font-bold text-center mb-12 dark:text-white">よくある質問</h2>
      <div className="space-y-4">
        {faqs.map((faq, i) => (
          <div key={i} className="border dark:border-gray-700 rounded-lg">
            <button
              onClick={() => setOpenIndex(openIndex === i ? null : i)}
              className="w-full flex justify-between items-center p-5 text-left font-medium dark:text-white"
            >
              {faq.q}
              <span className="text-xl">{openIndex === i ? '−' : '+'}</span>
            </button>
            {openIndex === i && (
              <div className="px-5 pb-5 text-gray-600 dark:text-gray-300">{faq.a}</div>
            )}
          </div>
        ))}
      </div>
    </section>
  );
}

コンバージョン最適化のポイント

Claude Codeにはさらに、A/Bテストの仕組みやアナリティクスのイベントトラッキングも実装を依頼できます。ファーストビューのCTAボタンの配置やコピーを工夫するだけで、コンバージョン率は大きく変わります。

関連記事

Tailwind CSSの活用法はTailwind CSS Tips、SEO対策はSEO最適化ガイドを参照してください。

LPのデザインパターンはlandingfolio.comで多くの事例を確認できます。