Style · SaaS
SaaSWebデザインの参考例とAIプロンプト
B2B SaaSプロダクトらしい機能ファースト・実用感・プレイヤーロゴ帯などのAIプロンプト集。
SaaSについて
B2Bプロダクトの実用感を中心に据えた設計。機能ファーストの構成、スクリーンショットや動画デモ、導入企業ロゴ帯、料金プラン、ドキュメントリンクなどが必須パーツです。洗練と実直さのバランスが命。買う人・使う人・決裁する人が別人で、検討が数週間から数ヶ月に及ぶ前提で設計します。整列したカードは、担当者がそのまま比較表に書き写せる構造にしておくこと。数値は等幅で組み、ページが担当者の社内プレゼンの代行資料として働くようにします。
SaaSの視覚パラメータ
- #FFFFFF 地
- #101828 文字
- #475467 補助文字
- #444CE7 アクセント
- 書体
- サンセリフ。数値は等幅で揃える
- 形
- 角丸8〜10px。境界1px、影は2段まで
- 動き
- 200〜250ms。UIの挙動に寄せる
よく使われる場面
- B2B SaaSプロダクトのLP
- 開発者向けツール・プラットフォーム
- マーケティング・セールスツール
- プロジェクト管理・コラボツール
- データ分析・BIサービス
成功のポイント
- スクショは実データで信頼感を出す
- ロゴ壁はモノクロで統一感
- 機能は「何ができるか+ベネフィット」で書く
- 料金プランは3プランを基本に
- ドキュメント・SDKへの導線を明確に
このスタイルのデザイン
絞り込みと件数を先に見せる商品検索結果
左に絞り込み、上に適用中の条件、右にカードグリッドを置いた通販の検索結果ページ。各選択肢に件数を添えてゼロ件を踏ませない設計で、属性が構造化された商材の探索に向きます。
1画面を大きく見せる資産管理アプリの紹介
端末を1台だけ大きく置き、周囲にUIの断片を浮かせるアプリ紹介セクション。数字そのものを主役にする構図で、家計簿・投資・ヘルスケアなど「自分の数値」を扱うアプリに向く設計。
アイソメトリック倉庫の在庫ダッシュボード
倉庫のラックを45度の立体で並べ、高さで在庫量、色で充填率を同時に読ませる管理画面。表とグラフでは伝わらない「どこが詰まっているか」を一目で示します。
Discord/Slack風の3ペイン・チャットインターフェイス
Discord・Slack のチャットUIを再構築した3ペインインターフェイス。サーバーリスト＋チャンネル＋メッセージスレッド＋リアクション・スレッドの定番構成を CSS だけで網羅する尖った設計。
スマホフレーム重ねの3画面アプリショーケース
モバイルアプリのプロダクトサイト向けに、傾けた3枚のスマホフレームに UI スクリーンを並べるショーケース。フィットネス・健康・SaaS モバイルアプリの定番表現を CSS だけで構築する尖った設計。
アイソメトリック投影の機能紹介セクション
30度傾斜の擬似3DでUIカードを浮かべる、未来感のあるアイソメトリック機能紹介。Stripe・Linear・Vercel系のモダンSaaSの定番表現を CSS だけで再現する尖った設計。
B2Bコーポレートの機能紹介セクション
B2B SaaSやエンタープライズ製品向けの機能紹介セクション。落ち着いた寒色配色と整然としたグリッド、データ感のあるアイコンで「実用と信頼」を伝える設計。
鮮やかなメッシュグラデーションのSaaSヒーロー
Stripe/Linear系のモダンなSaaSサイトで主流の、暗背景にカラフルなメッシュグラデーションを敷くヒーローセクション。CSSの conic-gradient + blur で画像を使わずに鮮やかに仕上げる構成。
タイル型グリッドの機能紹介
大小が異なるタイルを組み合わせて 6 機能を並べる、暗背景のベントーグリッド (タイル型レイアウト) の機能紹介セクション。主役の機能を大きく、補助機能を小さく配置することで、説明文を読まなくても重みづけが伝わる設計。
コーポレート向けの多段フッター
ニュースレター帯、5カラムのリンク群、ステータスバッジ、言語切替、SNSアイコンを整理したコーポレートサイト向けの情報密度高めフッター。信頼感の配色と安定したタイポグラフィで、サイト下部に「事務的すぎない」安心感を置く設計。
サイバー調のダッシュボード画面
黒背景にネオンの発光色、モノスペースフォントを組み合わせたサイバーパンク調の管理画面。KPI・ライブチャート・ログテーブル・リージョン別レイテンシを 1 画面にまとめた、開発者向けSaaSの観測系ダッシュボード。
すりガラス調の追従ナビゲーション
半透明のすりガラス越しに背景のパステルが透けて見える、カプセル型の追従ナビゲーション。スクロール時もコンテンツの世界観を壊さず、モダンなSaaSやプロダクトサイトの上部に向きます。
シンプルで洗練されたヒーローセクション
余白を大きくとり、見出しとCTAだけで価値を伝えるミニマルなヒーローセクション。SaaSや個人開発のランディングページ最上部に向いた、装飾を削って要点を立てる構成。