サイトを開く
Purpose-built for planning and building products with AI agents.
このデザインを再現するAIプロンプト
Cursor / Claude Code / v0 にこのまま貼り付けると、近いトーンのLPが生成できます。
プロジェクト管理SaaSのLPを作って。Next.js + Tailwind。ダークモードベース（背景 #08090a）、フォントはInter全面採用、アクセントカラーはネイビーから紫へのグラデーション (#5e6ad2 → #8d8df0)。ヒーローには製品UIの大きなスクリーンショットを斜めに配置、ホバーで微小なtilt。各機能セクションでも実際のUIモック中心。ページトップにスティッキーナビ。SF/SaaSテックの空気感。
デザインの特徴
プロジェクト管理SaaSの代名詞的存在。Inter sansを規律的に使い、ネイビー #5e6ad2 をベースにしたグラデーションが製品の「速さ」を伝える。ダークモードがデフォルトで、UI スクリーンショットを中心に据えた製品中心の構成。ホバーで色が変わる細やかなインタラクション、Lightning fastなページ遷移が体験そのものを訴求するメッセージ。
Design Tokens（DOM解析データ）
このサイトを 1440×900 でレンダリングして、実際のCSS値から自動抽出した数値データです。「同じ感じ」を再現する材料になります。
カラーロール
Background
#08090aText
#f7f8f8Color #1
#f7f8f8Color #2
#ffffffColor #3
#8a8f98Color #4
#d0d6e0Color #5
#62666dタイポグラフィ
| 要素 | Font | Size | Weight | Line | Tracking |
|---|---|---|---|---|---|
| h1 | Inter Variable |
64px | 510 | 64px | -1.408px |
| h2 | Inter Variable |
48px | 510 | 48px | -1.056px |
| h3 | Inter Variable |
20px | 590 | 26.6px | -0.24px |
| 本文 | Inter Variable |
15px | 400 | 24px | -0.165px |
| リンク | Inter Variable |
14px | 510 | 21px | normal |
| ボタン | Inter Variable |
13px | 400 | 19.5px | normal |
使用フォント頻度
Inter Variable798箇所
Berkeley Mono2箇所
スケール・形状
- 角丸スケール
- 6px / 9999px / 12px / 8px / 400px / 9px / 16px / 4px
- シャドウ
- 5パターン使用
- セクション余白(pt/pb)
- 128-128px / 128-128px / 128-128px / 128-128px
- コンテナ幅
- width: 1440px / max-width: none
- ナビゲーション
- 高さ 73px / position: fixed
