SaaSサイトの例:ソフトウェア企業14社と、うまくいっている点
優れたSaaSサイトは、製品を一行で説明し、製品そのものを見せ、最初の一歩を無料か低リスクにし、わかりやすい料金ページで金銭面の疑問に答えています。トップページ以外にも、ソフトウェアの購入者が契約前に確認するページ(ドキュメント、更新履歴、導入事例、セキュリティ)を用意しています。ここでは、2026年10月に実際に確認した10のサイトと、よくある状況に使える4つのパターンを含む14のSaaSサイトの例を紹介します。最後にチェックリスト、よくある失敗、自分のサイトの作り方を解説します。
14の例の一覧
| # | 例 | 学べること |
|---|---|---|
| 1 | Linear | 製品画面をメインのビジュアルにし、更新履歴のプレビューを添える |
| 2 | Plausible | 実際のダッシュボードを公開デモとして見せる |
| 3 | Basecamp | 明確な語り口と定額の料金体系 |
| 4 | Cal.com | 手間の少ないサインアップと、FAQに書かれた料金 |
| 5 | Notion | 機能一覧ではなく利用シーンで伝える |
| 6 | Stripe | スタートアップ、大企業、プラットフォームごとのセクション |
| 7 | Supabase | ドキュメント中心で、AIエージェント向けの入口も用意 |
| 8 | Raycast | 証拠としてのコミュニティと拡張機能 |
| 9 | Slackの料金ページ | 詳細な比較表 |
| 10 | Vercel | セクションごとに1社の顧客と1つの数字 |
| 11 | 業界特化型SaaSのサイト | パターン:1つの業界、その業界の言葉、その業界の業務フロー |
| 12 | 開発者向けツールのサイト | パターン:ファーストビューにコードサンプル |
| 13 | 初期段階のSaaSサイト | パターン:1ページ構成、ウェイティングリストかベータ版 |
| 14 | 比較ページ | パターン:「今お使いのツールと自社製品の比較」 |
実際のSaaSサイトと、その優れた点
詳細はすべて2026年10月時点の情報です。
1. Linear
Linearのサイトは、課題の受付からロードマップ、コードレビューまで、ほぼすべてのセクションでサンプルのワークスペースを見せています。下部には更新履歴のプレビューがあり、直近の4件の更新を表示して全履歴へのリンクを添えています。料金ページでは、Free、Basic(年払いでユーザーあたり月10ドル)、Business(年払いで月16ドル)、Enterpriseを、機能の比較表とともに掲載しています。
学べること: トップページに更新履歴があると、製品が着実に改善されていることを低コストで証明できます。詳しくは更新履歴ページの作り方をご覧ください。
2. Plausible
Plausibleのトップページは、製品をプライバシーに配慮したGoogle Analyticsの代替として位置づけ、クレジットカード不要の30日間無料トライアルを提供し、その隣に「ライブデモを見る」を配置しています。このデモはPlausible自身の実際の分析ダッシュボードで、誰でも閲覧できます。トップページには、月払いと年払いを切り替えられる料金表もすべて掲載されています。
学べること: 機密性のないデータで製品をお見せできるなら、公開デモは「実際にどう見えるのか」という疑問に、どんなスクリーンショットよりも的確に答えられます。
3. Basecamp
Basecampのトップページは、CEOによる長めの一人称の手紙、顧客の動画、ライブのデモクラスを使っています。料金はユーザー単位ではなくパッケージごとの定額制で、クレジットカード不要の30日間無料トライアルがあり、終了時に自動で課金されることもありません。
学べること: 料金モデルも訴求ポイントになり得ます。競合より単純な場合は、はっきりと伝えましょう。
4. Cal.com
Cal.comは、ヒーローセクションにGoogleアカウントとメールでのサインアップを置き、「クレジットカードは不要」と明記しています。また、「利用の流れ」を3ステップで示し、料金を明確に書いたFAQを載せています(個人は無料、Teamsはユーザーあたり月16ドル、Organizationsはユーザーあたり月37ドル)。
学べること: トップページのFAQは、放っておくとサポートメールになる質問をあらかじめ解消してくれます。
5. Notion
Notionのトップページは、製品を3つの用途を軸に紹介し、製品フィードバックの整理や週次レポートの自動化といった具体的な利用シーンを並べています。料金ページには、返金、決済の失敗、シート数、学生割引などを扱う長いFAQがあります。
学べること: 購入者は、機能だけでなく解約や返金についても説明している料金ページを信頼しやすくなります。
6. Stripe
Stripeのトップページは、すべての人に同じメッセージを伝えるのではなく、スタートアップ、大企業、プラットフォームそれぞれに専用のセクションと事例を用意しています。
学べること: さまざまな規模の顧客に販売しているなら、それぞれの顧客が「自分と似た事例」を見られるセクションを設けましょう。
7. Supabase
Supabaseのサイトは、製品の機能(データベース、認証、ストレージ、関数)を前面に出し、ドキュメントへ直接リンクしています。私たちが確認した時点では、ページはAIエージェントに対しても、機械可読な入口を案内していました。具体的には、MCPサーバー、llms.txtのドキュメント索引、各ページのMarkdown版です。
学べること: 開発者向け製品では、良質なドキュメントがそのままマーケティングになります。AIコーディングツールが読みやすくすることも、その一部になりつつあります。
8. Raycast
Raycastは、拡張機能ストア、名前入りの推薦文が並ぶ大きな領域、そしてコミュニティのチャンネルの規模を示し、その後に開発者向けの拡張機能作成への案内を置いています。
学べること: エコシステム(拡張機能、テンプレート、連携)は、他の人があなたの製品に時間を投資している証拠になります。
9. Slackの料金ページ
Slackの料金ページは、各プランのカードに月額と年額の価格を表示し、1つのプランに「お得」のラベルを付け、そのあとに分野(コラボレーション、AI、セキュリティ、コンプライアンス、管理)ごとにまとめた長い比較表を置いています。無料プランでは「メッセージ履歴は90日間」など、具体的な上限を明記しています。
学べること: 上限は数字で示しましょう。「履歴は限定的」よりも「履歴は90日間」の方がはるかに明確です。
10. Vercel
Vercelのトップページは、3つの利用者層に分かれており、各セクションに1社の顧客と1つの利用数字を組み合わせています。
学べること: 一つひとつの主張に具体的な裏付けを付けると、ロゴが並んでいるだけよりも説得力が増します。
真似できるSaaSサイトのパターン
11. 業界特化型SaaSのサイト
1つの業界(歯科医院、ジム、不動産管理会社など)向けのソフトウェアは、見出しにその業界の言葉を使い、その世界の現実的なデータを使った画面を見せ、置き換える既存ツールの名前を挙げるべきです。その業界で標準的に使われるツールとの連携は、ページの上位に配置しましょう。
12. 開発者向けツールのサイト
短いコードサンプルやターミナルのコマンドをファーストビューに置き、ドキュメントへのリンクをメインのナビゲーションに入れ、数分で動く「クイックスタート」を見せましょう。開発者は、ドキュメントを見て製品を判断することがよくあります。
13. 初期段階のSaaSサイト
ローンチ前に必要なのは1ページだけです。課題、約束する解決策、スクリーンショットかプロトタイプ、そしてウェイティングリストかベータ版のフォームです。料金は自信を持てるようになってから追加しましょう。詳しくはSaaS MVPの作り方をご覧ください。
14. 比較ページ
既知のツールから乗り換えようとしている人のためのページです。違いを公平にまとめた表、既存ツールのままでよい人の特徴、そして移行方法を載せます。たとえばPlausibleは、トップページから「Google Analyticsとの比較」ページと移行ガイドにリンクしています。
優れたSaaSサイトに共通すること
- 一行で伝わる役割。 見出しが、誰のために何をする製品かを示しています。
- 見える製品。 スクリーンショット、短い動画、またはライブデモ。
- 低リスクな最初の一歩。 無料プラン、トライアル、またはデモ。カードの登録が必要なら、事前に明記します。
- セルフサービスのプランは料金を公開。 上限は数字で示します。
- 具体的な実績。 名前の挙がった顧客、実際の声、背景のわかる数字。
- 懸念への回答。 セキュリティ、データプライバシー、返金、移行。
- 活動の兆し。 更新履歴、最近の投稿、リリースノート。
- サポートへの明確な道筋。 ドキュメント、ヘルプセンター、連絡先リンク。
よくある失敗
- 製品ではなくカテゴリーを説明する。 「チームのためのAI搭載プラットフォーム」は、どんな製品にも当てはまってしまいます。
- スクリーンショットの代わりに抽象的なイラストを使う。
- 料金を隠す。 誰とも話さずに購入できるプランの料金を隠してしまう。
- 実績を捏造する。 架空のロゴ、根拠のない利用者数、ストック写真の推薦文。
- 結果を示さない機能一覧。 各機能で何ができるようになるのかを書きましょう。
- 2回目の訪問者への導線がない。 再訪問者には、目立つログインが必要です。
- モバイルを無視する。 デスクトップ向けソフトウェアでも、最初にサイトを見るのはスマートフォンという人が多くいます。
自分のSaaSサイトの作り方
- 中心となるメッセージを書く: 誰のための製品か、どんな仕事をするのか、今使っているものより何が優れているのか。
- ページを一覧にする: まずはトップページ、料金、サインアップ、ログイン、利用規約とプライバシーポリシー。次にドキュメントと更新履歴。
- 実績を集める: ベータ版ユーザーの声、スクリーンショット、出典を示せる数字。
- 作る。 Mythexでは、チャットでサイトを説明し、ライブプレビューで確認して、ワンクリックで公開できます。データベース、ログイン、ファイルストレージを備えたWebアプリも作れるため、マーケティングサイトと製品を同じ場所で始められます。単一のローンチページならランディングページ作成ツールから始めるか、テンプレートをご覧ください。すでにエンジニアリングチームやデザインシステムがあるなら、自社のコードベースでサイトを作る方が合う場合もあります。
- 料金ページを丁寧に作る。 SaaS製品の価格設定方法のガイドで、判断のポイントを解説しています。
- 見つけてもらう。 スタートアップのためのSEOをご覧ください。
事例の選び方
2026年10月に、挙げた各ページを確認し、その時点で表示されていた内容だけを記述しています。料金はその時点でそのページに掲載されていた価格です。これらの企業のアクセス解析データは把握していないため、どのページが最も成果を上げているかについては言及していません。パターンは一般的な形式を一般的な言葉で説明したものです。
よくある質問
SaaSのサイトにはどのページが必要ですか?
最低限必要なのは、製品を説明するトップページ、料金ページ、サインアップとログイン、そして利用規約とプライバシーポリシーなどの法的ページです。事業が成長したら、ドキュメントやヘルプセンター、更新履歴、導入事例、セキュリティのページ、そして乗り換え元となるツールとの比較ページを追加しましょう。
SaaSサイトで料金を公開すべきですか?
営業担当と話さなくてもサインアップできるなら、公開することをおすすめします。公開価格は、訪問者が必ず抱く疑問に答え、問い合わせのメールを減らせます。多くのSaaS企業は、セルフサービスのプランは公開し、最上位プランだけを「営業に問い合わせ」にしています。2026年10月時点のSlack、Notion、Linearもこの方式です。
SaaSのトップページを効果的にするには?
製品が何をしてくれるかが分かる見出し、実際の製品の画面(スクリーンショットやライブデモ)、無料サインアップや無料トライアルといった主要な行動喚起は1つだけにすること、名前の挙がった顧客による具体的な実績、そして料金、導入までの時間、データプライバシーといったよくある懸念への簡潔な回答が効果的です。
マーケティングサイトとアプリは別々に用意する必要がありますか?
通常は分けた方が効果的です。マーケティングサイトは公開されていて検索や表示速度に最適化し、アプリはログインの後ろに置きます。同じドメインに置くこともできます(たとえばサイトはルートに、アプリは /app またはサブドメインに配置)。小規模な製品なら、1つのプロジェクトで両方を用意しても構いません。