鮮やかなメッシュグラデーションのSaaSヒーロー

Stripe、Linear、Vercel——2020年代のモダンSaaSは、ある共通の表情を持っています。複数のグラデーションを溶け合わせた、彩度の高い「メッシュ背景」のヒーローです。写真でもイラストでもない、色そのものが主役のこの背景は、いまや「先進的なテック企業」を示す視覚的な合言葉になっています。

色がブランドの第一声になる

ベタ塗りの背景は無難ですが、記憶に残りません。ストックフォトの背景は、どこかで見た既視感を呼びます。メッシュグラデーションは、その中間を埋める——抽象的でありながら、配色の選択にブランドの個性を込められる。訪問者は製品説明を読む前に、まず背景の色からブランドのトーンを受け取ります。色彩そのものが、ヒーローの第一声になるのです。

軽さという見過ごされがちな利点

メッシュ背景の実装は、画像を一切使いません。複数のラジアル／コニックグラデーションをCSSで重ねるだけ——画像0、JavaScript0で実現できます。これはLCP（最大コンテンツの描画時間）に直接効く利点です。見た目が華やかなのにページは軽い、という両立が可能で、さらに配色を少し変えるだけで季節キャンペーンやテーマ切り替えにも転用できます。

仕上げの判断軸

メッシュは「重ねる」のがコツです。単色のコニックグラデより、2〜3個のラジアルグラデーションを重ねたほうが深みが出ます。グラデーションには縞（バンディング）が出やすいので、5%程度のノイズオーバーレイで消すこと。背景が華やかな分、テキストは引き算します——白で抜き、彩色するのはH1の2行目だけ。そして最重要、文字と背景のコントラストはWCAG AA以上をDevToolsやaxeで必ず実測することです。