B2B SaaS のロゴは、「先進的に見えて、かつ信頼できる」の両立が必要です。先進性に振りすぎると軽く、信頼に振りすぎると古く見える。Stripe・Linear・Vercel・Notion のような上位 SaaS のロゴを並べると、共通の引き算ルールが見えてきます。
この記事では、SaaS ロゴで効きやすい 4 つの設計指針を、サンプルとダーク／ライト比較で示します。
SaaS ロゴが解くべき矛盾
「先進性」と「信頼性」は本来逆方向のベクトルです。先進的に見せようとすると尖り、信頼に寄せると保守的になる。SaaS ロゴはこの 2 軸の中間点を狙います。
4 つの設計指針
1. アイコン分離可能設計
SaaS のロゴは「Web ヘッダー（横長）」「App アイコン（正方形）」「favicon（16/32px）」「OG 画像（1200×630）」と、毎日 4〜5 種類のアスペクトで使われます。シンボルとロゴタイプが1 つの塊として絡まっていると派生で全部やり直しになるので、シンボル単体で意味が成立するように分けて設計します。
2. Sans Serif（Inter / Geist / Pretendard）
B2B SaaS で広く使われるのは Inter・Geist・Pretendard 系の幾何学 Sans Serif。明朝やセリフは「先進性」を弱め、Display Serif は装飾的になりすぎます。文字間は通常より 2〜3% 詰め、太さは Medium または SemiBold（500〜600）が安全圏。Bold だと圧が強すぎ、Regular だと UI に埋もれます。
3. 彩度を抑えた 1 アクセント色
Stripe・Linear・Vercel・Notion などの上位 SaaS に共通するのは、黒系ベース + 彩度を抑えたアクセント 1 色の配色。Brand color 1 つ、Neutral 4〜5 段階の合計 5〜6 色で UI と地続きにすると、ダッシュボード内で浮きません。蛍光色や原色の RGB をそのまま使うと「Web2 のスタートアップ」感が強くなります。
4. ダークモード対応の前提
B2B SaaS は使う側もダークモードのことが多く、ロゴが黒い場合は反転版（白／淡色）が必須。ロゴ内で明暗が混ざる構成（黒シンボル + 灰文字）はダークモードで読めなくなるので、シンボル・文字とも単色に統一しておくと反転が一発で効きます。
ライト／ダーク両モードの確認
Web ヘッダーは白背景、App アイコンや一部 UI はダーク背景、と1 日のうちに両方使われます。同じロゴを白／黒で並べて、どちらも違和感がないかを必ず確認します。
ライト（左）／ダーク（右）両モードで違和感ないか確認
SaaS 向けロゴサンプル
LogoLab AI で生成した SaaS 向けサンプルを 4 つ。いずれもシンボル分離可能・幾何学 Sans Serif・1 アクセント色、で構成されています。
AXIS
PRISMA
Orbital
HEXA Tech
まとめ
SaaS ロゴの「先進性 × 信頼性」は、シンボル分離・幾何学 Sans Serif・1 アクセント色・ダーク対応の 4 つで再現できます。Stripe・Linear・Vercel・Notion が長年このルールから動いていないのは、それが SaaS UI と最も馴染むからです。IT・SaaS 向けロゴ作成ガイドに App アイコン作成手順もまとめています。
LogoLab AI は IT 業種テンプレートで Sans Serif + 単一シンボルの構成を初期提案します。SVG なので Web・App・OG・favicon にそのまま展開可能。¥2,980 で 1 案買い切り。