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

概要

コンバージョン率が高く、魅了するランディングページを構築します。このスキルは、コンバージョンに焦点を当てた構造と、特徴的なビジュアルデザインを組み合わせ、AIが飽和した世界で際立つページを作成します。目標は、自信を持って販売できる50～100ドル相当のページです。

必須: バイブ発見 (これを最初に行うこと)

コードを書く前に、必ずバイブ発見プロセスを実行してください。 これはルックアップテーブルではありません。毎回ユニークな美的方向性を生成する創造的なプロンプトです。

目標: 類似した製品であっても、二つとして同じランディングページがあってはなりません。

バイブ発見プロセス

ユーザーに以下の質問をし、その後、ユニークな方向性を統合してください。単に答えをプリセットにマッピングしないでください。

ステップ 1: コンテキストを収集する (これらを尋ねる)

Q1: このブランドを表す、現実世界の場所や物体は何ですか？

「業界」ではなく、実際の具体的なものです。深夜2時の東京のコンビニ。祖母のキッチン。ブルータリズムの駐車場。サンゴ礁。747のコックピット。マラケシュの蚤の市。1970年代のレコーディングスタジオ。

Q2: 最初の3秒間に誰かに感じてもらいたい感情は何ですか？

一つ選んでください: 穏やか。活力。好奇心。信頼。喜び。感銘。反抗的。郷愁。インスピレーション。面白い。洗練。歓迎。興味。自信。

Q3: 衝突させる、予想外の影響を二つ選んでください:

例: 「医療用包装＋スケートボードグラフィック」、「スプレッドシート＋ストリートアート」、「高級ホテル＋パンクジン」、「NASAミッションコントロール＋幼稚園」、「日本のコンビニ＋ビクトリア朝図書館」

Q4: このページは、何と絶対に誤解されてはいけませんか？

積極的に避けるべき具体的なものを2～3つ挙げてください。「暗号通貨プロジェクト」、「ウェルネスアプリ」、「銀行が作ったもの」、「紫色のグラデーションが使われているもの」

ステップ 2: 美学を発明する (調べずに作成する)

回答に基づいて、以下を決定することでユニークなバイブを作成します。

色の発明 (記憶したパレットを使用せず、場所や物体から導き出す)

Q1の現実の場所や物体にはどのような色が存在しますか？
その参照に忠実だと感じられる3～4色を抽出します。
新しいプロジェクトごとに、特定の16進コードを発明します。以前のプロジェクトのコードを再利用しないでください。
パレットに「ブルーとオレンジ」ではなく、「ミッドナイトボデガ」や「ラストベルトモーニング」のような、 evocativeな名前を付けます。

タイポグラフィの発明 (声を衝突に合わせる)

その場所では、テキストはどのように聞こえるでしょうか？
Q3の衝突を体現するディスプレイフォントを見つけてください。
いつもの選択に頼らず、新たな視点でGoogle Fontsを閲覧してください。
考慮すべき点: ウェイト、幅、コントラスト、癖。

レイアウトの発明 (物理的な空間から導き出す)

Q1の場所では、スペースはどのように整理されていますか？
狭いですか、広々としていますか？グリッド状ですか、有機的ですか？縦長ですか、横長ですか？
Q3の衝突を体現する、予想外のレイアウトの選択は何ですか？

モーションの発明 (感情に合わせる)

Q2の感情はどのように動きますか？
穏やか = ほとんど知覚できない。活力 = 動きのある。洗練 = ゆっくりと意図的に。
このページを定義する、特徴的なモーションは何ですか？

ステップ 3: バイブ仕様書を書く

コーディングする前に、これを明示的に書き出します。

VIBE NAME: [2～3語の名前を発明する]
REFERENCE: [Q1の場所/物体]
EMOTION: [Q2から]
COLLISION: [Q3から]
ANTI-PATTERNS: [Q4から]

COLORS:
- Primary: [hex] - [この色を選んだ理由]
- Secondary: [hex] - [理由]
- Background: [hex] - [理由]
- Accent: [hex] - [理由]
- Palette name: [evocativeな名前]

TYPOGRAPHY:
- Display: [具体的なフォント名] - [なぜ合うのか]
- Body: [具体的なフォント名] - [理由]
- Character: [声を説明する]

LAYOUT:
- Density: [スパース/バランス/デンス]
- Shapes: [シャープ/ラウンド/オーガニック/ミックス]
- Signature element: [1つの変わったレイアウトの選択]

MOTION:
- Level: [スティル/サトル/モデレート/ダイナミック/カオティック]
- Signature animation: [このページを定義する1つの具体的なアニメーション]

WILDCARD:
- 「マッチ」しないが、印象に残る予想外のディテール

ステップ 4: フレッシュネスチェック

進める前に、以下を確認してください。

過去3つのプロジェクトから16進コードを再利用していない
「使い慣れた」フォントに頼っていない (確認: Inter、Nunito、Space Groteskを使っていないか？使っているなら、別のものを見つけること)
Q3の衝突が実際に選択に表れている
以前のランディングページと間違えられることがない
自分でも驚くようなワイルドカードを含めている

バイブ発見の例

Q1 - 場所/物体: 「ラッシュアワーの日本の駅」

Q2 - 感情: 「自信」

Q3 - 衝突: 「交通標識＋オートクチュール」

Q4 - 絶対に誤解されてはいけないもの: 「瞑想アプリ、奇抜なもの、スタートアップブロのテクノロジー」

生成されたバイブ仕様:

VIBE NAME: 新宿滑走路
REFERENCE: ラッシュアワーの日本の駅
EMOTION: 自信
COLLISION: 交通標識 ＋ オートクチュール
ANTI-PATTERNS: ソフトなグラデーションなし、遊び心のあるイラストなし、丸みを帯びた親しみやすい形状なし

COLORS:
- Primary: #1a1a1a - 電車のドアの黒
- Secondary: #f5f5f0 - プラットホームのコンクリート、すり減って滑らかになった
- Background: #fafaf8 - 蛍光灯に照らされた白
- Accent: #e60012 - JR線の赤、注意を引く
- Palette name: "プラットホームエッジ"

TYPOGRAPHY:
- Display: Darker Grotesque - 自信に満ち、ややコンデンスされ、ヨーロッパ的なエッジ
- Body: Noto Sans JP - クリーンで実用的、交通標識からインスピレーションを得た
- Character: 権威的だが冷たくはない。明確。方向性を示す。

LAYOUT:
- Density: 豊かだが整理されている - 駅の地図のように
- Shapes: シャープだが、意図的に丸みを帯びた例外がある (電車の窓のように)
- Signature element: 列車の時刻表のようにセクションを分割する強い水平バンド

MOTION:
- Level: サトルだが正確
- Signature animation: 到着する電車のように横から要素がスライドイン - 水平、スムーズ、正確なタイミング

WILDCARD:
- 1つの要素が布のようなテクスチャオーバーレイを使用 - オートクチュールの衝突

インスピレーションのきっかけ (Q1で行き詰まった場合)

収束防止ルール

16進コードの記憶禁止 - 参照から新たに色を生成し、「いつもの青」を思い出さないこと
フォントローテーション必須 - 連続するプロジェクトで同じディスプレイフォントを使用できない
衝突が明確であること - Q3の両方の影響が誰にも見えない場合は、より強く押し出すこと
ワイルドカード必須 - すべてのバイブには、「適合」しないがユニークにする要素が1つ必要
名前を付ける - 名前のないバイブは一般的になる。名前のあるバイブはアイデンティティを持つ。

クイックコンテキスト質問 (最小バージョン)

ユーザーがコンテキストなしで「ランディングページを作って」と言った場合、尋ねてください。

「このブランドのエネルギーを捉えている場所や物体は何ですか？」
「どの感情が支配的であるべきですか？」
「これは何のように見えてはいけませんか？」

その後、それらの3つの回答からバイブを統合します。

必須: コピー戦略 (バイブ発見と同時に行うこと)

これをバイブ発見と並行して実行してください。 バイブ発見は見た目を提供します。コピー戦略は言葉を提供します。どちらもコードの前に行う必要があります。

コンバージョン方程式

すべてのコピー決定は、これに基づいています。

購入率 = 欲求 - (労力 + 混乱)

欲求を高める → 価値を明確かつ具体的に伝える
労力を減らす → 簡潔さ、スキャン可能な構造、明白な次のアクション
混乱を減らす → それが何であるかを正確に述べ、ボタンを見逃せないものにする

コピー決定に行き詰まった場合、「これは欲求を高めるか、労力/混乱を減らすか？」と自問してください。

ステップ 1: 反論発見

見出しを一つ書く前に、購入の反論を特定します。ユーザーに尋ねてください。

「何があなたの顧客の購入をほとんど止めましたか？」 「なぜ非顧客はまだ購入していないのですか？」

一般的な反論カテゴリ:

「これにはスキル/時間がありません」
「これは私の特定の状況では機能しません」
「得られるものに対して高すぎる」
「まだ十分に信頼できません」
「これが実際に何をするのか理解できません」

上位3つの反論を書き留めてください。これらが、見出しのフック、機能のコピー、CTAのフレーミングを導きます。

ステップ 2: 見出しの公式

すべてのヒーロー見出しは以下に従います: 価値提案 + フック

価値提案 は、次のリトマス試験に合格する必要があります。

訪問者が見出しだけを見て他に何も見なかった場合、あなたが何を販売しているか正確にわかりますか？

❌ 「ワークフローを改善」 (企業の決まり文句 — 何のワークフロー？) ❌ 「生産性の未来」 (具体的なことは何も言っていない) ✅ 「1時間で食料品を配達」 (具体的、具体的、明確) ✅ 「ビジュアルにウェブサイトをデザイン – コード不要」 (何をするか + 主要な反論に対処)

フック は2つのタイプのいずれかです。

タイプA — 大胆で具体的な主張 (好奇心を引き起こす):

「デプロイ時間を4時間から12分に短縮」
「先月、10,000チームが出荷を高速化」

タイプB — 反論に対処 (購入の最大の障壁を取り除く):

「クレジットカード不要」 (信頼の反論に対処)
「既存のツールで動作」 (切り替えコストの反論に対処)
「5分でセットアップ」 (労力の反論に対処)

ステップ1から得た主要な反論を使用して、フックのタイプを選択してください。

ステップ 3: サブ見出しのルール

サブ見出しは、正確に2つのことを行います。

製品が何であるかを説明する (見出しがメリットに焦点を当てていた場合)
大胆な主張がどのように可能かを説明する (見出しが主張をしていた場合)

最大: 1～2文。軽快に保ちます。3文必要な場合、見出しが十分に機能していません。

ステップ 4: 機能コピー構造

各機能は、正確に3つの要素を取得します。

要素	ルール
機能ヘッダー	短い価値提案のみ。率直に。❌ 「チームを強化」 ✅ 「リアルタイムコラボレーション」
機能段落	簡潔な説明 + 1つの重要な反論に対処する。必要に応じて詳細へのリンク — テキストの壁は避ける。
機能画像	製品をアクション中で見せる。ソフトウェアの場合: GIF > スクリーンショット > 抽象的なアート。物理的な商品の場合: ユースケース + ビルド品質のクローズアップ。

すべての機能は、ヒーローの支配的な価値提案に結び付く必要があります。機能はランダムではありません — それらは、上の折り畳みの上で行った主張の証拠です。

ステップ 5: CTAコピー

CTAはヒーローのナラティブを継続する必要があり、一般的であってはなりません。

❌ 「始める」 / 「デモをリクエスト」 / 「サインアップ」 (怠惰で、コンテキストがない) ✅ 「近くの食べ物を探す」 (配達のナラティブを継続) ✅ 「デザインを始める」 (デザインツールのナラティブを継続) ✅ 「あなたの節約額を見る」 (財務のナラティブを継続)

CTAボタンのテキストは、見出しを読んだ後の自然な次の文のように感じられるべきです。

ステップ 6: ソーシャルプルーフ戦略

注目すべき顧客/プレスがある場合:

マーキーにロゴを表示 — FOMOを生み出す (「誰もがすでにこれを知っている」)
印象的な指標を強調する (顧客数、処理した収益など)

まだ注目すべきソーシャルプルーフがない場合 (コールドスタート):

3～5の有名企業に無料アクセスを提供し、その後ロゴを表示する
実際の名前と写真を使用した具体的な推薦文を使用する (ベータユーザーからでも)
集計統計を表示する (空のロゴバーよりも「500以上のチームが利用」の方が優れている)
プレス掲載、ポッドキャスト、ニュースレターがあれば、「掲載記事」を検討する

偽装しないでください。空のソーシャルプルーフセクションは、セクションがないことよりも悪いです。

ステップ 7: マルチオーディエンスルーティング

製品が異なるペルソナ (例: 個人 vs チーム、開発者 vs デザイナー) にサービスを提供する場合、

ページ上部近くに**「自分で選ぶ冒険」**要素を追加し、訪問者を関連セクションにルーティングします。例:

トグルタブ: 「開発者向け」 / 「デザイナー向け」
分割ヒーロー: 「私は[役割A]です」 / 「私は[役割B]です」
ヒーローからリンクされたセグメント化されたランディングページ

異なるニーズを持つすべての人を同じファネルに強制的に通さないでください。

コピー戦略仕様書

これをバイブ仕様書と一緒に書き出します。

TOP 3 OBJECTIONS:
1. [反論] → [見出し/機能/CTA] で対処
2. [反論] → [見出し/機能/CTA] で対処
3. [反論] → [見出し/機能/CTA] で対処

HEADLINE:
- Value prop: [販売しているもの、具体的に]
- Hook type: [大胆な主張 / 反論に対処]
- Full headline: [実際のテキスト]
- Litmus test: これだけから何を販売しているか誰かにわかりますか？ [はい/いいえ]

SUBHEADLINE: [1～2文 — それが何か + 主張がどのように機能するか]

CTA TEXT: [見出しのナラティブの継続]

AUDIENCE: [単一 / 複数ペルソナ]
- 複数の場合: [どのようにルーティングするか]

50%ルール

時間の50%をヒーローセクションに費やしてください。 それはソーシャルメディアのカバー画像、第一印象、フックです。他のすべては、ヒーローを正しくすることから派生します。

セクション構成 (上から下へ)

1. ヒーローセクション (最優先)

成功を左右する要素。以下を含める必要があります。

見出し: 上記のコピー戦略仕様書からの価値提案 + フック。リトマス試験に合格する必要があります — 誰かがこれだけを見た場合、あなたが何を販売しているかわかりますか？
サブ見出し: それが何であるか + 主張がどのように機能するかを説明します。最大1～2文、軽快に保ちます。
CTAボタン: 見出しのナラティブの継続 (「始める」ではない — 上記のCTAコピールールを参照)。オプションのセカンダリCTA。
ソーシャルプルーフ: ロゴマーキー、推薦文、または信頼バッジ。コールドスタートの場合は、上記のソーシャルプルーフ戦略を参照してください。
ビジュアル要素: 製品ショット、イラスト、またはアニメーション背景

ヒーローバリエーション:

分割レイアウト (テキスト左、ビジュアル右)
フローティング要素で中央揃え
背景全体にテキストオーバーレイ
装飾要素を使用した非対称

2. 機能/メリットセクション

製品が何をするかを示します。各機能には3つの要素が必要です: ヘッダー (短い価値提案、「強化」「革命」は使用しない)

...

[翻訳のため省略]

ランディングデザイン — Vibe Discovery + 反AIスロップ