Style · SaaS
SaaS Webデザインの参考例とAIプロンプト
B2B SaaSプロダクトらしい機能ファースト・実用感・プレイヤーロゴ帯などのAIプロンプト集。
このスタイルのデザイン
寒色グラデーションのAIツール機能紹介
紺の地に水色から藍色へのグラデーションを重ねた、AI議事録ツールの機能紹介セクション。見出しの一部だけを文字の幅で塗り、大きなカード1枚と小さなカード3枚で「何がどれだけ減るか」を数字と帯の長さで見せる。
未保存の変更を見失わせないSaaS設定画面
左に節の目次、各節は左に説明・右に入力の2列で組むダークテーマのSaaS設定画面。変更した項目の数を数える未保存バー、役割を選べるメンバー一覧、名前を打ち込むまで押せない削除ボタンまでを備え、設定を触る人の不安を順に潰していく。
数字から読ませるSaaS管理画面
Linear や Vercel の系譜にある、装飾を抑えた実務向けSaaS管理画面の概要ページ。左に件数付きのメニュー、上に指標カード4枚、中央に推移グラフと最近の動き、下に状態を文字でも示す一覧を置き、ログインした人が最初の数秒で状況をつかめる順に並べる。
選択肢で絞り込む右下のサポートチャット
Webサイトの右下に常駐する問い合わせ用のチャットウィジェット。用件を選択肢で絞り込む自動応答、営業時間に応じて約束を変える表示、時間外はメールで引き取る導線、閉じている間の未読数までを備える。
流れて出るAIアシスタントのチャット画面
左に会話の履歴、中央に質問と回答を並べるAIアシスタント型のチャット画面。回答が一文字ずつ流れて出る表示、生成の停止、コードのコピー、日本語入力の変換確定で誤送信しない入力欄までを1枚で再現する。
絞り込みと件数を先に見せる商品検索結果
左に絞り込み、上に適用中の条件、右に商品カードを置く検索結果ページ。架空の8商品で検索・価格・容量・ブランド・配送・評価を試せ、0件からの条件解除にも対応します。
1画面を大きく見せる資産管理アプリの紹介
端末を1台だけ大きく置き、周囲にUIの断片を浮かせるアプリ紹介セクション。数字そのものを主役にする構図で、家計簿・投資・ヘルスケアなど「自分の数値」を扱うアプリに向く設計。
アイソメトリック倉庫の在庫ダッシュボード
倉庫のラックを45度の立体で並べ、高さで在庫量、色で充填率を同時に読ませる管理画面。表とグラフでは伝わらない「どこが詰まっているか」を一目で示します。
Discord/Slack風の3ペイン・チャット画面
Discord・Slack のチャットUIを再構築した3ペインインターフェイス。サーバーリスト＋チャンネル＋メッセージスレッド＋リアクション・スレッドの定番構成を CSS だけで網羅する尖った設計。
3画面を重ねるアプリUI
モバイルアプリのプロダクトサイト向けに、傾けた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や個人開発のランディングページ最上部に向いた、装飾を削って要点を立てる構成。
SaaSについて
B2Bプロダクトの実用感を中心に据えた設計。機能ファーストの構成、スクリーンショットや動画デモ、導入企業ロゴ帯、料金プラン、ドキュメントリンクなどが必須パーツです。洗練と実直さのバランスが命。買う人・使う人・決裁する人が別人で、検討が数週間から数ヶ月に及ぶ前提で設計します。整列したカードは、担当者がそのまま比較表に書き写せる構造にしておくこと。数値は等幅で組み、ページが担当者の社内プレゼンの代行資料として働くようにします。
「SaaS」でプロンプトを組み立てるSaaSの視覚パラメータ
- #FFFFFF 地
- #101828 文字
- #475467 補助文字
- #444CE7 アクセント
- 書体
- サンセリフ。数値は等幅で揃える
- 形
- 角丸8〜10px。境界1px、影は2段まで
- 動き
- 200〜250ms。UIの挙動に寄せる
よく使われる場面
- B2B SaaSプロダクトのLP
- 開発者向けツール・プラットフォーム
- マーケティング・セールスツール
- プロジェクト管理・コラボツール
- データ分析・BIサービス
成功のポイント
- スクショは実データで信頼感を出す
- ロゴ壁はモノクロで統一感
- 機能は「何ができるか+ベネフィット」で書く
- 料金プランは3プランを基本に
- ドキュメント・SDKへの導線を明確に