Skill 詳細

landing-pages

Broad landing-page conversion structure, CTA, and testing guidance.

一致度直接一致ランディングページ 向けにレビュー済み
出典flitzrrr/frontend-design-skills外部ソース
報告インストール数26人気度の参考値

使用前に確認

自動レビューは関連性のみを確認し、安全性や推奨を保証しません。使用前に出典の説明を読んでください。

保存された出典プレビュー

SKILL.md

これはレビュー時に保存された抜粋です。完全で最新の内容は外部ソースを確認してください。

---
name: landing-pages
description: Conversion-oriented page structure, CTA design, above-the-fold optimization, page types, and A/B testing for maximum conversion rates.
---

# Landing Pages

> Every landing page pursues exactly one primary conversion goal. Multiple competing goals reduce the conversion rate. One goal, one page.

## Scope

Use this skill when you:
- Create a landing page for lead generation or sales
- Design CTA buttons and conversion elements
- Optimize the above-the-fold area
- Strategically place social proof
- Plan A/B tests for landing pages
- Select the right landing page type for a given goal

## Principles

### 1. One Goal, One Page
Every landing page pursues exactly one primary conversion goal. Multiple goals reduce the rate.

### 2. The Landing Page Is Not the Homepage
Homepages inform broadly. Landing pages sell or generate leads — targeted and distraction-free.

### 3. The Visitor Is Pre-Qualified
Anyone who lands on a landing page has already seen an ad or searched for a keyword. The page must deliver on the promise made.

### 4. Trust Before Transaction
No user converts without trust. Social proof, transparency, and professional design are mandatory.

### 5. Mobile-First Is Mandatory
Over half of all visitors arrive on mobile. A page that does not work on a smartphone wastes half its potential.

### 6. Testing Beats Opinions
Whether a CTA button should be red or green is decided by A/B test data, not by a designer.

## Rules

### DO: Choose the Right Landing Page Type

| Type | Goal | Length | Distinguishing Feature |
|---|---|---|---|
| Opt-in Page | Generate leads | Short–medium | Freebie or value exchange |
| Sales Page | Sell product/service | Long | Address all objections |
| Click-Through Page | Advance to next funnel step | Short | Build interest, don't sell |
| Squeeze Page | Capture minimal data | Minimal | Only email field and CTA |
| Webinar/Event Page | Generate registrations | Medium | Date, speaker, countdown |

### DO: Deliver the Core Message Above the Fold
The visible area without scrolling must contain:
1. **Headline:** Clear benefit in one sentence. No wordplay, no riddles.
2. **Subheadline:** Elaboration or objection handling.
3. **Hero Visual:** Image or video that visualizes the benefit.
4. **CTA Button:** Visible, high-contrast, action-oriented.
5. **Trust Element:** At least one social proof element.

### DO: Design Action-Oriented CTA Buttons
- PHRASE as action with benefit: "Start your free trial," "Request a quote."
- NOT: "Submit," "Continue," "Click here."
- VISUALLY stand out from the rest (contrast color).
- On long pages, repeat the CTA after each section.
- Maximum 1 primary CTA type per page.

### DO: Follow the Conversion Structure (Long-Form)
1. **Name the problem** — Show understanding of the pain point.
2. **Present the solution** — Your offer as the answer.
3. **Specify the benefits** — Bullet points with advantages (not features).
4. **Provide social proof** — Testimonials, case studies, ratings.
5. **Address objections** — FAQ section.
6. **Create urgency** — Only when genuine (limitation, countdown).
7. **Repeat the CTA** — Final, prominent call to action.

### DO: Keep Forms Minimal
- Only absolutely necessary data. Every field lowers conversion.
- Opt-in: Ideally email only.
- Sales: Name and email for initial contact.

### DO: Remove or Minimize Navigation
- Landing pages have NO full website navigation.
- Maximum: Logo (linked to main site), legal notice/privacy policy in the footer.

### DON'T: Break the Ad's Promise
- If the ad promises "Free consultation," the page must deliver exactly that.

### DON'T: Use Unrelated Stock Photos
- Generic business stock photos do not build trust.
- Use real photos or meaningful product visualizations.

### DON'T: Offer Multiple Equivalent CTAs
- One goal per page. Period.

### DON'T: Launch Without Testing
- A landing page without an A/B test plan is hope-based marketing.
- Test at minimum: headline variants, CT
GitHub で全文を読む (外部ページ)
関連情報

関連する仕事