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

概要

コンバージョンを獲得し、かつ魅了するランディングページを構築します。このスキルは、コンバージョン重視の構造と、特徴的なビジュアルデザインを組み合わせ、AIがあふれる世界で埋もれないページを作成します。目標: 販売しても恥ずかしくない、$50〜$100の価値があるページ。

必須: バイブ発見プロセス（最初にこれを行うこと）

コードを1行も書く前に、このバイブ発見プロセスを絶対に実行しなければなりません。 これは設定済みの選択肢から選ぶだけの表ではありません。毎回、独自の美的方向性を生成するクリエイティブプロンプトです。

目標: 類似した製品であっても、二つとして同じデザインのランディングページを作らないこと。

バイブ発見プロセス

ユーザーに以下の質問をし、それらを統合して独自の方向性を導き出してください。単に答えをプリセットにマッピングしないでください。

ステップ1: コンテキストの収集（これらを質問する）

Q1: このブランドが例えるなら、現実世界のどんな場所や物体ですか？

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

Q2: ユーザーが最初の3秒間に感じるべき感情は何ですか？

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

Q3: 予想外の2つの影響をぶつけてください：

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

Q4: このページが絶対に間違われてはいけないものは何ですか？

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

ステップ2: 美学を発明する（調べずに、創造する）

回答に基づいて、以下を決定することで独自の雰囲気を創造します。

色の発明（覚えているパレットを使わず、場所/物体から導き出す）

現実世界の場所/物体Q1にはどんな色が存在しますか？
その参照に忠実だと感じられる3〜4色を抽出します
新鮮に、具体的な16進コードを発明します - 過去のプロジェクトからコードを再利用しないでください
パレットに「青とオレンジ」ではなく「ミッドナイト・ボデガ」や「ラストベルト・モーニング」のような、印象的な名前を付けてください

タイポグラフィの発明（声と衝突を一致させる）

その場所でテキストはどのように聞こえますか？
Q3の衝突を体現するディスプレイフォントを見つけてください
いつものお決まりに頼らず、新鮮な目でGoogle Fontsをブラウズしてください
ウェイト、ワイド、コントラスト、癖を考慮に入れてください

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

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

モーションの発明（感情に合わせる）

Q2の感情はどのように動きますか？
穏やか＝かろうじて知覚できる程度。活力＝動きがある。洗練＝ゆっくりと明確に。
このページを定義する、1つの特徴的なモーションは何ですか？

ステップ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: [印象的な名前]

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

LAYOUT:
- Density: [sparse/balanced/dense]
- Shapes: [sharp/rounded/organic/mixed]
- Signature element: [1つの変わったレイアウトの選択]

MOTION:
- Level: [still/subtle/moderate/dynamic/chaotic]
- Signature animation: [このページを定義する1つの具体的なアニメーション]

WILDCARD:
- マッチしていないけれど、記憶に残るようにする1つの予想外のディテール

ステップ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: 反論の発見

見出しを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. [objection] → addressed in: [headline/feature/CTA]
2. [objection] → addressed in: [headline/feature/CTA]
3. [objection] → addressed in: [headline/feature/CTA]

HEADLINE:
- Value prop: [何を売っているか、具体的に]
- Hook type: [bold claim / objection addressed]
- Full headline: [実際のテキスト]
- Litmus test: これだけ見て、誰かが私たちが何を売っているかわかるか？ [yes/no]

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

CTA TEXT: [見出しの物語の継続]

AUDIENCE: [single / multi-persona]
- If multi: [ルーティング方法]

50%ルール

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

セクション構成（上から下へ）

1. ヒーローセクション（最優先）

一か八かの要素。以下を含める必要があります:

見出し: コピー戦略スペックからの価値提案 + フック（上記参照）。リトマス試験に合格しなければならない — 誰かがこれだけを見て、あなたが何を売っているかわかりますか？
サブ見出し: それが何か + 主張がどのように機能するかを説明。最大1〜2文、軽く保つ。
CTAボタン: 見出しの物語の継続（「始める」ではない — 上記のCTAコピーのルールを参照）。オプションのセカンダリCTA。
社会的証明: ロゴマーキー、推薦の言葉、またはトラストバッジ。コールドスタートの場合は、上記の社会的証明戦略を参照。
ビジュアル要素: 製品ショット、イラスト、またはアニメーション背景

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

分割レイアウト（テキスト左、ビジュアル右）
浮遊要素で中央揃え
フルブリード背景にオーバーレイテキスト
装飾要素で非対称

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

製品の機能を示します。各機能には3つの要素が必要です: ヘッダー（短い価値提案、「エンパワー/革命的な」は禁止）

...

[以降のセクションは翻訳範囲の都合で省略されています]

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