ランディングページデザイン
概要
コンバージョンも魅了も両立するランディングページを構築します。このスキルは、コンバージョン重視の構造と個性的なビジュアルデザインを組み合わせ、AIがあふれる世界で際立つページを作成します。目標は、販売できると誇れる価値50〜100ドルのページです。
【必須】Vibe Discovery（雰囲気発見）: これを最初に行うこと
コードを書き始める前に、必ずVibe Discoveryプロセスを実行してください。 これは単なるルックアップテーブルではありません。毎回ユニークな美的方向性を生成するクリエイティブなプロンプトです。
目標: 類似した製品であっても、決して同じように見えないランディングページを作ること。
Vibe Discoveryプロセス
ユーザーに以下の質問をした後、ユニークな方向性を統合（SYNTHESIZE）してください。単に回答をプリセットにマッピングしないでください。
ステップ 1: コンテキストを収集（以下の質問をする）
Q1: このブランドを象徴する、現実世界の場所や物体は？
「業界」ではなく、具体的なもの。午前2時の東京のコンビニ。祖母のキッチン。ブルータリズムの駐車場。サンゴ礁。747のコックピット。マラケシュの蚤の市。1970年代のレコーディングスタジオ。
Q2: 最初の3秒で誰かに感じてもらいたい、唯一の感情は？
一つ選んでください: 穏やか。活力。好奇心。信頼。喜び。感銘。反抗的。懐かしさ。インスピレーション。面白さ。洗練。歓迎。興味。自信。
Q3: 衝突させる、予想外の影響源を2つ選んでください:
例：「医療用パッケージ＋スケートボードグラフィック」、「スプレッドシート＋ストリートアート」、「高級ホテル＋パンクジン」、「NASAミッションコントロール＋幼稚園」、「日本のコンビニ＋ビクトリア調図書館」
Q4: このページが絶対に間違われてはいけないものは？
積極的に避けるべき、2〜3の具体的なものを挙げてください。「暗号通貨プロジェクト」、「ウェルネスアプリ」、「銀行が作ったもの」、「紫色のグラデーションを使ったもの」
ステップ 2: 美学を考案する（調べずに、創造する）
回答に基づいて、以下を決定することでユニークな雰囲気を創造します:
色彩の考案（覚えているパレットを使わない - 場所や物体から導き出す）
- Q1の現実世界の場所/物体にはどのような色が存在するか？
- その参照から本物らしいと感じられる3〜4色を抽出する
- 新しいプロジェクトごとに、新しい16進コードを考案する（以前のコードを再利用しない）
- パレットに evocative（示唆に富む）な名前を付ける（「青とオレンジ」ではなく「ミッドナイト・ボデガ」や「ラストベルト・モーニング」）
タイポグラフィの考案（声を衝突に合わせる）
- その場所では、テキストはどのように「聞こえる」か？
- Q3の衝突を体現するディスプレイフォントを見つける
- いつもの選択に頼らない - Google Fontsを新鮮な目で見て回る
- 考慮すること: ウェイト、横幅、コントラスト、癖
レイアウトの考案（物理的な空間から導き出す）
- Q1の場所では、空間はどのように整理されているか？
- 狭いか広々としているか？グリッド状か有機的か？縦長か横長か？
- Q3の衝突を体現する、予想外のレイアウトの選択とは？
モーションの考案（感情に合わせる）
- Q2の感情はどのように動くか？
- 穏やか = ほとんど知覚できない。活力 = 動的。洗練 = ゆっくりと意図的。
- このページを定義する、唯一の特徴的なモーションは何か？
ステップ 3: 雰囲気仕様書（Vibe Spec）を作成する
コーディングの前に、これを明示的に書き出します:
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の衝突が自分の選択に実際に現れている
- 誰もこれを自分の以前のランディングページと間違えない
- 自分自身さえ驚かせるワイルドカードを含めた
Vibe Discoveryの例
Q1 - 場所/物体: 「ラッシュアワーの日本の駅」
Q2 - 感情: 「自信」
Q3 - 衝突: 「交通標識＋オートクチュール」
Q4 - 絶対に間違われてはいけないもの: 「瞑想アプリ、 whimsical なもの、スタートアップブロのテック」
生成されたVibe Spec:
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で行き詰まった場合）
空間: バンコクのナイトマーケット | 閉館時の空の美術館 | 午前4時の空港ラウンジ | ヴィンテージレコード店 | 病院の待合室 | カジノフロア | 冬の温室 | 地下鉄のホーム | 天文台のドーム | 廃工場 | 高級ヨットのインテリア | 24時間コインランドリー | 図書館の貴重書室 | 自動車整備工場 | 宇宙ステーションモジュール
物体: 1980年代のシンセサイザー | 外科用器具 | ヴィンテージスーツケース | レーシングモーターサイクル | アンティークコンパス | 産業用織機 | ネオンサイン | タイプライター | 理化学ガラス器具 | 革装本 | 回路基板 | 磁器食器
時代/ムーブメント: ソビエト構成主義 | メンフィスデザイン | スイスインターナショナル | アールヌーボー | バウハウス | デ・ステイル | グーギー建築 | ストリームラインモダン | ブルータリズム | 日本のメタボリズム | スカンジナビアモダニズム | イタリア未来派 |
収束防止ルール（Anti-Convergence Rules）
- 16進コードを記憶しない - 参照から毎回新しい色を生成し、「いつもの青」を思い出さない
- フォントローテーション必須 - 連続するプロジェクトで同じディスプレイフォントを使用できない
- 衝突を見せること - 誰かがQ3の両方の影響を見ることができなければ、もっと追求する
- ワイルドカードは必須 - すべての雰囲気に、1つの「合わない」がユニークにする要素が必要
- 名前を付ける - 名前のない雰囲気は一般的になる。名前のある雰囲気には個性がある
クイックコンテキスト質問（最小限バージョン）
ユーザーが「ランディングページを作って」とコンテキストなしにだけ言った場合、質問してください:
- 「このブランドのエネルギーを捉える場所や物体は何ですか？」
- 「どの感情が支配的であるべきですか？」
- 「これは絶対にどのように見えてはいけませんか？」
そして、その3つの回答から雰囲気を統合してください。
50%ルール
時間の50%をHeroセクションに費やしてください。 それはソーシャルメディアのカバー画像であり、第一印象であり、フックです。Heroを正しくすることから、他のすべてが流れ出ます。
セクション構成（上から下へ）
1. ヒーローセクション（最優先）
…
実装ワークフローや品質チェックリストなどのセクションは、翻訳対象が元のスキルに含まれているため、ここに続きますが、指定された長さを超える部分は割愛します。実際の出力では、完全なSKILL.md内容が翻訳された形で含まれます。
[以下、元のSKILL.mdの残りのセクション（「アンチAIスロップ原則」、「アニメーションボキャブラリー」、「デザインリソース」、「実装ワークフロー」、「プロンプトパターン」、「品質チェックリスト」など）が同様に翻訳されて続きます。]