ヒーローセクション Hero Section
ページ冒頭に大きく表示するファーストビュー。CTA誘導に最適。
ライブデモ
NEW ✨次世代の
次世代の
開発体験を
高速でスケーラブルなアプリケーションを、もっと簡単に構築。
ソースコード
<section class="demo-hero">
<div class="demo-hero-bg"></div>
<div class="demo-hero-content">
<span class="demo-hero-badge">NEW ✨</span>
<h1 class="demo-hero-title">次世代の<br>開発体験を</h1>
<p class="demo-hero-subtitle">高速でスケーラブルなアプリケーションを、もっと簡単に構築。</p>
<div class="demo-hero-actions">
<button class="demo-hero-cta primary">今すぐ始める</button>
<button class="demo-hero-cta secondary">ドキュメント →</button>
</div>
</div>
</section>.demo-hero {
position: relative; padding: 48px 24px; text-align: center;
border-radius: 12px; overflow: hidden; min-height: 240px;
display: flex; align-items: center; justify-content: center;
}
.demo-hero-bg {
position: absolute; inset: 0; z-index: 0;
background: linear-gradient(135deg,
color-mix(in srgb, var(--ui-primary) 6%, #fff) 0%,
color-mix(in srgb, var(--ui-primary) 18%, #fff) 50%,
color-mix(in srgb, var(--ui-primary) 8%, #fff) 100%);
}
.demo-hero-content { position: relative; z-index: 1; }
.demo-hero-badge {
display: inline-block; padding: 4px 14px; border-radius: 20px;
font-size: 12px; font-weight: 600; color: var(--ui-primary);
background: color-mix(in srgb, var(--ui-primary) 12%, #fff);
border: 1px solid color-mix(in srgb, var(--ui-primary) 20%, transparent);
margin-bottom: 16px;
}
.demo-hero-title {
margin: 0 0 12px; font-size: 32px; font-weight: 900;
color: #111; line-height: 1.2; letter-spacing: -0.5px;
}
.demo-hero-subtitle {
margin: 0 0 24px; font-size: 15px; color: #666;
line-height: 1.6; max-width: 400px; margin-left: auto; margin-right: auto;
}
.demo-hero-actions { display: flex; gap: 12px; justify-content: center; }
.demo-hero-cta {
padding: 12px 28px; border: none; border-radius: 10px;
font-size: 14px; font-weight: 700; cursor: pointer; transition: all 0.2s;
}
.demo-hero-cta.primary {
background: var(--ui-primary); color: #fff;
box-shadow: 0 4px 14px color-mix(in srgb, var(--ui-primary) 35%, transparent);
}
.demo-hero-cta.primary:hover {
transform: translateY(-1px);
box-shadow: 0 6px 20px color-mix(in srgb, var(--ui-primary) 45%, transparent);
}
.demo-hero-cta.secondary {
background: transparent; color: var(--ui-primary);
border: 1px solid color-mix(in srgb, var(--ui-primary) 30%, transparent);
}
.demo-hero-cta.secondary:hover {
background: color-mix(in srgb, var(--ui-primary) 8%, #fff);
}AIプロンプト
Basic
ヒーローセクションをHTML/CSSで作ってください。大きな見出し、サブテキスト、CTAボタンがあるランディングページのファーストビューです。
Custom
以下の仕様でヒーローセクションを実装してください。 - 中央揃えのテキスト構成（バッジ、見出し、サブテキスト、CTA） - グラデーション背景 - プライマリCTA + セカンダリCTAの2ボタン - プライマリカラー: #2563eb - フェードインアニメーション（スクロール不要で初回表示時） - レスポンシブ（モバイルではフォントサイズ縮小）
Advanced
アクセシビリティ対応のヒーローセクションを実装してください。 - セマンティックなHTML（section, h1, 適切なheading階層） - CTAボタンのフォーカススタイル - prefers-reduced-motion でアニメーション無効化 - prefers-color-scheme でダークモード対応 - prefers-contrast でハイコントラスト対応 - 背景動画/画像使用時の代替テキスト - LCP最適化（ヒーロー画像のプリロード） - フルビューポート高さ（100svh/100dvh）対応