ヒーロー · ヒーローセクション
極太フォントのヒーローセクション
画面いっぱいの極太な見出しと 1 色のアクセントカラーだけで勝負する、スタートアップ向けのヒーローセクション。CTA への視線動線を 1 本に絞り、滞在 3 秒で価値を伝える設計。
プレビュー
概要
極太フォントのヒーローは、文字を「読ませる」のではなく「価値そのものとして提示する」設計です。可読性を多少譲ってでも、ファーストビューの数秒で価値提案とブランドの温度を同時に叩き込む——スタートアップのランディングページで特に有効な戦法です。
機能で差をつけられないとき
シードからシリーズAのスタートアップは、機能の量で勝負できません。プロダクトはまだ全部が揃っていないからです。そこで問われるのは「この会社は何を信じているか」という姿勢。極太フォントと1色のアクセント運用は、その姿勢をもっとも効率よく視覚化します。情報を増やすのではなく、態度を一枚の画面で言い切る——それが極太ヒーローの役割です。
太さがコントラストを作る
このスタイルの面白さは、同じ書体のままで階層を作れる点にあります。一部をイタリックに、一部をアウトライン（袋文字）に——ウェイトと処理の差だけで、色を増やさずともタイポグラフィに強弱が生まれる。色数を絞るからこそ、たった1色のアクセントが画面のシグナル色として強烈に効きます。
仕上げの判断軸
冒頭に小さなeyebrowバー（アクセント色のラベル）を置き、ページ全体で使うシグナル色を予告します。大見出しの直下は2カラムにせず、その下のリード文だけを2カラムに——読む要素と押す要素を順序立てて提示するためです。CTAはhoverでtranslateと色付きシャドウを与え、エディトリアルな温度を保ちつつ遊びを加えます。最下部の「backed by」は投資家名をテキストで並べるだけで十分——ロゴ画像を使わないほうが、むしろブランドの統一感が出ます。
使いどころ
- 調達直後で、信頼感よりも勢いを見せたいスタートアップのランディングページ
- 1 本のメッセージに全力をかけたい、アジェンダ設定型のサービス
- 装飾を増やすよりもタイポグラフィで個性を立てたいプロダクト
このデザインの分類
- カテゴリ
- ヒーロー
- スタイル
- ボールド / スタートアップ / エディトリアル / ウォーム
背景と狙いどころ
AIへの指示文
シリーズシード規模のスタートアップ向けに、エディトリアル寄りの大胆なヒーローセクションを作ってください。
意図: 大きな文字、1 色、1 CTA。見出しを 2 秒で認識できること。
キャンバス:
- off-white (#faf9f5) の背景、近黒 (#0a0a0c) のインク。
- 1 色のアクセント: 鮮やかなオレンジ (#ff4d1a)。使う場所は eyebrow バー、イタリック強調語、CTA の hover シャドウのみ。
ヘッダー:
- absolute で上部配置。左: ボールドな "◼︎ Stack/07" ワードマーク。右: 4 つのナビリンクを弱めの太さで。720px 未満ではナビを非表示。
ヒーロー本体:
- eyebrow 行: 短いオレンジバー + uppercase のトラックされたテキスト "SEED ROUND · 2026"。
- H1 を 2 行、font-size clamp(3.2rem, 11vw, 9.5rem)、weight 900、letter-spacing -0.045em、line-height 0.88。
- 1 行目: "Ship <span オレンジ イタリック>faster</span>,"
- 2 行目: "<span アウトライン>decide</span> slower."
アウトライン語は `-webkit-text-stroke: 2px <インク>` + `color: transparent` で実装。
- H1 の下は、デスクトップで 2 カラム、720px 未満では縦積み:
左: 最大 42ch のリード文 1段落、ミュートのグレー。
右: CTA クラスタ(縦並び):
- プライマリCTA: 黒ソリッドボタン、ラジアス 2px、ボールド、矢印アイコン付き。ラベル "Start the 14-day trial"。hover で translate(2px, -2px) + -4px/4px のオレンジ オフセットシャドウ。
- 下にゴーストリンク: "No credit card · cancel anytime →"。
下部ストリップ:
- 上辺に 1px の境界線。"BACKED BY" のラベル + 5 つのワードマーク風投資家名 (Accel, Y Combinator, First Round, Benchmark, SV Angel)。
純粋な HTML/CSS、フルレスポンシブ、JS 不要。
バリエーション
ダークテーマ版
構造はそのままで配色を反転: - 背景 #0b0c0f、インク #faf9f5、アクセントはオレンジのまま。 - アウトライン語は `-webkit-text-stroke` をライトインク色に。 - CTA は明色ボタン、hover シャドウはオレンジのまま。
プロダクト画像あり版
1024px 以上でレイアウトを拡張: - 60/40 グリッド。左 60%: 既存のヒーローコンテンツ(eyebrow、見出し、リード、CTA)。 - 右 40%: 傾けたブラウザ/アプリのモック(フェイクの chrome + フルブリードのスクリーンショット)。rotate(-3deg) を適用。 - カードに hover で translateY(-4px) の浮き上がり。
よくある質問
極太フォントのライセンスは？
アウトライン文字が崩れるブラウザは？
アクセント 1 色でクリック率は下がらない？
関連するデザイン
バウハウス様式・幾何構成の原色ヒーロー
1919年バウハウス・ロシア構成主義を引用した、原色×幾何形×グロテスクサンセリフのヒーロー。20世紀モダンデザインの古典をWebに再構築する、教養と前衛が同居する尖った設計。
装飾を拒むブルータリズムのヒーロー
角丸・影・グラデーションを一切使わず、極太タイポと裸の HTML 要素だけで突きつける反デザインのヒーロー。実験的アート・アンダーグラウンドメディア・若手クリエイターが「中身で勝負」する場面の選択肢。
美術館展覧会ポスター風のヒーロー
国立美術館の特別展ポスターを再構築したヒーローセクション。明朝大型タイトル・赤の差し色・許可印・バーコードまで作り込み、「文化的権威」と「会期限定の希少性」を同時に演出する尖った設計。