landing-page-guide-v2

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

概要

このスキルを使うと、次の要素を組み合わせた独自性があり、高いコンバージョン率を実現するランディングページを作成できます。

• 実証済みのコンバージョンフレームワーク：高いコンバージョン率を実現する、DESIGNNAS による11の必須要素
• 卓越したデザイン品質：忘れられないブランド体験を生み出す、大胆な美的選択
• 本番環境に対応したコード：ShadCN UI、TypeScript、パフォーマンス最適化を備えた Next.js 14+

理念：ランディングページは訪問者をコンバージョンへ導くと同時に、ブランドを記憶に残さなければなりません。ありきたりなテンプレート風のページは、その両方に失敗します。このスキルを使えば、機能面で効果的であり、視覚的にも並外れたランディングページを実現できます。

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

次のような依頼を受けた場合に、このスキルを使用します。

• ランディングページ、マーケティングページ、または製品ページの作成
• Next.js または React ベースのプロモーションサイト
• 訪問者を顧客に転換し、かつ視覚的にも際立つ必要があるページ
• 優れたデザイン品質を備えた、プロフェッショナルなマーケティングページ
• ありきたりな「テンプレート」風のデザインを避けるランディングページ
• コンバージョンに最適化され、記憶にも残るブランド体験

デザインを考える：コードを書く前に

ランディングページを実装する前に、ブランドと製品に合った大胆なデザインの方向性を決めてください。

1. 背景を理解する

• 目的：この製品はどのような問題を解決しますか？ターゲットオーディエンスは誰ですか？
• ブランドの個性：このブランドは、遊び心がある、プロフェッショナル、高級、ミニマル、大胆、技術的のどれに当たりますか？
• 業界：この業界で期待されるビジュアル表現はどのようなものですか（それとも、あえて覆すべきですか）？
• 差別化：このブランドを忘れられないものにしているのは何ですか？訪問者が覚えて帰ることは何ですか？

2. デザインの方向性を選ぶ

際立った方向性を選び、徹底して貫きます。例：

ミニマル＆洗練

• 極めてすっきりとしたレイアウト、ゆとりのある余白
• 大きなサイズ差を生かした洗練されたタイポグラフィ
• モノクロ、または色数を絞ったパレット（最大2～3色）
• 控えめなマイクロインタラクション、優雅なトランジション
• 例：高級製品、プロフェッショナルサービス、プレミアム SaaS

大胆＆マキシマリスト

• 豊かで複雑なビジュアルレイヤー
• ダイナミックなアニメーションとスクロールエフェクト
• グラデーションメッシュ、テクスチャ、重なり合う要素
• コントラストの高い鮮やかなカラーパレット
• 例：クリエイティブエージェンシー、エンターテインメント、若者向けブランド

レトロフューチャー

• 現代的な手法で表現するノスタルジックな要素
• 幾何学模様、ネオンのアクセント
• グリッチエフェクト、走査線、粒子状のテクスチャ
• 個性のある等幅フォントまたはディスプレイフォント
• 例：ゲーム、テック系スタートアップ、クリエイティブツール

オーガニック＆ナチュラル

• 柔らかく流れるような形状とグラデーション
• 自然に着想を得た色（アースカラー、パステルカラー）
• 自然な動きを模した滑らかなアニメーション
• 角丸、柔らかなシャドウ
• 例：ウェルネス、サステナビリティ、食品

エディトリアル＆マガジン

• 明確なタイポグラフィの階層
• グリッドを崩した非対称レイアウト
• 大きく印象的な画像
• 余白とネガティブスペースを大胆に活用
• 例：コンテンツプラットフォーム、メディア、教育

ブルータリスト＆ラフ

• 型破りなレイアウト、意図的な「粗さ」
• システムフォント、またはあえて簡素にしたタイポグラフィ
• 高いコントラスト、限定的な色使い
• アニメーションは最小限、または使用しない
• 例：アート、ファッション、反体制的なブランド

重要：明確な方向性を1つ選んでください。大胆なマキシマリズムも、洗練されたミニマリズムも効果的です。重要なのは強さではなく、意図の明確さです。選んだ方向性を、11のすべての要素で精密かつ一貫して表現してください。

3. デザインシステムを定義する

コーディングを始める前に、次の基本事項を決めます。

タイポグラフィの選択

• ディスプレイフォント：印象的で記憶に残るフォントを選びます（Inter、Roboto、Arial、システムフォントは避けてください）
  • 検討するフォント：Space Grotesk、Clash Display、Cabinet Grotesk、Syne、DM Serif Display、Zodiak、Fraunces、Archivo Black、Unbounded、Outfit
  • または、Google Fontsを賢く活用します：Playfair Display、Crimson Pro、Libre Baskerville、Epilogue、Plus Jakarta Sans
  • 絶対に一般的な選択肢に収束しないでください。プロジェクトごとにフォントを変えましょう
• 本文フォント：ディスプレイフォントを引き立てる、洗練された読みやすいフォントを選びます
  • 検討するフォント：DM Sans、General Sans、Switzer、Geist、Manrope、Karla、Work Sans
• スケール：明確な階層を設定します（例：H1：4rem → H2：3rem → H3：2rem → 本文：1rem）

カラーパレット

• 主役となる色：主要なブランドカラー（使用率60％）
• アクセントカラー：CTA向けのコントラストの強い色（使用率10％）
• ニュートラルパレット：グレーまたはアースカラー（使用率30％）
• 背景の方針：単色、グラデーション、テクスチャ、パターンのどれにしますか？
• 一貫性を保つため、CSS変数として定義します

モーションの方針

• ページ読み込み時：ヒーロー要素にanimation-delayを設定し、順番に表示させます
• スクロール時のインタラクション：フェードアップ、視差効果、スクロールをトリガーとしたアニメーションのどれにしますか？
• ホバー状態：控えめな拡大、色の変化、大胆な変形のどれにしますか？
• CTAアニメーション：煩わしくならずに、ボタンへ注意を引くにはどうしますか？

空間の使い方

• レイアウトスタイル：中央揃えで対称的にしますか？非対称で動きのある構成にしますか？グリッドを崩しますか？
• スペーシングシステム：タイトで密にしますか？余裕を持たせてゆったりさせますか？
• セクションの流れ：従来の縦積みにしますか？斜めにしますか？重ね合わせますか？

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

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

各要素には2つの要件があります。

1. 機能要件（コンバージョンのため）—必ず含めます
2. デザインの優秀さ（記憶に残るため）—際立った美しさが必要です

要素ごとのデザインガイド

1. キーワードを含むURL

機能面：SEOに最適化された、内容がわかりやすいURL構成 デザイン面：該当なし（SEOに特化）

2. 会社のロゴ（ヘッダー）

機能面：ブランドを示す要素を目立つ位置（左上）に配置します デザイン面で優れたものにするには：

• ページ読み込み時にアニメーションするロゴを検討します
• スクロールに合わせて滑らかに切り替わるスティッキーヘッダーを使います
• スクロール状態に応じてロゴマークを変化させます
• ヘッダーの背景を透明から、背景ぼかしのある不透明な表示へ切り替えます
• ディスプレイフォントの選択に合ったナビゲーションのタイポグラフィを使います

3. SEOに最適化されたタイトルとサブタイトル（ヒーロー）

機能面：キーワードを含む、明確な価値提案 デザイン面で優れたものにするには：

• タイポグラフィ：非常に大きく、忘れられないデザインにします（4rem～6rem以上）
• 選んだ個性的なディスプレイフォントを使います
• インパクトを出すため、グラデーションテキスト、アウトラインテキスト、テキストシャドウを検討します
• タイトルの単語を、時間差をつけてフェードインさせます（animation-delay）
• サブタイトルはタイトルの50％のサイズにし、異なるウェイトまたはフォントを使います
• 改行と余白で視覚的なリズムを加えます

4. メインCTA（ヒーロー）

機能面：ヒーローセクションに配置する、主要な行動喚起ボタン デザイン面で優れたものにするには：

• サイズ、色のコントラスト、配置を工夫し、見落とせないようにします
• 退屈な長方形は避け、ピル型、独自のボーダー、幾何学的な形状を検討します
• ホバー時の拡大、シャドウの広がり、色の変化などのマイクロインタラクションを加えます
• メインとサブの優先度を明確にした、2つのCTAを検討します
• タイトルの表示後に、視線を引きつけるエントランスアニメーションを加えます
• 矢印、アイコン、パルス効果など、視覚的な手がかりを加えます

5. ソーシャルプルーフ（ヒーロー）

機能面：レビュー、評価、ユーザー数などの統計 デザイン面で優れたものにするには：

• 数字を大きく表示し、読み込み時にカウントアップアニメーションを加えます
• グラデーション背景や控えめなボーダーを使った統計カードを作ります
• 顧客のアバターを円形に重ねて表示します
• 星評価を独自のスタイルで表示します（デフォルトの黄色い星は使いません）
• 「掲載メディア」のロゴを適切な間隔と不透明度で表示します
• お客様の声を切り替えて表示する機能や、アニメーション付きのソーシャルプルーフカルーセルを検討します

6. 画像または動画（メディアセクション）

機能：製品／サービスを視覚的に紹介します デザインの優れた点：

• 重要：プレースホルダーや汎用的な画像は絶対に使用しないでください
• デバイスのモックアップ（ノートパソコンやスマートフォンのフレーム）を使った製品のスクリーンショット
• 奥行きを加えます：シャドウ、反射、3D 傾斜効果
• 検討する要素：スクリーンショットのフローティング表示、視差スクロール効果、動画背景
• スクロールに合わせた画像の表示アニメーション（フェードアップ、スライドイン）
• 動画の場合：カスタムの再生ボタンデザイン、周囲に広がる背景の光彩
• グリッドレイアウト：非対称、重ね合わせ、またはベントーボックススタイル

7. 主なメリット／機能

機能：アイコン付きの主な利点を3～6個紹介します デザインの優れた点：

• アイコン：独自にデザインするか、慎重に選びます（汎用的な線画アイコンは使用しません）
• 検討する要素：グラデーション塗り、ホバー時にアニメーションするアイコン、3D スタイルのイラスト
• カードデザインのバリエーション：グラスモーフィズム、ニューモーフィズム、グラデーションの枠線、控えめなシャドウ
• ユーザーがこのセクションまでスクロールしたときに、順番にアニメーションを表示します
• ありきたりな3列グリッドではなく、非対称のレイアウトにします
• 背景要素：控えめなパターン、グラデーション、または装飾的な図形
• タイポグラフィ：機能のタイトルにはディスプレイフォントを使用し、太字で目立たせます

8. 顧客の声

機能：写真付きの本物のレビューを4～6件掲載します デザインの優れた点：

• 写真の見せ方：グラデーションの枠線や独特な形状を使った円形アバター
• カードの背景：控えめなグラデーション、すりガラス、または浮き上がったようなシャドウ
• 引用符：大きく装飾的なもの、または独自のスタイル
• レイアウト：メイソンリーグリッド、カルーセル、または段違いの縦並び
• 評価の星：ブランドのカラーパレットに合わせた独自の色
• ホバー効果：浮き上がる、広がる、または光る
• 顧客の名前と肩書き：洗練されたタイポグラフィ

9. FAQ セクション

機能：アコーディオン UI でよくある質問を5～10件掲載します デザインの優れた点：

• アコーディオンのアニメーション：イージングを使った滑らかな展開／折りたたみ
• アイコン：回転する独自のシェブロンやプラス／マイナス記号
• 質問にホバー時のスタイルを設定します
• タイポグラフィ：質問は太字にするか、異なる太さのフォントを使用します
• 検討する要素：デスクトップでは2列レイアウト、質問と回答を横並びにする
• 背景：前のセクションから色を控えめに変化させます
• 余白：アコーディオン項目の内側にゆとりを持たせます

10. 最後の CTA

機能：コンバージョンの機会をもう一度設けるため、ページ下部に行動喚起を配置します デザインの優れた点：

• ヒーローにふさわしい見せ場にします：ここが最後のチャンスです
• 印象的な背景（グラデーション、パターン、または色）を使った全幅セクション
• CTA ボタンはヒーローの CTA よりもさらに大きくします
• 緊急性を演出します：カウントダウンタイマー、枠数の限定、希少性を示す要素
• 説得力のあるコピーと小さなメリットで周囲を囲みます
• アニメーション：視差背景、フローティング要素、またはスクロール連動効果
• 検討する要素：ニュースレター／ウェイトリスト用のメールアドレス入力欄とボタンの組み合わせ

11. お問い合わせ情報／法的情報ページ（フッター）

機能：必要な情報と法的リンクをすべて含むフッター デザインの優れた点：

• 情報の階層が明確な複数列レイアウト
• ソーシャルアイコン：ホバー効果（色の変化、拡大・縮小、回転）
• ニュースレター登録：ボタンを横に配置したスタイル付き入力欄
• タイポグラフィ：小さめでも読みやすいサイズ（14～16px）
• 背景：ページ本文より暗い色、または本文と異なる色
• コンテンツとの区切り：控えめなグラデーションの線、または装飾的な区切り線
• 最下部のバー：適切な間隔を空けて著作権表示と法的リンクを配置します

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

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

デザインの美しさに関するガイドライン

優れたタイポグラフィ

• 絶対に汎用的なフォント（Inter、Roboto、Arial、Helvetica、system-ui）を使用しないでください
• ディスプレイフォントには、個性があり印象に残るものを選びます
• 慎重に組み合わせます：見出しにはディスプレイフォント、本文には洗練されたフォントを使用します
• 大胆にサイズを変えます：控えめな差ではなく、サイズに明確な差をつけて階層を作ります
• 文字間隔：ディスプレイフォントに合わせて調整します（通常は字間を詰める必要があります）
• 行の高さ：ディスプレイフォント＝1.1～1.2、本文＝1.6～1.8

色とビジュアルの一貫性

• すべての色に CSS 変数を定義する（一貫性を保つ）
• メインカラーを全体に使用する（CTA だけに限定しない）
• アクセントカラーは、アクセシビリティに十分なコントラストを確保する（最低 WCAG AA）
• 避けること：白地に紫のグラデーション（AI らしいデザインとして使われすぎています）
• 背景：グラデーション、メッシュ、パターン、テクスチャを使って雰囲気を演出する
  • グラデーションメッシュ：複数色の滑らかなグラデーション
  • ノイズテクスチャ：奥行きを出す控えめな粒子感
  • 幾何学模様：不透明度を低くしたドット、線、図形
  • レイヤー状の透過効果：色を重ねたセクション

動きとアニメーション

• ページ読み込み時：段階的な表示を取り入れた、緻密に構成されたアニメーションを1つ使用する
  • ヒーロータイトルの単語を順番にフェードインする（animation-delay: 0ms, 100ms, 200ms）
  • サブタイトルを続けて表示する（delay: 300ms）
  • CTA は最後に強調して表示する（delay: 500ms）
• スクロールアニメーション：セクションがビューポートに入るとフェードアップさせる
  • Intersection Observer API または Framer Motion のスクロールトリガーを使用する
  • カードは段階的に表示する（それぞれに少しずつ遅延を加える）
• ホバー状態：意外性と楽しさを加える
  • ボタン：拡大し、影を広げ、色を変化させる
  • カード：影を付けて浮き上がらせる
  • 画像：控えめにズームまたは視差効果を加える
• パフォーマンス：JavaScript より CSS アニメーションを優先する
  • transform と opacity を使用する（GPU で高速化）
  • width、height、top、left のアニメーションは避ける

空間構成とレイアウト

• グリッドを崩す：中央揃えの対称レイアウトを安易に使わない
• 非対称性：片側に大きなテキスト、もう片側にビジュアルを配置する
• 要素を重ねる：セクションを重ねて奥行きを出す
• 斜めの流れ：セクション間に斜めの区切りを入れる
• 十分な余白、または計算された密度（どちらかを選び、徹底する）
• Z 軸を意識する：影、ぼかし、レイヤーを使って奥行きを出す

ありきたりな AI らしいデザインを避ける

次のパターンは、ランディングページを「AI が生成した」ように見せ、印象に残らないものにします。

避けること：

• ❌ Inter／Roboto／Arial フォント
• ❌ 白い背景に紫のグラデーション
• ❌ 毎回、完全に中央揃えで対称的なレイアウト
• ❌ ありきたりな線画アイコン
• ❌ 初期設定の黄色い星評価
• ❌ 個性のない退屈な長方形のボタン
• ❌ ビジュアル上の工夫がない白い背景
• ❌ 型にはまった3列の機能グリッド
• ❌ ノートパソコンを指さす人物のストック写真

実践すること：

• ✅ ブランドの個性に合った、特徴的なフォントを選ぶ
• ✅ 独自のカラーパレットを選び、徹底する（紫に限定しない）
• ✅ 非対称性を取り入れた、意外性のあるレイアウトを作る
• ✅ 個性のあるアイコンをデザインまたは選定する
• ✅ すべての UI 要素をカスタムスタイルにして、デザインの雰囲気に合わせる
• ✅ 背景にテクスチャ、グラデーション、パターンを加える
• ✅ セクションごとにレイアウトを変える
• ✅ 製品のスクリーンショット、カスタムイラスト、または実際の写真を使用する

技術スタックの要件

ランディングページを作成する際は、常に次の技術を使用します。

必須の技術

• Next.js 14+（App Router を使用）
• TypeScript（型安全性のため）
• Tailwind CSS（スタイリング用）
• ShadCN UI（すべての UI コンポーネントに使用し、大幅にカスタマイズする）
• Framer Motion（任意。高度なアニメーション用）

インストールする 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 コンポーネントは最終デザインではなく、出発点です。大幅にカスタマイズしてください。

• コンポーネントファイルの初期スタイルを変更する
• Tailwind の設定にカスタムバリアントを追加する
• className プロパティで上書きする
• ブランド固有のスタイリング用にラッパーコンポーネントを作成する

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：まずデザインを考える（重要）

コードを書く前に、デザイン思考のセクションを完了してください。

1. ブランド、対象ユーザー、目的を理解する
2. 美的な方向性を決める（ミニマリスト、マキシマリスト、レトロなど）
3. デザインシステムを定義する：
   • ディスプレイフォントと本文フォント
   • カラーパレット（メインカラー、アクセントカラー、ニュートラルカラー）
   • モーション方針（ページ読み込み時、スクロール時、ホバー時）
   • 空間設計（レイアウトスタイル、間隔）

これらの決定事項を、メインコンポーネントファイルの先頭にコメントとして記載してください。

ステップ 2：デザインシステムを設定する（CSS 変数）

デザインシステムを含む globals.css または app.css を作成します。

@import url('https://fonts.googleapis.com/css2?family=Your+Display+Font&family=Your+Body+Font&display=swap');

:root {
  /* Typography */
  --font-display: 'Your Display Font', sans-serif;
  --font-body: 'Your Body Font', sans-serif;

  /* Colors */
  --color-primary: #your-dominant-color;
  --color-accent: #your-accent-color;
  --color-neutral: #your-neutral-color;
  --color-background: #your-bg-color;

  /* Spacing */
  --spacing-xs: 0.5rem;
  --spacing-sm: 1rem;
  --spacing-md: 2rem;
  --spacing-lg: 4rem;
  --spacing-xl: 6rem;

  /* Animation timing */
  --duration-fast: 150ms;
  --duration-medium: 300ms;
  --duration-slow: 500ms;
  --easing: cubic-bezier(0.4, 0, 0.2, 1);
}

/* Apply fonts */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
}

body {
  font-family: var(--font-body);
}

tailwind.config.ts を更新して、デザインシステムを使用するようにします。

export default {
  theme: {
    extend: {
      fontFamily: {
        display: ['var(--font-display)'],
        body: ['var(--font-body)'],
      },
      colors: {
        primary: 'var(--color-primary)',
        accent: 'var(--color-accent)',
        // ... etc
      },
    },
  },
}

ステップ 3：メタデータを設定する（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'],
  },
}

ステップ 4：デザインを反映したコンポーネント構造を作成する

以下の順番でコンポーネントを作成し、それぞれに美的な方向性を反映します。

1. Header - 滑らかなトランジションを備えたスティッキーナビゲーション
2. Hero - 大胆なタイポグラフィ、段階的なアニメーション、目を引く CTA
3. MediaSection - 奥行きのあるショーケース（シャドウ、3D 効果）
4. Benefits - 非対称レイアウト、カスタムアイコン、スクロール時のアニメーション
5. Testimonials - 独自のカードデザイン、カスタムアバター
6. FAQ - カスタムスタイルを施した滑らかなアコーディオン
7. FinalCTA - 印象的な全幅セクション
8. Footer - 洗練されたタイポグラフィを使った複数列のレイアウト

ステップ 5：ShadCN コンポーネントをカスタマイズする

各セクションに ShadCN コンポーネントを割り当て、大幅にカスタマイズします。

Hero CTA の例：

<Button
  size="lg"
  className="bg-accent hover:bg-accent/90 text-white px-12 py-6 text-xl font-display rounded-full shadow-2xl hover:shadow-accent/50 hover:scale-105 transition-all duration-300"
>
  Get Started →
</Button>

Benefits カードの例：

<Card className="border-2 border-primary/10 hover:border-primary/30 transition-all duration-300 hover:shadow-xl hover:-translate-y-1 bg-gradient-to-br from-white to-primary/5">
  {/* Custom content */}
</Card>

ステップ 6：アニメーションを実装する

表示時のアニメーションとスクロール効果を追加します。

// Hero title with staggered animation
<h1 className="text-6xl font-display font-bold">
  <span className="inline-block animate-fade-in" style={{ animationDelay: '0ms' }}>
    Beautiful
  </span>{' '}
  <span className="inline-block animate-fade-in" style={{ animationDelay: '100ms' }}>
    Landing
  </span>{' '}
  <span className="inline-block animate-fade-in" style={{ animationDelay: '200ms' }}>
    Pages
  </span>
</h1>

// Add to globals.css
@keyframes fade-in {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-fade-in {
  animation: fade-in var(--duration-slow) var(--easing) both;
}

スクロールアニメーションには、Intersection Observer または Framer Motion を使用します。

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

ブランドの一貫性を保ちながら、モバイルファーストのレスポンシブデザインを実現します。

• Tailwind のレスポンシブプレフィックスを使用します：sm:、md:、lg:、xl:
• すべてのブレークポイントをテストします：640px（sm）、768px（md）、1024px（lg）、1280px（xl）
• タッチターゲットの最小サイズ：ボタンは 44x44px
• 基本フォントサイズ：モバイルでは最低 16px
• すべてのブレークポイントでデザインシステムを維持します（カラーとフォントを一貫させます）
• レイアウトを調整します：モバイルでは縦に並べ、デスクトップでは横に並べます

ステップ 8：パフォーマンスを最適化する

• すべての画像に Next.js の Image コンポーネントを使用します
• ファーストビューの画像（ヒーローセクション）には priority プロパティを追加します
• ファーストビュー以降のコンテンツには遅延読み込みを実装します
• フォントを最適化します：Web フォントには font-display: swap を使用します
• 可能な場合は、JavaScript より CSS アニメーションを使用します
• バンドルサイズを最小限に抑えます：未使用の ShadCN コンポーネントをツリーシェイキングします

ステップ 9：アクセシビリティを確保する

• セマンティックな HTML5 要素（<header>、<main>、<section>、<footer>）を使用します
• アイコンのみのボタンには ARIA ラベルを追加します
• キーボードナビゲーションが機能することを確認します（Tab キーでテストします）
• すべての画像に説明的な代替テキストを設定します
• 十分な色のコントラストを確保します（WCAG AA の最低基準：テキストで 4.5:1）
• 動きを減らす設定を好むユーザー向けに、アニメーションをテストします。

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

コンポーネントの例

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

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

• Button、Badge、画像の最適化を使った Hero セクション
• Card コンポーネントを使った Benefits セクション
• Avatar と Card を使った Testimonials
• Accordion を使った FAQ
• Card と Button を使った Final CTA
• Separator とリンクを使った Footer

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

検証チェックリスト

ランディングページを完成させる前に、すべての項目を確認してください。

デザイン品質 ⭐

• 一貫した美的方向性を選択し、統一感を持って実装する
• タイポグラフィ：個性のあるディスプレイフォント（Inter／Roboto／Arialは使用しない）
• タイポグラフィ：大胆なサイズ差で明確な階層を設ける
• カラーパレット：CSS変数を定義し、全体に統一感を持たせる
• 背景：無地の白は避け、テクスチャ／グラデーション／パターンを加える
• アニメーション：ページ読み込み時の段階的な表示、スクロールに応じた表示
• レイアウト：ありきたりな中央揃えのグリッドではなく、独自の構成にする
• ShadCNのカスタマイズ：コンポーネントを大幅にカスタマイズし、デフォルトのまま使わない
• ありきたりなAI風のデザインを避ける：「AIが生成したように見えるか？」というテストを通過する

コンバージョンに欠かせない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用のメタデータを設定する（タイトル、説明、OGタグ）
• Next.js Imageコンポーネントで画像を最適化する
• レスポンシブデザインを実装する（モバイルファースト）
• アクセシビリティ基準（WCAG AA）を満たす
• パフォーマンスを最適化する（遅延読み込み、フォントの最適化）
• アニメーションの動きを抑える設定に対応する

最終的な仕上げ 💎

• すべてのフォントが正しく読み込まれている（ブラウザーのDevToolsで確認）
• 色のコントラストをテスト済み（ブラウザーのDevToolsを使用）
• モバイル、タブレット、デスクトップでテスト済み
• キーボード操作に対応している
• ホバー時の状態が心地よい
• Lorem Ipsumやプレースホルダーのコンテンツを使っていない
• ブランドに独自性があり、印象に残る

ベストプラクティス

デザイン優先のアプローチ

• コーディングの前に、必ずデザインを検討すること
• コメントに美的方向性を記録する
• 実装前にムードボードや参考画像を作成する
• 「無難な」選択に頼らず、創造性の限界に挑む
• コンバージョンにつながるのは信頼であり、信頼はプロ意識と独自性から生まれることを忘れない

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

• ブランドの声に合った、明確でメリットを重視したコピーを書く
• CTAには行動を促す表現を使う（動詞＋メリット）
• 適切な見出しを使い、各セクションを拾い読みしやすくする
• 具体的な数値や統計を含める（信頼性の向上につながる）
• 実名と写真を添えた、本物の推薦コメントを使う
• トーンを美的方向性に合わせる：遊び心のあるデザインならコピーも遊び心のあるものに、プロフェッショナルなデザインなら権威あるものにする

タイポグラフィのベストプラクティス

• タイポグラフィで妥協しないこと――デザインの80％を占める
• ディスプレイフォントは、映える大きなサイズ（4rem以上）で使う
• セクション全体で行の高さを統一する
• フォントの太さを戦略的に使う（優雅さには細字、インパクトには太字）
• 開発ツールだけでなく、実際のデバイスで読みやすさをテストする
• フォントを効率よく読み込む：実際に使うウェイトだけを読み込む

色とビジュアルの一貫性

• すべての色を事前にCSS変数として定義する
• プライマリカラーを少なくとも3～4か所で使う（ロゴだけに使わない）
• アクセントカラーは高いコントラストを持たせ、控えめに使う
• ブラウザーのDevToolsやオンラインのチェックツールで色のコントラストをテストする
• 明るい背景に置く濃い文字は、純粋な黒ではなく黒に近い色（#1a1a1a）にする
• 色彩心理を考慮する：青＝信頼、緑＝成長、赤＝緊急性、紫＝創造性

アニメーションとモーションに関するガイドライン

• 少ないほど効果的です：ページ全体の優れた表示アニメーションは、あちこちに散りばめた細かなアニメーションより効果的です
• animation-delay を使ってリズムと流れを生み出します
• prefers-reduced-motion を常に尊重します
• 実機でテストします。アニメーションの見え方は、60Hz と 120Hz の画面で異なります
• CTA の妨げになるアニメーションは避けます
• イージング関数を使います。cubic-bezier(0.4, 0, 0.2, 1) は滑らかでプロフェッショナルな印象になります

SEO の最適化

• H1、H2、最初の段落にキーワードを自然に含めます
• 見出しタグを適切な構造（H1 → H2 → H3）で使用し、H1 は 1 つだけにします
• すべての画像に説明的な代替テキストを追加します（SEO とアクセシビリティのため）
• ページの読み込み速度を最適化します（Core Web Vitals が重要です）
• クリックを促す魅力的なメタタグを作成します
• ビジネスや製品の情報にはスキーママークアップを使用します

コンバージョンの最適化

• 主要 CTA：スクロールせずに見える位置に配置し、見逃されないようにします
• 最後の CTA：コンバージョンにつなげる最後の機会として、印象的に見せます
• 入力フォームの項目を最小限にし、価値提案を明確にして、ユーザーの負担を減らします
• レビュー、推薦の声、「掲載実績」ロゴなど、信頼につながる要素を目立たせます
• CTA には周囲とコントラストのある色を使います（目立たせる必要があります）
• CTA の文言を変えてテストします：「無料トライアルを開始」と「14 日間無料でお試しください」
• 適切な場合は、定員や期間限定のオファーなど、緊急性を加えます
• 人の顔を見せます。実際の写真を使った推薦の声は、コンバージョン率の向上につながります

パフォーマンスのベストプラクティス

• 画像を最適化します：WebP 形式、適切なサイズ、遅延読み込み
• フォントの読み込み戦略：FOIT（テキストが表示されない時間）を避けるため、font-display: swap を使用します
• JavaScript を最小限に抑えます。可能な場合は CSS アニメーションを使用します
• コード分割：負荷の高いコンポーネントには動的インポートを使用します
• 重要なリソースを先読みします
• 目標：LCP < 2.5s、FID < 100ms、CLS < 0.1

よくあるパターンとデザインの推奨事項

ランディングページの種類ごとにコンバージョンの目標が異なり、それぞれ独自のデザインを表現できます。

SaaS 製品のランディングページ

コンバージョンの重点：無料トライアルの CTA、機能比較、わかりやすい料金体系、セキュリティバッジ デザインの推奨事項：

• ミニマルでプロフェッショナル：すっきりしたレイアウト、ゆとりのある余白、洗練されたタイポグラフィ
• 先進的なテクノロジー：グラデーション背景、控えめなアニメーション、モダンなサンセリフフォント
• 大胆で自信に満ちたデザイン：大きな文字、コントラストの高い CTA、動きのあるホバー状態 避けるもの：ありきたりな青いグラデーション、コーヒーショップでノート PC を使う人物のストック写真

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

コンバージョンの重点：製品画像、価格、配送情報、返品ポリシー、緊急性 デザインの推奨事項：

• 高級感・プレミアム感：上品なセリフフォント、モノクロの配色、ゆとりのある余白
• 活気・若々しさ：大胆な色使い、遊び心のあるフォント、動きのあるレイアウト、鮮やかな CTA
• 自然・サステナブル：アースカラー、有機的な形、柔らかな影、丸みのある角 避けるもの：雑然としたレイアウト、互いに競合する視覚要素の多用

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

コンバージョンの重点：ポートフォリオ／事例、プロセスの説明、チームの実績、お問い合わせフォーム デザインの推奨事項：

• クリエイティブで大胆：非対称なレイアウト、個性的なタイポグラフィ、ヒーローとしてのポートフォリオ
• エディトリアル：雑誌風のレイアウト、大きな画像、明確なタイポグラフィの階層
• ミニマルなポートフォリオ：作品のグリッド、最小限のテキスト、作品そのものを主役にする 避けるもの：ありきたりな「プロフェッショナル」向けテンプレート、ストック写真

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

コンバージョンの重点：日時を目立たせること、登壇者のプロフィール、アジェンダ、登録フォーム、カウントダウンタイマー デザインの推奨事項：

• 刺激的でダイナミック：アニメーション付きカウントダウン、グラデーション背景、活気のある色使い
• プロフェッショナルなカンファレンス：すっきりしたレイアウト、枠付きの登壇者写真、タイムライン形式のアジェンダ
• コミュニティ感のある親しみやすさ：温かみのある色、丸いアバター、ソーシャルプルーフを重視 避けるもの：単調な箇条書きのアジェンダ、ありきたりなカンファレンスのデザイン

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

コンバージョンの焦点: App Store バッジ、デバイスフレーム内のスクリーンショット、機能ハイライト、デモ動画 美的推奨事項:

• モダン/洗練: 3D チルト付きのデバイスモックアップ、浮遊するスクリーンショット、滑らかなアニメーション
• 遊び心/楽しい: 明るい色、イラスト調のアイコン、キャラクターのマスコット
• スクリーンショット重視: 大きなスマートフォンのモックアップをヒーローとして配置、最小限のテキスト、視覚的なストーリーテリング 避けるべき: 小さなスクリーンショット、汎用的なアプリアイコン

リソース

references/

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

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

特定のセクションを実装する際、またはいずれかの要素について詳細なガイダンスが必要なときに、必要に応じてこれらのリファレンスを参照してください。

注意事項と設計思想

中核となる原則

1. コンバージョン + 記憶性: ランディングページはコンバージョンを生み出すと同時に、記憶に残るものでなければなりません
2. 意図的なデザイン: すべての美的選択は、デフォルトではなく意図的に行うべきです
3. 汎用的な AI の美学を避ける: ブランドを忘れ去られるものにする「AI 生成」的な見た目を避けます
4. デザインシステムを最優先: コーディングの前に、フォント、色、モーションを定義します
5. すべてをカスタマイズ: ShadCN は出発点であり、最終的なデザインではありません

フレームワークの由来

• 11 の必須要素は、DESIGNNAS の実績あるコンバージョンフレームワークに基づいています
• デザインエクセレンスの原則は、高品質なフロントエンドデザインの実践から適応したものです
• これらを組み合わせることで、機能的に効果的でありながら視覚的にも卓越したランディングページを実現します

適応ガイドライン

• 特定のブランドガイドラインとターゲットオーディエンスに適応させてください
• A/B テストを使用してコンバージョン率を継続的に改善してください
• コンバージョン最適化とクリエイティブな表現のバランスを取ってください
• 迷ったときは、大胆に - 汎用的なページはコンバージョンも生み出さず、印象にも残りません

成功指標

コンバージョン指標:

• CTA のクリック率
• フォーム送信率
• スクロール深度（ユーザーが 11 の要素すべてに到達しているか？）
• 直帰率とページ滞在時間

ブランド指標:

• デザイン品質に関するユーザーフィードバック
• ランディングページのソーシャルシェア
• ユーザー調査におけるブランド想起率
• 競合他社との差別化

覚えておいてください

すべてのランディングページは、忘れられない第一印象を与える機会です。11 の必須要素がコンバージョンを確実にします。卓越したデザインがあなたのブランドを記憶に残るものにします。どちらか一方を犠牲にしてはいけません。

最高のランディングページは、コンバージョンとインスピレーションの両方を実現します。