Video Hero — ビデオ背景ランディングページビルダー

フルスクリーンのビデオ背景を備えた、素晴らしいヒーローランディングページを、単一の自己完結型 HTML ファイルまたは React/Next.js コンポーネントとして構築します。HTML バリアントはビルドステップ不要です。インライン CSS と JS を備えた 1 つの .html ファイルです。

譲れない要件

1. 単一ファイル (HTML バリアント): 1 つの自己完結型 HTML ファイル — インライン CSS + JS、外部スタイルシートやスクリプトなし
2. 全ビューポートヒーロー: ヒーローセクションに height: 100vh; height: 100dvh を指定
3. ビデオルール: autoplay loop muted playsinline — 必須、例外なし
4. 独特なデザイン: 汎用的な Bootstrap/テンプレート風は厳禁。タイポグラフィ、色、ガラス効果を通じた強力なビジュアルアイデンティティ
5. アクセシブル: prefers-reduced-motion でビデオを非表示にし、単色背景フォールバックを表示
6. レスポンシブ: 1920、1280、768、375 幅で動作する必要がある
7. CDN のみ (HTML バリアント): Google Fonts + Lucide アイコン (CDN 経由) のみが許可された外部リクエスト
8. コントラスト: ビデオ上のすべてのテキストは、オーバーレイグラデーション (最小 rgba(0,0,0,0.3)) による十分なコントラストを持つ必要がある
9. キーボードアクセス可能: すべてのインタラクティブ要素は Tab、Enter、Escape でアクセス可能

ワークフロー

1. 入力情報を集める

必要なもののみを質問 (デフォルト値はカッコ内):

入力項目	デフォルト
ブランド名	必須
プライマリカラー	#00E5A0 (エレクトリックグリーン)
背景色	#000000 (黒)
タグライン / ヘッドライン	ブランドから生成
サブヘッドライン	ブランドから生成
CTA テキスト + URL	"Get Started" / #
フォント設定	bold/industrial
レイアウトアーキタイプ	full-width-left
ビデオソース	ユーザーに確認または /higgsfield video を使用

2. レイアウトアーキタイプを選択

以下の レイアウトアーキタイプ を参照。ブランドのパーソナリティに基づいてお勧めします:

• full-width-left: 大胆でインダストリアル、ロジスティクス/テック — コンテンツは上部 3 分の 1 の左側
• two-panel-split: モダン SaaS、機能が豊富 — 左ヒーロー + 右フィーチャーカード
• centered-hero: クラシックエレガンス、コンシューマー/ライフスタイル — 中央配置のヘッドライン + デュアル CTA

3. ビデオと静止画を取得

ビデオには 3 つのパスがあります:

1. ユーザーが URL を提供: <source src="URL"> として直接使用
2. ユーザーがローカルファイルを提供: 相対パスを使用
3. HiggsField 経由で生成: ブランドムードに合わせたプロンプトで /higgsfield video スキルを使用

静止画フレーム選択 (ポスター/フォールバック用のフリーズフレームを抽出する場合):

1. ビデオ全体を通じて 5～6 フレームをサンプリング (例: 0 秒、3 秒、5 秒、7 秒、9 秒、12 秒)
2. 各フレームを以下について評価:
   • 被写体の構図: メイン被写体はうまくフレーム内に収まっているか? 3/4 角度 > 正面
   • ネガティブスペース: テキストオーバーレイ用のスペースはあるか、競争していないか?
   • ビジュアルエネルギー: モーションブラー、スパーク、光の軌跡は静止画に動きを加えるか?
   • ブランドアライメント: 色温度はブランドパレットと一致しているか?
3. ユーザーにオプションを表示 — 評価なしに単一フレームを選ばないこと。最適な 2～3 の候補を、各フレームが機能する理由に関する簡潔なメモ付きで提示します。
4. ffmpeg で抽出: ffmpeg -ss {time} -i video.mp4 -vframes 1 -update 1 -q:v 2 output.jpg

利用可能な最初のフレームは使用しないこと。選択が不適切なフリーズフレームは、ヒーロー全体の効果を損なわせます。

4. ページを組み立てる

1. デザインシステムテンプレートから CSS カスタムプロパティを設定
2. ビデオ背景のボイラープレートを追加 (手順 3 から利用可能な場合はポスター付き)
3. 選択したアーキタイプからレイアウトを構築
4. リキッドガラス効果をカード/パネルに適用
5. アーキタイプに合わせてボタンスタイルを追加
6. レスポンシブブレークポイント + reduced-motion ルールを追加
7. SEO メタタグを追加

5. 納品

1. 現在の作業ディレクトリに {brand-name}-landing.html として保存
2. start "" {filename} で開く (Windows)
3. ファイルパスとカスタマイズポイントを報告

---

パフォーマンスバジェット

メトリクス	ターゲット	ハードリミット
ビデオファイルサイズ	< 10MB	< 15MB
LCP	< 2.5s	< 3.5s
総ページ重量 (ビデオ除外)	< 100KB	< 200KB
ヒーロー表示時間	< 1.5s	< 2.5s

ビデオ最適化:

• バックグラウンドビデオは 720p をターゲット (ヒーロー以外のコンテンツがない場合のみ 1080p)
• 最大互換性のため H.264、Safari の場合は H.265 を H.264 フォールバック付きで使用
• バックグラウンドは 2～4 Mbps ビットレートをターゲット (詳細はオーバーレイで非表示)
• クリーンなループのため 10～20 秒の長さを保つ

---

デザインシステムテンプレート

すべてのページはこれらの CSS カスタムプロパティから始まります。ブランドごとに値を置き換えてください:

:root {
  /* ブランド */
  --color-primary: #00E5A0;
  --color-bg: #000000;
  --color-text: #FFFFFF;
  --color-muted: rgba(255,255,255,0.6);
  --color-accent: #00E5A0;

  /* タイポグラフィ */
  --font-display: 'Bebas Neue', Impact, sans-serif;
  --font-body: 'Inter', system-ui, sans-serif;
  --font-accent: 'Space Mono', monospace;

  /* 流動的なサイジング */
  --size-headline: clamp(3rem, 8vw, 7rem);
  --size-subhead: clamp(1rem, 2vw, 1.5rem);
  --size-body: clamp(0.875rem, 1.2vw, 1.125rem);

  /* レタースペーシング */
  --ls-tight: -0.04em;
  --ls-wide: 0.08em;
  --ls-ultra: 0.2em;

  /* ガラス */
  --glass-blur-light: 4px;
  --glass-blur-strong: 50px;
  --glass-bg-light: rgba(255,255,255,0.04);
  --glass-bg-strong: rgba(255,255,255,0.08);
  --glass-border-light: rgba(255,255,255,0.08);
  --glass-border-strong: rgba(255,255,255,0.15);

  /* レイアウト */
  --max-width: 1400px;
  --section-padding: clamp(2rem, 5vw, 6rem);
}

推奨フォントペアリング

スタイル	ディスプレイ	ボディ	アクセント
Bold / Industrial	Bebas Neue	Inter	Space Mono
Elegant / Editorial	Playfair Display	Lora	—
Clean / Modern	Sora	DM Sans	JetBrains Mono
Luxury / Minimal	Cormorant Garamond	Nunito Sans	—

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=FONT1&family=FONT2&display=swap" rel="stylesheet">

Lucide アイコン CDN:

<script src="https://unpkg.com/lucide@latest/dist/umd/lucide.min.js"></script>
<!-- DOM の後: --> <script>lucide.createIcons();</script>

---

ビデオ背景ボイラープレート

<div class="video-bg">
  <video autoplay loop muted playsinline poster="poster.jpg">
    <source src="VIDEO_URL" type="video/mp4">
  </video>
  <div class="video-overlay"></div>
</div>

.video-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}
.video-bg video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.video-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(0,0,0,0.3) 0%,
    rgba(0,0,0,0.1) 40%,
    rgba(0,0,0,0.6) 100%
  );
}

注記:

• poster 属性はビデオ読み込み前の白いフラッシュを防ぎます — ビデオから静止画フレームを使用します (手順 3 参照)
• Mobile Safari の自動再生には playsinline が必要です
• オーバーレイグラデーションにより、任意のビデオコンテンツ上でテキストが読み取り可能になります

---

レイアウトアーキタイプ

左揃え全幅 (Targo スタイル)

コンテンツは上部 3 分の 1 の左側に配置。ガラスカードは左下に固定。大胆なインダストリアルブランドに最適。

<section class="hero">
  <div class="hero-content">
    <p class="hero-kicker">KICKER TEXT</p>
    <h1 class="hero-headline">HEADLINE</h1>
    <p class="hero-sub">Subheadline text here.</p>
    <div class="hero-ctas">
      <a href="#" class="btn-clipped">GET STARTED</a>
      <a href="#" class="btn-ghost">LEARN MORE</a>
    </div>
  </div>
  <div class="hero-glass-card">
    <div class="glass-stat">
      <span class="stat-value">99.8%</span>
      <span class="stat-label">Uptime</span>
    </div>
    <div class="glass-stat">
      <span class="stat-value">24/7</span>
      <span class="stat-label">Support</span>
    </div>
  </div>
</section>

.hero {
  position: relative;
  z-index: 1;
  height: 100vh;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: var(--section-padding);
}
.hero-content {
  max-width: 640px;
  padding-top: 15vh;
}
.hero-kicker {
  font-family: var(--font-accent);
  font-size: var(--size-body);
  letter-spacing: var(--ls-ultra);
  color: var(--color-primary);
  text-transform: uppercase;
  margin-bottom: 1rem;
}
.hero-headline {
  font-family: var(--font-display);
  font-size: var(--size-headline);
  letter-spacing: var(--ls-tight);
  line-height: 0.95;
  color: var(--color-text);
  margin: 0 0 1.5rem;
}
.hero-sub {
  font-family: var(--font-body);
  font-size: var(--size-subhead);
  color: var(--color-muted);
  max-width: 480px;
  line-height: 1.6;
  margin-bottom: 2rem;
}
.hero-glass-card {
  display: flex;
  gap: 2rem;
  padding: 1.5rem 2rem;
  max-width: 400px;
}

2 パネルスプリット (Bloom スタイル)

左 52% はヒーロー + CTA、右 48% はガラスパネル内のフィーチャーカード。モバイルで縦方向にスタック。

<section class="hero hero-split">
  <div class="hero-left">
    <h1 class="hero-headline">HEADLINE</h1>
    <p class="hero-sub">Subheadline here.</p>
    <div class="hero-ctas">
      <a href="#" class="btn-pill">Get Started Free</a>
      <a href="#" class="btn-pill btn-pill-outline">Watch Demo</a>
    </div>
  </div>
  <div class="hero-right">
    <div class="feature-card liquid-glass-strong">
      <i data-lucide="zap"></i>
      <h3>Feature One</h3>
      <p>Description text.</p>
    </div>
    <div class="feature-card liquid-glass-strong">
      <i data-lucide="shield"></i>
      <h3>Feature Two</h3>
      <p>Description text.</p>
    </div>
    <div class="feature-card liquid-glass-strong">
      <i data-lucide="trending-up"></i>
      <h3>Feature Three</h3>
      <p>Description text.</p>
    </div>
  </div>
</section>

.hero-split {
  display: grid;
  grid-template-columns: 52% 48%;
  align-items: center;
  gap: 2rem;
}
.hero-left { padding-right: 2rem; }
.hero-right {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.feature-card {
  padding: 1.5rem;
  border-radius: 16px;
}
.feature-card i {
  width: 24px;
  height: 24px;
  color: var(--color-primary);
  margin-bottom: 0.75rem;
}
.feature-card h3 {
  font-family: var(--font-body);
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--color-text);
  margin: 0 0 0.5rem;
}
.feature-card p {
  font-size: var(--size-body);
  color: var(--color-muted);
  margin: 0;
  line-height: 1.5;
}

@media (max-width: 1024px) {
  .hero-split {
    grid-template-columns: 1fr;
    text-align: center;
  }
  .hero-left { padding-right: 0; }
  .hero-right {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
  }
  .feature-card { flex: 1 1 280px; max-width: 320px; }
}

中央ヒーロー (クラシック)

デュアル CTA 付きの中央配置ヘッドライン。コンシューマー/ライフスタイルブランドに最適。

<section class="hero hero-centered">
  <div class="hero-content-center">
    <p class="hero-kicker">KICKER</p>
    <h1 class="hero-headline">HEADLINE</h1>
    <p class="hero-sub">Subheadline centered.</p>
    <div class="hero-ctas">
      <a href="#" class="btn-pill">Primary CTA</a>
      <a href="#" class="btn-pill btn-pill-outline">Secondary CTA</a>
    </div>
  </div>
</section>

.hero-centered {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.hero-content-center {
  max-width: 800px;
}
.hero-content-center .hero-sub {
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}
.hero-ctas {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}
.hero-centered .hero-ctas {
  justify-content: center;
}

---

リキッドガラス CSS

ライトガラス (.liquid-glass)

微妙で透明。ステータスカード、ナビゲーションバー、セカンダリパネルに使用。

.liquid-glass {
  background: var(--glass-bg-light);
  backdrop-filter: blur(var(--glass-blur-light)) saturate(120%);
  -webkit-backdrop-filter: blur(var(--glass-blur-light)) saturate(120%);
  border: 1px solid var(--glass-border-light);
  border-radius: 16px;
  position: relative;
}
.liquid-glass::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(
    135deg,
    rgba(255,255,255,0.12) 0%,
    rgba(255,255,255,0) 50%,
    rgba(255,255,255,0.06) 100%
  );
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

ストロングガラス (.liquid-glass-strong)

深いブラー、顕著なボーダー。ヒーローカード、CTA、フィーチャーパネルに使用。

.liquid-glass-strong {
  background: var(--glass-bg-strong);
  backdrop-filter: blur(var(--glass-blur-strong)) saturate(180%);
  -webkit-backdrop-filter: blur(var(--glass-blur-strong)) saturate(180%);
  border: 1px solid var(--glass-border-strong);
  border-radius: 20px;
  box-shadow:
    0 8px 32px rgba(0,0,0,0.3),
    inset 0 1px 0 rgba(255,255,255,0.05);
  position: relative;
  overflow: hidden;
}
.liquid-glass-strong::after {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(
    45deg,
    transparent 40%,
    rgba(255,255,255,0.03) 50%,
    transparent 60%
  );
  pointer-events: none;
}

---

ボタンスタイル

クリップドコーナー (インダストリアル)

.btn-clipped {
  display: inline-block;
  padding: 1rem 2.5rem;
  background: var(--color-primary);
  color: var(--color-bg);
  font-family: var(--font-display);
  font-size: 1rem;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  text-decoration: none;
  clip-path: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px);
  transition: transform 0.2s, opacity 0.2s;
}
.btn-clipped:hover { transform: translateY(-2px); opacity: 0.9; }
.btn-clipped:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 4px;
}

ゴーストボタン

.btn-ghost {
  display: inline-block;
  padding: 1rem 2.5rem;
  background: transparent;
  color: var(--color-text);
  font-family: var(--font-display);
  font-size: 1rem;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  text-decoration: none;
  border: 1px solid rgba(255,255,255,0.2);
  clip-path: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px);
  transition: border-color 0.2s;
}
.btn-ghost:hover { border-color: var(--color-primary); }
.btn-ghost:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 4px;
}

ガラスピル (モダン/SaaS)

.btn-pill {
  display: inline-block;
  padding: 0.875rem 2rem;
  background: var(--color-primary);
  color: var(--color-bg);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 1rem;
  text-decoration: none;
  border-radius: 100px;
  border: none;
  transition: transform 0.2s, box-shadow 0.2s;
}
.btn-pill:hover {
  transform: scale(1.05);
  box-shadow: 0 4px 20px rgba(0,0,0,0.3);
}
.btn-pill:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 4px;
}
.btn-pill-outline {
  background: var(--glass-bg-light);
  color: var(--color-text);
  border: 1px solid var(--glass-border-strong);
  backdrop-filter: blur(var(--glass-blur-light));
  -webkit-backdrop-filter: blur(var(--glass-blur-light));
}

---

レスポンシブブレークポイント

常に <style> ブロックの終わりに含めてください:

@media (max-width: 1024px) {
  .hero-split { grid-template-columns: 1fr; }
  .hero-content { padding-top: 10vh; }
  :root { --size-headline: clamp(2.5rem, 6vw, 4.5rem); }
}

@media (max-width: 640px) {
  .hero { padding: 1.5rem; }
  .hero-ctas { flex-direction: column; }
  .btn-clipped, .btn-ghost, .btn-pill { width: 100%; text-align: center; }
  .hero-glass-card { flex-direction: column; gap: 1rem; }
}

@media (prefers-reduced-motion: reduce) {
  .video-bg video { display: none; }
  .video-bg { background: var(--color-bg); }
  .video-overlay { background: var(--color-bg); }
  *, *::before, *::after {
    animation-duration: 0s !important;
    transition-duration: 0s !important;
  }
}

---

HiggsField ビデオ統合

/higgsfield video を使用してバックグラウンドビデオを生成します。ブランドの雰囲気を最適なモデルにマップします:

ブランドの雰囲気	モデル	プロンプトのコツ
シネマティック / ドラマティック	Kling 3.0	"Slow cinematic pan across..."、"dramatic lighting"
抽象的 / アーティスティック	WAN 2.6	"Abstract flowing particles"、"liquid motion"
リアリスティック / プロダクト	Veo 3.1	"Photorealistic aerial shot"、"product showcase"
高速 / エネルギッシュ	MiniMax Hailuo	"Dynamic motion"、"fast-paced transitions"
ドリーム / アトモスフェリック	Sora 2	"Ethereal atmosphere"、"soft focus bokeh"

優れたバックグラウンドビデオプロンプト:

• モーションを遅くし、ループ可能に — 急な切り替えは避ける
• 暗い/ムーディーが最適 (テキスト読み取り性)
• バックグラウンドには抽象的 > リテラル
• プロンプトに "Seamless loop" を含めるとモデルによっては役立つ

---

完全 HTML スケルトン

これを開始テンプレートとして使用します。デザインシステム変数、選択したアーキタイプ、ガラススタイルを入力してください:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>BRAND_NAME</title>
  <meta name="description" content="BRAND_DESCRIPTION">
  <meta property="og:title" content="BRAND_NAME">
  <meta property="og:description" content="BRAND_DESCRIPTION">
  <meta property="og:type" content="website">
  <meta name="theme-color" content="#000000">

  <!-- フォント -->
  <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=FONT1&family=FONT2&display=swap" rel="stylesheet">

  <style>
    /* === リセット === */
    *, *::before, *::after { margin: 0; padding: 0; box-sizing: border