LP SaaS・スタートアップ — 2026
自主制作
Pulseboard
チーム向け業務ダッシュボードSaaSの新規獲得LP。「機能」ではなく「景色」を売る構成で、検討時の不安を先回りで潰す。
想定クライアントと課題
新規プロダクト Pulseboard（業務ダッシュボードSaaS）を立ち上げたスタートアップ。プロダクトはエンジニアの間で口コミで広がり始めているものの、検索広告や紹介経由で訪れた人に「プロダクトの全体像」を1ページで理解させる入口がない、というのが課題でした。
特に以下の3点が壁になっていました：
- 機能を全部並べてしまうと、結局何ができるサービスなのか伝わらない
- 「無料で試す」のハードルが、入力フォームの面倒さで下がっていない
- 既存のSlackやNotionと「置き換えるのか／併用なのか」が不明確で、検討から外される
提案理由
「機能」ではなく「景色」を売る構成に切り替えました。「チームの動きが、ひと目でわかる」というベネフィットを最上段に置き、ヒーローのすぐ下にダッシュボードUIを大きく配置することで、スクロール前にプロダクト価値が頭に入る設計にしました。
スクロール順は 問題 → 機能 → プロダクトの動き → 料金 → FAQ → CTA。意思決定の流れに沿わせることで、料金ページに辿り着く前に納得を積み上げます。
「置き換えではなく集約する」というポジショニングは FAQ で明文化し、検討時の不安を先回りで潰しました。
デザイン意図
- 黒・白・アクセント（emerald）の3色のみ で構成。装飾より構造で見せる方針
- グリッドの線をそのままUI言語に：ヒーロー背景の薄いグリッド、セクション境界、カード間の
gap-pxの白線。「整っている、計測している」印象に寄与 - モノスペースフォントの活用：バージョンバッジ・料金・ターミナル風セクションで、開発チームの「現場感」を演出
- 角丸はほぼゼロ。シャープさを徹底
技術選定理由
| 領域 | 選定 | 理由 |
|---|---|---|
| フレームワーク | Astro 5 | LPは静的が最強。ビルド時間・CDN配信・初期表示の三拍子 |
| スタイリング | Tailwind CSS v4 | デザイントークンをCSS変数で一元管理。修正容易性が高い |
| デプロイ | Cloudflare Pages | グローバルCDN・無料枠・Git連携で運用負荷ゼロ |
| 計測 | Cloudflare Web Analytics | Cookie不要・GDPR配慮済み。導入が1行 |
実装の特徴は、ダッシュボードのUIモックを画像ではなくHTML/CSSで描いたこと。読み込みが速く、テキスト編集も容易で、実プロダクトのUIアップデートに追従しやすい構成にしてあります。