Web Sales Design（日本語版）

ウェブセールスデザイン

販売するウェブサイトを構築する技術。マーケティング戦略でも、コピーライティングでも、A/Bテストインフラでもありません。実際のデザインパターン、ビジュアルシステム、インタラクティブ技術で、訪問者を顧客に変えます。

基本原則: 最高のセールスデザインは見えないものです。訪問者は「これは自分に売りつけている」とは思いません。「これはまさに私が必要としているものだ」と思うのです。すべてのピクセル、すべてのスクロールリビール、すべてのソーシャルプルーフの配置は、信頼と欲望を構築するか、それを損なうかのどちらかです。中立は存在しません。

---

使用タイミング

使用する場面:

• 訪問者をサインアップ/購入に変換する必要があるランディングページの設計
• 効果的な階層構造を持つ価格ページの構築
• ソーシャルプルーフ（推薦文、ロゴ、ケーススタディ）の配置と設計
• クリックされるCTAボタンの作成（サイズ、色、コピー、配置）
• 長文セールスページの構造化（問題-煽り-解決のスクロールシーケンス）
• トラストシグナルの追加（セキュリティバッジ、保証、実在の人物の顔）
• インタラクティブなプロダクトデモと機能ツアーの作成
• 「感動の瞬間」の構築（スクロールトリガーによるリビール、ビフォー/アフター比較）
• 既存ページのコンバージョンデザイン上の弱点の監査

使用しない場面:

• コピーライティングとメッセージ戦略 → product-appeal-analyzerまたはコピーライティングスキルを使用
• A/Bテストの実装 → frontend-developerを使用
• 有料広告クリエイティブ → マーケティングスキルを使用
• UXフリクション監査 → ux-friction-analyzerを使用（補完的 — 両方を実行）
• 一般的なウェブデザイン → web-design-expertを使用
• 決済/サブスクリプション実装 → webapp-paywall-implementationを使用

---

スクロール駆動型セールスページの設計図

現代の長文セールスページは、心理的な弧を描きます。各セクションには役割があります。セクションをスキップすると、ページから訪問者が流出します。

8セクション構造

┌─────────────────────────────────────────────┐
│  1. ヒーロー — 約束 + アイデンティティシグナル      │  ← 0-5秒
│     「これは自分と同じような人のためのものだ」        │
├─────────────────────────────────────────────┤
│  2. ロゴバー — ソーシャルプルーフのショートカット    │  ← 5-10秒
│     「知っている名前から信頼されている」            │
├─────────────────────────────────────────────┤
│  3. 問題 — 痛みの認識                   │  ← 10-30秒
│     「彼らは私の状況を理解している」              │
├─────────────────────────────────────────────┤
│  4. 煽り — 行動しないことの結果          │  ← 30-60秒
│     「これは思っていたより深刻だ」              │
├─────────────────────────────────────────────┤
│  5. 解決策 — 解決策としてのプロダクト      │  ← 1-2分
│     「これがどのように機能するか + デモ」        │
├─────────────────────────────────────────────┤
│  6. 証明 — 深いソーシャルプルーフ          │  ← 2-3分
│     「実際の人が、実際の結果を出している」        │
├─────────────────────────────────────────────┤
│  7. 価格 — オファーのアーキテクチャ       │  ← 3-4分
│     「明確な価値、明白な選択肢」                │
├─────────────────────────────────────────────┤
│  8. 最終CTA — 緊急性 + 保証              │  ← 決定ポイント
│     「リスクフリー、今すぐ行動」                │
└─────────────────────────────────────────────┘

セクションごとの実装

セクション1: ヒーロー（5秒の判断）

ヒーローは訪問者が留まるか去るかを決定します。すべての要素がそのピクセルに値する必要があります。

レイアウトパターン — 収束型ヒーロー:

function HeroSection() {
  return (
    <section className="hero">
      {/* アイブロウ — ささやきのような信頼性 */}
      <p className="hero-eyebrow">2,400以上のエンジニアリングチームに信頼されています</p>

      {/* ヘッドライン — 一つの約束、ベネフィット駆動 */}
      <h1 className="hero-headline">
        機能を数時間でリリース、<br />スプリント単位ではなく
      </h1>

      {/* サブヘッドライン — 一文で「どのように」 */}
      <p className="hero-subheadline">
        AI搭載のワークフロー自動化が、バックログをレビュー済み、テスト済み、
        準備完了のデプロイ可能なコードに変えます。
      </p>

      {/* CTAクラスター — プライマリ + 低コミットメントのセカンダリ */}
      <div className="hero-cta-cluster">
        <a href="/signup" className="cta-primary">
          無料で使い始める
        </a>
        <a href="/demo" className="cta-secondary">
          2分のデモを見る
        </a>
      </div>

      {/* ビジュアルプルーフ — スクリーンショットではなく、動作中のプロダクト */}
      <div className="hero-visual">
        <video autoPlay muted loop playsInline>
          <source src="/demo-clip.mp4" type="video/mp4" />
        </video>
      </div>
    </section>
  );
}

.hero {
  padding: 5rem 2rem 4rem;
  text-align: center;
  max-width: 800px;
  margin: 0 auto;
}

.hero-eyebrow {
  font-size: 0.875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-primary);
  margin-bottom: 1rem;
}

.hero-headline {
  font-size: clamp(2.25rem, 5vw, 3.75rem);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.025em;
  margin-bottom: 1.25rem;
}

.hero-subheadline {
  font-size: clamp(1.125rem, 2vw, 1.375rem);
  line-height: 1.6;
  color: var(--color-text-secondary);
  max-width: 600px;
  margin: 0 auto 2rem;
}

.hero-cta-cluster {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 3rem;
}

最高のデザインが違う点（Stripe、Linear、Vercel、Notion）:

• Stripe: 装飾的ではなく生きているように感じるアニメーショングラデーション背景。マイクロインタラクションを通じてプロダクトの機能が明らかに — スクロールするとプロダクトが自分自身をデモする。
• Linear: 「本格的なビルダーのためのパワーツール」をシグナルするダークモード。視覚的な無駄がゼロ。デザインそれ自体がプロダクトの約束 — スピードと精度。
• Vercel: プロダクト全体を定義する一行を備えたタイポグラフィ重視のヒーロー。CTAは「Sign Up」ではなく「Start Deploying」 — アクション指向。
• Notion: スクリーンショットではなく、プロダクトが動作しているところを見せる。ヒーローそれ自体がミニデモ。

セクション2: ロゴバー（信頼のショートカット）

4〜6個の認知されたロゴ。20個ではありません。量は価値を薄め、質が価値を検証します。

function LogoBar() {
  return (
    <section className="logo-bar">
      <p className="logo-bar-label">
        以下のチームから信頼されています
      </p>
      <div className="logo-bar-logos">
        {logos.map(logo => (
          <img
            key={logo.name}
            src={logo.src}
            alt={logo.name}
            className="logo-bar-logo"
          />
        ))}
      </div>
    </section>
  );
}

.logo-bar {
  padding: 2rem 2rem;
  text-align: center;
  border-top: 1px solid var(--color-border-subtle);
  border-bottom: 1px solid var(--color-border-subtle);
}

.logo-bar-label {
  font-size: 0.8125rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-text-tertiary);
  margin-bottom: 1.25rem;
}

.logo-bar-logos {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2.5rem;
  flex-wrap: wrap;
}

.logo-bar-logo {
  height: 28px;
  opacity: 0.5;
  filter: grayscale(1);
  transition: opacity 0.2s, filter 0.2s;
}

.logo-bar-logo:hover {
  opacity: 1;
  filter: grayscale(0);
}

デザインルール:

• デフォルトでグレースケールロゴ（視覚的ノイズが減り、逆説的に信頼性が向上する）
• 元の比率に関わらず、すべてのロゴの視覚的高さを統一（28-32px）
• 5つのロゴが最適 — それ以下だと寂しく、それ以上だとごちゃごちゃして見える
• ラベルは上に配置（「Trusted by」、「Used by teams at」）
• 認知されたロゴがない場合は、代わりに指標を使用：「2,400+ teams」、「10M+ deploys」

セクション3: 問題（痛みの認識）

訪問者は自分が「理解された」と感じる必要があります。このセクションは彼らの苦闘を検証します。

パターン: 3つの痛みのグリッド

function ProblemSection() {
  return (
    <section className="problem-section">
      <h2 className="section-eyebrow">心当たりはありませんか？</h2>
      <div className="pain-grid">
        <PainCard
          icon={<ClockIcon />}
          title="レビューサイクルに何週間も費やしている"
          description="PRが何日も放置される。コンテキストが失われる。エンジニアは承認を待つ間、機能を切り替えながら作業する。"
        />
        <PainCard
          icon={<AlertTriangleIcon />}
          title="それでもバグはすり抜ける"
          description="手動レビューはスタイルの問題はキャッチできても、ロジックのバグは見逃す。本番環境を壊すものは、結局本番環境を壊す。"
        />
        <PainCard
          icon={<TrendingDownIcon />}
          title="リリース速度が頭打ち"
          description="エンジニアを増やしても、成果は同じ。プロセスのオーバーヘッドがチームよりも速く成長する。"
        />
      </div>
    </section>
  );
}

デザインルール:

• プロダクトの専門用語ではなく、訪問者の言葉を使う
• 最大3つの痛点（それ以上はインパクトを薄める）
• アイコンは感情を強化するために使い、装飾のために使わない
• このセクションは訪問者を「うなずかせ」、ひるませない — 共感であり、恐怖ではない

セクション4: 煽り（何もしないことの代償）

このセクションは賭け金を引き上げます。恐怖ではなく、問題が実際にどれだけのコストを伴うかを明確にすることで行います。

パターン: 結果のカスケード

エスカレートする結果を示します：浪費される時間、失われるお金、逃す機会、低下するチームの士気。可能な場合は実際の数値を使用します（「平均的なチームはコードレビューのオーバーヘッドに週14時間を失っている」）。

デザインアプローチ: より暗い背景、ややタイトなタイポグラフィ、オプションで蓄積される浪費を示すアニメーションカウンター。このセクションは問題セクションよりも視覚的に「重く」— 解決策が到着する前の最低点です。

セクション5: 解決策（解決策としてのプロダクト）

感情的な転換点。ページは問題から可能性へとシフトします。

パターン: スクロールトリガーによるリビールを伴う機能紹介

function SolutionSection() {
  return (
    <section className="solution-section">
      <h2>これがどのように機能するか</h2>
      <div className="feature-showcase">
        {features.map((feature, i) => (
          <FeatureRow
            key={feature.id}
            reverse={i % 2 === 1}  /* 交互レイアウト */
            title={feature.title}
            description={feature.description}
            visual={feature.visual}  /* ビデオ、アニメーション、またはインタラクティブ */
          />
        ))}
      </div>
    </section>
  );
}

function FeatureRow({ reverse, title, description, visual }) {
  const ref = useRef(null);
  const isVisible = useIntersectionObserver(ref, { threshold: 0.3 });

  return (
    <div
      ref={ref}
      className={`feature-row ${reverse ? 'reverse' : ''}`}
      style={{
        opacity: isVisible ? 1 : 0,
        transform: isVisible ? 'translateY(0)' : 'translateY(2rem)',
        transition: 'opacity 0.6s ease, transform 0.6s ease',
      }}
    >
      <div className="feature-text">
        <h3>{title}</h3>
        <p>{description}</p>
      </div>
      <div className="feature-visual">
        {visual}
      </div>
    </div>
  );
}

.feature-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
  padding: 4rem 0;
}

.feature-row.reverse {
  direction: rtl;
}

.feature-row.reverse > * {
  direction: ltr;
}

.feature-text h3 {
  font-size: 1.5rem;
  font-weight: 700;
  margin-bottom: 0.75rem;
}

.feature-text p {
  font-size: 1.125rem;
  line-height: 1.7;
  color: var(--color-text-secondary);
}

@media (max-width: 768px) {
  .feature-row {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  .feature-row.reverse {
    direction: ltr;
  }
}

これを販売につなげるもの:

• 交互レイアウトがスクロールの単調さを防ぐ
• ビジュアルはインタラクティブまたはアニメーション — 静止画像ではない
• 各機能は「能力」（「自動化されたCI/CD」）ではなく「ベネフィット」（「3倍速くリリース」）としてフレーミングされる
• スクロールトリガーによるリビールが発見の瞬間を生み出す — 読むにつれてページが「展開」する
• 最大3〜5機能。それ以上だとリストアップになり、販売にならない。

セクション6: 証明（深いソーシャルプルーフ）

推薦文、ケーススタディ、指標。ここで懐疑心は消え去ります。

function ProofSection() {
  return (
    <section className="proof-section">
      <h2>チームは私たちと共に、より速くリリースしています</h2>

      {/* 指標バー — 具体的な数字 */}
      <div className="metrics-bar">
        <Metric value="73%" label="レビューサイクルの短縮" />
        <Metric value="2.4x" label="週あたりのデプロイ増加" />
        <Metric value="89%" label="本番バグの削減" />
      </div>

      {/* 注目の推薦文 — 顔写真付きの強力な引用 */}
      <blockquote className="featured-testimonial">
        <img src="/testimonials/sarah.jpg" alt="Sarah Chen" />
        <div>
          <p className="quote">
            「月に一度のリリースから、毎日リリースできるようになりました。
            チームは今やレビュープロセスを実際に楽しんでいます。」
          </p>
          <cite>
            <strong>Sarah Chen</strong>
            <span>VP Engineering, Acme Corp</span>
          </cite>
        </div>
      </blockquote>

      {/* 推薦文グリッド — 証明の広がり */}
      <div className="testimonial-grid">
        {testimonials.map(t => (
          <TestimonialCard key={t.id} {...t} />
        ))}
      </div>
    </section>
  );
}

.metrics-bar {
  display: flex;
  justify-content: center;
  gap: 4rem;
  padding: 3rem 0;
}

.metric-value {
  font-size: 3rem;
  font-weight: 800;
  color: var(--color-primary);
  line-height: 1;
}

.metric-label {
  font-size: 0.9375rem;
  color: var(--color-text-secondary);
  margin-top: 0.5rem;
}

.featured-testimonial {
  display: flex;
  gap: 2rem;
  align-items: flex-start;
  padding: 2.5rem;
  background: var(--color-surface-elevated);
  border-radius: 1rem;
  border: 1px solid var(--color-border-subtle);
  margin: 3rem 0;
}

.featured-testimonial img {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

.featured-testimonial .quote {
  font-size: 1.25rem;
  line-height: 1.6;
  font-style: italic;
  margin-bottom: 1rem;
}

.testimonial-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1.5rem;
}

ソーシャルプルーフの階層（強いものから弱いものへ）:

1. 名前 + 写真 + 会社 + 役職 + 具体的な結果（「Sarah Chen、VP Engineering、Acme Corp — リリースサイクルを73%短縮」） — 最も強力
2. 名前 + 会社 + 役職 — 具体的な結果がない
3. 名前 + 会社 — 役職がない
4. 匿名 — 「Acme Corpのエンジニアリングマネージャー」
5. 単なるロゴ — 最も弱いが、ないよりはまし

証明の設定ルール:

• 指標バーを最初に。数字は注目を集める
• 1つの深い推薦文を特徴的に。浅い推薦文を5つ集めるよりも強力
• 推薦文には顔写真を。実在の人物がレビューを書いたことを証明する
• つまり、特定の結果。漠然とした「素晴らしいプロダクト」ではなく、具体的な「リリースサイクルを73%短縮」

セクション7: 価格（オファーのアーキテクチャ）

ここがほとんどの販売ページが失敗する場所です。価格ページはコストを正当化するのではなく、価値を具体化する必要があります。

最も強い価格ページパターン:

function PricingSection() {
  return (
    <section className="pricing-section">
      <h2>チームに合ったプランをお選びください</h2>
      <p className="pricing-subtitle">
        いつでもアップグレードまたはダウングレード可能。すべてのプランに14日間の無料トライアルが付いています。
      </p>
      <div className="pricing-grid">
        <PricingCard
          name="Starter"
          price="$29"
          period="/月"
          description="個人や小規模チーム向け"
          features={[
            "5つのアクティブプロジェクト",
            "10GBのストレージ",
            "メールサポート",
            "基本的な分析",
          ]}
          cta="無料で始める"
        />
        <PricingCard
          name="Professional"
          price="$99"
          period="/月"
          description="成長するチーム向け"
          featured={true}  /* 推奨プラン */
          features={[
            "無制限のプロジェクト",
            "100GBのストレージ",
            "優先サポート",
            "高度な分析とレポート",
            "カスタム統合",
            "チームコラボレーション",
          ]}
          cta="プロフェッショナルを始める"
        />
        <PricingCard
          name="Enterprise"
          price="カスタム"
          period=""
          description="大規模組織向け"
          features={[
            "無制限のすべて",
            "専用アカウントマネージャー",
            "SLA保証",
            "オンプレミス展開オプション",
            "カスタム契約条件",
          ]}
          cta="営業に問い合わせる"
        />
      </div>
      <p className="pricing-footer">
        年間契約の場合は2ヶ月分無料。詳細については<a href="/contact">お問い合わせ</a>ください。
      </p>
    </section>
  );
}

価格ページデザインルール:

• 推奨プランを常にハイライト — これが最も多くの人に選ばせたいプランです。アンカリング効果が働きます。
• 最も人気のあるオプションを最初に表示しない — 左から右へ: 安い、高い、最も高い（ただし推奨を真ん中にハイライト）。
• 年間 vs 月々は明確に — 年間の方がお得であることを示す。「月額$99、年間契約なら月額$79」
• 機能比較表は効果的だが、別ページにする — 価格ページでは、各プランを最良の視点で見せる。客観的な比較は比較ページに。
• CTAはプラン名と一致させる：「Starterを始める」ではなく「無料で始める」、「Enterpriseを始める」ではなく「営業に問い合わせる」

機能の並び順: 価値のある機能を最初に。最も印象的なものから。トグルスイッチや「含む/含まない」は、決定に役立つのであって、混乱させるためではない。

セクション8: 最終CTA（決断の瞬間）

訪問者はここで決断します。躊躇するすべての理由を取り除いてください。

強力な最終CTAの構成要素:

function FinalCTA() {
  return (
    <section className="final-cta">
      <h2>今すぐリリースを加速しましょう</h2>
      <p className="final-cta-subtitle">
        クレジットカードは不要。14日間は完全無料。
        いつでもキャンセルできます。
      </p>
      <div className="final-cta-actions">
        <a href="/signup" className="cta-primary cta-large">
          無料で使い始める
        </a>
      </div>
      <div className="final-cta-trust">
        <GuaranteeBadge text="14日間返金保証" />
        <SecurityBadge text="256ビットSSL暗号化" />
        <TestimonialMini 
          text="設定からデプロイまで10分" 
          author="Acme Corp"
        />
      </div>
    </section>
  );
}

最終CTAのルール:

• リスクを排除する: 保証、無料トライアル、簡単なキャンセルを前面に
• 単一のアクション: 選択肢は1つだけ。迷わせない
• 緊急性（正直に）: 偽の緊急性（「残り3時間！」）は信頼を損なう。本当の緊急性（「初月50%オフは金曜日まで」）は機能する
• コンテキストに応じた保証: 低価格帯の製品には返金保証。高額なB2B製品には、導入期間と成果が保証されていることを示す
• 決断のハードルを下げる: 「今すぐ始める」→「アカウント作成は30秒」

---

トラストシグナルライブラリ

セキュリティバッジ

function SecurityBadges() {
  return (
    <div className="security-badges">
      <Badge icon={<LockIcon />} text="256ビットSSL" />
      <Badge icon={<ShieldIcon />} text="SOC 2 Type II準拠" />
      <Badge icon={<CheckIcon />} text="GDPR準拠" />
    </div>
  );
}

保証バッジ

function GuaranteeBadge({ text }) {
  return (
    <div className="guarantee-badge">
      <ShieldCheckIcon />
      <span>{text}</span>
    </div>
  );
}

.guarantee-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  border: 1px solid var(--color-border-subtle);
  border-radius: 9999px;
  font-size: 0.875rem;
  color: var(--color-text-secondary);
}

トラストシグナルの配置ルール:

• CTAボタンの近くに配置（邪魔にならない程度に近く）
• 価格ページには最低3つのトラストシグナル
• セキュリティバッジは購入フローの最後に（チェックアウト時）
• 推薦文はトラストシグナルとしてカウントされる — 理想的には、各価格プランの横に推薦文を1つずつ
• 実在の人物の顔写真は、ロゴよりも信頼性が高い

---

インタラクティブデモパターン

製品内ツアー（スクロール駆動型）

function ProductTour() {
  const [activeStep, setActiveStep] = useState(0);
  const sectionRef = useRef(null);

  useScrollSpy(sectionRef, {
    steps: [
      { id: 'step-1', threshold: 0.2 },
      { id: 'step-2', threshold: 0.4 },
      { id: 'step-3', threshold: 0.6 },
      { id: 'step-4', threshold: 0.8 },
    ],
    onStepChange: (stepIndex) => setActiveStep(stepIndex),
  });

  return (
    <section ref={sectionRef} className="product-tour">
      <div className="tour-steps">
        {steps.map((step, i) => (
          <div
            key={step.id}
            className={`tour-step ${i === activeStep ? 'active' : ''}`}
          >
            <StepNumber number={i + 1} />
            <h3>{step.title}</h3>
            <p>{step.description}</p>
          </div>
        ))}
      </div>
      <div className="tour-visual">
        {/* アクティブなステップに基づいてUIを切り替え */}
        {renderStepVisual(activeStep)}
      </div>
    </section>
  );
}

ビフォー/アフター比較

function BeforeAfterComparison({ before, after }) {
  const [sliderPosition, setSliderPosition] = useState(50);

  const handleMouseMove = (e) => {
    const rect = e.currentTarget.getBoundingClientRect();
    const x = e.clientX - rect.left;
    setSliderPosition((x / rect.width) * 100);
  };

  return (
    <div
      className="comparison-slider"
      onMouseMove={handleMouseMove}
    >
      <div className="comparison-after" style={{ clipPath: `inset(0 ${100 - sliderPosition}% 0 0)` }}>
        {after}
      </div>
      <div className="comparison-before">
        {before}
      </div>
      <div className="comparison-handle" style={{ left: `${sliderPosition}%` }}>
        <ArrowLeftRightIcon />
      </div>
    </div>
  );
}

.comparison-slider {
  position: relative;
  overflow: hidden;
  cursor: ew-resize;
  user-select: none;
  border-radius: 0.75rem;
}

.comparison-after {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

.comparison-handle {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 4px;
  background: white;
  z-index: 2;
  transform: translateX(-50%);
  box-shadow: 0 0 8px rgba(0,0,0,0.3);
  display: flex;
  align-items: center;
}

インタラクティブデモのルール:

• マウス/タッチに応答するものは、強力なエンゲージメントを生み出す。操作できることは記憶に残る
• 自動再生ビデオ（音声なし）は、ユーザーが操作する必要がないため、コンバージョンにおいて同等かそれ以上に効果的な場合がある
• 製品内ツアーは、「機能リスト」よりもターゲットを絞り、説明的で、覚えてもらいやすい
• ビフォー/アフターは、目に見える結果を示す場合に最も効果的

---

CTAデザインシステム

CTAクラスターのパターン

function CTACluster({ primary, secondary }) {
  return (
    <div className="cta-cluster">
      <a href={primary.href} className="cta-primary">
        {primary.label}
        <ArrowRightIcon className="cta-primary-icon" />
      </a>
      <a href={secondary.href} className="cta-secondary">
        {secondary.label}
      </a>
    </div>
  );
}

.cta-primary {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.875rem 1.75rem;
  background: var(--color-primary);
  color: white;
  font-weight: 600;
  border-radius: 0.5rem;
  text-decoration: none;
  transition: background 0.2s, transform 0.1s;
}

.cta-primary:hover {
  background: var(--color-primary-hover);
  transform: translateY(-1px);
}

.cta-secondary {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.875rem 1.75rem;
  background: transparent;
  color: var(--color-text);
  font-weight: 500;
  border-radius: 0.5rem;
  border: 1px solid var(--color-border);
  text-decoration: none;
  transition: background 0.2s, border-color 0.2s;
}

.cta-secondary:hover {
  background: var(--color-surface-elevated);
  border-color: var(--color-text-tertiary);
}

/* CTA領域（フッターなど）の近くではサイズを大きく */
.cta-large {
  padding: 1.125rem 2.25rem;
  font-size: 1.125rem;
}

CTA設計ルール:

• プライマリCTAは常に1つだけ。 セカンダリCTAは補完的であり、競合しない
• アクションでラベル付けする: 「サインアップ」よりも「無料で始める」の方が良い。「購入」よりも「今すぐ始める」の方が良い
• 適切なサイズ: 小さすぎると見逃される。大きすぎると押しつけがましい。周囲のテキストより1.5〜2倍大きく
• コントラスト: プライマリCTAはページ上で最もコントラストの高い要素であるべき
• ホワイトスペース: CTAの周りにスペースを。詰め込みすぎない
• モバイル: CTAはタップしやすい大きさに（最小44×44ピクセル）

---

コンバージョン監査チェックリスト

既存のページを評価する際には、各項目を確認してください:

ヒーロー

• 訪問者は5秒以内に自分に向けたメッセージだと理解できるか？
• ヘッドラインは1つの約束をしているか？
• サブヘッドラインは「どのように機能するか」を説明しているか？
• プライマリCTAは1つだけで、アクション指向か？
• ヒーローのビジュアルは機能を実演しているか？

社会的証明

• 最初のフォールドにロゴバーはあるか？
• ロゴは認知され、関連性があるか？
• 推薦文には実在の人物の顔と結果が含まれているか？
• 具体的な指標（パーセンテージ、数値）はあるか？

価格

• 推奨プランはハイライトされているか？
• 機能は価値の高い順に並んでいるか？
• 年間 vs 月々の料金は比較可能か？
• トラストシグナルは価格設定の近くにあるか？
• CTAはプラン名と一致しているか？

CTA

• 各セクションに1つのプライマリCTAがあるか？
• CTAはアクションでラベル付けされているか（「サインアップ」ではなく「始める」）？
• CTAは最もコントラストの高い要素か？
• 邪魔なセカンダリリンクはないか？

全体的なこと

• 各セクションには1つの役割がありますか？
• ページは1つのストーリーを語っていますか？
• 訪問者の抵抗点はすべて対処されていますか？
• フォールドの上にあるものが十分に説得力を持っていますか？
• すべての画像が最適化され、高速に読み込まれますか？

---

まとめ

販売ページのデザインは、人々がどのように決断するかを理解することです。彼らは機能を比較するのではなく、感情的な物語を評価しています。彼らは「これは私の問題を解決するか？」と尋ねるのではなく、「これは私のような人のためのものか？」と尋ねています。

あなたの仕事は、彼らの内部の物語と一致するページをデザインすることです。

• 彼らの問題を認識する
• 行動しないことの代償を明確にする
• 明確で摩擦の少ない解決策を示す
• 彼らが信頼できる人々がすでにそれを購入したことを証明する
• 価格を価値の文脈に位置づける
• リスクを取り除く
• そして決定を求める

最高の販売デザインは販売のように感じさせません。それは、訪問者が下そうとしていた決断を下しやすくするだけです。