Rapidly Building Landing Pages: 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で多くの事例を확인할 수 있습니다。