ランディングページデザイン

ランディングページはホームページではありません。ホームページは複数の意図に応えます。ランディングページは一つの意図に勝ちます：

1つのオファー → 1つのオーディエンス → 1つのプライマリアクション。

このスキルは2つのパートに分かれています。パートAでは、ページが何を伝え、どのように構成されるかを決定します。パートBは、不可欠なビジュアルシステムです。パートBに触れる前に、パートAを完了させてください。

スコープ

すべてのWeb UI作業（ランディングページ、マーケティングサイト、コンポーネント、ダッシュボード、プロトタイプ、デザインレビュー）に適用します。ここでのルールがフレームワークのデフォルトと競合する場合、このファイルが優先されます。ユーザーの明示的なプロンプトがルールと競合する場合、ユーザーが優先されます。

関連スキル。 新しいサイトを構築するのではなく、既存のサイトをアップグレードするには、redesign-existing-projects（github.com/elayadesign/redesign-skill）を使用してください。このスキルは、一般的なパターンを診断し、具体的な値についてはこのファイルを参照します。

パートA — 戦略と構造

A1. 情報収集

デザインや文章を作成する前に、以下を収集します。不足しているものだけを一度に質問し、一度に一つの質問ではなく、一度にまとめて質問します。

目的

1つのプライマリアクションは何ですか？（トライアル、デモ、購入、ウェイティングリスト、ダウンロード）
オファーは何ですか？彼らは正確に何を手に入れますか？
コンバージョンとしてカウントされるものは何ですか？（クリック、サインアップ、購入）

オーディエンスとコンテキスト

ICP（理想的な顧客像）は誰ですか？
彼らはどのような問題を解決しようとしていますか？
上位3つの反対意見（今日コンバージョンしない理由）
トラフィックソース：広告、検索、ソーシャル、メール
訪問者はランディング時に何を既に知っていますか？

エビデンスとアセット

エビデンスポイント：ロゴ、 testimonial（お客様の声）、数字、ケーススタディ
スクリーンショット、デモ動画、プロダクトGIF
保証、返金条件、解約条件

制約

ブランドボイス：カジュアルかプロフェッショナルか
デザインの方向性：ミニマルなエディトリアル、遊び心のある3D、グラスUI
モバイルファーストか？

ユーザーが答えられない場合は、合理的な仮定を立て、それを一文で述べ、続行します。構築を止めないでください。

A2. ページ構造

ファーストビュー（必須）

見出し：結果とオーディエンス
サブ見出し：方法を明確にし、具体性を追加
プライマリCTA：明確な動詞と彼らが得るもの
1つのエビデンスシグナル：ロゴストリップ、統計、または短い testimonial（お客様の声）
ヒーロービジュアル：プロダクトのスクリーンショット、動画、または強力なイラスト

中盤（論証） 6. 問題から解決策へ：1セクション 7. ベネフィット：3〜5つ、結果志向 8. 仕組み：3ステップ 9. 社会的証明： testimonial（お客様の声）またはケーススタディ

下部（反論処理） 10. FAQ：6〜12の質問 11. リスクの逆転：トライアル、いつでも解約可能、保証 12. 最終CTA：上部と同じ

パートB11の必須タグラインリビールセクションを中盤の論証内のどこか、通常はヒーローの直後またはベネフィットの後に含めてください。

A3. レイアウト選択

一つ選び、その理由を述べてください。

タイプ	使用時
A. クラシックヒーロー＋セクション	プロダクトがヒーローのスクリーンショットから理解できる場合。最も一般的。
B. ロングフォームストーリー	教育と懐疑心の克服が必要な場合。
C. ミニマルコンバージョンページ	意図の高いトラフィック（既知のユーザーへのメール）、またはダウンロードやウェイティングリストのような短いオファー。
D. 比較ページ	検索意図に代替案が含まれる場合（「X vs Y」、「best for」）。通常、SEOページと組み合わせる。

A4. コンバージョンルール

メッセージをソースに合わせる。 トラフィックが広告からの場合、ヒーローで広告の見出しを反映させ、同じ約束とビジュアルトーンを維持します。

次のステップを明確にする。 1つのプライマリCTA。ファーストビューに競合するCTAを決して配置しないでください。

ベネフィットを最初に書く。 機能はそれが何をするかです。ベネフィットはそれが彼らにとって何を意味するかです。

具体的に書く。

❌ 「時間を節約し、効率化」
✅ 「週次のレポート作成を4時間から15分に短縮」

リスクを減らす。 少なくとも一つ選択：無料トライアル、無料プラン、クレジットカード不要、いつでも解約可能、返金保証。

反論をセクションとして扱い、脚注にしない。 摩擦の高いオファーではFAQを早めに配置します。エビデンスをそれがサポートする主張のすぐ隣に配置します。

A5. コピーライティング

見出しのフォーマット

「{結果}を{pain（悩み）}なしで」
「{オーディエンス}のための{カテゴリ}」
「{時間}で{結果}をリリース」

サブ見出し。 1〜2文。それが何であるか、誰のためであるかを明確にします。

CTA。 動詞＋彼らが得るもの。決して「もっと詳しく」や「送信」は使用しません。「無料トライアルを開始」、「デモを予約」、「チェックリストを入手」を使用します。

ベネフィット箇条書き。 ベネフィットを太字で書き、その後にエビデンスまたは詳細を記述します。例：反復の高速化 — ワンクリックで3つのレイアウトバリエーションを生成。

注：B1のコピールールも適用されます。文中にハイフンは使用せず、行末に単語が孤立しないようにします。

A6. 構築順序

セクションごとに、次の順序で作業します：

ヒーロー
ベネフィット
仕組み
エビデンス
FAQ
最終CTA

イテレーションのたびにページ全体を再構築しないでください。セクションごとに行うことで、制御を維持し、差分をレビューしやすくします。

A7. SEOとAEO

インデックスしない 広告専用のキャンペーンページや、時間的制約の強いオファー。noindexを使用するか、インデックスされていないパスの背後に置いてください。

インデックスする 永続的なオファーや、検索意図が約束と一致するページ。明確なタイトルとメタディスクリプション、ホームページと機能ページからの内部リンク、AEOのためのプレーンな質問と回答形式のFAQを追加します。該当する場合はFAQスキーマを追加します。

A8. 落とし穴

ファーストビューにCTAが多すぎる
曖昧なバリュープロポジション：「効率化」、「最適化」
結果のない大量の機能リスト
エビデンスが下部に埋もれている
読みやすさを損なうモバイルレイアウト
明確な次のステップがない

パートB — ビジュアルシステム

すべてのビジュアル値は、アドホックに発明されるのではなく、これらのルールを通じて解決する必要があります。

B1. タイポグラフィ

フォント

使用する： Geist、Manrope、Geist Mono、Poppins。

絶対に使用しない： Inter、Roboto、Arial、Open Sans、Helvetica。

インターフェース内のどこにもイタリックフォントを使用しないでください。

サイトごとに1つの書体。 プロンプトで明示的に要求されない限り、2つのフォントを組み合わせないでください。Geist Monoは、コード、データ、またはモノスペースが機能的に必要な数値UIの場合にのみ、プライマリフォントと一緒に使用できます。

極太ウェイト（900/ブラック）は絶対に使用しないでください。 セミボールドまたはボールドで上限とします。

コピールール

テキスト内にハイフンを使用しないでください。 本文、見出し、ラベル内で-を使用しないでください。代わりにフレーズを書き換えてください。

行末に単語が孤立しないようにしてください。 一行の最後に一語だけで残ってはいけません。見出しにはtext-wrap: balanceを、本文にはtext-wrap: prettyを適用します。

タイプスケール

フォントサイズは常にTailwindのデフォルトタイプスケールに解決します。text-[19px]、font-size: 22px、1.4remなどの任意の値は残さないでください。

既存のサイズがステップに正確に合わない場合は、サイズとそれに対応する行間の両方を考慮して、最も近い下のステップにスナップします。

クラス	サイズ	行間
`text-xs`	12px (0.75rem)	16px
`text-sm`	14px (0.875rem)	20px
`text-base`	16px (1rem)	24px
`text-lg`	18px (1.125rem)	28px
`text-xl`	20px (1.25rem)	28px
`text-2xl`	24px (1.5rem)	32px
`text-3xl`	30px (1.875rem)	36px
`text-4xl`	36px (2.25rem)	40px
`text-5xl`	48px (3rem)	1
`text-6xl`	60px (3.75rem)	1
`text-7xl`	72px (4.5rem)	1
`text-8xl`	96px (6rem)	1
`text-9xl`	128px (8rem)	1

オーディット内で、スケールスナッピングと、別途設定されたカスタム行間を組み合わせないでください。トラッキングと行間は、一致したステップが既に提供する値内でのみ調整できるため、2つのルールが互いに競合することはありません。

ボタンのタイプ

メインボタン：text-base（16px）、セミボールド。
小さいヘッダーボタン：text-sm（14px）、セミボールド。

B2. スペーシング

以下の値のみ。これらの間の値も、これらの外側の値も使用しません。

トークン	値
Spacing-0	0
Spacing-25	2px
Spacing-50	4px
Spacing-75	8px
Spacing-100	12px
Spacing-200	16px
Spacing-300	24px
Spacing-400	32px
Spacing-500	40px
Spacing-600	48px
Spacing-700	64px
Spacing-800	80px
Spacing-900	96px

メインボタン： 上下パディング8px、左右パディング12px。

B3. コーナー半径

Tailwindの半径値のみを使用します。

ネストされた半径の公式。 あるシェイプが別のシェイプの内側にあり、それらの間のギャップが32px未満の場合：

内側の半径 = 外側の半径 − ギャップ

これは、結果が2より大きい場合にのみ適用します。それ以下の場合は、内側のシェイプを角のないまま、または変更せずに残します。

例：外側のカードがrounded-2xl（16px）で、内部パディングが8pxの場合、内側の要素は8pxの半径（rounded-lg）になります。

B4. ボーダーと背景

カードの片側だけにボーダーを適用しないでください。 ボーダーは全面に適用するか、まったく適用しません。
背景にグラデーションを使用しないでください。 背景はフラットです。

ダークモードの背景色

以下のみを使用します：

#000000 · #181818 · #1F1F1F · #272727 · #313131 · #131209

B5. ヒーローセクション

見出しの色

ダークテーマ： 見出しテキストに左から右へのグラデーション、#FFFFFF → #9B9B9B。
ライトテーマ： 見出しテキストに左から右へのグラデーション、#000000 → #666666。

これがグラデーションを使用する唯一の場所であり、テキストにのみ使用し、背景には決して使用しません。

レイアウト

見出しとサブ見出しの両方に最大幅680pxを設定します。
見出しのコピーを読み、意味のあるポイントで改行を挿入します。
フレーズを不自然に切ったり、文が読みにくくなるような改行は絶対に行わないでください。思考が途切れるところで改行してください。

B6. アイコン

使用する： Phosphor、Solar、Iconamoon。

絶対に使用しない： Material Icons、Material Symbols。

B7. モーションの振り付け（流体力学）

デフォルトのトランジションは決して使用しないでください。すべてのモーションは、カスタムの3次ベジェ曲線を通じて現実世界の質量とバネの物理法則をシミュレートします。

transition-all duration-700 ease-[cubic-bezier(0.32,0.72,0,1)]

フルードアイランドナビ

閉じた状態。 ナビゲーションバーは、上部から切り離された浮遊するガラスのピルです：mt-6、mx-auto、w-max、rounded-full。

ハンバーガーの変形。 クリックすると、ハンバーガーラインがrotate-45と-rotate-45を使用して、絶対配置で流体的に回転および移動して完全なXになります。決して単に消えてはいけません。

モーダル展開。 メニューは、強力なガラス効果（backdrop-blur-3xl bg-black/80またはbg-white/80）を持つ画面全体のオーバーレイとして開きます。

千鳥マスクリビール。 展開された状態のナビリンクは、不可視のボックスからフェードインおよびスライドアップします（translate-y-12 opacity-0がtranslate-y-0 opacity-100に解決）。これはアイテムごとにdelay-100、delay-150、delay-200と千鳥になります。

スクロール補間

要素は読み込み時に静的に表示されることはありません。ビューポートに入ると、優雅で重厚なフェードアップを実行します：

translate-y-16 blur-md opacity-0  →  translate-y-0 blur-0 opacity-100

800ms以上かけて実行します。

JavaScript駆動のリビールには、IntersectionObserverまたはFramer MotionのwhileInViewを使用します。window.addEventListener('scroll')は絶対に使用しないでください。 継続的なリフローを引き起こし、モバイルパフォーマンスを低下させます。

B8. コンテンツのリアリズム

プレースホルダーを決して出荷しないでください。以下は、ページが作成されたのではなく生成されたことを示す兆候です。

Lorem Ipsumを使用しない。 実際のドラフトコピーを書きます。
「山田太郎」を使用しない。 多様で現実的な名前を使用します。
「株式会社A」や「Nexus」、「SmartFlow」のようなプレースホルダーブランドを使用しない。 文脈に沿った、信頼できる名前を考案します。
99.99%、50%、$100.00のような丸い偽の数字を使用しない。 有機的なデータを使用します：47.2%、$99.00、+1 (312) 847-1928。
AIの決まり文句を使用しない。 「高みへ」、「シームレス」、「解き放つ」、「次世代」、「ゲームチェンジャー」、「掘り下げる」、「タペストリー」、「〜の世界で」は絶対に使用しません。
見出しは文の先頭だけ大文字。 すべての単語を大文字にしないでください。
能動態。 「変更を保存できませんでした」と書き、「誤りが発生しました」とは書きません。
成功メッセージに感嘆符を使用しない。 エラーに「おっと！」を使用しない。直接的に記述します：「接続に失敗しました。もう一度お試しください。」
人ごとにユニークなアバターと、多様なブログ投稿日付。

B9. 状態

すべてのインタラクティブ要素には、完全な状態セットが含まれます：

ホバー — 背景のシフト、わずかなスケール、または移動
アクティブ — 物理的なフィードバックのためのscale(0.98)またはtranslateY(1px)
フォーカス — 可視のフォーカスリング。アクセシビリティ要件であり、オプションではありません。
ローディング — 実際のレイアウトの形をしたスケルトンローダー。円形のスピナーではありません。
空 — 構成された「はじめに」ビュー。空白のパネルではありません。
エラー — インラインで具体的。決してwindow.alert()を使用しません。

デッドリンクは禁止。#を指すボタンは、リンクされているか、視覚的に無効になっている必要があります。現在のページはナビゲーションに表示されている必要があります。

B10. 出荷要件

忘れられがちで、ページが未完成に見えるもの：

フッターのプライバシーポリシーと利用規約へのリンク
カスタムのブランド化された404ページ
メール形式と必須フィールドのクライアント側フォームバリデーション
キーボードユーザー向けの「本文へスキップ」リンク
管轄区域で必要な場合のクッキー同意
ブランド化されたファビコン
<title>、メタディスクリプション、og:image、ソーシャルシェアリングタグ
意味のあるすべての画像の代替テキスト
セマンティックHTML：<nav>、<main>、<article>、<aside>、<section>
すべてのページからの戻る方法

B11. タグラインリビールセクション（必須）

すべてのランディングページには、ヒーローとは別に、コアベネフィットまたはタグラインを述べる1つの大きなタイプセクションが含まれます。これは、ヒーローの直下に積み重ねられるのではなく、ページのさらに下に、それ自体の瞬間として配置されます。

コピー

最低2行のテキスト。
A5のボイスで書かれたベネフィットステートメントまたはタグライン。一般的なセクション見出しではありません。

タイポグラフィ

行数に応じてtext-4xlからtext-6xlのサイズ。B1のタイプスケールに従います。
ヒーローと同様に最大幅が制限され、B5に従って意味のあるポイントで行が改行されます。

アニメーション

テキストは、テーマのベーステキストカラーの約25〜35%の不透明度の、微妙で落ち着いたトーンで始まります。
セクションがビューポートにスクロールインするにつれて、各単語がその落ち着いたトーンからフルテキストカラーへと、読む順に個別に遷移します。
単語は、トリガーラインを通過するときに一度に一つずつアクティブになります。ブロック全体が一度に反転することはありません。遷移は、B7のカスタムイージングカーブを使用し、リニアフェードは決して使用しません。
単語ごとにIntersectionObserverを使用するか、requestAnimationFrameでスロットリングされた単一のスクロールリスナーを使用して実装します。スロットリングされていないビューポートイベントは絶対に使用しないでください。

実装の詳細 各単語は、自身の<span>内にラップする必要があります。トリガーは、セクションの上部がビューポートに入ったときに発火し、その後、各単語が定義されたトリガーライン（通常はビューポートの中央）を通過するときに発火します。

B12. レスポンシブデザイン

モバイルファースト。 デフォルトのスタイルは最も小さいビューポート向けであり、ブレークポイントは拡大に使用されます。
ブレークポイント。 Tailwindのデフォルトのみを使用：sm（640px）、md（768px）、lg（1024px）、xl（1280px）、2xl（1536px）。カスタムブレークポイントは使用しないでください。
ヒーロー。 モバイルでは、スタックレイアウト（見出し、サブ見出し、CTA、ビジュアル）。デスクトップでは、CTAとビジュアルが横並びになる場合があります。
ナビゲーション。 モバイルではハンバーガーメニュー、デスクトップでは水平リンク。
フォーム。 モバイルではフル幅の入力フィールド。デスクトップでは、ラベルとフィールドをインラインにできる場合があります。
画像。 モバイルでは最大幅100%、高さ自動。<picture>を使用して解像度固有の画像を提供します。

B13. アクセシビリティ（a11y）

カラーコントラスト。 すべてのテキストは、通常のテキストでは4.5:1、大きいテキスト（18px以上または14pxの太字以上）では3:1の最小コントラスト比を満たしている必要があります。
キーボードナビゲーション。 すべてのインタラクティブ要素はキーボードでアクセス可能でなければなりません。tabindexが0または-1に設定されている必要があります。
ARIAラベル。 意味のあるアイコンとインタラクティブ要素にはaria-labelが必要です。
フォーカス管理。 モーダルを開くときは、フォーカスをモーダル内に閉じ込め、閉じたときはトリガー要素に戻します。
アナウンス。 動的なコンテンツの更新にはaria-liveリージョンを使用します。

実装ノート

すべてのスタイリングにはTailwind CSSを使用します。CSSファイルでカスタムCSSを使用する必要がある場合は、@applyを使用してTailwindユーティリティを適用します。
必要に応じてFramer Motionを使用しますが、シンプルなアニメーションにはTailwindのトランジションユーティリティを優先します。
Reactコンポーネントにはuse clientディレクティブを使用してクライアントコンポーネントであることを明示します。
サーバーコンポーネントではasync/awaitを使用してデータをフェッチします。
画像にはnext/imageを使用します。

お気に入りのAIに質問する

ドキュメント