SnippetUI
← Back to snippets

Split Hero Section

大胆なタイポグラフィとビジュアルが左右に分割され、ロード時にスライドインするヒーローセクションです。

HTMLTailwind CSS

プレビュー (Preview)

New Version 2.0 Released

Create digital experiences that matter.

Elevate your brand with our cutting-edge design system. Build faster, scale easier, and deliver unparalleled user experiences.

User 1User 2User 3
+2k

Trusted by over 2,000 forward-thinking teams.

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

  • SaaSやプロダクトのランディングページ: 主要なメッセージと視覚的なイメージを効果的に伝えるために最適です。
  • スプリットレイアウト: 画面を二分割することで、テキストと画像を対比させ、ユーザーの注意を引きます。
  • スライドインアニメーション: ページ読み込み時に左右から要素がスライドインし、動的でモダンな印象を与えます。
  • グラスモーフィズム要素: 右側のモックアップウィンドウに背景ぼかし（Backdrop Blur）を採用し、奥行きのある美しいUIを実現。

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

  • 大胆なタイポグラフィ: 見出しには太字で大きめのフォントサイズを使用し、グラデーションテキストでアクセントをつけています。
  • 明確なコールトゥアクション（CTA）: プライマリボタンとセカンダリボタンを視覚的に区別し、ユーザーのアクションを促します。
  • ソーシャルプルーフ: 信頼性を示すために、ユーザーアイコンと登録者数を表示するセクションを配置しました。
  • レスポンシブデザイン: モバイル端末では縦並び（Stack）、タブレット以上の画面幅では横並び（Split）になるように設計されています。

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

  • 配色とグラデーション: from-indigo-600、to-purple-800などのカラークラスを変更して、ブランドカラーに合わせてカスタマイズしてください。
  • 右側のビジュアル: 現在はCSSで作成したモックアップを表示していますが、実際のプロダクト画像やイラストの <img> タグに置き換えることができます。
  • アニメーションの調整: <style>{ ` タグ内の @keyframes の値や、インラインスタイルの animation プロパティの時間を変更することで、アニメーションの速度や動きを調整可能です。

実装コード (Implementation)

<div class="relative min-h-screen flex flex-col md:flex-row bg-slate-900 text-white overflow-hidden font-sans w-full">
<!-- Left Content -->
<div class="w-full md:w-1/2 flex items-center justify-center p-8 md:p-16 lg:p-24 z-10" style="animation: slideInLeft 1s ease-out forwards;">
  <div class="max-w-xl">
    <div class="inline-flex items-center space-x-2 px-3 py-1 rounded-full bg-indigo-500/10 text-indigo-400 text-sm font-medium mb-6">
      <span class="w-2 h-2 rounded-full bg-indigo-500 animate-pulse"></span>
      <span>New Version 2.0 Released</span>
    </div>
    <h1 class="text-5xl md:text-6xl lg:text-7xl font-extrabold tracking-tight leading-[1.1] mb-6">
      Create <span class="text-transparent bg-clip-text bg-gradient-to-r from-indigo-400 via-purple-400 to-pink-400">digital experiences</span> that matter.
    </h1>
    <p class="text-lg md:text-xl text-slate-400 mb-8 leading-relaxed">
      Elevate your brand with our cutting-edge design system. Build faster, scale easier, and deliver unparalleled user experiences.
    </p>
    <div class="flex flex-col sm:flex-row gap-4">
      <button class="px-8 py-4 rounded-full bg-white text-slate-900 font-bold text-lg hover:bg-slate-100 transition-transform hover:-translate-y-1 hover:shadow-xl hover:shadow-white/10 focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-slate-900">
        Get Started Free
      </button>
      <button class="px-8 py-4 rounded-full bg-slate-800 text-white font-bold text-lg border border-slate-700 hover:bg-slate-700 hover:border-slate-600 transition-all focus:outline-none focus:ring-2 focus:ring-slate-500 focus:ring-offset-2 focus:ring-offset-slate-900 flex items-center justify-center gap-2">
        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><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><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
        Watch Demo
      </button>
    </div>
    
    <div class="mt-12 flex items-center gap-6 text-slate-500 text-sm">
      <div class="flex -space-x-3">
        <img class="w-10 h-10 rounded-full border-2 border-slate-900" src="https://i.pravatar.cc/100?img=1" alt="User 1" />
        <img class="w-10 h-10 rounded-full border-2 border-slate-900" src="https://i.pravatar.cc/100?img=2" alt="User 2" />
        <img class="w-10 h-10 rounded-full border-2 border-slate-900" src="https://i.pravatar.cc/100?img=3" alt="User 3" />
        <div class="w-10 h-10 rounded-full border-2 border-slate-900 bg-slate-800 flex items-center justify-center text-xs font-bold text-white">+2k</div>
      </div>
      <p>Trusted by over 2,000 forward-thinking teams.</p>
    </div>
  </div>
</div>

<!-- Right Visual -->
<div class="w-full md:w-1/2 relative min-h-[50vh] md:min-h-screen" style="animation: slideInRight 1s ease-out forwards;">
  <div class="absolute inset-0 bg-gradient-to-br from-indigo-600 to-purple-800 overflow-hidden">
    <div class="absolute -top-[20%] -right-[10%] w-[70%] h-[70%] rounded-full bg-gradient-to-tr from-pink-500 to-orange-400 blur-3xl opacity-50 mix-blend-overlay"></div>
    <div class="absolute bottom-[10%] -left-[20%] w-[60%] h-[60%] rounded-full bg-gradient-to-tr from-blue-500 to-teal-400 blur-3xl opacity-40 mix-blend-overlay"></div>
    
    <!-- Mockup Window -->
    <div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[85%] max-w-lg rounded-2xl bg-white/10 backdrop-blur-xl border border-white/20 shadow-2xl overflow-hidden transform hover:scale-105 transition-transform duration-500">
      <div class="flex items-center px-4 py-3 border-b border-white/10 bg-white/5">
        <div class="flex space-x-2">
          <div class="w-3 h-3 rounded-full bg-red-500"></div>
          <div class="w-3 h-3 rounded-full bg-yellow-500"></div>
          <div class="w-3 h-3 rounded-full bg-green-500"></div>
        </div>
      </div>
      <div class="p-6">
        <div class="h-4 w-1/3 bg-white/20 rounded mb-4"></div>
        <div class="h-8 w-3/4 bg-white/20 rounded mb-6"></div>
        <div class="space-y-3">
          <div class="h-2 w-full bg-white/10 rounded"></div>
          <div class="h-2 w-full bg-white/10 rounded"></div>
          <div class="h-2 w-5/6 bg-white/10 rounded"></div>
        </div>
        <div class="mt-8 flex gap-3">
          <div class="h-10 w-24 bg-indigo-500 rounded-lg"></div>
          <div class="h-10 w-24 bg-white/10 rounded-lg"></div>
        </div>
      </div>
    </div>
  </div>
</div>

<style>
@keyframes slideInLeft {
    from { opacity: 0; transform: translateX(-50px); }
    to { opacity: 1; transform: translateX(0); }
  }
  @keyframes slideInRight {
    from { opacity: 0; transform: translateX(50px); }
    to { opacity: 1; transform: translateX(0); }
  }
</style>
</div>

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

ブラウザサポート状況備考
Google Chrome✅
Apple Safari✅Backdrop BlurはSafari 9+で対応
Mozilla Firefox✅Backdrop Blurのフルサポートはバージョン103以降
Microsoft Edge✅