Style · グラデーション

グラデーションなWebデザインのAIプロンプト集

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

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

グラデーションについて

Editor's Note

グラデーションスタイルは鮮やかな多色グラデを主役にしたモダンな表現。Stripe、Figma、Linear、Vercelなどが牽引し、SaaSの「今っぽい」表情として定着しました。背景・見出し・ボタン・メッシュグラデ・conic-gradientなどCSSで作れる範囲が広いのも魅力。

よく使われる場面

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

成功のポイント

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

このスタイルのデザイン

11 / グラデーション

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

ポケカ・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 で画像を使わずに鮮やかに仕上げる構成。