ランディングページデザイン は何をしますか？
ランディングページはホームページではありません。ホームページは複数の意図に応えます。ランディングページは1つの意図に勝ちます：
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. レイアウト選択
1つを選び、その理由を述べてください。
| タイプ | 使用する状況 |
|---|---|
| A. クラシックヒーロー＋セクション | 製品がヒーローのスクリーンショットから理解できる場合。最も一般的。 |
| B. ロングフォームストーリー | 教育と懐疑論の克服が必要な場合。 |
| C. ミニマルコンバージョンページ | 高いインテントトラフィック（既知のユーザーへのメール）、またはダウンロードやウェイトリストのような短いオファーの場合。 |
| D. 比較ページ | 検索インテントに代替案（「X vs Y」、「best for」）が含まれる場合。通常、SEOページと組み合わせます。 |
A4. コンバージョンルール
メッセージをソースに一致させる。 トラフィックが広告からの場合、ヒーローの広告ヘッドラインをミラーリングし、同じ約束とビジュアルトーンを維持します。
次のステップを明確にする。 1つのプライマリCTA。ファーストビューに競合するCTAを決して配置しないでください。
ベネフィットを先に書く。 特徴はそれが何をするかです。ベネフィットはそれが彼らにとって何を意味するかです。
具体的に。
- ❌ 「時間を節約し、効率化」
- ✅ 「毎週のレポート作成を4時間から15分に短縮」
リスクを減らす。 少なくとも1つを選択：無料トライアル、無料プラン、クレジットカード不要、いつでもキャンセル、返金保証。
反対意見をセクションとして扱い、脚注にしない。 摩擦の高いオファーの場合、FAQを前に移動します。証明をそれがサポートする主張のすぐ横に配置します。
A5. コピーライティング
ヘッドラインの公式
- 「{アウトカム} without {ペイン}」
- 「The {カテゴリ} for {オーディエンス}」
- 「Ship {結果} in {時間}」
サブヘッドライン。 1文または2文。それが何であり、誰のためかを明確にします。
CTA。 動詞と彼らが得るもの。「Learn more」や「Submit」は絶対に使用しません。「Start free trial」、「Book a demo」、「Get the checklist」を使用します。
ベネフィット箇条書き。 ベネフィットを太字にし、その後に証明または詳細を記載します。例：Faster iteration — 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 / black）は決して使用しない。 Semiboldまたはboldで上限を設定します。
コピールール
テキスト内にハイフンは使用しない。 本文、見出し、ラベル内で-を使用しないでください。代わりにフレーズを書き換えてください。
孤立した単語は禁止。 最後の行に単一の単語が単独で置かれてはいけません。見出しには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）、semibold。 - 小さいヘッダーボタン：
text-sm（14px）、semibold。
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は禁止。 実際のドラフトコピーを書いてください。
- 「John Doe」は禁止。 多様で現実的な名前を使用してください。
- プレースホルダーブランド（「Acme Corp」、「Nexus」、「SmartFlow」など）は禁止。文脈に沿った、信じられる名前を考案してください。
- 丸められた偽の数字（
99.99%、50%、$100.00など）は禁止。有機的なデータを使用してください：47.2%、$99.00、+1 (312) 847-1928。 - AIの決まり文句は禁止。 「Elevate」、「Seamless」、「Unleash」、「Next Gen」、「Game changer」、「Delve」、「Tapestry」、「In the world of」は決して使用しないでください。
- 文の先頭のみを大文字にするヘッダー。すべての単語をタイトルケースにしないでください。
- 能動態。 「We could not save your changes」、決して「Mistakes were made」ではありません。
- 成功メッセージに感嘆符は禁止、エラーに「Oops!」も禁止。直接的に：「Connection failed. Please try again.」
- 人ごとにユニークなアバター、そして多様なブログ投稿の日付。
B9. 状態
すべてのインタラクティブ要素は、完全な状態セットを備えて出荷されます：
- ホバー — 背景のシフト、わずかなスケール、または移動
- アクティブ — 物理的なフィードバックとして
scale(0.98)またはtranslateY(1px) - フォーカス — 可視のフォーカスリング。アクセシビリティ要件であり、オプションではありません。
- ローディング — 実際のレイアウトに似せたスケルトンローダー。円形のスピナーではありません。
- 空 — 構成された「はじめに」ビュー。空白のパネルではありません。
- エラー — インラインで具体的に。決して
window.alert()ではありません。
デッドリンクは禁止。#を指すボタンは、リンクされているか、視覚的に無効になっているかのどちらかです。現在のページはナビゲーションで示されなければなりません。
B10. 出荷要件
忘れられがちで、ページを未完成に感じさせるもの：
- フッターのプライバシーポリシーと利用規約へのリンク
- カスタムでブランド化された404ページ
- メール形式と必須フィールドのクライアント側フォームバリデーション
- キーボードユーザー向けのスキップリンク
- 管轄区域で必要な場合のCookie同意
- ブランド化されたファビコン
<title>、メタディスクリプション、og:image、ソーシャル共有タグ- 意味のあるすべての画像にaltテキスト
- セマンティックHTML：
<nav>、<main>、<article>、<aside>、<section> - すべてのページからの戻る方法
B11. タグラインリビールセクション（必須）
すべてのランディングページには、ヒーローとは別に、コアベネフィットまたはタグラインを述べる大きなタイプのセクションが1つ含まれます。これはヒーローのすぐ下に積み重ねられるのではなく、ページのさらに下に独自の瞬間として配置されます。
コピー
- 最低2行のテキスト。
- A5のスタイルで書かれたベネフィットステートメントまたはタグライン。一般的なセクション見出しではありません。
タイポグラフィ
- 行数に応じて
text-4xlからtext-6xlのサイズ。B1のタイプスケールに従います。 - ヒーローと同様に最大幅が制限されているため、B5に従って意味のあるポイントで行が折り返されます。
アニメーション
- テキストは、テーマのベーステキスト色の約25〜35%の不透明度の、控えめでミュートされたトーンで始まります。
- セクションがビューポートにスクロールインするにつれて、各単語がそのミュートされたトーンから完全なテキスト色に、読む順序で個別に遷移します。
- 単語は、ブロック全体が一度に反転するのではなく、トリガーラインを横切るたびに1つずつアクティブになります。遷移はB7のカスタムイージングカーブを使用し、リニアフェードは決して使用しません。
IntersectionObserverを単語ごとに使用するか、requestAnimationFrameを通じてスロットルされた単一のスクロールリスナーを使用して実装します。スロットルされていないscrollイベントリスナーは決して使用しないでください。- 生成されるまでアニメーションを隠すために
motion-safeプリセットを使用するか、独自のメディアクエリでラップします。プリファレンスを無視しないでください。