ランディングページデザイン は何をしますか？
概要
コンバージョンを獲得し、かつ魅了するランディングページを構築します。このスキルは、コンバージョン重視の構造と独特なビジュアルデザインを組み合わせ、AIで溢れた世界で際立つページを作成します。目標は、販売したくなるような50〜100ドルの価値があるページです。
必須：Vibe Discovery（これを最初に行う）
コードを書く前に、Vibe Discoveryプロセスを実行しなければなりません。 これは単なる設定表ではなく、毎回独自の美的方向性を生成するクリエイティブなプロンプトです。
目標：たとえ類似した製品であっても、二つとして同じランディングページがあってはなりません。
Vibe Discoveryプロセス
ユーザーに以下の質問をし、その後で独自の方向性を統合します。答えを単にプリセットにマッピングしないでください。
ステップ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仕様を書く
コーディングの前に、これを明示的に書き出します。
VIBE名：[2〜3語の名前を考案]
参考：[Q1の場所/物]
感情：[Q2から]
衝突：[Q3から]
アンチパターン：[Q4から]
色：
- プライマリ：[16進数] - [この色の理由]
- セカンダリ：[16進数] - [理由]
- 背景：[16進数] - [理由]
- アクセント：[16進数] - [理由]
- パレット名：[evocativeな名前]
タイポグラフィ：
- ディスプレイ：[特定のフォント名] - [なぜ合うか]
- 本文：[特定のフォント名] - [理由]
- 特徴：[声を説明]
レイアウト：
- 密度：[疎/バランス/密]
- 形状：[鋭い/丸い/有機的/混合]
- 特徴的な要素：[1つの珍しいレイアウトの選択]
モーション：
- レベル：[静止/微妙/中程度/動的/混沌]
- 特徴的なアニメーション：[このページを定義する1つの特定のアニメーション]
ワイルドカード：
- 「マッチ」しないが、記憶に残るようにする1つの予期しない詳細
ステップ4：フレッシュネスチェック
続行する前に、以下を確認します。
- 私の最後の3つのプロジェクトの16進数コードを再利用していない
- 自分の「快適な」フォントにデフォルト設定していない（確認：Interを使用していないか？Nunitoは？Space Groteskは？もしそうなら、別のものを見つけること）
- Q3の衝突が実際に私の選択に反映されている
- 誰もこれを私の以前のランディングページと間違えることはない
- 私自身も驚くようなワイルドカードを含めている
Vibe Discoveryの例
Q1 - 場所/物：「ラッシュアワーの日本の駅」
Q2 - 感情：「自信にあふれた」
Q3 - 衝突：「交通標識＋オートクチュール」
Q4 - 決して誤解されてはいけないもの：「瞑想アプリ、気まぐれなもの、スタートアップ御用達の技術」
生成されたVibe仕様：
VIBE名：Shinjuku Runway
参考：ラッシュアワーの日本の駅
感情：自信にあふれた
衝突：交通標識＋オートクチュール
アンチパターン：ソフトなグラデーションなし、遊び心のあるイラストなし、親しみやすい丸みを帯びた形状なし
色：
- プライマリ：#1a1a1a - 電車のドアの黒
- セカンダリ：#f5f5f0 - プラットフォームのコンクリート、滑らかに磨耗した
- 背景：#fafaf8 - 蛍光灯の白
- アクセント：#e60012 - JR線の赤、注目を集める
- パレット名：「プラットフォームエッジ」
タイポグラフィ：
- ディスプレイ：Darker Grotesque - 自信にあふれ、やや凝縮され、ヨーロッパのエッジ
- 本文：Noto Sans JP - 清潔な実用性、交通機関からインスピレーションを得た
- 特徴：権威的だが冷たくない。明確。方向性がある。
レイアウト：
- 密度：豊かだが整理されている - 駅の地図のように
- 形状：意図的に丸い例外を除いて鋭い（電車の窓のように）
- 特徴的な要素：電車の時刻表のようにセクションを分割する強い水平バンド
モーション：
- レベル：微妙だが正確
- 特徴的なアニメーション：要素が到着する電車のように横からスライドイン - 水平、滑らか、正確なタイミング
ワイルドカード：
- 1つの要素は布のようなテクスチャオーバーレイを使用する - オートクチュールの衝突
インスピレーションスターター（Q1で行き詰まった場合）
空間： バンコクのナイトマーケット | 閉館間際の空の博物館 | 午前4時の空港ラウンジ | ビンテージレコード店 | 病院の待合室 | カジノのフロア | 冬の温室 | 地下鉄のプラットフォーム | 天文台のドーム | 廃工場 | 高級ヨットのインテリア | 24時間コインランドリー | 図書館の貴重書室 | 自動車修理工場 | 宇宙ステーションモジュール
物体： 1980年代のシンセサイザー | 手術器具 | ビンテージスーツケース | レーシングモーターサイクル | アンティークコンパス | 産業用織機 | ネオンサイン | タイプライター | 科学用ガラス器具 | 革装本 | 回路基板 | 磁器の皿
時代/ムーブメント： ソビエト構成主義 | メンフィスデザイン | スイスインターナショナル | アールヌーヴォー | バウハウス | デ・ステイル | グーギー建築 | ストリームラインモダン | ブルータリズム | 日本メタボリズム | スカンジナビアモダニズム | イタリア未来派
アンチコンバージェンスルール
- 16進数コードの記憶禁止 - 参考から新しい色を生成し、「いつもの青」を思い出さない
- フォントローテーション必須 - 同じディスプレイフォントを連続したプロジェクトで使用できない
- 衝突を可視化する - Q3の両方の影響が見えない場合、さらに努力する
- ワイルドカードは必須 - すべての雰囲気には「合わない」が独自性を生み出す1つの要素が必要
- 名前を付ける - 名前のない雰囲気は平凡になる。名前のある雰囲気は個性を持つ。
クイックコンテキスト質問（最小バージョン）
ユーザーがコンテキストなしで単に「ランディングページを作って」と言った場合、質問します。
- 「このブランドのエネルギーを捉える場所や物は何ですか？」
- 「どの感情が支配的であるべきですか？」
- 「これは絶対にどのように見えてはいけませんか？」
次に、これら3つの答えから雰囲気を統合します。
50%ルール
時間の50%をヒーローセクションに費やします。 それはソーシャルメディアのカバー画像であり、第一印象であり、フックです。他のすべては、ヒーローを正しくすることから派生します。
セクション構成（上から下へ）
1. ヒーローセクション（最優先）
成功か失敗かを決める要素。以下を含める必要があります。
- 見出し：シャープで、ベネフィット重視のフック（インスピレーションとしてH1 Galleryを参照）
- 小見出し：サポートコンテキスト、最大1〜2文
- CTAボタン：プライマリアクション＋オプションのセカンダリ
- ソーシャルプルーフ：ロゴのマーキー、お客様の声、またはトラストバッジ
- ビジュアル要素：製品画像、イラスト、またはアニメーション背景
ヒーローバリエーション：
- 分割レイアウト（テキスト左、ビジュアル右）
- 中央揃えと浮遊要素
- 全画面背景とオーバーレイテキスト
- 非対称と装飾要素
2. 機能/ベネフィットセクション
製品の機能を示します。オプション：
- Bento Grid：非対称レイアウトのカード（Appleが普及させた）
- 交互行：画像＋テキスト、左右を入れ替える
- アイコングリッド：シンプルなアイコンと短い説明
- インタラクティブカード：ホバー状態、マイクロアニメーション
3. ソーシャルプルーフセクション
以下を通じて信頼を構築します。
- ロゴカルーセル（マーキーアニメーション）
- 写真付きお客様の声カード
- アニメーションカウンター付き統計/指標
- ケーススタディの抜粋
4. 動作仕様セクション
ステップバイステップの説明：
- 番号付きステップ（01、02、03パターンは洗練さを加える）
- プログレッシブリビール付きスティッキースクロール
- タイムラインまたはフローチャートの視覚化
5. 価格セクション（該当する場合）
- 2〜3段階の比較
- ハイライトされた「推奨」段階
- 機能比較表
- その下のFAQアコーディオン
6. CTAセクション
最終的なコンバージョンプッシュ：
- 価値提案の繰り返し
- 強い見出し
- 単一の焦点を絞ったアクション
- 緊急要素（本物の場合）
7. フッター
- ナビゲーションリンク
- ソーシャルアイコン
- 法的リンク
- オプションのニュースレター登録
AIスロップ対策の原則
アイコン：Lucideを避ける（多用されすぎ）
代わりに以下を使用：
- Iconify Solar：複数のスタイル（アウトライン、ブロークン、デュオトーン）
- Heroicons：Appleのようなシンプルさが必要な場合
- Phosphor：柔軟なウェイトシステム
- カスタムSVG：ブランドの差別化のため
フォント：Inter/Robotoを排除する
個性的な代替案：
- ディスプレイ：Newsreader、Playfair Display、Space Grotesk、Clash Display
- 本文：Outfit、Plus Jakarta Sans、Manrope、Satoshi
- 等幅：JetBrains Mono、IBM Plex Mono、Fira Code
色：紫のグラデーションなし
大胆な代替案：
- ダークネイビー＋エレクトリックアクセント
- 暖かい中間色＋単一のポップカラー
- トーンの深みを持つモノクローム
- ネオンアクセント付きダークモード
- アーシー/オーガニックパレット
レイアウト：グリッドを破る
- オーバーラップ要素
- 斜めのセクション
- 非対称のスペーシング
- コンテナを破るヒーロー要素
- デザイン要素としてのネガティブスペース
アニメーション用語集
出現アニメーション
fade-in：シンプルな不透明度遷移blur-in：ぼやけて始まり、鮮明になるslide-in：方向ベースの出現scale-in：小さなサイズからフルサイズに成長stagger：子要素のシーケンシャルな表示
連続アニメーション
marquee：無限の水平スクロール（ロゴ、お客様の声）beam：パス/ボーダーに沿って移動する光pulse：微妙なスケール/不透明度の呼吸float：穏やかな上下動rotate：連続回転（アイコン、装飾）
インタラクティブアニメーション
hover-lift：微妙なY軸移動＋影hover-glow：ボーダー/影の色変更hover-reveal：隠された要素が現れるclick-ripple：マテリアルスタイルのフィードバック
装飾要素
- 垂直グリッド線（コンテナサイズベース）
- 要素間のヌードル/曲線コネクタ
- 背景のグラデーションオーブ/ブロブ
- グレイン/ノイズテクスチャオーバーレイ
- 幾何学的形状（円、角丸長方形）
デザインリソース
ヒーローインスピレーション
- Superhero (superhero.design)：厳選されたヒーローセクション
- Dribbble：「hero section」、「landing page」で検索
- Awwwards：受賞デザイン
セクションパターン
- Mobin：セクション内訳のある実際のWebサイト
- Bento Grids：カードレイアウトのインスピレーション
- CTA Gallery：コールトゥアクションパターン
タイポグラフィ
- Google Fonts：無料、AIがアクセス可能なフォント
- Fontshare：無料の高品質フォント
- H1 Gallery：見出しのインスピレーション
アイコンとロゴ
- Iconify：統一アイコンAPI（Solar、Heroiconsなど）
- Simple Icons：ブランドロゴ（SVG）
- Heroicons：Tailwindのアイコンセット
実装ワークフロー
フェーズ1：調査と収集
- 5〜10枚のヒーロースクリーンショットをワイヤーフレームとして収集
- 必要なセクションパターンを特定
- アイコンセットとフォントペアリングを選択
- カラーパレットを定義
フェーズ2：ヒーロー開発
- 最適な参考スクリーンショットからヒーローを生成
- 反復：色、フォント、レイアウトを変更
- アニメーションを追加（ビーム、フェードインなど）
- 装飾要素を追加（ヌードル、グリッド、数字）
- 個性的になるまで洗練
フェーズ3：セクション構築
- セクションを一度に1つずつ追加（すべて一度にではない）
- セクションごとに特定のコンポーネント/スクリーンショットを参照
- ヒーローからの色/フォントの一貫性を維持
- セクション固有のアニメーションを追加
フェーズ4：調整
- レスポンシブブレークポイントを修正（モバイル、タブレット、デスクトップ）
- プレースホルダー画像を実際の/高品質のアセットに置き換え
- パフォーマンスのためにアニメーションを最適化
- すべてのインタラクティブ要素をテスト
フェーズ5：プレゼンテーション
- 無限キャンバスレイアウトでカバースクリーンショットを作成
- ヒーローを目立つように表示
- モバイルとデスクトップのビューを含める
- 微妙な背景を追加（ぼかしたグラデーション、パターン）
プロンプトパターン
ヒーロー生成
[PRODUCT TYPE]のヒーローセクションを作成します。
テキスト、名前、数字を[BRAND]に合わせて変更します。
Iconify Solarアイコン（デュオトーンスタイル）を使用します。
見出しには[FONT]を使用します。
コンテナサイズの垂直グリッド線を追加します。
洗練さのために01、02、03のステップインジケーターを追加します。
プライマリカラーとして[COLOR]、ダークモードを使用します。
セクション追加
新しい[SECTION TYPE]セクションを適応します。
ヒーローのカラースキームとタイポグラフィに一致させます。
ロゴにはマーキーアニメーションを使用します。
フェードイン、ブラーインの出現アニメーションを追加します。
ヒーローはそのままにしておきます。
アニメーション強化
プライマリボタンのボーダーにビームアニメーションを追加します。
ビームは1pxで、ピル形状の周りを継続的に移動します。
機能カードに微妙なホバーリフト効果を追加します。
ネガティブプロンプト（変更しないもの）
ヒーローセクションを変更しないでください。
ナビゲーションバーはそのままにしておきます。
既存のアニメーションを変更しないでください。
品質チェックリスト
視覚的差別化
- 一般的な紫のグラデーションがない
- デフォルト以外のアイコンセット（Lucideではない）
- 個性的なフォントペアリング
- 少なくとも1つの「記憶に残る」要素
- CSS変数による一貫したカラーシステム
技術的品質
...
[翻訳用に切り詰められました]