2026年のマーケティングサイト・スタック

「モダン」を名乗るマーケティングサイトの多くは、5年遅れている。2021年のWebflowテンプレート、Adobeの2書体のウェブフォント、ヒーローにLottie、マーベル映画並みのサイズのCSSバンドル。そこへ隣でLinearやCursorのページが200msで表示されて、最初のスクロールで差がバレる。

2026年のスタックは10秒で見分けがつく。同じフレームワーク、同じフォント、同じモーション、同じビジュアル密度。これは、優れたマーケティングサイトが実際どう作られているかのブランド別分解であり、次のサイトが通るべき監査でもある。

2026年のスタックは5つのレイヤーでできている

マーケティングサイトを1つのものとして考えるのはやめよう。デザイナーが真似したくなるページは、5つの独立したレイヤーの重ね合わせだ。どれか1つでも外すと、サイト全体が時代遅れに見える。

レイヤーは順に、フレームワークとホスティング、フォント、モーションとインタラクション、ビジュアルシステム、そしてパフォーマンス。2026年にはそれぞれにデフォルトがあり、どのデフォルトにも勝った明確な理由がある。

レイヤー1:フレームワークとホスティングはNext.jsとVercelに収束した

フレームワーク戦争は終わった。Linear、Cursor、v0、Anthropic、OpenAI、Stripe、Vercel、Notionは、みなVercel上でNext.jsを出荷している。偶然ではなく収束だ。この組み合わせなら、静的レンダリング、partial prerendering、エッジキャッシュ、画像最適化、ルート単位のプリフェッチが最初から手に入る。

信頼できる代替案は狭い。AstroとVercelの組み合わせは、コンテンツ中心のサイトでJavaScriptをほぼゼロにしたいインディーSaaSに向く。Framer(同社自身のビルダー)は、デザイン重視のクリエイティブエージェンシーとテンプレート主導のインディー層を押さえている。Webflowは今も多くのページで使われているが、本格的なSaaSの中でのシェアは下がっている。かつてWebflowでトップページを出していたチームは、Next.jsにSanityやContentfulのCMSを組み合わせる方向へ移っている。マーケティングサイトがプロダクトのように振る舞う必要が出た瞬間、天井にぶつかるからだ。

サイトにプロダクト的な面が少しでもあるなら(ライブデータ付きのヒーローセクション、課金と連動した料金ページ、認証付きのドキュメントルート)、Next.jsで出荷しよう。クリエイティブスタジオのパンフレット的サイトならFramerで十分。それ以外はレガシーだ。

レイヤー2:フォントは小さく特定のロースターに収束した

本当に真似したいサイトの書体を見てほしい。ローテーションしているのは同じ6ファミリーだ。Inter とそのディスプレイ版、GeistとGeist Mono、Söhne、Switzer、Tobias、General Sans。これが現役の顔ぶれだ。

デフォルトはInter。LinearはヒーローにInter Display、本文にInterを使う。VercelはGeistとGeist Monoを、v0もVercelサイト自体も含めてあらゆる場所で使う。Anthropicは Söhne に、エディトリアル用のセリフのサブブランドを組み合わせる。StripeはマーケティングもプロダクトもSöhneで通す。OpenAIはSöhneのカスタム版を使う。NotionとFramerはどちらもInter。Cursorはヒーローにカスタムのディスプレイフォント、本文に働き者のサンセリフを使う。

モノスペースのサブトレンドは開発者ツール特有のものだ。Vercel、v0、Cursor、Linear、Anthropicは、アイブロウラベル、コードサンプル、バージョンチップ、小さなキャプションにモノスペースを使う。言わずして「エンジニアリングされている」と伝える書体で、SaaSサイトを2022年ではなく2026年に見せる最速の方法だ。

これらの多くは、サイトと同じドメインでセルフホストされた可変フォントだ。本格的なSaaSではAdobe Fontsがシェアを落としている。レイテンシのコストは現実に効くし、価格でも直接ライセンスが勝つようになったからだ。ペアの選び方はフォントペアリングガイドで解説している。2026年のメタルールはこう。強い可変ファミリー1つとモノ1つで十分。

レイヤー3:モーションは装飾ではなくアフォーダンス

2026年のモーションは、沈黙を埋めるのではなく仕事をしている。見せ場はスクロール駆動、ページ遷移はView Transitions API、マイクロインタラクションはFramer Motionか素のCSSで書かれる。

3つのパターンが支配的だ。ヒーローのコレオグラフィ(Linearの初回描画でのグラデーションの開花、Anthropicの抑制されたタイプのフェード)。スクロールでピン留めするプロダクト演出(Cursorはパネルを固定し、ページがスクロールし、パネルがその場で更新される)。View Transitionによるページ遷移(Vercelとv0はView Transitions APIを使い、ナビゲーションをリロードではなく状態変化に感じさせる)。

本格的なサイトでは、Lottieは静かに引退しつつある。重く、アクセシビリティに敵対的で、2021年に見える。今アニメーションを出しているブランドは、コンポーネントにFramer Motion、見せ場にGSAPかスクロール連動CSS、ナビゲーションにView Transitionsを使う。基準は「アニメーションがある」ではなく「すべての動きに理由がある」だ。

レイヤー4:ビジュアルシステムは幾何学的で、グリッドを外れ、ノイジー

2026年のサイトのビジュアル言語は、文脈なしでも見分けがつく。ヒーロー要素としての大きな幾何学的タイポグラフィ。カラムをはみ出すグリッド外のマイクロスクリーンショット。ネイティブに見えるハイコントラストモードを備えたOKLCHのカラーパレット。フラットなグラデーションに代わるノイジーグラデーション(滑らかなグラデーションにフィルムグレインのノイズを重ねたもの)。ストック写真の代わりに、生成的なSVGのヒーローパターン。

Linearのヒーローが決定版のリファレンスだ。特大ウェイトの一文、柔らかなグラデーションの開花、わずかなパララックスで浮かぶプロダクトのスクリーンショット、単色のアクセントチップ。Stripeのトップページは、スクロールでアニメーションするカスタムSVG構成を使い、文字の背後にはグラデーションジェネレーターがある。Anthropicはセリフ主導のエディトリアルのサブブランドとサンス主導のプロダクトブランドを持ち、その対比が確かな仕事をしている。

共通する一手は抑制だ。アクセントカラーは1色で、使うのは最大でも3、4回。ヒーロー画像は1枚を大きく。サイト全体で書体の声は1つ。2026年に最も「デザインされている」ように見えるブランドは、1ページあたりのビジュアル要素が最も少ないブランドだ。なぜ引き算がセンスに見えるのかはビジュアルヒエラルキーの解説で扱っている。

レイヤー5:パフォーマンスは最後の美的判断

最も見栄えのいいブランドは、最も速く読み込まれる。同じ規律の二通りの表現だ。4Gで1秒以内に描画されないサイトは、見た目に関係なく2026年のサイトではない。

リーダーたちのパターンは一貫している。font-display: swapでプリロードしたセルフホストの可変フォント。Vercel Image Optimizationによる静的生成。ルート単位のプリフェッチ。柔らかなページ遷移のためのView Transitions。クリティカルパス上にサードパーティスクリプトを置かない。スライドに載せられる本物のCore Web Vitalsの数字。

「一瞬で感じる」ナビゲーションパターンは、最も真似しやすい部分だ。リンクにホバーすればNext.jsがルートをプリフェッチする。クリックすればページはキャッシュにあり、View Transitionが遷移を滑らかにする。マーケティングサイトがプロダクトのように感じられる。それが狙いだ。さらに深い話はスピードこそブランドの記事で。

ブランド別分解

原則より具体例のほうが大事だ。名前を挙げたサイトが、表面で実際に何を使っているかを見ていこう。

Linear。 Vercel上のNext.js。InterとInter Display、セルフホスト。コンポーネントのインタラクションにFramer Motion、グラデーションのヒーローにスクロール連動CSS。アクセントカラーは1色、初回描画でのヒーローコレオグラフィ、長いページには固定のCTA。

Cursor。 Vercel上のNext.js。ヒーローにカスタムのディスプレイフォント、本文に働き者のサンセリフ、ラベルにモノ。スクロールピン留めのプロダクト演出が看板の技。

v0とVercel。 Next.js、GeistとGeist Mono、マーケティングルート全体でView Transitions。v0の「ライブプレビュー」ヒーローは、生成されたページを実際に動かしているiframeで、プロダクトが示せる最強の証拠だ。

Anthropic。 Next.js、Söhne、抑制されたモーション(パララックスの小細工ではなくタイプのフェード)、エディトリアル用のセリフのサブブランド。ほとんどの同業よりやることが少なく、だからこそ「プレミアム」に読める。

Stripe。 Next.js、Söhne、ヒーローのカスタムSVG構成、文字の背後のグラデーションジェネレーター、そして10年にわたりフィンテックの基準を打ち立ててきたドキュメント主導のIA。

OpenAI。 Next.js、Söhneに近いカスタムフォント、SaaSのランディングページより美術館に近いミニマルな密度。ヒーローにはページ上のCTAがほぼなく、ブランドにそれを許す余裕があるから成立する。

Notion。 Vercel上のNext.js、Inter、実際のUIが実際のことをしている様子を見せるアニメーション付きプロダクトイラスト。本物のプロダクトビジュアルが多く、ストックの比喩は少ない。

Framer(企業として)。 Framer自身で構築されていて、考えうる最強のドッグフーディングだ。デザイン重視のテンプレート的美学、密度の高いページ、リッチなモーション、そして「こんなサイトが欲しければこのツールを使え」という明快なピッチ。

反例は簡単に見つかる。2018年のWordPressテーマのままで、「ノートPCを使う人々」のストックイラストを載せたSaaSサイトは、最初のスクロール前に10年前に見える。遅い自動再生動画と4つのCTAがあるヒーローのクリエイティブエージェンシーのトップページは、ウェブサイトのふりをしたピッチデッキに読める。教訓はブランドではなくカテゴリにある。

どんなスタックでも評価するための5つの質問

スタックを真似する前に評価しよう。5つの質問を、この順で。

1. ナビゲーションはどんな感触か? スタイルなしコンテンツのちらつきを伴うフルリロードなら、そのスタックは少なくとも1サイクル遅れている。状態変化なら現役だ。
2. ミドルクラスのモバイルで初回描画はどれくらい速いか? 800ms未満が2026年の基準。2秒超えは不合格。
3. 書体はどう読み込まれているか? プリロードされたセルフホストの可変フォントか、フォールバック文字がちらつくサードパーティCDNか。前者はエンジニアリングされて見え、後者は2019年に見える。
4. モーションはメッセージにどう貢献しているか? コンテンツに合わせて振り付けられているか、装飾として貼り付けられているか。Lottieのヒーローアニメーションは分かりやすい兆候だ。
5. 空のページはどう見えるか? ヒーローとグラデーションを剥がしてみよう。書体、余白、構造だけでブランドとして読めるなら、そのスタックは本物だ。崩れるなら、ただのテンプレートだった。より深い話は空の状態こそプロダクトの記事で。

一晩でサイトを古くするアンチパターン

公開した瞬間にサイトを時代遅れにする6つのパターン。

• ドラッグ&ドロップ・ビルダーのごった煮。 マーケットプレイスのセクションを12個ドラッグして組み上げたページは、12個のマーケットプレイスのセクションにしか見えない。次のものに対してデザインされたものが何もない。
• 誰の記憶にも残らないイラストパック。 他のSaaSも使う同じ3つのライブラリから来た、フラットな背景に立つ汎用ベクターの人々。記憶に残らない視覚ノイズ。
• 全セクションにLottieアニメーション。 重く、アクセシビリティに敵対的で、同じテンプレートマーケットプレイス由来なので全部同じイージングカーブを使っている。
• 600KBのCSSを出荷するページビルダー。 CSSバンドルが600KBあるサイトは、パフォーマンスがブランドの判断だということを理解していない。
• 2021年に手書きしたワナ。 一度は丁寧に手書きされ、その後更新されない。構造はきれいなのに、書体は古く、コントラストは間違っている。メンテナンスもスタックの一部だ。
• ヒーローを塞ぐクッキーモーダル。 最初のインタラクションが同意の壁というのは、コンプライアンスの顔をしたスタックの失敗だ。

2026年スタック監査

現在のマーケティングサイトを、次の7つの質問で採点しよう。「いいえ」が5つ以上なら、2026年のスタックにはいない。

1. 4G接続でページは1秒以内に描画されるか?
2. フォントはファーストビューでプリロードされたセルフホストの可変フォントか?
3. ルート間のナビゲーションは、リロードではなく状態変化に感じられるか?
4. ページ上でアクセントカラーは1色で、使用は4回以下か?
5. すべてのアニメーションに明確な役目(アフォード、表示、遷移)があるか?
6. プロダクトのビジュアルは、ストックや3D的な抽象ではなく、本物のプロダクトの本物のスクリーンショットか?
7. ヒーローを取り除いても、ページはブランドらしく読めるか?

「はい」が5つ以上なら、2026年のスタックにいる。5つ未満なら、次のリデザインはビジュアルのリフレッシュではなくスタックのアップグレードだ。この監査が属するより広いパターンマップは2026年のウェブデザイントレンド、ページそのものの原則レイヤーはランディングページデザインの原則、残りはタイポグラフィシステムデザインとウェブデザインの原則がカバーしている。

よくある質問

2026年のマーケティングサイトで、Next.jsは本当に唯一の信頼できるフレームワークなのか?

本格的なSaaSやブランドサイトなら、事実上そうだ。AstroはJavaScriptをほぼ必要としないコンテンツ中心のサイトなら信頼できる。Framerはデザイン重視のクリエイティブエージェンシー向けの面で信頼できる。それ以外は天井付きで出荷することになり、その天井はサイトがプロダクトのように振る舞う必要が出た瞬間に表面化する。

すでにちゃんと動いているなら、Webflowから乗り換えるべきか?

見た目だけの理由ではやめておこう。Webflowがサイトの必要なこと(カスタムモーション、ルート単位のプリフェッチ、ビュートランジション、本物のパフォーマンスバジェット)をできなくなったとき、あるいはマーケティングサイトがプロダクトとコンポーネントを共有する必要が出たときに乗り換えよう。パンフレット的サイトで問題なくコンバージョンしているなら、そのままでいい。

小さなブランドならFramer、Webflow、Next.jsのどれ?

モーションとビジュアルシステムが主役の、デザイン重視でテンプレート主導の美学ならFramerが勝つ。マーケティングチームがエンジニアリングなしで更新を出せて、サイトが本当にパンフレット的ならWebflowが勝つ。サイトが本物のプロダクトとコード、コンポーネント、コンテンツを共有する必要があるなら、どこでもNext.jsが勝つ。

2026年のスタックでサイトを作ろう

このスタックは秘密ではない。リーダーたちはみな同じ系統の判断を出荷していて、2026年のサイトと2021年のサイトの差は、集中した1つのプロジェクトで埋められる。フレームワークを選ぶ。可変フォントとモノを選ぶ。ページが本当に必要とする3つのモーションパターンを選ぶ。それ以外は切る。

前のサイクルのWebflowテンプレートではなく、2026年のスタックで作られたマーケティングサイトが欲しいなら、Brainyに依頼してほしい。私たちはNext.js上で、セルフホストの可変フォント、本物のモーション、スライドに載せられるパフォーマンスバジェットを備えたブランドサイトを出荷している。