フィーチャーセクション Feature Section

サービスや製品の特長をアイコンと説明文でグリッド表示する。LPの主要セクション。

使用場面: LP・製品ページで主要機能や特長を視覚的にアピールする場面 採用例: Vercel, Tailwind CSS

ライブデモ

選ばれる理由

あなたのビジネスを加速させる機能を揃えています

⚡

圧倒的な速度

最先端のインフラで、レスポンスタイムを最小限に。ストレスフリーな体験を提供します。

🔒

堅牢なセキュリティ

エンタープライズレベルの暗号化と認証で、大切なデータを守ります。

🚀

簡単セットアップ

わずか数分で導入完了。コードの知識がなくても直感的に操作できます。

👥

チーム連携

リアルタイムのコラボレーション機能で、チームの生産性を最大化します。

📊

詳細な分析

ダッシュボードでKPIをリアルタイム監視。データドリブンな意思決定を支援します。

🌐

多言語対応

20以上の言語に対応。グローバル展開をシームレスにサポートします。

ソースコード

<div class="demo-features">
  <div class="demo-features-header">
    <h2 class="demo-features-title">選ばれる理由</h2>
    <p class="demo-features-subtitle">あなたのビジネスを加速させる機能を揃えています</p>
  </div>
  <div class="demo-features-grid">
    <div class="demo-feature-card">
      <div class="demo-feature-icon">&#9889;</div>
      <h3 class="demo-feature-name">圧倒的な速度</h3>
      <p class="demo-feature-desc">最先端のインフラで、レスポンスタイムを最小限に。ストレスフリーな体験を提供します。</p>
    </div>
    <div class="demo-feature-card">
      <div class="demo-feature-icon">&#128274;</div>
      <h3 class="demo-feature-name">堅牢なセキュリティ</h3>
      <p class="demo-feature-desc">エンタープライズレベルの暗号化と認証で、大切なデータを守ります。</p>
    </div>
    <div class="demo-feature-card">
      <div class="demo-feature-icon">&#128640;</div>
      <h3 class="demo-feature-name">簡単セットアップ</h3>
      <p class="demo-feature-desc">わずか数分で導入完了。コードの知識がなくても直感的に操作できます。</p>
    </div>
    <div class="demo-feature-card">
      <div class="demo-feature-icon">&#128101;</div>
      <h3 class="demo-feature-name">チーム連携</h3>
      <p class="demo-feature-desc">リアルタイムのコラボレーション機能で、チームの生産性を最大化します。</p>
    </div>
    <div class="demo-feature-card">
      <div class="demo-feature-icon">&#128202;</div>
      <h3 class="demo-feature-name">詳細な分析</h3>
      <p class="demo-feature-desc">ダッシュボードでKPIをリアルタイム監視。データドリブンな意思決定を支援します。</p>
    </div>
    <div class="demo-feature-card">
      <div class="demo-feature-icon">&#127760;</div>
      <h3 class="demo-feature-name">多言語対応</h3>
      <p class="demo-feature-desc">20以上の言語に対応。グローバル展開をシームレスにサポートします。</p>
    </div>
  </div>
</div>

.demo-features { text-align: center; }
.demo-features-header { margin-bottom: 24px; }
.demo-features-title {
  font-size: 22px; font-weight: 800; color: #333; margin: 0 0 6px;
}
.demo-features-subtitle {
  font-size: 14px; color: #888; margin: 0;
}
.demo-features-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px;
}
.demo-feature-card {
  text-align: left; padding: 20px;
  border-radius: 12px; background: #f9fafb;
  border: 1px solid #e5e7eb;
  transition: border-color 0.2s, box-shadow 0.2s, transform 0.15s;
}
.demo-feature-card:hover {
  border-color: color-mix(in srgb, var(--ui-primary) 30%, transparent);
  box-shadow: 0 4px 16px rgba(0,0,0,0.05);
  transform: translateY(-2px);
}
.demo-feature-icon {
  width: 40px; height: 40px; border-radius: 10px;
  background: color-mix(in srgb, var(--ui-primary) 12%, transparent);
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; margin-bottom: 12px;
}
.demo-feature-name {
  font-size: 15px; font-weight: 700; color: #333;
  margin: 0 0 6px;
}
.demo-feature-desc {
  font-size: 13px; color: #777; line-height: 1.5;
  margin: 0;
}
@media (max-width: 500px) {
  .demo-features-grid { grid-template-columns: 1fr; }
}

AIプロンプト

フィーチャーセクションをHTML/CSSで作ってください。アイコン付きの機能カードを3列のグリッドで表示します。

以下の仕様でフィーチャーセクションを実装してください。
- セクションタイトル＋サブタイトル
- 3x2グリッドで6つの機能カード
- 各カードにアイコン（絵文字）＋タイトル＋説明文
- プライマリカラー: #2563eb
- ホバー時にボーダーカラーとシャドウ変化
- レスポンシブ（モバイルで1列表示）

高品質なフィーチャーセクションを実装してください。
- IntersectionObserverでスクロール連動のスタッガーアニメーション
- アイコンのSVGアニメーション
- マウス追従のカードハイライト効果
- ベントグリッド（一部カードを大きく表示）
- ダークモード対応
- 各カードから詳細ページへのリンク
- コンテンツのスロット化（JSON駆動）

← カタログに戻る