landing-page-guide

ランディングページガイド

概要

このスキルでは、DESIGNNAS の「11 の必須要素」フレームワークに沿った、プロフェッショナルでコンバージョン率の高いランディングページを作成できます。Next.js 14 以降および ShadCN UI と連携した React の完全な実装パターンを提供し、すべてのランディングページに適切な SEO 最適化、アクセシビリティ基準、コンバージョンを重視したデザインを取り入れます。

このスキルを使用する場面

次のようなリクエストがあった場合に、このスキルを使用してください。

• ランディングページ、マーケティングページ、または製品ページの作成
• Next.js または React ベースのプロモーションサイト
• 訪問者を顧客に転換する必要のあるページ
• SEO 最適化を施したプロフェッショナルなマーケティングページ
• 業界のベストプラクティスに沿ったランディングページ

11 の必須要素フレームワーク

効果的なランディングページには、次の 11 の必須要素をすべて含める必要があります。これらは、コンバージョン率の高いランディングページを実現する、DESIGNNAS の実証済みフレームワークに基づいています。

1. キーワードを含む URL - SEO に最適化された、わかりやすい URL 構成
2. 会社のロゴ - ブランドアイデンティティを目立つ位置（左上）に配置
3. SEO に最適化されたタイトルとサブタイトル - キーワードを含む明確な価値提案
4. 主要 CTA - ヒーローセクションに配置するメインの行動喚起ボタン
5. ソーシャルプルーフ - レビュー、評価、ユーザー統計
6. 画像または動画 - 製品やサービスを視覚的に紹介
7. 主なメリット／機能 - アイコン付きの 3～6 個の主な利点
8. 顧客の推薦文 - 写真付きの信頼できるレビュー 4～6 件
9. FAQ セクション - アコーディオン UI で表示する、よくある質問 5～10 件
10. 最後の CTA - コンバージョンの再機会を設ける、ページ下部の行動喚起
11. 連絡先情報／法的ページ - 必要な情報をすべて掲載したフッター

重要： すべてのランディングページに 11 の要素をすべて含めてください。例外はありません。

各要素の詳しい説明については、references/11-essential-elements.md を参照してください。

技術スタックの要件

ランディングページを作成する際は、必ず以下を使用してください。

必須の技術

• Next.js 14+ と App Router
• TypeScript による型安全性
• Tailwind CSS によるスタイリング
• すべての UI コンポーネントに ShadCN UI

インストールする ShadCN UI コンポーネント

ランディングページを作成する前に、次のコンポーネントがインストールされていることを確認してください。

npx shadcn-ui@latest add button
npx shadcn-ui@latest add card
npx shadcn-ui@latest add accordion
npx shadcn-ui@latest add badge
npx shadcn-ui@latest add avatar
npx shadcn-ui@latest add separator
npx shadcn-ui@latest add input

ShadCN UI を使用する理由

• アクセシビリティ：WCAG 準拠のコンポーネント
• カスタマイズ性：Tailwind CSS で完全にカスタマイズ可能
• 型安全性：TypeScript で記述
• パフォーマンス：必要なものだけをコピーでき、バンドルサイズを最小限に抑えられる
• 一貫性：デザインシステムを内蔵

プロジェクト構成

次の構成でランディングページを作成してください。

landing-page/
├── app/
│   ├── layout.tsx          # Root layout with metadata
│   ├── page.tsx            # Main landing page
│   └── globals.css         # Global styles
├── components/
│   ├── Header.tsx          # Logo & Navigation (Element 2)
│   ├── Hero.tsx            # Title, CTA, Social Proof (Elements 3-5)
│   ├── MediaSection.tsx    # Images/Videos (Element 6)
│   ├── Benefits.tsx        # Core Benefits (Element 7)
│   ├── Testimonials.tsx    # Customer Reviews (Element 8)
│   ├── FAQ.tsx             # FAQ Accordion (Element 9)
│   ├── FinalCTA.tsx        # Bottom CTA (Element 10)
│   └── Footer.tsx          # Contact & Legal (Element 11)
├── public/
│   └── images/             # Optimized images
└── package.json

実装ワークフロー

ステップ 1：メタデータを設定する（SEO）

layout.tsx または page.tsx で、適切な SEO メタデータを設定することから始めてください。

import type { Metadata } from 'next'

export const metadata: Metadata = {
  title: 'SEO Optimized Title with Keywords | Brand Name',
  description: 'Compelling description with main keywords',
  keywords: ['keyword1', 'keyword2', 'keyword3'],
  openGraph: {
    title: 'OG Title',
    description: 'OG Description',
    images: ['/og-image.jpg'],
  },
}

ステップ 2：コンポーネント構成を作成する

適切な流れを確保するため、次の順序でコンポーネントを作成してください。

1. ロゴを含む Header（要素 2）
2. タイトル、サブタイトル、主要 CTA、ソーシャルプルーフを含む Hero セクション（要素 3～5）
3. 製品の画像や動画を含む MediaSection（要素 6）
4. 3～6 個の機能カードを含む Benefits セクション（要素 7）
5. 顧客レビューを含む Testimonials（要素 8）
6. アコーディオンを含む FAQ（要素 9）
7. ページ下部の FinalCTA（要素 10）
8. 連絡先と法的ページへのリンクを含む Footer（要素 11）

ステップ 3：ShadCN UI コンポーネントを使用する

各セクションに適切な ShadCN コンポーネントを割り当ててください。

• Hero CTA：size="lg" の Button コンポーネントを使用
• Benefits：Card、CardHeader、CardTitle、CardContent を使用
• Testimonials：Card、Avatar、Badge を使用
• FAQ：Accordion、AccordionItem、AccordionTrigger、AccordionContent を使用
• Final CTA：Button と Card を使用
• Footer：ニュースレター用に Separator と Input を使用

ステップ 4：レスポンシブデザインを実装する

モバイルファーストのレスポンシブデザインにしてください。

• Tailwind のレスポンシブプレフィックス sm:、md:、lg:、xl: を使用
• すべてのブレークポイントをテスト：640px（sm）、768px（md）、1024px（lg）、1280px（xl）
• タッチターゲットの最小サイズ：ボタンは 44x44px
• 基本のフォントサイズ：モバイルでは最低 16px

Step 5: パフォーマンスを最適化する

• すべての画像に Next.js の Image コンポーネントを使用します
• ファーストビューに表示される画像には priority プロパティを追加します
• ファーストビューより下のコンテンツには遅延読み込みを実装します
• 必要に応じて、負荷の大きいコンポーネントには動的インポートを使用します

Step 6: アクセシビリティを確保する

• セマンティックな HTML5 要素（<header>、<main>、<section>、<footer>）を使用します
• 必要な箇所に ARIA ラベルを追加します
• キーボード操作が機能することを確認します
• すべての画像に代替テキストを設定します
• 十分な色のコントラストを確保します（最低でも WCAG AA）

コンポーネントの例

ShadCN UI を使用した、完全で本番環境対応のコンポーネント実装については、references/component-examples.md を参照してください。

このリファレンスファイルには、以下が含まれています。

• Button、Badge、画像の最適化を使用したヒーローセクション
• Card コンポーネントを使用したベネフィットセクション
• Avatar と Card を使用したお客様の声
• Accordion を使用した FAQ
• Card と Button を使用した最後の CTA
• Separator とリンクを使用したフッター

ベストプラクティスに沿ってコンポーネントを実装するため、このリファレンスを読み込んでください。

検証チェックリスト

ランディングページを完成させる前に、以下を確認してください。

必須の 11 要素：

• 1. キーワードを含む URL
• 2. 会社のロゴ（左上）
• 3. SEO に最適化されたタイトルとサブタイトル
• 4. ヒーローセクションの主要 CTA
• 5. 社会的証明（レビュー、統計情報）
• 6. 画像または動画
• 7. ベネフィット／機能セクション（3～6 項目）
• 8. お客様の声（4～6 件）
• 9. FAQ セクション（5～10 問）
• 10. ページ下部の最後の CTA
• 11. お問い合わせ先と法的情報へのリンクを含むフッター

技術要件：

• App Router を使用した Next.js 14 以降
• TypeScript の型を定義
• Tailwind CSS でスタイリング
• ShadCN UI コンポーネントを使用
• SEO 用のメタデータを設定
• Next.js Image で画像を最適化
• レスポンシブデザインを実装
• アクセシビリティ基準を満たす
• パフォーマンスを最適化

ベストプラクティス

コンテンツのガイドライン

• 明確で、ベネフィットを重視したコピーを作成します
• CTA には行動を促す表現を使用します
• 適切な見出しを使い、各セクションをすばやく把握できるようにします
• 具体的な数値や統計情報を含めます
• 実名を用いた信頼できるお客様の声を使用します

デザインのガイドライン

• ページ全体で視覚的な階層を維持します
• 一貫したカラーパレットを使用します
• 十分な余白を確保します
• 読みやすいフォントを選びます（基本サイズ 16px 以上）
• モバイルファーストでデザインします

SEO の最適化

• コンテンツにキーワードを自然に含めます
• 見出しタグを適切な構造で使用します（H1 → H2 → H3）
• すべての画像に代替テキストを追加します
• ページの読み込み速度を最適化します
• 説明的なメタタグを作成します

コンバージョンの最適化

• CTA を戦略的に配置します（最低でもヒーローセクションとページ下部）
• ユーザーの利用プロセスでの障壁を減らします
• 信頼性を示す要素を目立たせます
• CTA にはコントラストのある色を使用します
• CTA の文言を複数パターンでテストします

よく使われるパターン

SaaS プロダクトのランディングページ

重視する項目：無料トライアルの CTA、機能比較、料金の明確さ、セキュリティバッジ

E コマース商品のランディングページ

重視する項目：商品画像、価格、配送情報、返品ポリシー、緊急性

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

重視する項目：ポートフォリオ／導入事例、プロセスの説明、チームの実績、お問い合わせフォーム

イベント／ウェビナーのランディングページ

重視する項目：日時の明示、登壇者のプロフィール、アジェンダ、登録フォーム、カウントダウンタイマー

リソース

references/

このスキルには、詳細なリファレンスドキュメントが含まれています。

• 11-essential-elements.md - 11 の必須要素それぞれの原則、実装のヒント、例を詳しく説明します
• component-examples.md - 主要なすべてのセクションについて、ShadCN UI を使用した完全な本番環境対応コンポーネントコードを掲載しています

特定のセクションを実装する際や、要素について詳しいガイダンスが必要な場合は、必要に応じてこれらのリファレンスを読み込んでください。

注意事項

• このフレームワークは、DESIGNNAS の「11 Essential Landing Page Elements」に基づいています
• 必要に応じて、ブランドガイドラインやターゲットオーディエンスに合わせて調整してください
• A/B テストを活用して、コンバージョン率を継続的に向上させてください
• すべての実装で、ユーザーエクスペリエンスとコンバージョンの最適化を優先してください