awwwards-hero-section

Awwwards級のヒーローセクション

このスキルの対象はヒーローセクションのみです。ページ全体、ナビゲーションシステム、フッター、機能セクションは対象外です。ユーザーがヒーロー、ランディングページのヘッダー、ファーストビューのセクションを求めた場合、またはヒーローデザインの参考スクリーンショットを提示した場合に実行されます。

---

パイプライン

┌──────────────────────────────────────────────────────────────────────┐
│                                                                      │
│   BRIEF IN ──→ Phase 1: Read ──→ Phase 2: Architecture              │
│                  (extract signals)  (pick one, commit)               │
│                                                                      │
│                              ──→ Phase 3: Build                      │
│                                   (type, palette, atmosphere,        │
│                                    motion, mobile)                   │
│                                                                      │
│                              ──→ Phase 4: Verify                     │
│                                   (visual diff against reference)    │
│                                                                      │
│   Each phase has a ✓ Quality Gate. Failing a gate blocks the next.   │
│                                                                      │
└──────────────────────────────────────────────────────────────────────┘

---

フェーズ 1：参考資料を読み取る

コードを書く前に、ユーザーの参考画像からデザインの特徴を抽出します（または概要から推測します）。参考資料に独自の美的感覚を押し付けないでください。実際に示されているものを読み取ります。

→ 各画像から以下の特徴を抽出します

特徴	確認する内容
モード	ライトまたはダークの背景
焦点となる要素	ビューポートで最も目立つものは何か。大きなタイポグラフィ、3Dオブジェクト、全面写真、製品モックアップ、抽象的な形状、動画、散在する浮遊要素など
タイポグラフィのスタイル	セリフ体、サンセリフ体、または混在。大きいか控えめか。大文字か大小文字の混在か。文字間が狭いか標準か。イタリック体の有無
テキストと画像の関係	テキストは画像の上に重なるか（レイヤー）？横に並ぶか（分割）？被写体の背後に配置されるか（マスク）？画像の内側に配置されるか（クリップ）？単語の間にインライン画像が挟まる形で交差するか？
レイアウトの重心	視覚的な重みはどこにあるか。中央？左下？端に分散？全面？
色数	異なる色相を数えます。受賞レベルのヒーローは、ほぼ必ず最大2～3色です
ナビゲーションのスタイル	フローティングピル？フラットな横並び？左右分割（左にロゴ、右にリンク）？ミニマル（ロゴとメニューのみ）？
細部の特徴	回転するテキストバッジ、等幅フォントのメタデータラベル、グラスモーフィズムのカード、ショーリールへのリンク、CTAピルのスタイル

→ コード生成前にヒーローの特徴を出力します

抽出した内容を、次のように2～3行で正確に記述します。

「ヒーローの特徴：ダークモード。CSSのパースペクティブを使った中央配置の3Dカードカルーセルが焦点。下部に大きなサンセリフ体の見出しを大小文字混在で配置し、その上に等幅フォントの小さなラベル、ゴーストCTAを1つ、フローティングピル型ナビゲーションを配置。配色：オフブラック＋白＋控えめなアクセントカラー1色。印象：奥行きのあるカードを重ねた、ダークでシネマティックなエージェンシー。」

→ 参考画像が提供されていない場合

次の質問をちょうど1つだけ尋ねます。「このヒーローは［ダークでシネマティック］と［明るくエディトリアル］のどちらに近づけたいですか？また、ブランド名と一行の価値提案を教えてください。」

ユーザーの文脈から推測できる場合（たとえば「AIスタートアップ」や「高級エージェンシー」と言っている場合）は、質問を省略してヒーローの特徴を明示します。

✓ 品質ゲート：読み取り

フェーズ2に進む前に、以下を確認します。

• 参考資料から8つの特徴をすべて抽出した（または概要から推測した）
• ヒーローの特徴をまとめた
• モード（ライト／ダーク）、焦点となる要素、配色の方向性を把握している

---

フェーズ 2：アーキテクチャを選ぶ

以下の6つから、参考資料に最も合うアーキテクチャを1つ選びます。2つのアーキテクチャを混ぜないでください。1つに絞り込みます。

---

アーキテクチャ A：シネマティックセンター

最適な用途：ダークでシネマティックなエージェンシーサイト、没入感のある製品ローンチ、雰囲気を重視したブランドページ

見出しはビューポートの中央に配置します。シネマティックなビジュアル（3Dレンダリング、製品写真、雰囲気のある写真）で背景を覆うか、テキストの背後や周囲に浮かべます。CTAは、見出しの下に中央配置のピル型ボタンまたはゴーストボタンを1つ配置します。

[viewport container: relative, min-h-[100dvh], overflow-hidden]
  [background visual: absolute inset-0, object-cover or positioned 3D element]
  [content overlay: relative z-10, flex flex-col items-center justify-center text-center]
    [optional eyebrow: small mono label]
    [H1: massive centered, max 2-3 lines]
    [optional subtext: max 20 words, muted color]
    [CTA: single pill button]

背景ビジュアルには、position: absolute; inset: 0とobject-fit: cover（画像の場合）、または中央配置の絶対位置指定（3D／イラストの場合）を使用します。テキストはposition: relative; z-index: 10で前面に配置します。テキストが読みづらい場合は、画像とテキストのレイヤーの間に暗幕グラデーションのオーバーレイ（bg-gradient-to-t from-black/60 via-black/20 to-transparent）を追加します。

アーキテクチャ B：非対称分割

最適な用途：大胆なエージェンシーのホームページ、AI／テクノロジー製品のローンチ、ブランドの存在感を打ち出すページ

片側（通常は左側で、幅の55～65％を占めます）に巨大な見出しを配置します。補足コンテンツ（サブテキスト、CTA、またはビジュアル素材）は反対側に配置し、垂直方向にずらします。左右の領域は同じベースラインに揃えません。意図的に垂直方向の緊張感を生み出します。

[viewport container: min-h-[100dvh], grid grid-cols-1 lg:grid-cols-[1.2fr_1fr] items-end lg:items-center gap-8 lg:gap-0]
  [left: H1, massive, left-aligned, takes up most of the width]
  [right: subtext + CTA OR visual asset, vertically offset from the H1 baseline]

左の列には items-end、右の列には items-start（またはその逆）を指定して、垂直方向の緊張感を生み出します。見出しは、ページの片側を支えるアンカーのように感じられるようにします。モバイル（< 768px）では、単一列の全幅レイアウトに切り替えます。

---

アーキテクチャ C：全面表示の被写体

最適な用途：アスリート／パーソナルブランドのサイト、商品写真を主役にしたヒーロー、エディトリアルなファッションやライフスタイル

ビューポート全体に広がる写真または3Dレンダリングそのものがヒーローです。タイポグラフィは画像に直接重ね、左上、左下、または下端にまたがるように配置します。独立した「テキスト領域」はなく、画像とテキストが同じ空間に共存します。

[viewport container: relative, min-h-[100dvh], overflow-hidden]
  [full-bleed image: absolute inset-0, object-cover]
  [gradient scrim: absolute inset-0, bg-gradient-to-t from-black/70 via-transparent to-black/20]
  [content: absolute bottom-0 left-0 p-12 lg:p-20, z-10]
    [H1: massive, white, mix-blend-mode: difference OR on top of scrim]
    [optional CTA]

写真の上でもテキストが必ず読めるようにします。グラデーションのスクリーンレイヤーを使うか、テキストに mix-blend-mode: difference を指定します（背景に対してテキストの色が反転します）。スクリーンはより安全で、ブレンドモードはより大胆な表現になります。モバイルでは、スクリーンの不透明度を上げます。

---

アーキテクチャ D：タイポグラフィックポスター

最適な用途：クリエイティブスタジオのポートフォリオ、パーソナルブランドのステートメント、タイポグラフィ主導のエディトリアル

タイポグラフィそのものがビジュアルです。ヒーロー画像はありません。ビューポートからはみ出すほどのサイズの見出し自体が、グラフィック要素になります。単語をビューポートの端にまたがるように分割しても構いません。同じ見出し内でウェイト、サイズ、斜体を変えることで、視覚的な質感を生み出します。

[viewport container: min-h-[100dvh], flex flex-col justify-between p-8 lg:p-16]
  [top: nav or micro-label]
  [center: H1 at viewport-scale (10vw-15vw), possibly split into multiple positioned lines]
  [bottom: CTA or micro-metadata strip]

font-size: clamp(4rem, 12vw, 16rem) を使います。1行目に text-align: left、2行目に text-align: right を指定して、単語を配置し、視覚的な流れを斜めに作ることができます。同じ見出し内で <span> で囲んだ部分に font-weight: 900 と font-weight: 300、または font-style: italic を組み合わせます。

---

アーキテクチャ E：画像を織り込んだタイポグラフィ

最適な用途：クリエイティブエージェンシーのヒーローセクション、個性を打ち出すブランドページ、エディトリアルなホームページ

見出しの単語と単語の間に、小さく角丸の画像を埋め込んだ巨大なタイポグラフィです。画像は文字の高さに合わせてインラインで配置し、視覚的な句読点として機能します。見出しは、写真が小さく挿入された文章のように読めます。

[viewport container: min-h-[100dvh], flex items-center justify-center]
  [H1: massive, contains <span> wrappers for inline images]
    "Build " [inline-image: w-16 h-10 rounded-full object-cover align-middle mx-1] " a quieter, " [inline-image] " smarter AI agency presence."

/* BLUEPRINT: Inline hero images
   WHY: The images must match the x-height of the surrounding text.
   They are punctuation, not focal elements. Making them too large
   turns the heading into a gallery instead of a sentence. */
.inline-hero-img {
  display: inline-block;
  width: clamp(3rem, 5vw, 5rem);
  height: clamp(2rem, 3.5vw, 3.5rem);
  border-radius: 9999px;       /* pill shape */
  object-fit: cover;
  vertical-align: middle;
  margin-inline: 0.25em;
}

モバイルでは、インライン画像をテキストと一緒に縮小するか、見出しの下に配置します（hidden md:inline-block）。

---

アーキテクチャ F：レイヤーによる奥行き（Z軸構成）

最適な用途：ポートフォリオのショーケース、SaaS製品のデモ、複数プロジェクトを紹介するエージェンシーのページ

複数のビジュアル要素（カード、画像、UIモックアップ）を、CSSの perspective と transform: rotateY() rotateX() を使って異なる奥行きに配置します。1つの要素を「最も手前」に配置し、最大サイズで中央前面に置きます。ほかの要素は小さく、回転させ、不透明度を下げて背景へと遠ざかるように配置します。タイポグラフィは構成の上または下に配置し、全体を支えます。

[viewport container: min-h-[100dvh], relative, perspective: 1200px on parent]
  [card layer: absolute, multiple cards with varying transform: rotateY(Xdeg) translateZ(Ypx)]
    [front card: scale(1), translateZ(0), centered]
    [left card: rotateY(25deg), translateZ(-200px), scale(0.85), opacity-70]
    [right card: rotateY(-25deg), translateZ(-200px), scale(0.85), opacity-70]
  [text layer: relative z-10, positioned below or overlapping the card cluster]
    [H1]
    [CTA]

/* BLUEPRINT: Perspective card shelf
   WHY: perspective-origin centers the vanishing point. 
   preserve-3d lets child transforms create real depth.
   backface-visibility prevents render flicker on rotation. */
.perspective-container {
  perspective: 1200px;
  perspective-origin: center center;
}
.depth-card {
  transform-style: preserve-3d;
  transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
  backface-visibility: hidden;
}

⚠ 単調化への警告： このアーキテクチャでAIが最も陥りやすい失敗は、8～10枚のカードをランダムな回転角度で画面全体に散らばらせてしまうことです。レイアウトには、明確なフォーカルカード（中央前面にあり、不透明度100％で、最も大きいもの）と、奥行き方向に対称に遠ざかる2～4枚の補助カードが必ず必要です。カードが爆発したような配置ではなく、Apple TVアプリの棚をイメージしてください。

---

✓ 品質チェック：アーキテクチャ

フェーズ3に進む前に、次の点を確認してください。

• A～Fからアーキテクチャを1つ選択している
• 選択したものがフェーズ1のヒーロー抽出と一致している
• 2つのアーキテクチャを混ぜていない

---

フェーズ3：ヒーローを構築する

→ タイポグラフィ

ヒーロー見出しは「大きな文字」ではありません。ビューポート全体を構成する建築的な要素です。

フォントの選択 — 適切な行から1つ選んでください：

雰囲気	有力候補（1つ選択）
クリーンでモダン／テック／SaaS	Geist、Satoshi、Cabinet Grotesk、Outfit、PP Neue Montreal
大胆な表現／エージェンシー	Clash Display、Cabinet Grotesk、Monument Extended、Sohne Breit
エディトリアル／高級感	PP Editorial New、GT Sectra Display、Canela、Reckless Neue（参考デザインでセリフ体が使われている場合のみセリフ体を使用）
コンデンス／インダストリアル	Bebas Neue、Oswald、Barlow Condensed、Archivo Black

⚠ 方向性の逸脱に関する警告： Inter、Roboto、Open Sans、Poppins、Arial、Helveticaは本文用フォントであり、ディスプレイ用フォントではありません。ヒーロー見出しに使用すると、レイアウトがどれほど優れていても凡庸な仕上がりになります。参考デザインでこれらのいずれかが使われている場合は、慎重に確認してください。ヒーローサイズではInterとGeistはほとんど見分けがつかず、ディスプレイ用として適しているのはGeistです。

見出しのCSS設計図：

/* BLUEPRINT: Hero heading
   WHY: clamp() makes the heading responsive without breakpoints.
   Negative letter-spacing is critical at large sizes - positive
   tracking on massive text creates a loose, amateurish feel.
   line-height below 1.0 lets ascenders and descenders overlap
   slightly, which looks intentional at display scale. */
.hero-heading {
  font-size: clamp(2.5rem, 7vw, 8rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 0.95;
  text-wrap: balance;
  max-width: 18ch; /* prevents 4+ line wraps */
}

/* For 1-3 word headings, go larger */
.hero-heading--short {
  font-size: clamp(4rem, 14vw, 18rem);
  letter-spacing: -0.05em;
  line-height: 0.85;
}

補足テキストの階層：

要素	仕様
アイブロウ（見出しの上）	font-size: 0.75rem、letter-spacing: 0.12em、text-transform: uppercase、等幅フォントまたは幾何学的なサンセリフ体。控えめな色（ダークではtext-white/50、ライトではtext-zinc-500）
サブテキスト（見出しの下）	font-size: clamp(1rem, 1.25vw, 1.25rem)、max-width: 45ch、line-height: 1.6、控えめな色。20語を超えないこと
CTAボタン	塗りつぶしのピル型（rounded-full px-8 py-3.5）、またはゴーストのピル型（rounded-full px-8 py-3.5 border border-white/20）。font-size: 0.875rem、letter-spacing: 0.05em、大文字表記。CTAは最大1つ。「詳細はこちら」などの副次的なリンクは使用しないこと

---

→ 配色

ヒーローで使用する色相は最大3色です。これは単なる提案ではありません。受賞するヒーローと雑然としたヒーローを分ける要素です。

ダークヒーローの配色：

/* BLUEPRINT: Dark hero atmosphere
   WHY: #0a0a0a reads as black but has enough data for 
   subtle gradients to register. Pure #000000 is a dead 
   flat surface that cannot hold atmospheric effects. */
.hero-dark {
  background: #0a0a0a;
  color: #f5f5f5;
  /* Accent: one muted hue, used on max 1-2 small elements */
}

ライトヒーローの配色：

.hero-light {
  background: #FAFAF9; /* or #F5F5F0 or #FDFBF7 - warm cream, not pure white */
  color: #1a1a1a;      /* or #111111 - near-black, not pure black */
  /* Accent: one considered hue */
}

⚠ 方向性の逸脱に関する警告： ヒーローで彩度の高いアクセントを複数使うと、雑然として焦点が定まらない印象になります。CTAとアクティブ状態に使うアクセントは1色にしてください。それ以外はすべて基本の配色（背景＋テキスト＋控えめなテキスト色）にします。

---

→ 雰囲気

単色のbg-blackやbg-whiteは使わないでください。ヒーローには奥行きが必要です。

ダークモード — 放射状の環境グロー：

/* BLUEPRINT: Ambient glow
   WHY: A barely-visible radial gradient centered slightly 
   above the midpoint creates the illusion of a light source,
   adding depth without any visible element. At 0.03 opacity 
   it's felt, not seen. */
.hero-dark::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 60% 50% at 50% 40%, rgba(255,255,255,0.03) 0%, transparent 70%);
  pointer-events: none;
}

ノイズの粒子オーバーレイ：

/* BLUEPRINT: Film grain
   WHY: Breaks the digital flatness of solid CSS backgrounds.
   position:fixed prevents the grain from scrolling with content.
   pointer-events:none makes it non-interactive.
   0.04 opacity is the threshold where grain is felt but 
   doesn't interfere with text readability. */
.hero-dark::after {
  content: '';
  position: fixed;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
  pointer-events: none;
  z-index: 50;
}

ライトモード — 控えめな暖色系の放射状グロー：

.hero-light {
  background: radial-gradient(ellipse at 30% 20%, rgba(250,235,215,0.4) 0%, transparent 50%), #FAFAF9;
}

---

→ モーション

すべてのヒーローに必ず登場アニメーションを設定してください。静止したまま表示されると、壊れているように見えます。

/* BLUEPRINT: Staggered hero entry (Motion / motion-react)
   WHY: The stagger (0.12s between children) creates a 
   cascade effect. blur(8px)→blur(0) adds perceived quality 
   beyond simple fade-in. The custom cubic-bezier gives a 
   snappy deceleration that feels physical, not computed. */
const heroVariants = {
  hidden: {},
  visible: {
    transition: { staggerChildren: 0.12, delayChildren: 0.1 }
  }
};

const itemVariants = {
  hidden: { opacity: 0, y: 30, filter: "blur(8px)" },
  visible: {
    opacity: 1,
    y: 0,
    filter: "blur(0px)",
    transition: {
      duration: 0.8,
      ease: [0.16, 1, 0.3, 1]  // custom ease-out
    }
  }
};

// Apply: <motion.div variants={heroVariants} initial="hidden" animate="visible">
//          <motion.h1 variants={itemVariants}>...</motion.h1>
//          <motion.p variants={itemVariants}>...</motion.p>
//          <motion.div variants={itemVariants}>CTA</motion.div>
//        </motion.div>

順序： 背景が最初にフェードイン（0ms）→ 見出しが上にスライドしながらぼかしが解除（100ms）→ サブテキストが上にスライド（220ms）→ CTAが上にスライド（340ms）。表示完了まで800ms未満にします。

CTAのホバー時の動き：

/* BLUEPRINT: CTA hover
   WHY: translateY(-2px) creates a subtle lift. The custom 
   cubic-bezier makes the return-to-rest feel weighted, not 
   springy. scale(0.98) on active gives tactile press feedback. */
.hero-cta {
  transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.hero-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 30px rgba(0,0,0,0.12);
}
.hero-cta:active {
  transform: translateY(0) scale(0.98);
}

視差構造（参考デザインが示唆する場合）：

<section class="hero relative min-h-[100dvh] overflow-hidden">
  <div class="hero-bg absolute inset-0 will-change-transform">
    <img ... class="w-full h-full object-cover" />
  </div>
  <div class="hero-content relative z-10">
    ...
  </div>
</section>

回転するテキストバッジ（参考デザインにある場合）：

/* BLUEPRINT: Rotating badge
   WHY: 12s is slow enough to be ambient, not distracting.
   Use SVG textPath along a circle for curved text.
   Place in a bottom corner (absolute bottom-8 left-8), 
   not floating randomly. */
.rotating-badge {
  width: 100px;
  height: 100px;
  animation: spin 12s linear infinite;
}
@media (prefers-reduced-motion: reduce) {
  .rotating-badge { animation: none; }
}
@keyframes spin {
  to { transform: rotate(360deg); }
}

---

→ モバイル時の折りたたみ

すべての構成は768px未満でも適切に表示されるよう調整してください。

要素	モバイル時の動作
見出し	clamp()で縮小します。モバイルでも2rem未満にしないでください
レイアウト	複数列の分割はすべてflex-colまたはgrid-cols-1に折りたたみます
インライン画像（構成E）	テキストに合わせて比率を保って縮小するか、非表示にします（hidden md:inline-block）
3Dパースペクティブカード（構成F）	md未満ではすべてのrotateY／rotateX変換を削除します。縦に並べるか、焦点となるカードだけを表示します
全面画像（構成C）	テキストの読みやすさを保てるよう、スクリーン用グラデーションの不透明度を上げます
タッチ領域	CTAのタップ領域はすべて高さを最低44pxにします
横方向のオーバーフロー	ヒーローをoverflow-x-hiddenで囲み、3D変換した要素によるスクロールバーの発生を防ぎます

→ パフォーマンス

ルール	理由
transform と opacity のみをアニメーションさせます	これらは GPU 合成されます。top、left、width、height をアニメーションさせると、フレームごとにレイアウトの再計算が発生します
will-change: transform は、現在アニメーション中の要素にのみ指定します	will-change を使いすぎると GPU メモリを浪費します。アニメーションの完了後に削除してください
backdrop-filter: blur() は、固定またはスティッキーな要素にのみ指定します	スクロールするヒーロー背景にぼかしを適用すると、フレームレートが大きく低下します
ヒーロー画像には loading="eager"（または Next.js の priority）を使用します	ヒーロー画像はファーストビュー内にあります。遅延読み込みを行うと LCP の失敗につながります
ノイズ／粒子表現は position: fixed の疑似要素に適用します	スクロールするコンテナーには絶対に適用しないでください。フレームごとに再描画されます
すべてのアニメーションを prefers-reduced-motion で制御します	Motion の useReducedMotion() または CSS の @media (prefers-reduced-motion: reduce) を使用します

---

✓ 品質ゲート：ビルド

フェーズ 4 に進む前に、以下を確認してください。

• フェーズ 2 のアーキテクチャに従い、混在させていない
• 見出しのフォントは本文用ではなく、ディスプレイフォントである
• 見出しに可変の clamp() を使用し、デスクトップでは最小でも text-5xl 相当である
• 1440px のデスクトップで、見出しが最大 2～3 行に収まる
• 見出しの文字間隔を詰めている（負のトラッキング）
• 見出しの行の高さを詰めている（1.1 未満）
• カラーパレットの色相は最大 3 色である
• ヒーローには h-screen ではなく min-h-[100dvh] を使用している
• 表示時のアニメーションがある（段階的なフェードアップとぼかし解除）
• すべてのアニメーションで transform と opacity のみを使用している
• モバイル向けの折りたたみが明示されている

---

フェーズ 4：検証

ヒーローを参考例（参考例がない場合はヒーローの抽出結果）と比較してください。すべてのカテゴリを確認し、FAIL があれば納品できません。

構成の差分

確認項目	PASS/FAIL
ビューポート内で 1 つの焦点が支配的である（競合する要素が 3 つ以上ない）
CTA を見つけるためにスクロールしなくても、1440x900 のビューポート内にヒーローが収まる
デスクトップで見出しが最大 2～3 行に収まる
コンテンツが垂直方向の中央に配置されているか、意図的に位置が決められている（上部に押し込まれていない）
余白が大胆かつ意図的に感じられる（窮屈でも、意図せず空いているのでもない）

タイポグラフィの差分

確認項目	PASS/FAIL
見出しのフォントが Inter、Roboto、Open Sans、Poppins、Arial ではない
見出しのフォントサイズに可変の clamp() を使用している
見出しの文字間隔が負である
見出しの行の高さが 1.1 未満である
補足テキストは最大 20 語で、控えめな色を使い、幅が制限されている

色の差分

確認項目	PASS/FAIL
ヒーロー全体で、異なる色相が最大 3 色である
背景に雰囲気がある（粒子、グロー、暖色系の色味など）。単調な bg-black や bg-white ではない
AI らしい紫／青のグラデーション背景がない
ネオンカラーのアクセント、メッシュ状のぼかし、虹色がない

コンポーネントの差分

確認項目	PASS/FAIL
ヒーロー内の CTA は最大 1 つである（「詳細はこちら」などの副次的なリンクがない）
CTA に独自のイージングを使ったホバー状態とアクティブ状態がある
「スクロールして探索」／バウンスするシェブロン／スクロールインジケーターがない
ヒーロー内に信頼を示すロゴ／「利用者」バッジがない
概要が文字通り製品ローンチの場合を除き、バージョンラベル（v0.6、BETA）がない
絵文字が一切ない

モーションの差分

確認項目	PASS/FAIL
表示時のアニメーションがある（即座に静的表示されない）
表示アニメーション全体が 800ms 未満で完了する
prefers-reduced-motion に準拠している
top、left、width、height のアニメーションがない

モバイルの差分

確認項目	PASS/FAIL
768px 未満でレイアウトが適切に折りたたまれる
水平方向にはみ出さない
タッチターゲットが最小 44px である
モバイルで見出しが最小 2rem である
画像の上に重なるテキストが読みやすい（必要に応じてスクリーンの不透明度を高める）

コンテンツの差分

確認項目	PASS/FAIL
AI が書いたような定型句（「高める」「シームレス」「解き放つ」「次世代」「革新する」）がない
em ダッシュがない。ピリオド、コンマ、コロンを使用する
汎用的なストック画像を使ったプレースホルダー画像がない（picsum.photos/seed/{keyword}/{w}/{h} を使用する）
awwwards.com に掲載されても違和感のないヒーローである

---

コア原則

これらは、受賞歴のあるヒーローセクションとありきたりな AI の出力を分ける基本原則です。どのアーキテクチャを選んでも適用されます。

焦点は1つ。 ヒーローセクションには、視覚的に最も目立つ要素を1つだけ配置します。同じ程度の大きさで注意を引き合う要素の数を数えてください。2つを超える場合は、1つが明確に際立つまで減らします。

ビューポートスケールのタイポグラフィ。 ヒーローの見出しは、単なる「大きな文字」ではなく、建築的な要素です。最小値は clamp(2.5rem, 7vw, 8rem) です。1〜3語の見出しには clamp(4rem, 12vw, 15rem) を使用します。字間は詰め、行の高さを圧縮します。

余白を大胆に取る。 背景は無駄な空間ではなく、デザインそのものです。コンテンツは flex/grid で垂直方向の中央に配置し、過剰なパディングで上部に押し上げないようにします。

絞り込んだカラーパレット。 色相は最大3色です。ダークなヒーローセクションでは、オフブラック＋白＋アクセントカラー1色。ライトなヒーローセクションでは、暖かみのあるクリーム色＋ほぼ黒＋アクセントカラー1色です。彩度の高いアクセントカラーを複数使うと、焦点が損なわれます。

1つのビューポートに収める。 構成全体（ナビゲーション＋見出し＋補足テキスト＋CTA＋視覚的な焦点）は、1440x900の画面でスクロールせずに表示できる必要があります。