余白を主役にした静かなヒーロー
余白・一本化したCTA・二段構成の見出しだけで構成するヒーローセクション。SaaSと個人開発プロダクトのLP最上部に最適で、要素を削るほど訴求が立つ設計。
プレビューを開く
概要
ミニマル・ヒーローは、「何を売っているのか」「次に何をしてほしいのか」の2点だけを残して、それ以外を意図的に削る設計。余白こそがコンテンツの一部として機能する。
なぜ効くのか
装飾を減らすほど、残った要素（見出し、CTA、ブランド）への視線誘導が強くなる。SaaS や開発者向けツールのように、訪問者が既に問題意識を持ってランディングに来るケースでは、冗長な説明より「一歩目を踏み出す敷居」を下げる方が勝つ。
構造
- eyebrow pill: バージョン情報や「Live」「New」などのステータス
- H1: 2段構成（通常テキスト + グラデーション強調フレーズ）
- lede: 2行以内、視線を切らない長さ
- primary CTA: 暗い実ボタン + 矢印アイコン（物理的に「次へ」を暗示）
- ghost link: 離脱しない人向けの二次導線
- proof row: ロゴまたはテキストで信頼を補強
使いどころ
- ファーストビューで製品の価値を一言で伝えたいとき
- ランディングページのコンバージョン測定をシンプルにしたいとき
- 機能が多いサービスで、導線をひとつに絞って認知負荷を下げたいとき
適した技術スタック
- カテゴリ
- ヒーロー
- スタイル
- ミニマル / SaaS / ソフト / スイス様式
- 想定用途
- SaaS向け
- SPA
- No
- Hosting
- static
- Notes
- 純粋なHTML/CSSのみ。Next.js・Astro・Nuxt・Remixなどどのフレームワークにもそのまま持ち込める。
AIへの指示文
Build a minimal hero section for a SaaS landing page. Requirements: - Centered, max-width ~980px, generous vertical padding. - One H1 with a 2-part headline: plain text + a gradient-emphasized phrase. - Short lede copy under 2 lines at desktop width. - Primary CTA as a solid dark button with an arrow icon. - Secondary CTA as a subtle ghost link. - Small uppercase "eyebrow" pill above the H1. - Soft pastel radial gradients in the background (top-right purple, bottom-left teal). - Light theme, Inter or system sans. - Header with a logo on the left and 4 nav links on the right. - A subtle "trusted by" row of logos/text at the bottom. - Fully responsive, no JS needed, no external assets.
バリエーション
ダークテーマ版
Same structure, but dark theme: - Background #0b0b10 with faint purple/teal radial gradients. - Headline gradient stays vivid; lede in muted gray. - CTA is a light pill on dark surface.
より大胆に
Keep the same layout but amplify expressiveness: - Headline pushed to clamp(3rem, 9vw, 6rem). - Gradient headline spans 2 colors with a slight animated shimmer. - Add a small looping video or Lottie on the right half at >=1024px.
よくある質問
フレームワークは何を使えばいい？
このデザイン自体は純粋なHTML/CSSなので依存なし。Next.js / Astro / Nuxt / Remix などどれに組み込んでも動く。JSも不要。
SPAが必要？
いいえ。このヒーロー単体では不要。サイト全体の要件次第。静的サイトジェネレータで十分。
レンタルサーバーでも動く？
動く。HTML/CSSのみなのでどんなホスティングでもOK。PHPサーバーでもNginx/Apacheでも問題なし。