ux-landing-page

ランディングページスキル

このスキルの動作 (最初にお読みください)

これは 生成型 のスキルであり、ランディングページの仕事はただ ひとつ です。それは、訪問者を単一のコンバージョンゴールへと導くことです。典型的な失敗は 全部載せページ です — サイト全体のナビゲーション、競合する複数のオファー、曖昧な見出し、文章の壁、そしてスクロールしないと見つからない CTA — その結果、注意が散り、誰もコンバージョンしません。(ユーザーは約 0.05 秒で第一印象を形成し、コピーの約 20% しか読みません。) 逆の失敗は、価値提案も信頼する理由もない美しいヒーローセクションです。そこで、このスキルは以下をゲートします。

1. 単一のコンバージョンゴールと、誰が訪れるのかを明確にする — これが、ページに残すものと削るものを決めます。
2. 常に当てはまる核心を適用する — ひとつの焦点、鋭い見出し、明白な価値提案、目立つ CTA、信頼シグナル、高速かつレスポンシブ。
3. 文脈に依存する判断 (ナビゲーションを削るか残すか、特典、チャット、スクロールの長さ) をトレードオフとともに浮き彫りにする。

その後、検証のために ux-aesthetics-audit、ux-heuristics-audit、ux-accessibility-audit、ux-microcopy-audit、ux-dark-patterns-audit、ux-mobile-responsiveness-audit に引き継ぎます。

スコープと構成 (docs/orchestration-policy.md §9 に準拠): このスキルは ランディングページそのもの を対象とし、より狭いスコープのスキルを再導出するのではなく構成します。コアの子スキル (ページの一部として構築): ux-buttons による CTA ボタンの仕組み。下流 (自動構築せず、提案のみ): ux-pricing による 料金表、ux-login-signup と ux-checkout-payment による クリック後のサインアップ/チェックアウト。継承し、再生成しない: 既存のデザインシステムがある場合、色/書体/余白はそのトークンから取得します — ゼロから設計する場合にのみ、これらを設定します。

---

ステップ 0 — 設計前に文脈を確立する

不明な場合は尋ねてください。回答なしで進める場合は前提を明示してください:

• 単一のコンバージョンゴールは何ですか? サインアップ、購入、デモ予約、購読、ダウンロード。1 ページに 1 つの主要アクション — それ以外はすべて従属します。ステークホルダーが複数のゴールを望む場合、それは優先順位付けの話であり、5 つの対等なボタンではありません。
• 誰が訪れ、どれほど認知していますか? 専門的なオーディエンスは (ある程度) 専門用語を許容しますが、一般向けまたはファネル上流のオーディエンスには、平易な言葉と、依頼の前により多くの文脈が必要です。トラフィックソース (ある機能の広告か、ホームページか) は、訪問者を連れてきた約束にページがどれだけ厳密に一致しなければならないかを形作ります。
• キャンペーン用ランディングページか、サイト内のページか? 専用のキャンペーンページは焦点を守るためにグローバルナビゲーションを 削除 することがよくありますが、メインサイト内のページは通常、道案内のためにそれを保持します。このひとつの選択が、いくつかのデフォルトを反転させます。
• 製品タイプとブランド — 画像スタイル、トーン、遊び心のあるコピーが合うかどうかを制限します。

---

常に適用する核心 (ほぼすべてのランディングページで正しい)

焦点 — 単一のゴールを守る

• 主要アクションを支持しないものはすべて削除します。 二次的なオファー、意味を担わない装飾的な画像、(キャンペーンページでは) グローバルナビゲーションさえも削ります。すべての要素は、訪問者をゴールへと導くことでその場所に値するべきです。
• コピーをスキャンしやすくします。 段落は 3〜4 行程度に抑え、2 段落ごとに説明的な小見出しを加え、要点を先頭に置きます — ユーザーは流し読みし、読み込んだりはしません。

メッセージ — 見出し + 価値提案

• 説得力があり簡潔な見出し。 それは約 0.05 秒の第一印象を獲得する最初の要素です。明確で、オファーに関連し、短く保ちます。これが何であるかを覆い隠すような気の利いた表現は避けます。
• 価値提案を明白にし、ページの上部に置きます。 明確な言葉で (加えて補助的なビジュアルで)、3 つの問いに答えます: それは何か、どう私の役に立つのか、どう機能するのか? これはエレベーターピッチであり、見つけるのにスクロールを要するべきではありません。
• 専門用語を使わない。 オーディエンスの言葉を使います。専門的なオーディエンスにとって技術用語が避けられない場合は、まずそれを定義します。専門用語は読みやすさ と 信頼性を損ないます。

求められるもの — CTA

• スクロールせずに見える、目立つ主要 CTA を 1 つ。 アクセント/対比カラー、十分な大きさ（ターゲット ≥44×44px）、行動を名指しする能動動詞のラベル（「送信」ではなく「無料トライアルを開始」）。長いページでは、CTA を一定間隔で繰り返します。
• コンテンツがファーストビューの下に続く場合は、スクロールの手がかりを追加します（例: 下向き矢印）。そうしないと、訪問者はページがヒーローで終わると誤解してしまいます。

信頼 — なぜあなたを信じるのか

• ソーシャルプルーフ。 レビュー、評価、 testimonial、利用統計 — 人は最初の一人になりたがりません。多くの人は同僚の推薦や公開意見を信頼します。実際の具体的な証拠を示しましょう。
• ブランドの権威。 有名顧客、パートナー、メディア掲載のロゴは、オファーが正当であるという安心感を訪問者に与えます。

仕組み — 実際に機能しなければならない

• デバイス間でレスポンシブ — 特に見出しと CTA は、デスクトップからスマートフォンまでレンダリングされ、タップ可能な状態を保つ必要があります。
• 高速読み込み — 目安は約 2.5 秒未満。遅いページ（特にモバイル）は、訪問者が何かを見る前に離脱させてしまいます。

---

文脈依存の判断（表に出し、自動適用しない）

それぞれをトレードオフと、Step 0 に紐づく推奨とともに提示します。あらゆる説得のレバーを積み重ねること — 特典 + 緊急性 + ポップアップ + 固定チャット — が失敗のパターンです。それは押し売りとして読まれ、信頼を損ないます。

判断	適用するとき	避ける / 適応させるとき	デフォルトの推奨
グローバルナビゲーションを維持するか削除するか	メインサイト内のページでは維持する（道案内）	ナビが離脱を意味する単一目標のキャンペーンページでは削除する	ページタイプに合わせる。目標が 1 つのコンバージョンのときは、競合するナビを削る
特典 / 返報性（割引、送料無料、ボーナス）	オファーに合う本物のインセンティブ。返報性は行動を後押しする	信頼を安っぽくする作り込まれた「無料ギフト」、または目標と無関係な特典	本物で関連性のあるインセンティブを使う — 誠実に保つ（→ ダークパターン）
チャット / サポートウィジェット	初めての訪問者が質問を持つような検討型の購入	モバイル — 固定チャットがフィルター/CTA/チェックアウトを覆い、フラストレーションを生む	提供する。固定チャットは デスクトップ専用 の扱いにする
スクロールの長さ（短いヒーローのみ vs. ロングフォーム）	教育と証拠を必要とする複雑/検討型のオファーにはロングフォーム	シンプルで低関与のアクションに長いページ	長さは意思決定の複雑さに合わせる。長さに関わらず目標は 1 つに保つ
ソーシャルプルーフの種類（ testimonial / 統計 / ロゴ / 評価）	オーディエンスが最も信頼し、誠実に示せるものを選ぶ	曖昧または検証不能な主張（「何千人に愛用」）	一般的な最上級表現よりも、具体的で本物の証拠
コピーの個性 / ユーモア	それが合い、意思決定が低リスクなブランド	真剣/高信頼のオファー（金融、健康）、または価値提案を曖昧にする場合	温かみは yes。ただし明確な価値提案を犠牲にしてはならない

---

結果を検証する（オーケストレーション）

ハンドオフでは、各レンズをインストール可能なスキルの name で指定します。呼び出すのは、そのスキルがインストールされている場合のみです。インストールされていない場合でも、このスキル自体のコアにこれらのルールがすでに含まれているため、ブロックせずにそのまま進めてください。

生成または修正した後は、完了と宣言するのではなく、結果を監査レンズに引き渡してください。これらは候補のレンズです — 姿勢は docs/orchestration-policy.md で設定するか、全体を ux-design-review 経由でルーティングしてください。ここでは、heuristics、microcopy、dark-patterns は Tier A（自動実行）、accessibility、aesthetics、mobile-responsiveness は Tier B（提案） です — 既存のデザインシステムがある場合、aesthetics は抑制され、accessibility は使用状況に絞り込まれます。mobile-responsiveness はモバイルの場合にのみ適用されます。ユーザーが特定の目的でこのスキルを呼び出した場合は、そのスコープを尊重してください。

• ux-aesthetics-audit (Tier B — 提案。デザインシステムがある場合は抑制) — 明確な焦点（CTA / 価値）を 1 つ持つ視覚的階層、過密でないヒーロー、テキストの壁ではなくスキャンしやすいリズム。
• ux-heuristics-audit (Tier A) — ページがユーザーを導いた広告/リンクの約束と一致しているか。次のステップが明白か。CTA アクションにおけるシステムステータスが明確か。
• ux-accessibility-audit (Tier B — 提案。デザインシステムがある場合は絞り込み) — CTA のコントラストとターゲットサイズ、見出しの階層、画像の alt テキスト、読みやすい本文書体。
• ux-microcopy-audit (Tier A) — 見出しの明確さ、バリュープロポジションの文言、専門用語、CTA の品質。
• ux-dark-patterns-audit (Tier A) — ランディングページが招きがちなコンバージョン圧力の罠：偽の緊急性・希少性カウントダウン、操作的または捏造された社会的証明、辞退時のコンファームシェイミング、閉じ込めるポップアップ。説得は誠実であるべきです。
• ux-mobile-responsiveness-audit (Tier B — 提案) — スマートフォンでの見出し・CTA のレンダリングと到達性、スティッキーチャットの注意点、高速なモバイル読み込み、タップターゲット。

監査によって競合が浮上した場合（例：マーケティングが 3 つのオファーとカウントダウンを求めている）、主要タスクに立ち返って解決してください：1 人の訪問者、1 つの決定 — それが下すのに役立たないものはすべて削除します。

---

よくある do/don't パターン

❌ しないこと	✅ すること
複数のオファー + 完全なナビ + テキストの壁を詰め込む	目標は 1 つ。それに貢献しないものはすべて削る
これが何かを隠す巧妙な見出し	オファーに関連した明確で簡潔な見出し
バリュープロポジションをフォールドの下に埋める	what/benefit/how に、平易に、上部で答える
専門用語で感銘を与える	オーディエンスの言葉を使う。避けられない用語は定義する
「送信」/ ページ中間の低コントラストボタン	能動動詞の CTA、アクセントカラー、≥44px、スクロールなしで見える
意味を持たない装飾的なストック画像	メッセージを強化する文脈的な画像
信頼する理由を示さずにコンバージョンを求める	社会的証明 + ブランドの権威、具体的かつ本物
緊急性 + 特典 + ポップアップ + モバイルスティッキーチャットを積み重ねる	誠実なインセンティブ。スティッキーチャットはデスクトップのみ（→ dark-patterns）
ヒーローがページ全体だと思い込む	フォールドの下にコンテンツが続く場合はスクロールキュー
遅くデスクトップ専用のレイアウトを出す	レスポンシブ。モバイルで見出しと CTA を維持。読み込み < ~2.5 秒
チェックせずに出荷する	aesthetics + heuristics + accessibility + microcopy + dark-patterns + mobile-responsiveness に引き渡す

---

ソースレッスン（Uxcel）

• コンバージョンするランディングページの設計方法