frontend-landings

フロントエンドのランディングページ

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

始める前に

利用可能なデザインを把握するため、スタイルプリセットのリファレンスファイルを読んでください。

references/STYLE_PRESETS.md

2 つの操作モード

モード 1：ゼロから作成

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

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

1. 製品／ブランド名（必須）
2. タグライン／ヒーローの見出し（必須）
3. 主な機能またはメリット 3～6 項目（必須）
4. 対象ユーザー（参考情報）
5. メイン CTA（例：「無料トライアルを開始」「ウェイトリストに登録」）— デフォルト：「始める」
6. 色の好み（任意 — プリセットで対応します）
7. スタイルプリセット（指定されていない場合はプリセットメニューを表示）

モード 2：改善／変換

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

ワークフロー：

1. 既存のデザインを分析します（構造、色、タイポグラフィ、レイアウト）
2. 改善点を特定します（アニメーション、レスポンシブ対応、アクセシビリティ、視覚的階層）
3. 適用するスタイルプリセットを尋ねます（または既存のデザインを維持します）
4. 強化した内容をすべて含む単一ファイル HTML として再生成します

---

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

ユーザーがすでにプリセットを選んでいるか、特定のデザインを明示している場合を除き、ランディングページのタスクを開始するときは必ずプリセットメニューを提示してください。

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

Pick a visual style for your landing page (type number or name):

 1. ☁️  Clean SaaS Minimal     — Crisp whites, subtle shadows, system-native feel
 2. 🔮  Glassmorphic Modern     — Frosted glass panels, gradients, translucency
 3. 🏗️  Bold Brutalist          — Raw concrete textures, monospace type, stark contrast
 4. 🌆  Cyberpunk Neon          — Dark backgrounds, electric glow, scanline effects
 5. ✒️  Elegant Serif Premium   — Editorial luxury, serif headlines, gold accents
 6. 🎨  Playful Gradients       — Bouncy animations, mesh gradients, rounded everything
 7. 🌙  Dark Mode First         — Deep blacks, neon accents, OLED-optimized
 8. 📻  Vintage Retro           — Warm sepia tones, retro type, nostalgic textures
 9. 🌿  Organic Nature          — Earth tones, organic shapes, botanical illustrations
10. 🏢  Corporate Professional  — Navy/slate palette, structured grid, trust-building

Or describe your own custom aesthetic!

ユーザーが選んだ後、そのプリセットの詳細な CSS 変数、フォントスタック、アニメーションスタイル、デザイントークンについて、references/STYLE_PRESETS.md を読んでください。

---

出力要件

単一ファイル HTML アーキテクチャ

すべての出力は、完全に自己完結した単一の HTML ファイルでなければなりません。構造：

<!DOCTYPE html>
<html lang="en" class="scroll-smooth">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  
  <title>{Product Name} — {Tagline}</title>
  <meta name="description" content="{Concise product description}">
  <meta property="og:title" content="{Product Name}">
  <meta property="og:description" content="{Description}">
  <meta property="og:type" content="website">
  <meta name="twitter:card" content="summary_large_image">
  
  
  <script src="https://cdn.tailwindcss.com"></script>
  
  
  <script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.2/anime.min.js"></script>
  
  
  <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={Preset+Fonts}&display=swap" rel="stylesheet">
  
  
  <script>
    tailwind.config = {
      darkMode: 'class',
      theme: {
        extend: {
          // Preset-specific extensions
          fontFamily: { /* from preset */ },
          colors: { /* from preset */ },
        }
      }
    }
  </script>
  
  <style>
    /* CSS Custom Properties from preset */
    :root { /* light theme vars */ }
    .dark { /* dark theme vars */ }
    
    /* Scroll-triggered animation base classes */
    .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); }
    
    /* Preset-specific custom styles */
  </style>
</head>
<body>
  
  
  <script>
    // Dark mode toggle
    // Scroll reveal observer
    // Anime.js entrance animations
    // Interactive components (FAQ accordion, pricing toggle, etc.)
  </script>
</body>
</html>

CDN スタック（ほかの 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 は絶対に使用しないでください。

すべての出力に必須の機能

1. レスポンシブデザイン — モバイルファースト。375px、768px、1280px での表示を想定して確認します。
2. ダークモード／ライトモード — prefers-color-scheme による自動検出と、ナビゲーション内の手動切り替えボタン。
3. スクロールアニメーション — すべてのセクションに、IntersectionObserver ベースのリビールアニメーションを設定します。
4. スムーズスクロール — html に scroll-smooth を設定し、ナビゲーションアンカー用の JS を追加します。
5. アクセシビリティ — セマンティックな HTML5、インタラクティブ要素の ARIA ラベル、フォーカス表示スタイル、コンテンツへのスキップリンク、十分な色のコントラスト。
6. SEO メタタグ — title、description、og:title、og:description、og:type、twitter:card。
7. パフォーマンス — 画像の遅延読み込み、効率的な CSS、最小限の JS。

---

セクションの生成

ユーザーの入力に基づいて、以下のセクションを適切に含めてください。すべてが必須ではありません。製品の内容に合わせて選んでください。

常に含める：

1. ナビゲーション — ロゴ、リンク、ダークモード切り替え、メイン CTA ボタンを備えた固定ナビゲーション
2. ヒーロー — 大きな見出し＋補足見出し＋CTA ボタン（複数可）＋ビジュアル要素（グラデーション、抽象的な図形、または画像のプレースホルダー）
3. 機能 — インライン SVG アイコンを使った 3～6 個の機能カード／グリッド
4. 最終 CTA — 見出しとボタンを備えた全幅の行動喚起バナー
5. フッター — リンク、著作権表示、ソーシャルアイコン（インライン SVG）

関連する場合に含める：

• ソーシャルプルーフ／ロゴ — 「信頼されている企業」ロゴバー（企業名風の名前を付けたプレースホルダーボックスを使用）
• お客様の声 — アバターのプレースホルダーを添えた引用カード 2～3 枚
• 料金プラン — 月払い／年払い切り替え（JS で動作）を備えた 3 つのプラン
• FAQ — 開閉時に滑らかなアニメーションがあるアコーディオン
• 利用方法 — 番号付きステップによる 3 段階のプロセス
• 統計／指標 — アニメーション付きカウンター（例：「ユーザー数 10k+」「稼働率 99.9%」）

---

アニメーションの手引き

以下のアニメーションパターンを一貫して使用してください。

スクロール時のリビール（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
  });
}

---

ダークモードの実装

// Check system preference and saved preference
const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
const saved = localStorage.getItem('theme');
if (saved === 'dark' || (!saved && prefersDark)) {
  document.documentElement.classList.add('dark');
}

// Toggle function (bind to button)
function toggleDark() {
  document.documentElement.classList.toggle('dark');
  localStorage.setItem('theme',
    document.documentElement.classList.contains('dark') ? 'dark' : 'light'
  );
}

ナビゲーション内の切り替えボタン：

<button onclick="toggleDark()" aria-label="Toggle dark mode" 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 の extend の両方を使用して、独自のカラーパレットを定義しています。

他の 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';
    
    // Close all others
    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 の生成後、必ず以下のガイダンスを追記してください。

✅ Your landing page is ready!

To use it:
1. Copy the entire code above into a file called `index.html`
2. Open it in any browser — it works standalone, no build step needed

To deploy for free:
• Vercel: vercel.com → New Project → drag & drop your index.html
• Netlify: app.netlify.com → drag & drop your index.html
• GitHub Pages: Push to a repo → Settings → Pages → Deploy from main

To customize further:
• Colors: Edit the CSS variables in :root { } and .dark { }
• Content: All text is directly in the HTML — find and replace
• Fonts: Swap the Google Fonts link and font-family values
• Animations: Adjust timing in the Anime.js calls and CSS transitions

---

品質チェックリスト

提出前に、次の項目を念入りに確認してください。

• CDN リンク以外の外部依存関係がない単一ファイルである
• 375px、768px、1280px でレスポンシブに表示される
• ダークモードが機能する（切り替えとシステム設定への対応）
• すべてのアニメーションがスクロール時に実行される
• ナビゲーションリンクをクリックすると、各セクションまでスムーズにスクロールする
• すべてのインタラクティブ要素にホバー時とフォーカス時の状態がある
• ボタン、切り替えコントロール、インタラクティブ要素に ARIA ラベルが付いている
• Tailwind のデフォルトの見た目になっておらず、プリセットの美的スタイルが際立っている
• SEO とソーシャル共有用のメタタグがある
• フッターで JS の new Date().getFullYear() を使って現在の年を表示している
• CTA ボタンが目立ち、プリセットに沿ったスタイルになっている
• アイコンが外部フォントではなくインライン SVG である
• ページの読み込みが速く、レンダリングを妨げるリソースがない