2026 スタートアップランディングページ トレンドレポート
最近勢いのあるスタートアップの最初の画面(ランディングページ)が実際どう作られているのか気になるとき、勘ではなく自ら測定したデータでトレンドを抽出したレポートだ。話題のスタートアップ10社のページを自動化ツールで開き、フォント・色・アニメーション方式などを分解し、共通パターンを整理した。
まず知っておく用語: ランディングページはサイトに最初に到着したとき見る最初のページ、ヒーロー(hero)はその最初の画面の一番上の大きな領域、CTA(Call To Action)は「登録する」のような核心的な行動を促すボタン、YC W26は有名なスタートアップアクセラレーター Y Combinator の2026年冬期を指す。
調査方法
- 対象: 2026年7月時点でグローバルに話題のスタートアップ10社(YC W26 の新興2社 + 2025〜26のブレイクアウト dev tool/AI 企業8社)
- ツール: Playwright(ブラウザをコードで自動操作してキャプチャ・測定するツール、Chromium エンジン使用)で各サイトを 1440px/375px ビューポートで実測 — ヒーロー・スクロール 25/50/75%・CTA ホバー・モバイルのスクリーンショット + computed style(ブラウザが実際に適用した最終 CSS 値)・フォント・
@keyframes数(CSS アニメーション定義の数)・アニメーションライブラリ・canvas・video 数を抽出 - 限界: ボットウォールなしで全サイト正常キャプチャ。ホバーキャプチャ2社(granola, heypocket)はモーダル干渉
| サイト | 分類 | テーマ | h1 | keyframes | video/canvas | スタイル一行定義 |
|---|---|---|---|---|---|---|
| cursor.com | AI エディタ | ライト #f7f7f4 | 26px/400 | 28 | 1/0 | 印象派絵画背景のエディトリアルミニマル |
| lovable.dev | vibe coding | ライト #fafafa | (ビジュアル別) | 36 | 3/0 | オーロラグラデーションのチャットファースト |
| granola.ai | AI ノート | ライト #fff + grain | 86px/400 セリフ | 76 | 0/6 | セリフエディトリアル × ライブ DOM デモ |
| browserbase.com | エージェントインフラ | ライト | — | 6 | 5/1 | スイス罫線 × ピクセルディザリングレトロ |
| modal.com | GPU インフラ | ダーク #000 | 64px/500 | 9 | 8/2 | ネオングリーン発光 3D ダークラグジュアリー |
| mintlify.com | docs プラットフォーム | ライト紙色 | 50px/400 セリフ | 17 | 0/15 | プリント感覚ライトスイス |
| resend.com | メール API | ダーク #000 | 96px/400 セリフ | 61 | 5/1 | ダークラグジュアリー + セリフエディトリアル |
| elevenlabs.io | AI オーディオ | ライト #fdfcfc + grain | 48px/300 | 0 | 0/3 | ウォームホワイトスイス + grain オーブ |
| heypocket.com (YC W26) | AI ハードウェア | ライト #fff | — | 28 | 10/0 | アップル式ミニマル D2C |
| usecardboard.com (YC W26) | AI 動画編集 | ダーク #1a1a1a | 60px/100 セリフ | 37 | 56/0 | ダークシネマティック + セリフ |
核心的発見8つ(頻度順)
1. JS アニメーションライブラリが全滅 — 10/10
GSAP, Framer Motion, Lenis, Three.js すべて0社検出。モーションは三つの筋に再編された。
- CSS
@keyframes(全サイト、6〜76個) - CSS Scroll-Driven Animations(
animation-timeline: scroll()/view()) — granola, resend, browserbase, heypocket 4/10 がプロダクションで実使用。ポリフィル・ライブラリなしでスクロールリビール・段階遷移・カウンターを実装 - React 状態ベースの遷移(タブ・カルーセル・アコーディオン)
2024〜25の「GSAP + ScrollTrigger 標準装備」の公式が終わった。バンドル 0kb のモーションが新しい既定値だ。
2. 事前レンダー動画が WebGL を代替 — 7/10
three.js は0社なのに 3D ビジュアルはどこにでもある。秘訣はループ動画だ。
- modal: 発光 3D キューブ = video 8個
- resend: 回転ルービックキューブ = video 5個
- heypocket: 製品 360° = video 10個
- cardboard: デモ・ギャラリー = video 56個
リアルタイム canvas はレンダーコストが安い装飾レイヤーにだけ使う(mintlify 等高線ラインアート15個、granola 6個、elevenlabs grain オーブ3個)。「重いものは焼き、軽いものだけリアルタイム」の分業。
3. セリフディスプレイ見出しの回帰 — 5/10
granola(quadrant 86px)、resend(domaine 96px)、mintlify(arizonaFlare 50px)、cardboard(Denton 60px weight 100)、heypocket(セリフロゴ)。共通の公式:
3系統の役割分離が標準ペアリング。モノは装飾ではなくセマンティック用途(タイムコード、数値バッジ、ラベル)にだけ。
4. ダーククリシェの退潮、ウォームオフホワイトが支配 — 7/10 ライト
「dev tool = ダーク」が崩れた。ライト7社も純白ではなくウォームオフホワイト(#f7f7f4, #fdfcfc, 紙色)に純黒でないインクテキスト(#262521, rgba(18,18,18,0.75))。ダーク3社(modal・resend・cardboard)はすべて「ラグジュアリー」演出で差別化 — ダークは既定値ではなく選ばれた舞台だ。
5. 単一アクセント + セマンティックカラーの規律 — 8/10
アクセントカラーは一つだけ、それも意味のある場所にだけ: cursor(オレンジ=リンク)、browserbase(オレンジ=ホバー・ハイライト)、cardboard(ブルー=下線・カーソル)、heypocket(ブルー=CTA)、granola(オリーブ=CTA)、modal(ネオングリーン=キーワード)。resend は色を状態バッジ(Delivered/Bounced)にだけ使う。彩度はコンテンツ(製品レンダー・映像・オーブ)が担い、UI は無彩色に退く。
6. 質感は必須、手段はまちまち — 9/10
flat な純粋背景は lovable くらい。残りはすべて何らかの形で質感を敷いた:
| 手段 | サイト |
|---|---|
| grain ノイズ | granola, elevenlabs |
| ピクセルディザリングイラスト | browserbase |
| 印象派絵画背景 | cursor |
| canvas ラインアート(等高線) | mintlify |
| 3D レンダー表面テクスチャ | modal, resend |
| 露出罫線(hairline)グリッド | browserbase, mintlify, elevenlabs |
「AI 生成物のような無菌 flat」への反作用 — 人の手の痕跡(手描き下線、絵画、ディザリング)がプレミアムのシグナルだ。
7. ヒーロー = スクリーンショットではなく体験 — 6/10
- lovable: ヒーロー CTA がボタンではなく実際に動くプロンプト入力欄
- cursor: HTML で再構築したモックアップ — ホバーすると要素ラベル表示
- granola: リアルタイムにタイピング・書き起こされるライブノートパッド(キャプチャごとに内容が違う)
- elevenlabs: 再生可能なオーディオウィジェット + 常駐 Voice chat
- cardboard: フォールドの中に実際のエディタ UI
- mintlify: リアルタイム更新される「Agent traffic」カウンターバッジ
製品デモを画像/映像ではなく DOM で再構成 → テキスト鮮明、インタラクション可能、スクロール同期可能。
8. 通念と実測の乖離 — ベントは過大評価
トレンド記事は「ベントグリッド標準化(SaaS 67%)」と言うが、実測は2/10(mintlify, elevenlabs)だけが明確なベント。大勢はむしろ:
- エディトリアル2段スプリット(左テキスト / 右ビジュアル) — 6社
- スティッキーステップスクロリテリング(左リストのアクティブ切替 / 右固定ビジュアル) — granola, cardboard, lovable
- セクション背景反転のリズム(ダーク↔ライトのチャプター) — modal
h1 サイズも二極化: 96px セリフ(resend)vs 26px(cursor)・20px(lovable)。後者はサイズの代わりに余白と文章型コピーで階層を作る — 「サイズ競争の終了」。
付録 A — よく使われたマイクロパターン
| パターン | 実装コスト | 事例 |
|---|---|---|
キーワードカラースプリット h1(<span> アクセント) | CSS 一行 | modal, lovable(2トーングレー) |
蛍光ペンハイライト見出し(background + box-decoration-break: clone) | CSS 二行 | browserbase |
| 手描き SVG 下線 | SVG 1枚 | cardboard |
| 十字(+)コーナーマーカーグリッド(擬似要素) | CSS | elevenlabs |
| モノフォントのライブカウンターバッジ | JS 少量 | mintlify |
| CTA ホバー時のキーボードショートカットツールチップ | CSS+JS 少量 | resend |
| タイプライター placeholder ローテーション | JS 少量 | lovable |
| 逆方向マルチマーキー(プロンプトチップ) | CSS keyframes | cardboard, heypocket |
| スクロール時にナビ → フローティングピル(pill)に凝縮 | CSS+IO | granola, cardboard |
| オドメーター数字カウンター | CSS/JS | browserbase |
付録 B — モバイル対応の観察
10社すべてオーバーフロー/崩壊なし。目立った上位戦略:
- コンテンツ優先順位の再設計: cardboard はデスクトップのエディタモックアップの代わりに AI チャットカードへ置換 — 縮小ではなく再編集
- 核心インタラクションの保存: lovable の入力欄、elevenlabs のオーディオデモをモバイルでも削除しない
- クロップ > 縮小: cursor はデモを丸ごと縮める代わりに左クロップで密度を維持
付録 C — bblog 適用候補(低コスト順)
- セリフ見出し + モノメタデータのペアリング — 投稿見出しはセリフ、日付・タグ・読了時間はモノ。CSS だけでテンプレート脱却(mintlify/resend 公式)
- インクテキスト + 単一アクセントの規律 —
rgba(18,18,18,0.75)本文 + アクセント1色リンク(heypocket/cursor) - CSS Scroll-Driven Animations — TOC 進行インジケーター、記事一覧の進入リビール。
@supports (animation-timeline: view())フォールバック。それ自体が技術投稿の題材 - 1px ヘアライン罫線の区画 + 十字マーカー — 影・カードの代わりにボーダーで密度(browserbase/mintlify/elevenlabs)
- 蛍光ペンハイライト見出し —
box-decoration-break二行(browserbase) - video の代わりに DOM タイピングデモ — コードブロックが実際にタイピングされる CSS アニメーション。GIF に比べ鮮明・軽量(granola/cursor)
- スティッキーアコーディオンのスクロールナラティブ — シリーズ/プロジェクト紹介ページに
position: sticky+ アクティブ項目の低コントラスト処理(cardboard/granola)
測定データ: Playwright キャプチャ60枚 + signals.json 10件(2026-07-11 実測)。サイト別の詳細分析は別文書。