landing-page-design

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

ランディングページはホームページではありません。ホームページは複数の目的に対応します。ランディングページで達成する目的は1つです。

1つのオファー → 1つの対象者 → 1つの主要アクション。

このスキルは2つのパートで構成されています。パートAでは、ページで伝える内容と構成を決めます。パートBは、妥協できないビジュアルシステムです。パートBに着手する前に、パートAを進めてください。

対象範囲

ランディングページ、マーケティングサイト、コンポーネント、ダッシュボード、プロトタイプ、デザインレビューなど、あらゆるウェブUI作業に適用します。ここに記載されたルールがフレームワークのデフォルト設定と矛盾する場合は、このファイルを優先します。ユーザーの明示的な指示がルールと矛盾する場合は、ユーザーの指示を優先します。

関連スキル。 新しいサイトを作るのではなく、既存のサイトを改善する場合は、redesign-existing-projects (github.com/elayadesign/redesign-skill) を使用してください。このスキルはありきたりなパターンを特定し、具体的な値についてはすべてこのファイルに準拠します。

パートA — 戦略と構成

A1. ヒアリング

デザインや執筆を始める前に、以下の情報を集めてください。不足している項目だけを、一問ずつではなく一度にまとめて質問してください。

目的

• 主要アクションは何ですか？（トライアル、デモ、購入、ウェイトリスト登録、ダウンロード）
• オファーの内容を具体的に教えてください。ユーザーは何を得られますか？
• 何をコンバージョンとみなしますか？（クリック、登録、購入）

対象者と状況

• ICPは誰ですか？
• どのような問題を解決しようとしていますか？
• 今日、コンバージョンに至らない主な理由となる懸念事項を3つ挙げてください
• トラフィックの流入元はどこですか？（広告、検索、ソーシャルメディア、メール）
• 訪問者はページに到達した時点で、すでに何を知っていますか？

実績と素材

• 実績を示す情報：ロゴ、お客様の声、数値、導入事例
• スクリーンショット、デモ動画、製品GIF
• 保証、返金条件、解約条件

制約

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

ユーザーが回答できない場合は、妥当な前提を置いて一行で明示し、そのまま進めてください。作業を停滞させないでください。

A2. ページ構成

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

1. 見出し：対象者と得られる成果
2. サブ見出し：方法を明確にし、具体性を加える
3. 主要CTA：明確な動詞と、得られるもの
4. 実績を示す要素を1つ：ロゴ列、統計、または短いお客様の声
5. ヒーロービジュアル：製品のスクリーンショットや動画、または目を引くイラスト

ページ中盤（訴求内容） 6. 課題から解決策へとつなぐセクションを1つ 7. ベネフィットを3〜5つ、成果を中心に提示 8. 仕組みを3ステップで説明 9. 社会的証明：お客様の声または導入事例

ページ下部（懸念への対応） 10. FAQ：質問を6〜12件 11. リスクを軽減する要素：トライアル、いつでも解約可能、保証 12. 最終CTA：ページ上部のCTAと同一

B11で定める必須のタグラインを明かすセクションを、ページ中盤の訴求内容に含めてください。通常はヒーローの直後、またはベネフィットの後に配置します。

A3. レイアウトの選択

1つ選び、その理由を説明してください。

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

メッセージを流入元に合わせる。 広告から流入する場合、ヒーローの見出しに広告の見出しを反映し、同じ約束とビジュアルトーンを保ってください。

次のステップを明確にする。 主要CTAは1つにします。ファーストビューに、競合するCTAを配置しないでください。

ベネフィットを先に伝える。 機能は「何ができるか」です。ベネフィットは「それがユーザーにとって何を意味するか」です。

具体的にする。

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

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

懸念事項は脚注ではなく、セクションとして扱う。 導入のハードルが高いオファーでは、FAQを前の方に移動してください。主張を裏付ける実績は、その主張のすぐそばに配置してください。

A5. コピーライティング

見出しの定型

• 「{成果}を{課題}なしで」
• 「{対象者}のための{カテゴリー}」
• 「{期間}で{結果}を実現」

サブ見出し。 1〜2文で、何であるか、誰を対象としているかを明確にします。

CTA。 動詞と、得られるものを組み合わせます。「詳しく見る」や「送信」は使いません。「無料トライアルを始める」「デモを予約する」「チェックリストを入手する」を使います。

メリットの箇条書き。 メリットを太字にし、その後に根拠や詳細を続けます。例：反復を高速化 — 1回のクリックで3つのレイアウト案を生成します。

注：B1のコピーに関するルールも適用されます。文中にハイフンを使わず、1語だけの行を残さないでください。

A6. 構築の順序

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

1. ヒーロー
2. メリット
3. 仕組み
4. 実績
5. FAQ
6. 最終 CTA

反復のたびにページ全体を作り直してはいけません。セクションごとに進めることで、管理しやすくなり、差分も確認しやすくなります。

A7. SEO と AEO

広告専用のキャンペーンページや、提供期間が厳密に限られているオファーはインデックスしないでください。noindex を使うか、インデックスされないパスの配下に配置します。

エバーグリーンなオファーや、検索意図がページの約束と一致するページはインデックスしてください。明確なタイトルとメタディスクリプションを追加し、ホームページや機能ページから内部リンクを設置します。AEO 向けに、FAQ は質問と回答の形式で簡潔に記述します。適切であれば FAQ スキーマを追加します。

A8. 注意点

• ファーストビューに CTA が多すぎる
• 価値提案が曖昧：「効率化する」「最適化する」
• 成果の記載がないまま機能を大量に並べる
• 実績がページ下部に埋もれている
• モバイルのレイアウトで読みやすさが損なわれる
• 次に何をすべきかが明確でない

PART B — ビジュアルシステム

すべてのビジュアルの値は、その場しのぎで作るのではなく、以下のルールに従って決定してください。

B1. タイポグラフィ

フォント

使用するフォント： Geist、Manrope、Geist Mono、Poppins。

使用しないフォント： Inter、Roboto、Arial、Open Sans、Helvetica。

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

サイトごとに書体は1種類です。 プロンプトで明示的に指定されていない限り、2種類のフォントを組み合わせないでください。Geist Mono は、等幅フォントが機能上必要なコード、データ、数値 UI に限り、メインフォントと併用できます。

極太のウェイト（900／black）は使用しないでください。 semibold または bold までにしてください。

コピーのルール

テキストにハイフンを使わないでください。 本文、見出し、ラベルに - を使わないでください。表現を言い換えてください。

1語だけの行を残さないでください。 最終行に単語が1つだけ配置されることがないようにしてください。見出しには text-wrap: balance を、本文には text-wrap: pretty を適用してください。

文字サイズのスケール

フォントサイズは必ず Tailwind のデフォルトの文字サイズスケールに合わせてください。text-[19px、font-size: 22px、1.4rem など、任意の値を残さないでください。

既存のサイズがスケールの段階に正確に一致しない場合は、サイズと対応する行の高さの両方を考慮して、最も近い小さい段階に合わせてください。

監査でスケールへの調整と、独立して設定したカスタムの行の高さを併用しないでください。文字間隔と行の高さは、一致した段階で設定されている値の範囲内でのみ調整できます。これにより、2つのルールが競合しなくなります。

ボタンの文字

• メインボタン：text-base (16px)、semibold。
• 小さめのヘッダーボタン：text-sm (14px)、semibold。

B2. 余白

次の値のみ使用できます。これらの値の間の値や、範囲外の値は使用できません。

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

B3. 角丸

Tailwind の角丸値のみを使用してください。

入れ子になった角丸の計算式。 あるシェイプが別のシェイプの内側にあり、その間の間隔が32px 未満の場合：

inner radius = outer radius − gap

計算結果が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. モーション

モーションには重みを持たせ、所定の位置まで減速するようにしてください。ブラウザーのデフォルトのカーブ（ease、linear、ease-in-out）は使用しないでください。

基本カーブ： レイアウトや位置の変更には ease-[cubic-bezier(0.22,1,0.36,1)] と duration-500 を使用してください。ホバー時の色や不透明度の変化には duration-300 を使用できますが、200ms 未満にはしないでください。

アニメーションさせるのは transform と opacity のみです。top、left、width、height はアニメーションさせないでください。

prefers-reduced-motion を尊重し、移動を単純な不透明度の変化に置き換えてください。

ナビゲーション

通常時の状態。 上端にぴったり付けるのではなく、上端から少し離れて浮かぶコンパクトなバーにしてください。中央に配置し、コンテンツに合わせたサイズにします。背景のぼかしを伴う半透明のサーフェスを使い、背後のページコンテンツがうっすら見えるようにしてください。間隔は B2、角丸は B3 に従います。

メニューの切り替え。 開閉アイコンは即座に入れ替えるのではなく、2 つの状態間で変形させてください。B6 のアイコンを使うか、自分で線を描いてください。いずれの場合も、基本カーブで変化をアニメーションさせてください。

モバイルメニュー。 小さなドロップダウンではなく、画面の高さ全体を使うパネルとして開きます。パネルの背景には、テーマのベースサーフェスを高い不透明度で使用し、強いぼかしを加えてください。

リンクの出現。 開いたメニュー内のリンクは、読む順番に従って1つずつ表示します。それぞれ短い距離（Spacing-300、24px）だけ上に移動しながらフェードインします。各項目の開始を前の項目から60msずつ遅らせ、長いメニューでも遅く感じられないよう、シーケンス全体を400ms以内に収めてください。

スクロール時の表示

ビューポートに入るセクションは、基本カーブを使って短い距離（Spacing-400、32px）だけ上昇し、600〜800msかけて不透明度0から100％までフェードインさせてください。各セクションの表示は1回だけにし、上方向にスクロールして戻ったときに再生しないでください。

表示のトリガーには IntersectionObserver または Framer Motion の whileInView を使用してください。フレームごとに実行され、モバイルのパフォーマンスを低下させるため、スロットリングされていない window.addEventListener('scroll') に処理を結び付けないでください。

B8. コンテンツのリアリティ

サンプルコンテンツはすべて、実在するユーザーがいる実際の製品から生まれたように感じられるものにしてください。

• 文章を書く。 ラテン語のプレースホルダーや「ここに見出しを入力」は使わず、製品の語り口に合った自然な文章を作成してください。
• 人物。 お客様の声やチームメンバーには、製品の対象ユーザーや地域に合った、具体的でフルネームの名前を付けてください。同じ顔写真を別の人物に使い回さないでください。
• ブランドとロゴ。 製品の業界にふさわしい名前を考えてください。物流ツールの顧客名には、一般的なテック系スタートアップではなく、物流会社らしい名前を付けてください。
• 数値。 不自然にきりのよい数値は避けてください。価格は実際の価格らしく、指標には小数点や端数を含め、日付は一覧内でばらつきを持たせてください。
• 使用禁止のありきたりな表現。 「revolutionize」「supercharge」「cutting edge」「effortless」「transform your workflow」「take it to the next level」「harness the power」「world class」は使わないでください。製品の機能を平易な言葉で伝えてください。
• 見出しとボタンはセンテンスケースにしてください。
• システムメッセージ。 確認メッセージは落ち着いた具体的な表現にします（「Dana に請求書を送信しました」）。エラーでは、失敗した内容と次の対応を伝えます（「アップロードに失敗しました。ファイルサイズが 20 MB を超えています。」）。気の利いたひと言や感嘆符は使いません。

B9. 状態

すべてのインタラクティブ要素に、必要な状態をすべて実装してください。

• ホバー — 背景色の変化、わずかな拡大、または移動
• アクティブ — 押した感覚を伝えるための scale(0.98) または translateY(1px)
• フォーカス — 視認できるフォーカスリング。これは必須のアクセシビリティ要件です。
• 読み込み中 — 円形スピナーではなく、実際のレイアウトに沿ったスケルトンローダー
• 空 — パネルを空白のままにせず、使い始めるための画面を構成する
• エラー — インラインで具体的に表示する。window.alert() は使わない

リンク切れをなくしてください。# を指すボタンには、リンクを設定するか、見た目で無効状態を示してください。ナビゲーションでは現在のページを示してください。

B10. リリース要件

忘れられがちで、ページの未完成感につながる項目です。

• フッターにプライバシーポリシーと利用規約へのリンク
• ブランドに合わせたカスタム 404 ページ
• メールアドレスの形式と必須項目を検証するクライアント側のフォームバリデーション
• キーボードユーザー向けのコンテンツへのスキップリンク
• 法域で必要とされる場合の Cookie 同意
• ブランドに合わせたファビコン
• <title>、meta description、og:image、ソーシャル共有タグ
• 意味のあるすべての画像に代替テキスト
• セマンティック HTML：<nav>、<main>、<article>、<aside>、<section>
• すべてのページから戻る手段

B11. タグラインを見せるセクション（必須）

すべてのランディングページには、ヒーローとは別に、製品の中心的なメリットまたはタグラインを大きく表示するセクションを設けてください。ページの下のほうに独立した見せ場として配置し、ヒーローの直下には置かないでください。

コピー

• テキストは最低 2 行にしてください。
• 一般的なセクション見出しではなく、A5 の語り口でメリットやタグラインを表現してください。

タイポグラフィ

• B1 の文字サイズ基準に従い、行数に応じて text-4xl から text-6xl を使用してください。
• B5 に従い、意味のある位置で改行されるよう、ヒーローと同様に最大幅を制限してください。

アニメーション

• テキストは控えめな色調で表示し、テーマの基本テキスト色に対する不透明度をおよそ 25〜35％にしてください。
• セクションがスクロールで画面内に入ると、各単語が読む順に、控えめな色調から本来のテキスト色へ個別に切り替わるようにしてください。
• ブロック全体を一度に切り替えるのではなく、単語がトリガーラインを通過するたびに 1 語ずつ有効化してください。切り替えには B7 の基本イージングカーブを使い、リニアなフェードは使わないでください。
• 単語ごとに IntersectionObserver を使うか、requestAnimationFrame でスロットリングした単一のスクロールリスナーを使って実装してください。B7 に従い、スロットリングなしの window.addEventListener('scroll') は使わないでください。

出力形式

ランディングページをゼロから作成する場合は、コードを書く前に次の内容を順番に提示します。

1. ページの構成案 — セクションとその順序
2. ヒーローコピー — 見出し、サブ見出し、CTA、根拠を示す文
3. メリット — 成果を重視した3〜5項目の箇条書き
4. 仕組み — 3つのステップ
5. FAQ — 6〜12件の質問と回答
6. SEO / AEO — インデックスまたは noindex の推奨事項と、インデックスする場合のタイトルおよびメタ情報
7. レイアウトの推奨 — A、B、C、Dのいずれかと、その理由

その後、A6に従ってセクションごとに作成します。

クイックチェックリスト

戦略

• 提案を1つ、対象者を1つ、主要なアクションを1つに絞る
• ファーストビューに競合するCTAを置かない
• 曖昧な動詞ではなく、具体的な数値を使う
• リスクを軽減する要素を少なくとも1つ含める
• 根拠は、その裏付けとなる主張の近くに配置する
• レイアウトの種類を意図的に選ぶ

ビジュアル

• 承認済みの書体を1種類だけ使用し、斜体や極太は使わない
• コピーにハイフンを使わず、行末に単語だけが残らないようにする
• すべてのフォントサイズをTailwindのスケールに合わせる
• すべての余白値をスペーシングテーブルから選ぶ
• 入れ子になった角丸は数式に従う
• 片側だけのカード枠線や背景グラデーションを使わない
• ヒーローの見出しとサブ見出しは幅680px以下にし、意味のある箇所で改行する
• Phosphor、Solar、Iconamoonのアイコンを使う
• すべてのトランジションにB7の基本カーブを使い、スクロール時の表示にはIntersectionObserverを使う
• タグラインのリビールセクションを設ける。最低2行とし、スクロールに応じて単語を1つずつ表示する

コンテンツと公開

• 実際の原稿、信頼できる名前と数値を使い、禁止された埋め草の言葉は使わない
• ホバー、アクティブ、フォーカス、読み込み中、空、エラーの各状態を用意する
• リンク切れをなくし、現在のナビゲーション項目を明示する
• 404、法的情報へのリンク、フォームの入力検証、ファビコン、メタタグ、代替テキストを用意する

クレジット

このスキルの一部は、Leon Lin（@LexnLin）によるMITライセンスの taste-skill を参考にしています。リデザイン監査の構成、コンテンツのリアリティチェック、モーションとナビゲーションのアイデアが、本書の対応するセクションに活かされています。これらのセクションは、その後書き直されています。

MIT License

Copyright (c) 2026 Leonxlnx

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.