ランディングページデザインは何をしますか？

ランディングページの仕事はただ一つ：特定の見知らぬ人に「これが何であるか」を理解させ、信じさせ、次の一手を踏み出させることです。それは、明確なアイデアで注目を集め、飾らない事実でその注目を維持します。モデルは、正反対の2つの方法で間違えます。ほとんどの場合、彼らは「入れ替え可能なページ」を生成します。すなわち、あいまいな見出し、3つのアイコンカード、偽造された推薦の言葉、ロゴの壁、そして今風に見えるように選ばれたスタイルです。それを避けるように指示されると、今度は「AIらしさ」を追い払おうとし、一つの流行りの仕掛けを別のものに交換します。両方の修正方法は同じです：主題から始め、具体的で真実を述べ、この製品だけが持つことのできる一つのアイデアをページに与えることです。

interface-guidelinesの優先順位付けられた原則を適用してください（誰でも使える > 真実を伝える > 意味を伝える > 答えが最初に来る > 間違いを許容する > その場に留まる > 可能なものが見える > 慣習 > 洗練）。そのスキルがインストールされている場合は、まずそのSKILL.mdを読んでください。

ブリーフィング

レイアウトを始める前に、20行以内でこれらに答えてください。ユーザーが離席している場合は、前提を明記して続行してください。

誰が、どこから、何を知って訪れるのか？ 広告のクリック、問題の検索、友人からのリンク、投資家。彼らの事前知識によって、最初の画面でどれだけ説明する必要があるかが決まります。
唯一の次のステップと、それが彼らに要求するもの：メールアドレス、クレジットカード、電話、ダウンロード。ページ上の他のすべては二次的です。
主張： それが何であり、誰のためのもので、何が変わるのかを一文で述べてください。書けなければ、ページをデザインする準備はできていません。
手元にある証拠： 実際の顧客、許可を得た引用、出典と日付のある数字、デモ、無料ティア。存在するものをリストアップしてください。不足している証拠は、埋めるのではなく、マークすべきギャップです。
価格： 公開価格、開始価格、代表的なケース、または本当に不明。
ブランドの状態： brand-identityの出力（トークン、ロゴ、タイポグラフィ、ボイス）は存在しますか？存在しない場合は、最初にそれを実行するか、暫定的な方向性で進み、その旨を明記してください。
主題固有の素材： プロダクト、そのユーザー、その世界が実際にどのように見えるか（「アートディレクション」のセクションを参照）。
エージェント読者： アシスタントがこのプロダクトを比較したり、価格を引用したり、誰かをサインアップさせたりしますか？はいと仮定してください。
制約： スタック、CMS、パフォーマンス予算、言語、法的制約（規制対象の主張、価格に関する法律、同意）。

アートディレクション

このスキル群は特定の外観を規定しません。大胆、奇妙、静か、過剰、すべて許可されます。必要なのは、その外観がこの主題に関する決定から来ており、かつ基本機能（読みやすさ、速さ、操作性）を損なわないことです。このステップはコーディングの前に文章で行ってください。references/art-direction.mdに方法と実例があります。

主題の素材を集める [J]。プロダクトとその世界から、10～20の具体的な名詞をリストアップします：プロダクトが扱う物体、ユーザーがそれを使って作るもの、場所、人工物、音、質感、ドメイン固有の視覚言語（潮汐表、レシピカード、回路図、配送ラベル）。汎用的な言葉（「スピード」「イノベーション」「シームレス」）はカウントしません。
コンセプトを見つける [J]。その素材をページのアイデアに変える一文：「ページはプロダクト自身のアウトプット」「フィールドガイド」「あなたのデプロイの出発案内板」。スワップテストを適用します：競合がそのコンセプトをそのまま使えるなら、書き直してください。
一つの記憶に残る仕掛けを選ぶ [J]。一つの要素がコンセプトを体現し、大胆さの予算を受け取ります：実際のプロダクトの瞬間を大きく見せる、動作するデモ、ブランド由来のタイポグラフィックなジェスチャー、手に取れるオブジェクト、この会社だけが撮影できる写真。他のすべては読みやすさに奉仕します。5つの特徴的な仕掛けがあるページは、一つも特徴がありません。
構成する [J]。各画面の読み取り経路を決定します：目が最初、二番目、三番目にどこに留まり、どのサイズとコントラストがそれを実現するか。グリッドを設定し、その後、意図的に一度だけ破ります。スマートフォン用の構成は、デスクトップを縮小したものではなく、独自のレイアウトとしてデザインします。
2～3つの方向性を提案する それぞれ数行で（コンセプト、特徴的な仕掛け、ブランドトークンの使い方、リスク）、一つを選び、その理由を述べてください。方向性はアイデアにおいて異なるべきであり、単にパレットが異なるだけではいけません。

ブランドの境界。 色、タイポグラフィ、ロゴ、ボイス、トークンはbrand-identity（そのtokens.cssまたはtokens.json）から来ます。アートディレクションは、このページがそれらをどのように使うかを決定します：スケール、クロップ、密度、リズム、イメージ、モーション。新しいブランドカラーを追加したり、ロゴを描き直したり、一つのページのために書体を交換したりしないでください。ページにブランドに欠けているもの（イラストスタイル、写真の方向性）が必要な場合は、それをブランドギャップとして記録し、ブランドの所有者に提案してください。

センスは証拠にならない。 グラデーション、眉（ eyebrow）や特定のフォントを削除しても、ページが良くなるわけではありません：taste-skill自身のブラインドテストでは、検出失敗がゼロであったにもかかわらず、スキルなしに対して16ラウンド中4勝しかできず、そのモデル審査員はテンプレート的な仕掛けに満ちたリッチなページを好み続けました [E, model jurors only]。したがって、禁止された仕掛けのリストではなく、スワップテストと読者のタスクによって方向性を判断してください。

ルール

メッセージ

最初の画面は、それが何であり、誰のためのものであり、次のステップは何かを、見知らぬ人にもわかる言葉で述べる [E]。訪問者は最初の10～20秒以内に離脱するかどうかを決定し（Liu, White, Dumais 2010, via NN/g）、最初の画面一杯は約57%の視聴時間を得ます（NN/g 2018, n=120）。巧妙な一文が先導することもありますが、そのすぐ横にわかりやすい説明的な一文がなければなりません。
h1は主張であり、ブランド名や挨拶ではない [S]。これは、スクリーンリーダーやエージェントのためのページのアウトラインルートです（WCAG 2.4.6）。
具体的であることは宣伝文句より勝る [E]。簡潔で、スキャン可能で、客観的なコピーは、宣伝的なコピーよりもユーザビリティで124%優れていました（Nielsen 1997, n=51；古いですが、その傾向は続いています）。「ワークフローを加速」ではなく、「タイムシートから請求書を送信します」と言いましょう。
すべてのセクションは一つの主張を行い、その証拠を示す。証拠のないセクションは削除する [J]。デザインする前に、ページを主張のリストとして書き出してください（taste-skillから借用したアイデア）。
プロダクト自体を見せる [J]：実際のスクリーンショット、実際のアウトプット、実際の写真。「生産性」の描かれた抽象画は何も語らず、でっち上げられたUIはプロダクトを誤って伝えます。
人はスクロールするので、偽の床（false floor）を避ける [P]。最初の画面より下では、注意は減少しますが、消え去るわけではありません（NN/g 2018）。完全に見える全幅のヒーローは、その背後にあるすべてを隠してしまいます。

証拠と誠実さ

本当の証拠のみ [S]。偽造またはAI生成のレビューや推薦の言葉は、米国では違法であり（FTC 16 CFR Part 465, 2024）、推薦は実際の経験を反映しなければなりません（FTC Endorsement Guides, 16 CFR Part 255）。ロゴは許可を得た場合のみ、そして実際の顧客のもののみ使用します。
証拠が不足している場合、それを明示する [J]。{{quote: customer, name, role}}のような目に見えるプレースホルダーを使用し、それらを引き継ぎ時にリストアップしてください。ギャップを埋めるために、もっともらしい偽物を決して書かないでください。
数字には出典と日付を付ける [J]。「12,000チーム」には「2026年3月時点」が必要です。誰も確認できない数字は、せいぜい飾りに過ぎません。
人工的な緊急性を演出しない [E]。偽のカウントダウンや偽の希少性は、大規模に見られた欺瞞的なパターンであり（Mathur et al. 2019）、またエージェントも誤解させます：6つのウェブエージェントは平均して41%の確率でダークパターンに騙されました（Ersoy et al. 2025, preprint）。

価格設定

価格を表示する [P]。価格がないと、購入者は競合他社に流れます（Nielsen 2002）。価格が実際に変動する場合は、その価格とともに代表的なケースを示してください（Nielsen 2006）。
価格はテキストである：金額、通貨、期間、含まれるもの。決して画像内だけであってはなりません [J]。プラン比較は、機能を言葉で説明した実際の<table>を使用します。
購入者が支払う総額を明記する。義務的な手数料を含めて [S]。米国法では、ライブイベントのチケットと短期宿泊にこれを義務付けています（FTC Rule on Unfair or Deceptive Fees, 2025）；他の地域では誠実な慣行です。EUの割引請求は、過去30日間の最低価格を示さなければなりません（Directive 98/6/EC, Art. 6a）。
請求トグルは状態とデフォルトを表示する [J]。年払いがデフォルトで表示されている場合は、その数字の横に「年払い（年額請求）」と表示します。

次のステップ

一つの主要なアクション。決定ポイントで繰り返し表示し、何が起こるかをラベル付けする [J]：「14日間の無料トライアルを開始（カード不要）」、「ウェイトリストに登録」。二次的なアクションは二次的に見えるようにします。
ウェイトリストとサインアップフォームは最小限の情報を求め、その後に何が起こるかを伝える [J]：何を得られるか、いつ、どのくらいの頻度でメールが来るか。同意チェックボックスはデフォルトでオフにします。より長いフローはform-designに任せます。
成功はトースト通知ではなく、状態である [J]。送信後、フォームを何が起こったのか、そして何を期待すべきかを説明するものに置き換えます。

速度と堅牢性

GoogleのCore Web Vitalsを75パーセンタイルで満たす：LCP 2.5秒、INP 200ミリ秒、CLS 0.1 [S]。これらは、人間の知覚の閾値ではなく、達成可能性によって部分的に設定された目標です。より高速なモバイルページは、Google委託の調査で小売りコンバージョンの向上と相関しました（Deloitte 2020）[E, 相関関係]。
ヒーローは通常、LCP要素である [S]：width、height、fetchpriority="high"を持つ実際の<img>。遅延ロードせず、スクリプトを待つテキストの背後にあるCSS背景にしないでください（web.dev）。
コンテンツはJavaScriptやモーションなしで表示可能である [J]。スクロールリビールは表示状態から始まり、サポートされている場合にのみアニメーションします。動作が抑制されている場合は、何も隠さないでください。そうしないと、エージェントやスクリーンショットは空白を取得します。
自動で進むカルーセルは禁止 [P]。回転するヒーローはテストでユーザーからオファーを隠してしまい（Nielsen 2013）、5秒を超えるモーションには一時停止コントロールが必要です（WCAG 2.2.2）。

エージェント読者への配慮

アシスタントが引用する事実はページ上のテキストである：それが何か、価格、プランの制限、プラットフォーム、トライアル条件、連絡先 [J]。エージェントはまさにこれらからプロダクトを比較します。
構造化データとメタタグは、表示されているページを反映し、何も追加しない [S]：title、メタディスクリプション、Open Graph、JSON-LD（Organization、SoftwareApplication または Product）で、ページに表示されているのと同じ価格と名前を使用します。後付けのマークアップは、テストでエージェントの助けにはなりませんでした（Affora, interface-guidelines内）。
AIエージェントに向けたテキストは、非表示・表示を問わず、ページに含めない [J]。それはプロンプトインジェクションとして読まれ、非表示テキストはスパムシグナルです。

構築順序

ブリーフィング、次にギャップ用のプレースホルダーを含む主張と証拠のリスト。
アートディレクション：主題の素材、コンセプト、一つの仕掛け、2～3の提案、選択。
テキストワイヤーフレーム：順序通りのセクション。それぞれに主張、証拠、アクションを含む。
実際のコピーを含むセマンティックHTML：1つのh1、ランドマーク、議論のアウトラインとなる見出し、価格表、ラベル付きフォーム。
brand-identityからのブランドトークン、次にレイアウトと特徴的な仕掛け。
状態：フォーム検証、成功、失敗、売り切れまたはクローズされたウェイトリスト、JSなし、動作抑制。
画像、フォント、スクリプトをパフォーマンス予算内に収める。
検証し、最大2回修正し、引き渡す。

検証

node <interface-guidelines>/scripts/audit.mjs <dist|url> --out audit-output を実行し、3つの幅すべて、ライトモードとダークモード（両方存在する場合）のすべてのスクリーンショットを確認します。
最初の画面テスト： 最初の画面のスクリーンショットだけを誰かに（または文脈なしの新しいエージェントに）見せて、それが何か、誰のためのものか、次に何をすべきかを尋ねます。間違った答えは、どんなに見栄えが良くても、メッセージが失敗していることを意味します。
スワップテスト： プロダクト名を競合のものに置き換えます。それでもページが成立するなら、コンセプトとコピーは一般的すぎます。
エージェントテスト： アクセシビリティスナップショットのみから、各プランの価格と制限を読み取り、サインアップを完了します。JSON-LDと比較します。
速度： スロットリングされたモバイルプロファイルでLighthouseまたはPageSpeed Insightsを使用。フィールドデータ（CrUX）はページが公開されている場合。
堅牢性： JavaScriptを無効にして、prefers-reduced-motion: reduce の設定でロードします。重要なものが欠けていてはいけません。
証拠監査： すべての引用、ロゴ、数字、評価を出典まで追跡できるか、またはマークされたプレースホルダーとして表示されているかを確認します。

落とし穴

偽造された推薦の言葉、顧客でない企業のロゴの壁、でっち上げられたユーザー数や評価。
どのプロダクトにも当てはまる見出し（「仕事の未来を築く」）で、実際の説明は3つ目のスクリーンにある。
主題から決定する代わりに、「AIらしさ」を追いかけたり禁止したりすること。新しい流行りの代替品のリストは、次の「AIらしさ」です。
装飾の割り当て：至る所にモーション、すべてのセクションに画像、それ自体のためにセクションごとに異なるレイアウト。
スクロールアニメーションが発火するまでヒーローコピーやCTAが隠れている、それまでコントラスト基準を満たさない低不透明度の「リビール」テキスト。
画像内にのみ価格がある、または規模の兆候なしに「お問い合わせください」とだけある。
brand-identityトークンを使わずに、一つのページのためにブランドカラーを再定義したりロゴを描き直したりすること。
静かに年間料金を月額換算で表示する価格トグル。
ページに隠されたAIアシスタントへの指示。

参考文献

ファイル	読むタイミング
`references/art-direction.md`	常に、見た目を選ぶ前に：方法、実例、構成、ブランドトークンの使用、方向性の判断
`references/structure-and-copy.md`	ページを書くとき：ページタイプ別のセクションパターン、見出し、証拠、料金ページ、ウェイトリスト、フォーム
`references/performance-and-agents.md`	構築・公開時：Core Web Vitals、画像、フォント、モーション、メタデータ、構造化データ、JSなし
`references/sources.md`	数字を引用する前、または誰かがルールの存在理由を尋ねたとき

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