bear2u/my-skills

ランディングページガイド V2

概要

このスキルにより、以下の要素を組み合わせた独自性の高い、コンバージョン率の高いランディングページの作成が可能になります。

• 実績あるコンバージョンフレームワーク: DESIGNNASによる高コンバージョン率のための11の必須要素
• 卓越したデザイン品質: 忘れられないブランド体験を生み出す大胆な美的選択
• プロダクション対応コード: Next.js 14+、ShadCN UI、TypeScript、パフォーマンス最適化

理念: ランディングページは訪問者をコンバージョンさせると同時に、ブランドを記憶に残すものでなければなりません。テンプレート的な一般的なページはその両方で失敗します。このスキルは、あなたのランディングページが機能的に効果的であり、かつ視覚的に特別であることを保証します。

このスキルを使用するタイミング

ユーザーが以下のリクエストを行った場合にこのスキルを使用します。

• ランディングページ、マーケティングページ、製品ページの作成
• Next.js または React ベースのプロモーション用ウェブサイト
• 訪問者を顧客に変え、かつ視覚的に際立つ必要があるページ
• 卓越したデザイン品質を持つプロフェッショナルなマーケティングページ
• 一般的な「テンプレート的な」美学を避けたランディングページ
• コンバージョンに最適化され、かつ記憶に残るブランド体験

コード作成前のデザイン思考

ランディングページを実装する前に、ブランドと製品に合った大胆な美的方向性を決定します。

1. コンテキストを理解する

• 目的: この製品はどのような問題を解決するのか？ターゲットオーディエンスは誰か？
• ブランドの個性: このブランドは遊び心があるのか、プロフェッショナルなのか、ラグジュアリーなのか、ミニマルなのか、大胆なのか、技術的なのか？
• 業界: この業界はどのようなビジュアル言語を期待しているか（あるいは、それを打破すべきか）？
• 差別化: このブランドを忘れられないものにするものは何か？訪問者が覚えるたった一つのことは何か？

2. 美的方向性を選択する

極端な方向性を選び、完全にそれにコミットします。例：

ミニマリストで洗練された

• 徹底的にクリーンなレイアウト、たっぷりとした余白
• 大きなスケールのコントラストを持つ洗練されたタイポグラフィ
• モノクロまたは限られたカラーパレット（最大2〜3色）
• さりげないマイクロインタラクション、エレガントなトランジション
• 例：高級品、プロフェッショナルサービス、プレミアムSaaS

大胆でマキシマリストな

• リッチで複雑なビジュアルレイヤー
• ダイナミックなアニメーションとスクロールエフェクト
• グラデーションメッシュ、テクスチャ、重なり合う要素
• ハイコントラストの鮮やかなカラーパレット
• 例：クリエイティブエージェンシー、エンターテイメント、若者向けブランド

レトロフューチャー

• 現代的な実行を伴うノスタルジックな要素
• 幾何学模様、ネオンアクセント
• グリッチエフェクト、スキャンライン、グレインテクスチャ
• 個性的なモノスペースまたはディスプレイフォント
• 例：ゲーム、テックスタートアップ、クリエイティブツール

オーガニックでナチュラルな

• ソフトで流れるような形状とグラデーション
• 自然からインスパイアされた色（アースカラー、パステル）
• 自然な動きを模倣したスムーズなアニメーション
• 丸みを帯びたコーナー、ソフトシャドウ
• 例：ウェルネス、サステナビリティ、フード

エディトリアルでマガジン風

• 強力なタイポグラフィ階層
• グリッドを破る非対称レイアウト
• 大きく、インパクトのあるイメージ
• 余白とネガティブスペースの大胆な使用
• 例：コンテンツプラットフォーム、メディア、教育

ブルータリズムでロウな

• 型にはまらないレイアウト、意図的な「醜さ」
• システムフォントまたは意図的にベーシックなタイポグラフィ
• ハイコントラスト、限定された色
• アニメーションは最小限か、なし
• 例：アート、ファッション、反体制ブランド

重要: 明確な方向性を1つ選択します。大胆なマキシマリズムと洗練されたミニマリズムの両方が効果的です。重要なのは強度ではなく意図性です。選択した方向性を、11の要素すべてにわたって正確かつ一貫して実行します。

3. デザインシステムを定義する

コーディングを始める前に、以下の核となる決定事項を定義します。

タイポグラフィの選択

• ディスプレイフォント: 個性的で記憶に残るものを選択します（Inter、Roboto、Arial、システムフォントは避ける）
  • 検討候補：Space Grotesk、Clash Display、Cabinet Grotesk、Syne、DM Serif Display、Zodiak、Fraunces、Archivo Black、Unbounded、Outfit
  • またはGoogle Fontsを賢く使用する：Playfair Display、Crimson Pro、Libre Baskerville、Epilogue、Plus Jakarta Sans
  • 決して一般的な選択肢に収束しないこと。プロジェクトごとにフォントを変えること。
• ボディフォント: ディスプレイフォントを補完する、洗練された読みやすい選択
  • 検討候補：DM Sans、General Sans、Switzer、Geist、Manrope、Karla、Work Sans
• スケール: 明確な階層を確立する（例：H1: 4rem → H2: 3rem → H3: 2rem → Body: 1rem）

カラーパレット

• ドミナントカラー: 主要なブランドカラー（使用率60%）
• アクセントカラー: CTA用のハイコントラストカラー（使用率10%）
• ニュートラルパレット: グレーまたはアースカラー（使用率30%）
• 背景戦略: ソリッド、グラデーション、テクスチャ、パターン？
• 一貫性のためにCSS変数として定義する

モーション戦略

• ページ読み込み: ヒーロー要素へのアニメーションディレイによる段階的な表示
• スクロールインタラクション: フェードアップ、パララックス、またはスクロールトリガーアニメーション？
• ホバーステート: さりげないスケール、色の変化、または劇的な変形？
• CTAアニメーション: ボタンは、迷惑にならずにどのように注意を引くか？

空間的アプローチ

• レイアウトスタイル: 中央揃えで対称的？非対称でダイナミック？グリッドを破る？
• スペーシングシステム: タイトで密度が高い？ゆったりと風通しが良い？
• セクションフロー: 伝統的な積み重ね？斜め？オーバーラップ？

11の必須要素フレームワーク

すべての効果的なランディングページには、これら11の必須要素が含まれている必要があります。これらは、高コンバージョン率のランディングページのためのDESIGNNASの実績あるフレームワークに基づいています。

各要素には2つの要件があります:

1. 機能要件（コンバージョンのため） - 含める必要があります
2. デザインの卓越性（記憶に残るため） - 個性的で美しい必要があります

要素別デザインガイド

1. キーワードを含むURL

機能: SEO最適化された、説明的なURL構造 デザイン: 該当なし（SEO重視）

2. 会社ロゴ（ヘッダー）

機能: 目立つ場所に配置されたブランドアイデンティティ（左上） デザインの卓越性:

• ページ読み込み時のアニメーションロゴを検討する
• スムーズなスクロールトランジションを備えたスティッキーヘッダー
• スクロール状態に応じたロゴマークのバリエーション
• ヘッダー背景: 透明 → ソリッド、背景のぼかしを伴う
• 選択したディスプレイフォントにマッチするナビゲーションタイポグラフィ

3. SEO最適化されたタイトルとサブタイトル（ヒーロー）

機能: キーワードを含む明確なバリュープロポジション デザインの卓越性:

• タイポグラフィ: これを巨大で忘れられないものにする（4rem〜6rem以上）
• ここで個性的なディスプレイフォントを使用する
• インパクトのためにグラデーションテキスト、アウトラインテキスト、テキストシャドウを検討する
• 段階的なフェードイン（アニメーションディレイ）でタイトルの単語をアニメーション化する
• サブタイトルはタイトルの半分のサイズ、異なるウェイトまたはフォントにする
• 改行とスペーシングで視覚的なリズムを追加する

4. プライマリCTA（ヒーロー）

機能: ヒーローセクションのメインのコールトゥアクションボタン デザインの卓越性:

• 見逃せないものにする：サイズ、色のコントラスト、配置
• 退屈な長方形を避ける：ピル型、ユニークな境界線、幾何学的形状を検討する
• マイクロインタラクションを追加する：ホバースケール、シャドウ拡大、色の変化
• プライマリ/セカンダリ階層を持つデュアルCTAを検討する
• 目を引くエントランスアニメーション（タイトルの後の遅延）
• 視覚的な手がかりを追加する：矢印、アイコン、またはパルス効果

5. ソーシャルプルーフ（ヒーロー）

機能: レビュー、評価、ユーザー統計 デザインの卓越性:

• 数字は巨大にし、読み込み時にアニメーション化する（カウントアップ効果）
• グラデーション背景またはさりげない境界線を持つ統計カード
• 重なり合う円の中の顧客アバター
• カスタムスタイルの星評価（デフォルトの黄色い星ではない）
• 「掲載メディア」ロゴは、適切な間隔と不透明度処理で表示する
• 回転するお客様の声またはアニメーション化されたソーシャルプルーフカルーセルを検討する

6. 画像または動画（メディアセクション）

機能: 製品/サービスの視覚的なデモンストレーション デザインの卓越性:

• 重要: プレースホルダーや一般的な画像は決して使用しない
• デバイスモックアップ（ラップトップ/電話フレーム）を使用した製品スクリーンショット
• 奥行きを追加する：シャドウ、反射、3D傾き効果
• 検討事項：フローティングスクリーンショット、パララックススクロール効果、ビデオ背景
• スクロール時の画像表示アニメーション（フェードアップ、スライドイン）
• 動画の場合：カスタム再生ボタンデザイン、アンビエントな背景の輝き
• グリッドレイアウト：非対称、オーバーラップ、または弁当箱スタイル

7. コアとなるメリット/機能

機能: アイコン付きの3〜6の主要な利点 デザインの卓越性:

• アイコン: カスタムデザインまたは厳選されたもの（一般的なラインアイコンではない）
• 検討事項：グラデーションフィル、ホバー時のアニメーションアイコン、3Dスタイルのイラスト
• カードデザインのバリエーション：グラスモーフィズム、ニューモーフィズム、グラデーション境界線、さりげないシャドウ
• ユーザーがこのセクションまでスクロールした際の段階的なアニメーション
• 退屈な3列グリッドの代わりに非対称レイアウト
• 背景要素：さりげないパターン、グラデーション、または装飾的な形状
• タイポグラフィ：機能タイトルはディスプレイフォントで、太字で目立つように

8. お客様の声

機能: 写真付きの4〜6の本物のレビュー デザインの卓越性:

• 写真の処理：グラデーション境界線またはユニークな形状の円形アバター
• カード背景：さりげないグラデーション、すりガラス、または浮き上がったシャドウ
• 引用符：特大、装飾的、またはカスタムスタイル
• レイアウト：メーソンリーグリッド、カルーセル、または段違い垂直
• 評価星：ブランドパレットに合わせたカスタムカラー
• ホバー効果：持ち上げる、拡大する、または光らせる
• 顧客名と役職：洗練されたタイポグラフィ

9. FAQセクション

機能: アコーディオンUIを使用した5〜10のよくある質問 デザインの卓越性:

• アコーディオンアニメーション：イージングを伴うスムーズな展開/折りたたみ
• アイコン：回転するカスタムのシェブロンまたはプラス/マイナス記号
• 質問へのホバーステート
• タイポグラフィ：質問は太字または異なるフォントウェイトで
• 検討事項：デスクトップでの2列レイアウト、Q&Aのペアを並べて表示
• 背景：前のセクションからの微妙な色の変化
• スペーシング：アコーディオンアイテム内のたっぷりとしたパディング

10. 最終CTA

機能: 2回目のコンバージョンチャンスのための下部コールトゥアクション デザインの卓越性:

• ヒーローモーメントにする: これが最後のチャンスです
• 劇的な背景（グラデーション、パターン、または色）を持つ全幅セクション
• CTAボタンはヒーローのCTAよりもさらに大きく
• 緊急性を追加する：カウントダウンタイマー、限定枠、希少性インジケーター
• 魅力的なコピーとマイクロベネフィットで囲む
• アニメーション：パララックス背景、フローティング要素、またはスクロールトリガー効果
• 検討事項：ニュースレター/ウェイトリストのためのメール入力＋ボタンの組み合わせ

11. 連絡先情報/法的ページ（フッター）

機能: 完全な情報、法的リンクを含むフッター デザインの卓越性:

• 明確な情報階層を持つマルチカラムレイアウト
• ソーシャルアイコン：ホバー効果（色の変化、スケール、または回転）
• ニュースレター登録：スタイル付き入力とインラインボタン
• タイポグラフィ：小さいながらも読みやすい（14〜16px）
• 背景：ボディより暗いか、異なる色
• コンテンツからのセパレーター：さりげないグラデーションラインまたは装飾的な仕切り
• 下部バー：著作権と法的リンクを適切な間隔で配置

重要: すべてのランディングページには、これら11の要素すべてを含める必要があります。例外はありません。

各要素の詳細な説明については、references/11-essential-elements.md を参照してください。

デザイン美学ガイドライン

タイポグラフィの卓越性

• 決して、Inter、Roboto、Arial、Helvetica、system-ui などの一般的なフォントを使用しない
• ディスプレイフォントは個性的で記憶に残るものである必要があります
• 賢くペアリングする: 見出しにはディスプレイフォント、本文には洗練されたボディフォント
• 劇的にスケーリングする: サイズのジャンプ（微妙な差ではない）で明確な階層を作成する
• 文字間隔: ディスプレイフォントに合わせて調整する（多くの場合、よりタイトなトラッキングが必要）
• 行の高さ: ディスプレイ = 1.1〜1.2、ボディ = 1.6〜1.8

色と視覚的な一貫性

• すべての色にCSS変数を定義する（一貫性を維持する）
• ドミナントカラーは全体に表示される必要があります（CTAだけではない）
• アクセントカラーはアクセシビリティのために十分なコントラストが必要です（最低WCAG AA）
• 避ける: 白の上の紫のグラデーション（使い古されたAI的な美学）
• 背景: グラデーション、メッシュ、パターン、またはテクスチャで雰囲気を作成する
  • グラデーションメッシュ：マルチカラーのスムーズなグラデーション
  • ノイズテクスチャ：奥行きを与える微妙なグレイン
  • 幾何学模様：低不透明度のドット、線、または形状
  • 重なり合う透明度：重なり合う色付きセクション

モーションとアニメーション

• ページ読み込み: 段階的な表示を伴う、よく調整された1つのエントランス
  • ヒーロータイトルの単語が順番にフェードインする（animation-delay: 0ms, 100ms, 200ms）
  • サブタイトルが続く（delay: 300ms）
  • CTAが最後に表示される（delay: 500ms）強調して
• スクロールアニメーション: セクションがビューポートに入るとフェードアップする
  • Intersection Observer API または Framer Motion のスクロールトリガーを使用する
  • カードが段階的に表示される（それぞれに増分遅延）
• ホバーステート: 驚きと喜びを与える
  • ボタン：スケールアップ、シャドウ拡大、色の変化
  • カード：シャドウを使ったリフト効果
  • 画像：微妙なズームまたはパララックス
• パフォーマンス: JavaScript よりも CSS アニメーションを優先する
  • transform と opacity を使用する（GPU アクセラレーション対応）
  • width、height、top、left のアニメーション化を避ける

空間構成とレイアウト

• グリッドを破る: 中央揃えの対称レイアウトをデフォルトにしない
• 非対称性: 片側に大きなテキスト、反対側にビジュアル
• 要素の重なり: 奥行きのためにセクションをレイヤー化する
• 対角線の流れ: セクション間の斜めの仕切り
• たっぷりとした余白 または 制御された密度（1つを選んでコミットする）
• Z軸の思考: 奥行きのためにシャドウ、ぼかし、レイヤー化を使用する

避けるべき一般的なAI的美学

これらのパターンはランディングページを「AI生成」に見せてしまい、忘れられやすくします。

してはいけないこと:

• ❌ Inter/Roboto/Arial フォント
• ❌ 白い背景の上の紫色のグラデーション
• ❌ 毎回完全に中央揃えで対称的なレイアウト
• ❌ 一般的なラインアイコン
• ❌ デフォルトの黄色い星評価
• ❌ 個性のない退屈な長方形のボタン
• ❌ 視覚的な興味を引かない白い背景
• ❌ 画一的な3列の機能グリッド
• ❌ ラップトップを指さしている人のストックフォト

すべきこと:

• ✅ ブランドの個性に合った個性的なフォントを選択する
• ✅ ユニークなカラーパレットにコミットする（常に紫ではない！）
• ✅ 非対称性を取り入れた予想外のレイアウトを作成する
• ✅ 個性的なアイコンをデザインまたは選択する
• ✅ 美学に合わせてすべてのUI要素をカスタムスタイリングする
• ✅ 背景テクスチャ、グラデーション、パターンを追加する
• ✅ セクションごとにレイアウトを変える
• ✅ 製品スクリーンショット、カスタムイラスト、または本物の写真を使用する

テクノロジースタック要件

...