DESIGN.md Templates

Appearance

スタートアップランディング デザインインスピレーション ​

一枚で全てを伝える。スクロールが物語 -- これがスタートアップランディングページの本質だ。Linear、Arc、Raycast、そして成功するSaaSプロダクトに共通するのは、ヒーローで心を掴み、機能で納得させ、価格で決断させるストーリーテリングである。漆黒の背景にグラデーションが浮かぶ世界で、プロダクトの価値を一気に伝える。

このページの使い方

スクロールするだけでデザインのアイデアが得られるように設計しています。各セクションにインラインHTMLのビジュアル例を配置しているため、コードを読まなくても視覚的にパターンを把握できます。

デザイン哲学 -- 一枚のストーリー ​

ヒーローで掴み、機能で納得、価格で決断。

ランディングページは映画の予告編。2時間の映画を3分に凝縮するように、プロダクトの全てを1ページに凝縮する。スクロールの各セクションが物語の章となり、最後のCTAでアクションを起こさせる。

なぜグラデーションCTAなのか ​

  • 視線誘導: 暗い画面上でグラデーションが最も目を引く
  • 先進性: グラデーションはテック系プロダクトの「今」を象徴する
  • グロー効果: ボタンが発光することで「押したい」衝動を生む

以下が、この哲学を体現したランディングページのプレビューである:

Velocity
FeaturesPricingGet Started
Now in Public Beta
Build faster.
Ship smarter.
開発ワークフローを革新する次世代プラットフォーム。チームの生産性を10倍に。
Start Free TrialView Demo
Trusted by
Company ACompany BCompany CCompany D
⚡
Lightning Fast
ビルド時間を90%短縮。インクリメンタルビルドで変更分のみを処理。
🔒
Enterprise Security
SOC2 Type II準拠。E2E暗号化とゼロトラストアーキテクチャ。
⚙
Seamless Integration
GitHub、GitLab、Bitbucketと完全連携。既存ワークフローをそのまま活用。

カラーパレット -- 漆黒とグラデーション ​

スタートアップLPの背景は漆黒。#000000から#111111へのグラデーションでセクション間の奥行きを表現する。

Background Hierarchy

hero
#000000
base
#0a0a0a
section
#111111
surface
#1a1a1a

グラデーションCTA ​

Gradient CTA
Secondary
Ghost Button
Glow Effect: box-shadow 0 0 40px rgba(102,126,234,0.30)
Token値役割
bg-hero#000000ヒーロー
bg-section#111111交互セクション
bg-surface#1a1a1aカード
text-primary#ffffff見出し
text-muted#888888説明文
accent-gradientlinear-gradient(135deg, #667eea, #764ba2)CTA

タイポグラフィ -- 一言で伝える ​

ランディングページの見出しは短く、太く、大きく。72pxの一行が全てを語る。

Ship 10x faster.
開発の全てを一つのプラットフォームに。設計から公開まで、かつてない速さで。
Inter / 48px / Weight 700 / LS -2px

コンポーネント -- 価格テーブル ​

Starter
$0
/month
3 projects
1GB storage
Community support
Get Started
Popular
Pro
$29
/month
Unlimited projects
100GB storage
Priority support
Start Free Trial
Enterprise
Custom
contact us
Custom limits
Dedicated infra
24/7 support
Contact Sales

レイアウト -- スクロールストーリー構造 ​

Page Structure

Fixed Nav (blur backdrop)
Hero (100vh, gradient CTA)
Logo Strip (Trusted by)
Feature Grid (3 columns)
Testimonial
Pricing Table (3 plans)
Final CTA Section

使い方ガイド ​

Stitch への投入方法 ​

  1. /Users/takehiro/Documents/WorkSpace/otani/Skills/create-design/templates/STARTUP_LANDING.md をプロジェクトの DESIGN.md にコピー
  2. グラデーション色をブランドカラーに変更
  3. Stitch に「この DESIGN.md に従ってランディングページを作成してください」と指示

適したプロジェクト ​

  • SaaSプロダクトのLP
  • スタートアップの紹介サイト
  • 開発者ツールのランディング
  • プロダクトハントのリリースページ

不向きなプロジェクト ​

  • 複数ページのWebサイト
  • ECサイト
  • ブログ・メディアサイト

パフォーマンス注意

グラデーションのbox-shadowやblur効果はGPUを使用します。モバイルでの過度な使用は描画性能に影響するため、グローの半径やブラー量をモバイルでは縮小することを推奨します。