Frontend Landings

厳選されたスタイルプリセット、スムーズなアニメーション、レスポンシブデザイン、ダーク/ライトモードを備えた、美しく、ビルド不要で、シングルファイルのHTMLランディングページを生成します。すべてが1つの自己完結型ファイルにまとめられています。

始める前に

利用可能な美学を理解するために、スタイルプリセットのリファレンスファイルを読んでください：

references/STYLE_PRESETS.md

2つの動作モード

モード 1: ゼロからの生成

ユーザーが製品の詳細を提供 → 完全なランディングページを生成します。

以下の入力を収集します（提供されていない場合は質問してください）：

製品/ブランド名（必須）
タグライン/ヒーローヘッドライン（必須）
3～6の主要機能またはメリット（必須）
ターゲットオーディエンス（あると便利）
主要なCTA（例：「無料トライアルを開始」、「ウェイトリストに参加」）— デフォルト：「始める」
色の好み（オプション — プリセットが処理します）
スタイルプリセット（指定されていない場合はプリセットメニューを表示）

モード 2: 改善 / 変換

ユーザーが既存のHTML、説明、スクリーンショット、またはURLを提供 → より良いデザイン、アニメーション、レスポンシブネスで強化します。

ワークフロー：

既存のデザインを分析（構造、色、タイポグラフィ、レイアウト）
改善点を特定（アニメーション、レスポンシブネス、アクセシビリティ、視覚的階層）
適用するスタイルプリセットを尋ねる（または既存の美学を維持）
すべての機能強化を施したシングルファイルHTMLとして再生成

スタイルプリセットシステム

ランディングページのタスク開始時には常にプリセットメニューを提供します。ただし、ユーザーが既に選択しているか、特定の美学を明示的に説明している場合は除きます。

プリセットは次のように提示します：

ランディングページのビジュアルスタイルを選んでください（番号または名前を入力）：

 1. ☁️  クリーンSaaSミニマル     — 鮮やかな白、控えめなシャドウ、システムネイティブな感覚
 2. 🔮  グラスモーフィックモダン     — すりガラスパネル、グラデーション、半透明
 3. 🏗️  ボールドブルータリスト          — 生のコンクリートテクスチャ、等幅フォント、 stark なコントラスト
 4. 🌆  サイバーパンクネオン          — 暗い背景、電飾の輝き、スキャンライン効果
 5. ✒️  エレガントセリフプレミアム   — エディトリアルな高級感、セリフヘッドライン、ゴールドのアクセント
 6. 🎨  プレイフルグラデーション       — 弾むようなアニメーション、メッシュグラデーション、すべて角丸
 7. 🌙  ダークモードファースト         — 深い黒、ネオンアクセント、OLED最適化
 8. 📻  ビンテージレトロ           — 暖かみのあるセピア調、レトロなタイポグラフィ、ノスタルジックなテクスチャ
 9. 🌿  オーガニックネイチャー          — アースカラー、有機的な形状、植物のイラスト
10. 🏢  コーポレートプロフェッショナル  — ネイビー/スレートパレット、構造化グリッド、信頼感を醸成

または、独自のカスタム美学を説明してください！

ユーザーが選択した後、references/STYLE_PRESETS.mdを読んで、そのプリセットの詳細なCSS変数、フォントスタック、アニメーションスタイル、デザイントークンを取得します。

出力要件

シングルファイルHTMLアーキテクチャ

すべての出力は、完全で自己完結型の単一HTMLファイルである必要があります。構造：

<!DOCTYPE html>
<html lang="ja" class="scroll-smooth">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <!-- SEO メタタグ -->
  <title>{製品名} — {タグライン}</title>
  <meta name="description" content="{簡潔な製品説明}">
  <meta property="og:title" content="{製品名}">
  <meta property="og:description" content="{説明}">
  <meta property="og:type" content="website">
  <meta name="twitter:card" content="summary_large_image">
  
  <!-- Tailwind CSS CDN -->
  <script src="https://cdn.tailwindcss.com"></script>
  
  <!-- Anime.js アニメーション用 -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.2/anime.min.js"></script>
  
  <!-- Google Fonts（プリセット固有） -->
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family={プリセットフォント}&display=swap" rel="stylesheet">
  
  <!-- Tailwind Config + カスタムテーマ -->
  <script>
    tailwind.config = {
      darkMode: 'class',
      theme: {
        extend: {
          // プリセット固有の拡張
          fontFamily: { /* プリセットから */ },
          colors: { /* プリセットから */ },
        }
      }
    }
  </script>
  
  <style>
    /* プリセットからのCSSカスタムプロパティ */
    :root { /* ライトテーマ変数 */ }
    .dark { /* ダークテーマ変数 */ }
    
    /* スクロールトリガーアニメーション基本クラス */
    .reveal { opacity: 0; transform: translateY(30px); transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1); }
    .reveal.active { opacity: 1; transform: translateY(0); }
    
    /* プリセット固有のカスタムスタイル */
  </style>
</head>
<body>
  <!-- すべてのコンテンツはここに -->
  
  <script>
    // ダークモードトグル
    // スクロールリビールオブザーバー
    // Anime.js エントランスアニメーション
    // インタラクティブコンポーネント（FAQアコーディオン、価格トグルなど）
  </script>
</body>
</html>

CDNスタック（他は許可されません）

Tailwind CSS: https://cdn.tailwindcss.com（インライン設定付き）
Anime.js: https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.2/anime.min.js
Google Fonts: プリセット固有のフォントのみ
アイコン: インラインSVGのみ（Heroiconsスタイル）。アイコンフォントCDNは絶対に使用しないでください。

すべての出力における必須機能

レスポンシブデザイン — モバイルファースト。375px、768px、1280pxでのメンタルモデルをテスト。
ダーク/ライトモード — prefers-color-schemeの自動検出 + ナビ内の手動トグルボタン。
スクロールアニメーション — すべてのセクションでIntersectionObserverベースのリビールアニメーション。
スムーススクロール — htmlの scroll-smooth + ナビアンカー用JS。
アクセシビリティ — セマンティックHTML5、インタラクティブ要素へのARIAラベル、フォーカス可視スタイル、スキップトゥコンテンツリンク、十分な色のコントラスト。
SEOメタタグ — title、description、og:title、og:description、og:type、twitter:card。
パフォーマンス — 画像の遅延読み込み、効率的なCSS、最小限のJS。

セクション生成

ユーザー入力に基づいて、これらのセクションをインテリジェントに含めます。すべてが必須というわけではありません。製品コンテキストに合わせてください：

常に含める：

ナビゲーション — ロゴ、リンク、ダークモードトグル、主要CTAボタンを備えたスティッキー/固定ナビ
ヒーロー — 大きなヘッドライン + サブヘッドライン + CTAボタン + ビジュアル要素（グラデーション、抽象形状、または画像プレースホルダー）
機能 — インラインSVGアイコンを備えた3～6の機能カード/グリッド
最終CTA — ヘッドライン+ボタンを備えた全幅のコールトゥアクションバナー
フッター — リンク、著作権、ソーシャルアイコン（インラインSVG）

アニメーションプレイブック

これらのアニメーションパターンを一貫して使用します：

スクロールリビール（IntersectionObserver）

const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      entry.target.classList.add('active');
    }
  });
}, { threshold: 0.1, rootMargin: '0px 0px -50px 0px' });

document.querySelectorAll('.reveal').forEach(el => observer.observe(el));

段階的エントランス（Anime.js）

anime({
  targets: '.feature-card',
  opacity: [0, 1],
  translateY: [40, 0],
  delay: anime.stagger(100, { start: 300 }),
  easing: 'easeOutCubic',
  duration: 800
});

ヒーローテキストアニメーション

anime({
  targets: '.hero-title .word',
  opacity: [0, 1],
  translateY: [20, 0],
  delay: anime.stagger(80),
  easing: 'easeOutExpo',
  duration: 1200
});

ホバーマイクロインタラクション

ホバーにはCSSトランジションを使用 — Anime.jsは複雑なシーケンスのみ：

.card { transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease; }
.card:hover { transform: translateY(-4px); box-shadow: 0 20px 40px -12px rgba(0,0,0,0.15); }

カウンターアニメーション

function animateCounter(el) {
  const target = parseInt(el.dataset.target);
  anime({
    targets: el,
    innerHTML: [0, target],
    round: 1,
    easing: 'easeInOutExpo',
    duration: 2000
  });
}

ダークモード実装

// システム環境設定と保存済み設定を確認
const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
const saved = localStorage.getItem('theme');
if (saved === 'dark' || (!saved && prefersDark)) {
  document.documentElement.classList.add('dark');
}

// トグル関数（ボタンにバインド）
function toggleDark() {
  document.documentElement.classList.toggle('dark');
  localStorage.setItem('theme',
    document.documentElement.classList.contains('dark') ? 'dark' : 'light'
  );
}

ナビ内のトグルボタン：

<button onclick="toggleDark()" aria-label="ダークモード切替" class="p-2 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors">
  <!-- 太陽アイコン（ダークモードで表示） -->
  <svg class="hidden dark:block w-5 h-5" ...>...</svg>
  <!-- 月アイコン（ライトモードで表示） -->
  <svg class="block dark:hidden w-5 h-5" ...>...</svg>
</button>

タイポグラフィ & 非ジェネリックルール

絶対に使用しないフォント：Inter、Roboto、Arial、Helvetica、Open Sans、system-uiのデフォルト。

各プリセットは独自の特徴的なフォントペアを指定します。常にGoogle Fonts CDNから読み込んでください。

カスタマイズなしでデフォルトのTailwindカラーを絶対に使用しないでください。 すべてのプリセットは、CSS変数とtailwind.configの両方でカスタムパレットを定義しています。

他のAIが生成したランディングページのように見えるページを絶対に出力しないでください。 各プリセットには固有の差別化要因があります。それらを尊重してください。

インラインSVGアイコン

HeroiconsスタイルのインラインSVGを使用します。パターンは次のとおりです：

<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
  <path stroke-linecap="round" stroke-linejoin="round" d="..." />
</svg>

よく使用される6～8個のアイコンをHTMLに直接含めます。製品の機能に合わせて、コンテキストに応じて適切なアイコンを選択します。

FAQアコーディオン実装

document.querySelectorAll('.faq-btn').forEach(btn => {
  btn.addEventListener('click', () => {
    const content = btn.nextElementSibling;
    const icon = btn.querySelector('.faq-icon');
    const isOpen = content.style.maxHeight && content.style.maxHeight !== '0px';
    
    // 他をすべて閉じる
    document.querySelectorAll('.faq-content').forEach(c => { c.style.maxHeight = '0px'; });
    document.querySelectorAll('.faq-icon').forEach(i => { i.style.transform = 'rotate(0deg)'; });
    
    if (!isOpen) {
      content.style.maxHeight = content.scrollHeight + 'px';
      icon.style.transform = 'rotate(45deg)';
    }
  });
});

価格トグル実装

const toggle = document.getElementById('pricing-toggle');
const monthlyPrices = document.querySelectorAll('.price-monthly');
const annualPrices = document.querySelectorAll('.price-annual');

toggle.addEventListener('change', () => {
  const isAnnual = toggle.checked;
  monthlyPrices.forEach(el => el.classList.toggle('hidden', isAnnual));
  annualPrices.forEach(el => el.classList.toggle('hidden', !isAnnual));
});

最終出力手順

HTMLを生成した後、常に次のガイダンスを追加します：

✅ ランディングページの準備ができました！

使用するには：
1. 上記のコード全体を `index.html` というファイルにコピーします
2. 任意のブラウザで開きます — ビルドステップは不要で、単独で動作します

無料でデプロイするには：
• Vercel: vercel.com → New Project → index.htmlをドラッグ＆ドロップ
• Netlify: app.netlify.com → index.htmlをドラッグ＆ドロップ
• GitHub Pages: リポジトリにプッシュ → Settings → Pages → mainからデプロイ

さらにカスタマイズするには：
• 色: `:root { }` と `.dark { }` 内のCSS変数を編集します
• コンテンツ: すべてのテキストはHTML内に直接記述されています — 検索して置換します
• フォント: Google Fontsのリンクとfont-familyの値を変更します
• アニメーション: Anime.jsの呼び出しとCSSトランジションのタイミングを調整します

品質チェックリスト

提供する前に、以下をメンタルで確認します：

hemsurendranath/frontend-landings-claude-skill

frontend-landings-claude-skill とは？

お気に入りのAIに質問する

ドキュメント