Style · グラデーション

グラデーションWebデザインの参考例とAIプロンプト

背景・見出し・UIに鮮やかなグラデーションを効かせるAIプロンプト集。Stripe系・Figma系のモダンなSaaS表現。

Designs012 Styleグラデーション Keywordグラデーション

グラデーションについて

Editor's Note

鮮やかな多色グラデを主役にしたモダンな表現。Stripe、Figma、Linear、Vercel などが牽引し、SaaSの今っぽい表情として定着しました。背景・見出し・ボタン・メッシュグラデと、CSSで作れる範囲が広いのも魅力です。画像もJavaScriptも使わずに華やかさを作れるため、LCPに直接効きます。注意点は2つ。グラデには縞が出やすいので5%程度のノイズを重ねること、そして背景が華やかなぶんテキストは引き算し、コントラストを必ず実測することです。

グラデーションの視覚パラメータ

#0F172A 地
#6366F1 起点
#EC4899 中間
#F59E0B 終点

書体: サンセリフ。見出しの一部だけグラデで抜く
形: 角丸12〜16px。影に色を乗せる
動き: グラデの位置をゆっくり動かす

よく使われる場面

モダンなSaaSプロダクトのLP
開発者向けツール・API
スタートアップ・Web3プロジェクト
クリエイティブ系イベント
若年層向けモバイルアプリ

成功のポイント

色は2-3色で留め、近似色で調和させる
メッシュグラデはぼかしを大きく
テキストに乗せるなら背景側で暗部を作る
CSS conic-gradient + @property で動きが出せる
AdSenseなど広告との色衝突を避ける

このスタイルのデザイン

12 / グラデーション

マスコットが見守る新規登録画面

丸みとパステル、CSSだけで組んだマスコットで登録の緊張をほどくサインアップ画面。パスワード強度は点数ではなく励ましの言葉で返し、3ステップの進捗を先に見せます。

認証

トレーディングカード風のポートフォリオ

ポケカ・MTG・遊戯王などTCG（Trading Card Game）のカードフォーマットを再構築したポートフォリオ。レア度ティア・ホロ箔反射・ステータス値で「コレクションしたくなる作品集」に変換する尖った設計。

ポートフォリオ

スマホフレーム重ねの3画面アプリショーケース

モバイルアプリのプロダクトサイト向けに、傾けた3枚のスマホフレームに UI スクリーンを並べるショーケース。フィットネス・健康・SaaS モバイルアプリの定番表現を CSS だけで構築する尖った設計。

アプリ画面

アイソメトリック投影の機能紹介セクション

30度傾斜の擬似3DでUIカードを浮かべる、未来感のあるアイソメトリック機能紹介。Stripe・Linear・Vercel系のモダンSaaSの定番表現を CSS だけで再現する尖った設計。

機能紹介

パステル×マスコットの「かわいい」CTAセクション

日本発の「kawaii」美学を再構築した、パステル配色とマスコットキャラのCTAセクション。Z世代の女性向け・コスメ・サンリオ系プロダクトに刺さる、ふわふわで愛され系の遊び心ある設計。

CTA

Memphis Group調・幾何カオスのCTAセクション

1980年代 Memphis Group の意匠を引用した、原色・波線・幾何形のカオスが踊るCTAセクション。退屈なフラットデザインを破壊して「楽しさ」を直接ぶつける尖った選択。

CTA

ヴェイパーウェイヴの夕焼けレトログリッド・ヒーロー

マゼンタ・パープルの夕焼けに地平線まで伸びるレトログリッド、大理石像、ローマン書体の日本語タイポを重ねるヴェイパーウェイヴ系ヒーロー。80s ノスタルジーとインターネット黎明期の美学が融合した尖った表現。

ヒーロー

Y2Kクロームベベルとオーブの料金プラン

2000年代初頭の Frutiger Aero / Mac OS X Aqua / 透明クロームを再構築した Y2K 風料金プラン。鏡面ベベル・色付き光沢オーブ・虹色グラデで「ソフトウェアパッケージ」感を演出する。

価格表

ネオン発光のナイトライフ系ポートフォリオ

暗背景にホットピンクとシアンの発光色を重ねるネオン系ポートフォリオ。ナイトクラブ・音楽・ゲーム・メタバースの世界観を Web に持ち込む、夜の街の空気を持つ作品集。

ポートフォリオ

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

Stripe/Linear系のモダンなSaaSサイトで主流の、暗背景にカラフルなメッシュグラデーションを敷くヒーローセクション。CSSの conic-gradient + blur で画像を使わずに鮮やかに仕上げる構成。