背景全体にループ動画を配置した、視覚的なインパクトの強いヒーローセクションです。ブランドのイメージビデオやプロダクトのデモ動画を背景に流すことで、ユーザーの関心を強く惹きつけます。

プレビュー (Preview)

Discover the New Digital Experience

最新のテクノロジーと洗練されたデザインで、あなたのビジネスを次のステージへ。未来を共に創りましょう。

Get Started

Watch Demo

ユースケースと特徴 (Use Cases & Features)

プロダクトのランディングページ: 実際の製品が動いている様子を背景に流すことで、直感的に価値を伝えます。
企業のコーポレートサイト: ブランドの雰囲気を伝えるシネマティックな映像で、プロフェッショナルな印象を与えます。
イベントの告知ページ: 過去のイベントの熱気や盛り上がりを伝え、参加意欲を高めます。
特徴:
- object-cover を使用することで、画面サイズに関わらず動画が背景全体を覆うようにレスポンシブ対応しています。
- テキストの視認性を確保するため、半透明の黒いオーバーレイ（bg-black/50）を動画の上に重ねています。
- playsinline 属性を指定することで、iOSデバイス等でも全画面再生にならずインラインで背景として再生されます。

デザインとUXのポイント (Design & UX)

コントラストの確保: 動画は明るさが変化するため、常に文字が読めるようオーバーレイの不透明度を調整することが重要です。
読み込み速度への配慮: 動画ファイルは重くなりがちです。容量を抑えたMP4（できればWebMも併用）を用意し、ポスター画像（poster属性）も設定することをお勧めします。
アニメーション: コンテンツ要素にフェードインアップのアニメーションを追加し、ページ読み込み時にリッチな体験を提供します。

カスタマイズ方法 (Customization Guide)

オーバーレイの濃さを変更する: <div class="absolute inset-0 z-10 bg-black/50"></div> の bg-black/50 を bg-black/70 にすると暗くなり、bg-black/30 にすると明るくなります。
オーバーレイに色をつける: ブランドカラーに合わせて bg-blue-900/60 のように色付きのオーバーレイにすることも可能です。
高さを調整する: h-[600px] を h-screen（画面全体）、または min-h-[80vh] などに変更して、セクションの高さをコントロールできます。

実装コード (Implementation)

<section class="relative h-screen min-h-[600px] w-full flex items-center justify-center overflow-hidden font-sans">

<!-- 動画背景 -->
<video
  autoplay
  loop
  muted
  playsinline
  poster="/assets/video-poster.jpg"
  class="absolute z-0 w-auto min-w-full min-h-full max-w-none object-cover"
>
  <source src="/assets/hero-background.mp4" type="video/mp4" />
  <source src="/assets/hero-background.webm" type="video/webm" />
  お使いのブラウザは動画タグをサポートしていません。
</video>

<!-- オーバーレイ (視認性向上のための暗いレイヤー) -->
<div class="absolute inset-0 z-10 bg-black/60"></div>

<!-- コンテンツ -->
<div class="relative z-20 max-w-4xl mx-auto px-6 text-center text-white">
  <h1 class="text-4xl sm:text-5xl md:text-6xl font-extrabold tracking-tight leading-tight mb-6 animate-fade-in-up">
    Discover the New <span class="text-transparent bg-clip-text bg-gradient-to-r from-blue-400 to-emerald-400">Digital Experience</span>
  </h1>
  <p class="text-lg sm:text-xl md:text-2xl text-gray-200 mb-10 max-w-2xl mx-auto opacity-0 animate-fade-in-up animation-delay-200">
    最新のテクノロジーと洗練されたデザインで、あなたのビジネスを次のステージへ。未来を共に創りましょう。
  </p>
  <div class="flex flex-col sm:flex-row items-center justify-center gap-4 opacity-0 animate-fade-in-up animation-delay-400">
    <a href="#" class="w-full sm:w-auto px-8 py-4 bg-white text-gray-900 font-bold rounded-full hover:bg-gray-100 transition-colors duration-300 shadow-lg hover:shadow-xl text-lg">
      Get Started
    </a>
    <a href="#" class="w-full sm:w-auto px-8 py-4 bg-white/10 backdrop-blur-md text-white border border-white/30 font-bold rounded-full hover:bg-white/20 transition-colors duration-300 text-lg flex items-center justify-center gap-2">
      <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z" />
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
      </svg>
      Watch Demo
    </a>
  </div>
</div>
</section>

<!-- 
※ Tailwind CSS を使用している場合、フェードインアップ用のアニメーションクラスを 
tailwind.config.js に追加するか、カスタムCSSで定義する必要があります。

CSS例:
@keyframes fadeInUp {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}
.animate-fade-in-up {
animation: fadeInUp 0.8s ease-out forwards;
}
.animation-delay-200 { animation-delay: 0.2s; }
.animation-delay-400 { animation-delay: 0.4s; }
-->

ブラウザ対応状況 (Browser Support)

モダンブラウザ（Chrome, Firefox, Safari, Edge）の最新バージョンで問題なく動作します。
playsinline 属性をつけることで、iOS版Safariでも自動的にインライン再生されます。
iOSの「低電力モード」がオンになっている場合や、通信環境が悪い場合、自動再生がブロックされることがあります。そのため、必ず poster 属性で代替画像を設定するようにしてください。