Vibehaus AIに伝わる、デザインの型。

極太タイポで押し切るヒーロー

画面いっぱいの極太見出しとアクセントカラー一色で勝負するスタートアップ向けヒーロー。文字を装飾ではなく主役にし、CTAとの視線動線を1本に絞ることで滞在3秒で価値を伝えるランディング設計。

プレビューを開く

全画面プレビュー ↗

概要

ボールド・ヒーローは、「文字を読ませる」ではなく「文字で殴る」設計。可読性を多少犠牲にしてでも、ファーストビューで価値提案とブランド温度を同時に叩き込む。

なぜ効くのか

シード〜シリーズAのスタートアップが勝負するLPは、情報量で差別化できない（機能はまだ全部揃っていない）。代わりに「この会社は何を信じているか」を視覚で伝えきる必要がある。極太フォント＋一色運用は、“Conviction”（信念）の可視化としてもっとも効率的な文法。

構造

  • eyebrow bar: オレンジのバーと小さなラベル。全ページで登場する「出し惜しみしないシグナル色」を最初に予告する役割
  • 2段見出し: 同じフォントでもイタリック化とアウトライン化を混ぜることで、タイポだけでコントラスト階層が成立する
  • lede + CTA の2カラム: 大見出しの直下では2列にせず、その下の説明部分のみ2列に。「読む」と「押す」の同時提示
  • offset shadow on hover: CTAのtranslate + 色シャドウはエディトリアルな温度を保ったまま、触れる遊びを加える
  • backed by strip: 投資家名だけで下段を構成。ロゴ画像ゼロでも信頼は作れる（むしろ画像不使用でブランド統一感が出る）

使いどころ

  • 調達直後で「信頼より勢い」を見せたいスタートアップのLP
  • 1本のメッセージに全力をかけたいアジェンダ設定型のサービス
  • 装飾を増やすよりもタイポで殴る方が個性が立つ製品

適した技術スタック

カテゴリ
ヒーロー
スタイル
ボールド / スタートアップ / エディトリアル / ウォーム
想定用途
スタートアップ向け
SPA
No
Hosting
any
Notes
HTML/CSSのみ。可変フォントや`-webkit-text-stroke`を使うのでモダンブラウザ前提だが、フォールバックは穏やかに劣化する。

AIへの指示文

Build an editorially-bold hero section for a Series Seed startup landing page.
Intent: loud type, one color, one CTA. Must read the headline in 2 seconds.
Canvas:
- Off-white page background (#faf9f5), near-black ink (#0a0a0c).
- Single accent color: vivid orange (#ff4d1a). Use it sparingly —
  eyebrow bar, italic word, CTA hover shadow only.
Header:
- Absolute at top. Left: bold "◼︎ Stack/07" wordmark. Right: 4 nav links,
  muted weight. Hide nav below 720px.
Hero body:
- Eyebrow row: short orange bar + uppercase tracked text "SEED ROUND · 2026".
- H1 takes two lines, font-size clamp(3.2rem, 11vw, 9.5rem), weight 900,
  letter-spacing -0.045em, line-height 0.88.
  - Line 1: "Ship <span orange italic>faster</span>,"
  - Line 2: "<span outlined>decide</span> slower."
    Use -webkit-text-stroke: 2px <ink> with color transparent for the
    outlined word.
- Below the H1: a 2-column row on desktop, stacking below 720px.
  Left: 1 paragraph of lede copy, max 42ch, muted gray.
  Right: vertical CTA cluster —
    - Primary CTA: solid black button, 2px radius, uppercase-ish weight,
      label + right-arrow icon, label "Start the 14-day trial".
      On hover: translate(2px, -2px) with a -4px/4px orange offset shadow.
    - Ghost link beneath: "No credit card · cancel anytime →".
Bottom strip:
- Thin 1px border top. "BACKED BY" label + 5 wordmark-style investor names
  (Accel, Y Combinator, First Round, Benchmark, SV Angel).
Pure HTML/CSS, fully responsive. No JS.

バリエーション

ダークテーマ版

Keep the structure, invert palette:
- Background #0b0c0f, ink #faf9f5, accent stays orange.
- Outlined word uses -webkit-text-stroke with the light ink color.
- CTA becomes a light-on-dark button; hover shadow remains orange.

プロダクト画像つき版

Expand the layout at >=1024px:
- 60/40 grid. Left 60%: existing hero content (eyebrow, headline, lede, CTA).
- Right 40%: a tilted browser/app mock (a card with fake chrome and
  a full-bleed screenshot). Add a rotate(-3deg) transform.
- On hover of the card, lift it by translateY(-4px).

よくある質問

極太フォントのライセンスは？
このプロンプトはsystem font + Interで動く（Interは無料・商用可のOFL）。ブランドに合わせてSF Pro Display Heavy、Inter Black、可変フォントのInter V Weight 900などに差し替え可。
アウトライン文字が崩れるブラウザは？
`-webkit-text-stroke`は主要ブラウザで対応済。未対応環境では通常の黒文字で表示され、意味は伝わる。フォールバックとして`@supports not (-webkit-text-stroke: 1px black)`で通常表示を明示しておくと安心。
アクセントが1色でクリック率は下がらない？
A/Bを見るとCTAが1本に絞られたLPの方が「ファーストビュー→クリック」の率が上がる傾向。色で誘うより型で誘うのが強い。ただしセカンドビュー以降の情報設計は別途必要。