ヒーローセクション（Hero Section）

ページ最上部に配置する大型のビジュアルエリア。キャッチコピー・サブテキスト・CTAボタンを組み合わせて、ユーザーの第一印象とアクションを設計する。 Mantine・shadcn/ui・CSS/Tailwind の3パターンで実装例を比較できます。

@mantine/corev8.3.15 shadcn/uiv4.2.0

Mantine Hero

Mantine の Container / Title / Text / Button を組み合わせたヒーローセクションです。グラデーション背景に白いキャッチコピーと2つのCTAボタンを中央揃えで配置しています。

Container / Title / TextButton: filled + outlineGroup justify="center"MantineProvider必須

読み込み中...

tsx

'use client';
import { Container, Title, Text, Button, Group, MantineProvider } from '@mantine/core';
import '@mantine/core/styles.css';

export function MantineHeroDemo() {
  return (
    <MantineProvider>
      <div
        style={{
          background: 'linear-gradient(135deg, #228be6 0%, #7048e8 100%)',
          borderRadius: 8,
          padding: '60px 20px',
        }}
      >
        <Container size="sm" style={{ textAlign: 'center' }}>
          <Title order={1} c="white" mb="md">
            あなたのビジネスを加速する
          </Title>
          <Text c="rgba(255,255,255,0.85)" size="lg" mb="xl">
            最新テクノロジーで業務を効率化。今すぐ始めて、
            チームの生産性を向上させましょう。
          </Text>
          <Group justify="center" gap="md">
            <Button size="md" bg="white" c="blue.7">
              無料で始める
            </Button>
            <Button size="md" variant="outline" c="white" style={{ borderColor: 'white' }}>
              詳しく見る
            </Button>
          </Group>
        </Container>
      </div>
    </MantineProvider>
  );
}

🤖 AIプロンプトテンプレート

React + Tailwind CSSで、Mantineを使ったヒーローセクションを実装してください。
- 使用ライブラリ: @mantine/core の Container / Title / Text / Button / Group、MantineProvider必須
- Container size="sm" で最大幅を制限し、テキストを中央揃えにする
- Title order={1} でキャッチコピーを配置し、c="white" で文字色を白にする
- グラデーション背景は style={{ background: 'linear-gradient(135deg, #228be6 0%, #7048e8 100%)' }} で指定する
- Group justify="center" で2つのCTAボタンを横並びにする
- Primary ボタン: bg="white" c="blue.7" でグラデーション上に白背景ボタン
- Outline ボタン: variant="outline" c="white" style={{ borderColor: 'white' }} で白枠ボタン

⚠️ このプロンプトはあくまでたたき台です。AIの回答はモデルやバージョン、会話の文脈によって毎回異なります。意図通りに動かない場合は、条件を追記・修正してお使いください。

ライブラリ比較

項目	Mantine	shadcn/ui	CSS / Tailwind
専用コンポーネント	✅ Container / Title / Text / Button	✅ Button / Badge（部分的）	❌ 自前実装
Provider	MantineProvider 必須	不要	不要
グラデーション背景	⚠️ style prop で指定（Mantine独自なし）	⚠️ Tailwind の bg-gradient-to-* を使用	✅ Tailwind / inline style で自由
ボタンスタイル	variant / bg / c props で制御	variant / size props で制御	完全自由（Tailwindクラス）
レイアウトパターン	Container でセンタリング型が基本	⚠️ Tailwindで手動レイアウト	✅ センタリング / 2カラム / ダークなど自在
レスポンシブ	✅ Container size で最大幅制御	✅ Tailwindブレークポイント	✅ Tailwindブレークポイント（flex-col md:flex-row）
バッジ / ラベル	✅ Badge コンポーネントあり	✅ Badge variant="secondary" など豊富	⚠️ span + Tailwindで自前実装
バンドルサイズ	中（Tree-shaking可）	✅ 使った分だけ	0（追加なし）

選択のポイント

Mantine — Container・Title・Text・Button などのレイアウト向けコンポーネントが揃っており、 props だけで整ったヒーローを短時間で実装できる。すでに Mantine を使っているプロジェクトでそのままスタイルに合わせたヒーローを追加したい場合に最適。
shadcn/ui — Button と Badge のみを活用し、レイアウト・背景は Tailwind で完全制御できる。コードが手元にあるためデザインシステムとの統合が容易。最小限の依存でアクセシブルなヒーローを構築したい場合に向いている。
CSS / Tailwind CSS — ゼロ依存で既存デザインシステムに完全に合わせられる。センタリング型・2カラム型・ダークグラデーション型など多様なレイアウトパターンを自在に実装可能。独自ブランドやデザインへのこだわりが強いプロジェクトで最も柔軟な選択肢。