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

プレビュー (Preview)

Discover the New Digital Experience

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

Get Started

Watch Demo

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

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

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

実装コード (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)