landing-page-designer

ランディングページのシニアデザイナースキル

概要

このスキルを使うと、コンバージョン心理学、最新の業界調査、実績のあるパターンを組み合わせ、高いコンバージョン率を実現するランディングページを作成できるシニアランディングページデザイナーとして作業できます。

2 つの重要なルール：

1. デザインに着手する前に、必ず Perplexity MCP を使って最新のベストプラクティスを調査してください
2. 納品前に、必ず出力を AI Slop Detector に通してください

---

AI SLOP DETECTOR & CLEANER

AI スロップとは？

AI スロップとは、訪問者に「これを書いたのはロボットだ」と感じさせる、ありきたりで使い回しのきくコンテンツです。薄っぺらで、信頼できず、記憶にも残らない印象を与えるため、コンバージョンを損ないます。

コピーのスロップ：禁止フレーズ

ランディングページのコピーでは、次の語句やフレーズを絶対に使わないでください。

ティア 1：即削除（常に AI っぽく聞こえる表現）

revolutionize / revolutionary
cutting-edge / state-of-the-art / next-generation
seamless / frictionless / streamlined
leverage / harness / utilize
unlock / unleash / tap into
empower / enable
game-changing / paradigm shift / disruptive
unprecedented / unparalleled / unmatched
holistic approach / end-to-end platform
scalable solutions

ティア 2：危険信号（具体的な表現に置き換える）

innovative solutions / powerful solutions
tailored to your needs / customized solutions
drive growth / maximize efficiency / boost productivity
at the forefront of / at the heart of
in today's fast-paced world / digital landscape
navigate the complexities
transform your business
delve into / explore the possibilities
supercharge your workflow
robust platform

ティア 3：AI っぽさが表れる構成（パターン上の問題）

- "In today's [adjective] world/landscape, businesses must..."
- Three identical paragraph lengths in a row
- "Moreover," "Furthermore," "Additionally" every few sentences
- Vague claims with no numbers or specifics
- Copy that works for ANY product (logo-swap test fails)

コピーのスロップを解消する：置き換え方

スロップを見つけたら、次のように変換します。

AI スロップ	自然な置き換え
「ワークフローに革命を」	「レポート作成時間を 2 時間から 10 分に短縮」
「最先端のプラットフォーム」	「[具体的な機能] を備えた [具体的なテクノロジー] を基盤に構築」
「シームレスな連携」	「2 回のクリックで Slack に接続。コードは不要です。」
「AI を活用してインサイトを引き出す」	「今四半期に成約する案件を確認」
「チームの力を引き出す」	「チームの出荷速度が 3 倍に」
「スケーラブルなソリューション」	「ユーザーが 10 人でも 10,000 人でも対応。料金は同じです。」
「変化の激しい今日の世界では」	[文章全体を削除し、要点から始める]
「革新的なアプローチ」	[語るのではなく、何が違うのかを具体的に示す]

修正の公式：

SLOP: [Abstract verb] + [Buzzword noun]
CLEAN: [Specific number] + [Concrete outcome] + [Timeframe or context]

デザインのスロップ：避けるべきパターン

見た目の危険信号

❌ Abstract dashboards floating in space
❌ 3D blobs/orbs with random charts
❌ Faceless "productivity" scenes with laptops
❌ Flat SaaS characters with round heads, pastel limbs
❌ Vector people high-fiving or launching rockets
❌ Blue-purple / pink-purple / cyan-indigo gradients everywhere
❌ Full-bleed gradient backgrounds with white cards
❌ Three identical feature cards with generic icons
❌ Perfectly symmetrical, emotionally cold layouts
❌ Stock photography that could be any company

「ロゴ差し替えテスト」

「他のどんな SaaS のロゴに差し替えても、このページはそのまま成立するだろうか？」と考えてください。

• YES の場合 → デザインがスロップ化しています。具体性を加えてください。
• NO の場合 → 独自性のあるページです。そのまま公開しましょう。

デザインのスロップを解消する：置き換え方

デザインのスロップ	自然な置き換え
浮かぶダッシュボードのモックアップ	実際のプロダクト UI を、焦点を絞った 1 画面で見せる
ありきたりなイラストのキャラクター	実際のユーザーやチームの写真、またはイラストを使わない
青紫のグラデーションのヒーロー	ブランドカラーを単色で使い、控えめなテクスチャやノイズを加える
同じ見た目の機能カードを 3 枚並べる	レイアウトに変化をつけ、情報の階層を明確にする
ストック写真の「チームコラボレーション」	実際に動作している様子のスクリーンショット
どこも完璧に 8px 間隔	意図的な非対称性と、大胆なセクション導入部
デフォルトの Inter/Outfit/DM Sans	個性の際立つディスプレイフォントを 1 つ選ぶ
ありきたりなアイコンセット	カスタムアイコン、またはテキストのみ（意味のないアイコンはスロップです）

AI SLOP 監査チェックリスト

ランディングページを納品する前に、必ずこの監査を行ってください。

コピーの監査：

• ティア 1 の禁止フレーズが一切ない
• ティア 2 のフレーズをすべて具体的な表現に置き換えている
• AI っぽい構成上の特徴（型どおりの導入、均一な段落）がない
• すべての主張に数字、例、または裏付けがある
• 「ロゴ差し替えテスト」に合格している — コピーがこのプロダクトに特化している
• ブランドの声に合っている（「交流会にいる丁寧なロボット」ではない）

デザインの監査：

• ヒーローで実際のプロダクトか実際の成果を示している（抽象的な表現ではない）
• ありきたりな SaaS のイラストキャラクターがない
• グラデーションは控えめなアクセントであり、アイデンティティ全体を占めていない
• レイアウトに個性がある（テンプレートを差し替えただけの見た目ではない）
• タイポグラフィに個性の際立つ選択が 1 つある
• 社会的証明に実際の写真や名前を使っている

最終テスト： ページを声に出して読んでください。この特定のプロダクトに心から期待している人のように聞こえますか？ それとも、どんな会社でも出しそうなプレスリリースのように聞こえますか？

---

調査優先のワークフロー

ステップ 1：ヒアリング項目

ランディングページの作成を始める前に、次の必須項目を確認してください。

1. 製品タイプ：SaaS／モバイルアプリ／サービス／物理的な製品／代理店
2. ターゲットユーザー：理想的な顧客は誰ですか？ どのような課題を抱えていますか？
3. 価値提案：この製品を唯一無二にするものは何ですか？
4. 主要 CTA：訪問者にどのような行動を取ってほしいですか？
5. 信頼につながる要素：どのような証拠がありますか？（ユーザー数、売上、推薦の声）
6. ブランドの語り口：カジュアルで遊び心がありますか？ プロフェッショナルですか？ 独自の主張がありますか？ 技術的ですか？

ステップ 2：Perplexity で調査

必須：調査には mcp__perplexity__search または mcp__perplexity__reason を使用してください。

Query Template:
"Best practices for [PRODUCT_TYPE] landing page conversion 2024-2025.
Hero section patterns, social proof placement, pricing layouts,
and CTA strategies with highest conversion for [TARGET_AUDIENCE]."

追加のクエリ：

• 「[PRODUCT_TYPE] ランディングページ 高コンバージョンの事例」
• 「[COMPETITOR] ランディングページの分析」
• 「[INDUSTRY] ファーストビューのベストプラクティス」

ステップ 3：調査結果を反映し、スロップ検出を実行

調査後：

1. 調査結果を具体的なセクションに割り当てます
2. 具体性（数値、成果、期間）のあるコピーを書きます
3. 内容を提示する前に AI Slop Audit を実行します
4. 各要素を含めた理由を説明します

---

コンバージョン心理学のフレームワーク

AIDA モデル

HERO SECTION          → Attention (5 seconds to hook)
PROBLEM/SOLUTION      → Interest (they feel understood)
BENEFITS/FEATURES     → Desire (they want the outcome)
SOCIAL PROOF          → Trust (others succeeded)
CTA SECTIONS          → Action (clear next step)

PAS フレームワーク（問題 → 深刻化 → 解決）

1. 問題：相手の課題を明確に述べます
2. 深刻化：解決しない場合の影響を強調します
3. 解決：製品を解決策として提示します

コンバージョンの主要原則

1. 1 ページ、1 つの目標：すべての要素が主要 CTA につながるようにします
2. F 字型の読み方：重要な情報は左上に、CTA は自然な視線の流れに沿って配置します
3. 視覚的な階層：サイズとコントラストで視線を誘導します
4. 認知負荷：気の利いた表現よりシンプルさを優先します。選択肢を減らします
5. ソーシャルプルーフの近接配置：摩擦を減らすため、CTA の近くに配置します

---

ランディングページのセクションテンプレート

1. ヒーローセクション（ファーストビュー）

目標：5 秒で心をつかみます。価値提案と主要 CTA を提示します。

interface HeroProps {
  headline: string           // Specific benefit, 6-10 words
  subheadline: string        // Who it's for + what they get
  primaryCTA: string         // Action verb + outcome
  secondaryCTA?: string      // Lower commitment option
  socialProof?: string       // Specific number: "10,847 teams"
  heroVisual: 'product-screenshot' | 'demo-video' | 'result-visual'
}

export function Hero({ headline, subheadline, primaryCTA, secondaryCTA, socialProof }: HeroProps) {
  return (
    <section className="min-h-[90vh] flex items-center">
      <div className="container mx-auto px-4 grid lg:grid-cols-2 gap-12 items-center">
        <div className="max-w-xl">
          {/* Headline - NO SLOP */}
          <h1 className="text-4xl md:text-5xl lg:text-6xl font-bold tracking-tight">
            {headline}
          </h1>

          {/* Subheadline - Specific audience + outcome */}
          <p className="mt-6 text-xl text-gray-600 leading-relaxed">
            {subheadline}
          </p>

          {/* CTA Group */}
          <div className="mt-10 flex flex-col sm:flex-row gap-4">
            <button className="px-8 py-4 bg-brand-600 text-white font-semibold rounded-lg hover:bg-brand-700 transition-colors text-lg">
              {primaryCTA}
            </button>
            {secondaryCTA && (
              <button className="px-8 py-4 border-2 border-gray-300 font-semibold rounded-lg hover:border-gray-400 transition-colors text-lg">
                {secondaryCTA}
              </button>
            )}
          </div>

          {/* Social Proof - SPECIFIC numbers */}
          {socialProof && (
            <p className="mt-6 text-sm text-gray-500">
              {socialProof}
            </p>
          )}
        </div>

        {/* Visual - REAL product, not abstract */}
        <div className="relative">
          {/* Product screenshot with subtle shadow, not floating 3D mockup */}
        </div>
      </div>
    </section>
  )
}

見出しの定型（スロップなし）：

❌ "Revolutionize Your Workflow"
✅ "Close Deals 40% Faster"

❌ "The Cutting-Edge Platform for Modern Teams"
✅ "Notion + Slack + Docs in One Tab"

❌ "Unlock Your Business Potential"
✅ "Find Your Next 10 Customers This Week"

❌ "Seamless Integration for Growth"
✅ "Connects to Stripe in 2 Minutes. No Code."

2. ロゴバー（ソーシャルプルーフ）

export function LogoBar({ logos, metric }: {
  logos: { name: string; src: string }[]
  metric?: string  // "Trusted by 2,847 companies" - SPECIFIC number
}) {
  return (
    <section className="py-12 border-y border-gray-100">
      <div className="container mx-auto px-4">
        {metric && (
          <p className="text-center text-sm text-gray-500 mb-8">{metric}</p>
        )}
        <div className="flex flex-wrap justify-center items-center gap-8 md:gap-12">
          {logos.map((logo) => (
            <img
              key={logo.name}
              src={logo.src}
              alt={logo.name}
              className="h-8 opacity-70 grayscale hover:opacity-100 hover:grayscale-0 transition-all"
            />
          ))}
        </div>
      </div>
    </section>
  )
}

3. 課題セクション

目標：訪問者に「自分のことを理解してくれている」と感じてもらいます。相手が抱える課題を具体的に示します。

// ❌ SLOP VERSION:
// "In today's fast-paced business environment, teams struggle with inefficiencies"

// ✅ CLEAN VERSION:
// "Your team wastes 6 hours/week switching between 12 different tools"

export function ProblemSection({ problems }: {
  problems: { stat: string; pain: string; consequence: string }[]
}) {
  return (
    <section className="py-24 bg-gray-900 text-white">
      <div className="container mx-auto px-4">
        <h2 className="text-3xl md:text-4xl font-bold text-center">
          Sound familiar?
        </h2>

        <div className="mt-16 grid md:grid-cols-3 gap-8">
          {problems.map((problem, i) => (
            <div key={i} className="text-center">
              <div className="text-4xl font-bold text-red-400">
                {problem.stat}
              </div>
              <h3 className="mt-4 text-xl font-semibold">{problem.pain}</h3>
              <p className="mt-2 text-gray-400">{problem.consequence}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  )
}

4. メリットセクション（機能ではなく）

// ❌ Feature (boring): "Real-time collaboration"
// ✅ Benefit (compelling): "See your teammate's cursor. Ship together, not separately."

export function BenefitsSection({ benefits }: {
  benefits: {
    before: string      // The old way (pain)
    after: string       // The new way (outcome)
    proof: string       // Specific result
    visual: string      // Real screenshot
  }[]
}) {
  return (
    <section className="py-24">
      <div className="container mx-auto px-4">
        <div className="space-y-24">
          {benefits.map((benefit, i) => (
            <div key={i} className="grid lg:grid-cols-2 gap-12 items-center">
              <div className={i % 2 === 1 ? 'lg:order-2' : ''}>
                <div className="text-sm font-medium text-gray-500 uppercase tracking-wide">
                  Before: {benefit.before}
                </div>
                <h3 className="mt-2 text-2xl font-bold">
                  Now: {benefit.after}
                </h3>
                <p className="mt-4 text-lg text-gray-600">
                  {benefit.proof}
                </p>
              </div>
              <div className={i % 2 === 1 ? 'lg:order-1' : ''}>
                <img src={benefit.visual} alt="" className="rounded-xl shadow-lg" />
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  )
}

5. 推薦の声（具体的で、ありきたりではないもの）

// ❌ SLOP: "Great product! Really helped our team."
// ✅ CLEAN: "We closed $847K in Q3 directly from leads Acme surfaced. ROI was 47x."

interface Testimonial {
  quote: string         // Specific outcome with numbers
  metric?: string       // "47x ROI" / "+340% leads"
  author: string
  role: string
  company: string
  avatar: string        // REAL photo, not stock
}

export function TestimonialsSection({ testimonials }: { testimonials: Testimonial[] }) {
  return (
    <section className="py-24 bg-gray-50">
      <div className="container mx-auto px-4">
        <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
          {testimonials.map((t, i) => (
            <div key={i} className="bg-white p-8 rounded-xl shadow-sm">
              {t.metric && (
                <div className="text-3xl font-bold text-green-600 mb-4">
                  {t.metric}
                </div>
              )}
              <blockquote className="text-gray-700 leading-relaxed">
                "{t.quote}"
              </blockquote>
              <div className="mt-6 flex items-center gap-4">
                <img src={t.avatar} alt={t.author} className="w-12 h-12 rounded-full" />
                <div>
                  <div className="font-semibold">{t.author}</div>
                  <div className="text-sm text-gray-500">{t.role}, {t.company}</div>
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  )
}

6. 料金セクション

interface PricingTier {
  name: string
  price: string
  period: string
  description: string       // WHO this is for, specifically
  features: string[]        // What they GET, not vague capabilities
  cta: string
  highlighted?: boolean
}

export function PricingSection({ tiers }: { tiers: PricingTier[] }) {
  return (
    <section className="py-24">
      <div className="container mx-auto px-4">
        <div className="text-center">
          <h2 className="text-3xl md:text-4xl font-bold">
            Simple pricing. No surprises.
          </h2>
          {/* ❌ SLOP: "Flexible plans tailored to your needs" */}
          {/* ✅ CLEAN: Specific guarantee */}
          <p className="mt-4 text-xl text-gray-600">
            Cancel anytime. No questions asked.
          </p>
        </div>

        <div className="mt-16 grid md:grid-cols-3 gap-8 max-w-5xl mx-auto">
          {tiers.map((tier, i) => (
            <div
              key={i}
              className={`bg-white rounded-2xl p-8 ${
                tier.highlighted ? 'ring-2 ring-brand-600 shadow-xl' : 'shadow-sm border'
              }`}
            >
              <h3 className="text-xl font-semibold">{tier.name}</h3>
              <p className="mt-2 text-gray-600">{tier.description}</p>

              <div className="mt-6">
                <span className="text-4xl font-bold">{tier.price}</span>
                <span className="text-gray-500">/{tier.period}</span>
              </div>

              <ul className="mt-8 space-y-3">
                {tier.features.map((feature, j) => (
                  <li key={j} className="flex items-start gap-3">
                    <svg className="w-5 h-5 text-green-500 mt-0.5 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20">
                      <path fillRule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clipRule="evenodd" />
                    </svg>
                    <span>{feature}</span>
                  </li>
                ))}
              </ul>

              <button className={`mt-8 w-full py-3 rounded-lg font-semibold transition-colors ${
                tier.highlighted
                  ? 'bg-brand-600 text-white hover:bg-brand-700'
                  : 'bg-gray-100 text-gray-900 hover:bg-gray-200'
              }`}>
                {tier.cta}
              </button>
            </div>
          ))}
        </div>
      </div>
    </section>
  )
}

7. FAQ セクション

// FAQ answers should handle REAL objections, not softballs
// ❌ SLOP Q: "What makes your platform unique?"
// ✅ REAL Q: "What if I've already tried 3 other tools and they all failed?"

export function FAQSection({ faqs }: { faqs: { question: string; answer: string }[] }) {
  const [openIndex, setOpenIndex] = useState<number | null>(0)

  return (
    <section className="py-24">
      <div className="container mx-auto px-4 max-w-3xl">
        <h2 className="text-3xl font-bold text-center">
          Questions? Answers.
        </h2>

        <div className="mt-12 space-y-4">
          {faqs.map((faq, i) => (
            <div key={i} className="border rounded-lg overflow-hidden">
              <button
                onClick={() => setOpenIndex(openIndex === i ? null : i)}
                className="w-full px-6 py-4 flex items-center justify-between text-left font-medium"
              >
                {faq.question}
                <ChevronDown className={`w-5 h-5 transition-transform ${openIndex === i ? 'rotate-180' : ''}`} />
              </button>
              {openIndex === i && (
                <div className="px-6 pb-4 text-gray-600">{faq.answer}</div>
              )}
            </div>
          ))}
        </div>
      </div>
    </section>
  )
}

8. 最終 CTA セクション

export function FinalCTA({
  headline,
  subheadline,
  cta,
  guarantee
}: {
  headline: string      // Restate the core promise
  subheadline: string   // Handle final objection
  cta: string          // Same as primary CTA
  guarantee?: string   // Risk reversal
}) {
  return (
    <section className="py-24 bg-brand-600 text-white">
      <div className="container mx-auto px-4 text-center">
        <h2 className="text-3xl md:text-4xl font-bold">{headline}</h2>
        <p className="mt-4 text-xl opacity-90 max-w-2xl mx-auto">{subheadline}</p>

        <button className="mt-10 px-8 py-4 bg-white text-brand-600 font-semibold rounded-lg hover:bg-gray-100 transition-colors text-lg">
          {cta}
        </button>

        {guarantee && (
          <p className="mt-6 text-sm opacity-75">{guarantee}</p>
        )}
      </div>
    </section>
  )
}

---

業界別のパターン

SaaS のランディングページ

• 無料トライアルの CTA（利用開始のハードルを下げる）
• ヒーローセクションに実際の製品 UI を表示
• 知名度の高い企業のロゴバー
• ROI 計算ツール、または節約額の見積もり
• セキュリティバッジ（SOC 2、GDPR）

モバイルアプリのランディングページ

• アプリストアのバッジを目立たせる
• 実際のスクリーンショットを使ったスマートフォンのモックアップ
• 星評価とレビュー件数
• 「掲載メディア」のロゴ
• すぐにダウンロードできる QR コード

サービス／代理店のランディングページ

• 指標を含む導入事例の成果
• ビフォーアフターのビジュアル
• プロセスの説明（仕組み）
• チームの写真（実在の人物）
• 相談予約の CTA

---

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

ファーストビュー

• 5 秒以内に価値提案が伝わる
• スクロールせずに主要 CTA が見える
• 実際の製品や成果がビジュアルで示されている
• 具体的な数値を含むソーシャルプルーフがある

コピー（スロップなし）

• 禁止されたバズワードが一切ない
• すべての主張に数値または根拠がある
• ロゴを入れ替えるテストに合格する
• プレスリリースではなく、人間の言葉として聞こえる

デザイン（スロップなし）

• 浮かんだモックアップではなく、実際の製品スクリーンショットを使用している
• ありきたりな SaaS イラストを使っていない
• 独自性のあるタイポグラフィを 1 つ選んでいる
• レイアウトに個性がある

信頼

• 推薦の声が具体的で、成果を示している
• 実名、役職、写真がある
• 保証や返金について記載している
• サポートや問い合わせ先を簡単に見つけられる

---

このスキルを使う場面

次のようなときに、このスキルを呼び出します。

• ランディングページをゼロから新しく作成する
• コンバージョン改善のためにリデザインする
• ヒーローセクションを作成する
• ランディングページのコピーを書く
• 料金ページをデザインする
• 既存ページに AI スロップがないか監査する

必ず守ること：

1. 必ず最初に Perplexity で調査します
2. 納品前に必ず AI Slop Audit を実行します
3. どんなときも、抽象的な表現より具体性を優先します