premium-saas-design

プレミアム SaaS デザインフレームワーク

Stanford が2002年に実施した大規模なウェブ信頼性調査（B.J. Fogg ら）では、サイトを信頼できるかどうかを判断する際に、人々が最も頻繁に挙げた要素はビジュアルデザインでした。

このスキルでは、シニアプロダクトチームや UI/UX デザイナーが実践するプロフェッショナルなデザインワークフローを、AI 支援開発向けに応用して紹介します。このフレームワークにより、AI は「推測マシン」から真のデザインパートナーへと変わります。

---

中核となるループ

DEFINE → BUILD → REVIEW → REFINE
   ↑                        │
   └────────────────────────┘

このループがすべてです。実際のプロダクトチームで活用されており、AI と組み合わせると素晴らしい効果を発揮します。

---

7つのコンテキスト資料

AI がプレミアムな成果を生み出すには、コンテキストが必要です。この7つのドキュメントが、AI との「デザイン契約」を形作ります。

1. プロジェクト概要

内容：何を、なぜ、誰のために作るのかを説明する単一のドキュメントです。 目的：AI にプロジェクトの方向性と理解を与えます。

# Project Brief: [Product Name]

## What We're Building
[Description of the product/website]

## Primary Target Audience
- [Persona 1]: [Description]
- [Persona 2]: [Description]

## Goals
1. [Primary goal - e.g., drive signups]
2. [Secondary goal - e.g., build trust]
3. [Tertiary goal - e.g., explain the product]

## Requirements
- Fully responsive (mobile-first)
- Blazing fast performance
- Accessible (WCAG 2.1 AA)
- [Other requirements]

## Sections
1. Hero
2. Trust Logos
3. Features
4. [etc.]

重要なポイント：AI を新しいチームメンバーとして考えてください。コンテキストも伝えずに「ウェブサイトを作って」と頼むことはないはずです。

---

2. コンテンツファイル（セクションごとに1つ）

内容：各セクションのコピーやコンテンツをすべて含む個別のファイルです。 目的：AI がデザインとは切り分けてコンテンツに集中できるようにします。

# Hero Section Content

## Headline
[Main headline text]

## Subheadline
[Supporting text]

## CTA Primary
Text: [Button text]
Action: [What happens on click]

## CTA Secondary
Text: [Link text]
Action: [What happens on click]

## Social Proof (optional)
[Trust indicators, stats, etc.]

---

3. 全体の雰囲気をまとめたムードボード

内容：サイト全体の美的な方向性を示すビジュアルの参考資料です。 目的：「サイトを訪れたとき、全体としてどんな雰囲気に感じてほしいか？」に答えます。

# General Vibe

## Overall Aesthetic
- Theme: [Dark/Light/Mixed]
- Feel: [Modern, Professional, Playful, etc.]
- Color Direction: [Primary color family and why]

## Inspiration References

### Reference 1: [Site Name]
- URL: [link]
- What I Like:
  - [Specific element 1]
  - [Specific element 2]
- Screenshot: [embedded image]

### Reference 2: [Site Name]
- URL: [link]
- What I Like:
  - [Specific element 1]
  - [Specific element 2]
- Screenshot: [embedded image]

## Color Psychology
- Primary Color: [Color] - [Why this color for this audience]
  Example: Turquoise/blue evokes professionalism and trust (important for security products)

## Typography Direction
- Headlines: [Font family, weight, style]
- Body: [Font family, size range]

参考資料の検索先：

• Dribbble（「[industry] SaaS landing page」で検索）
• Awwwards
• SaaS ランディングページの例
• 競合サイト

---

4. セクション別ムードボード

内容：各セクションの詳細な仕様をまとめた、「フランケンシュタイン」方式の資料です。 目的：AI に各セクションの正確なビジュアルの方向性を伝えます。

# Hero Section Specs

## Layout Reference
- URL: [Reference site]
- Screenshot: [embedded]
- What to Copy:
  - Text alignment: [left/center/right]
  - Font hierarchy
  - Button placement

## Navigation Bar
### Components
- Logo: [Position, size]
- Menu Links: [Style, hover effects]
- CTA Button: [Shape, color, glow effects]

### Code Reference (from component library)
```tsx
// Include actual component code from shadcn/21st.dev

ヒーローコンテンツ領域

レイアウト

• [左／右／中央揃え]
• [分割レイアウトの説明]

3D 要素（該当する場合）

• ソース：[Three.js／Sketchfab のリンク]
• 位置：[レイアウト内の配置場所]
• アニメーション：[動きの種類]
• コード：

// Include Three.js or animation code

ライブラリのコンポーネント

プライマリボタン

• ソース：21st.dev
• スタイル：[ピル型、グローアウトラインなど]
• コード：

// Component code

背景エフェクト

• 種類：[グラデーション、パーティクル、グリッドなど]
• ソース：[ライブラリのリンク]
• コード：

// Effect code

アニメーション

• スクロールエフェクト：[パララックス、フェードインなど]
• ホバー状態：[アニメーションする要素]
• 表示時のアニメーション：[段階的、順次など]

**Critical**: Be VERY granular. This is where premium separates from generic.

---

### 5. Style Guide (Living Document)
**What**: Single source of truth for all design specs.
**Purpose**: Ensures consistency across the entire project.

```markdown
# Style Guide

## Design Philosophy
[Brief statement about the visual approach]

## Target Audience
[Who this design serves]

## Color Palette

### Primary
- Main: #[hex] - [Usage: CTAs, key highlights]
- Light: #[hex] - [Usage: hover states]
- Dark: #[hex] - [Usage: pressed states]

### Neutral
- Background: #[hex]
- Surface: #[hex]
- Border: #[hex]
- Text Primary: #[hex]
- Text Secondary: #[hex]

### Accent
- Success: #[hex]
- Warning: #[hex]
- Error: #[hex]

### Do's and Don'ts
DO: [Guidance]
DON'T: [Anti-patterns]

## Typography

### Font Families
- Headlines: [Font name], [fallbacks]
- Body: [Font name], [fallbacks]
- Monospace: [Font name] (for code)

### Scale
- Display: [size]px / [line-height]
- H1: [size]px / [line-height]
- H2: [size]px / [line-height]
- H3: [size]px / [line-height]
- Body: [size]px / [line-height]
- Small: [size]px / [line-height]

## Spacing System
- xs: [value]
- sm: [value]
- md: [value]
- lg: [value]
- xl: [value]
- 2xl: [value]

## Border Radius
- sm: [value]
- md: [value]
- lg: [value]
- full: 9999px

## Shadows
[Shadow definitions]

## Animation
- Duration: [fast/medium/slow values]
- Easing: [easing functions]
- Motion Preferences: Respect prefers-reduced-motion

## Component Patterns
[Common patterns used across the site]

重要：これは継続的に更新するドキュメントです。学びが得られたら、AI が更新してください。

---

6. プロジェクト要件定義書（PRD）

内容：プロジェクト全体の技術仕様です。 目的：使用する技術とその使い方を AI に正確に伝えます。

# Project Requirements Document

## Project Overview
[Brief description]

## Tech Stack
- Framework: [Next.js / Remix / etc.]
- Styling: [Tailwind CSS / CSS Modules / etc.]
- UI Components: [shadcn/ui, Radix, etc.]
- Animation: [Framer Motion / GSAP / etc.]
- 3D: [Three.js / React Three Fiber]
- Icons: [Lucide / Heroicons / etc.]

## Dependencies
```json
{
  "dependencies": {
    // List all required packages
  }
}

ファイル構成

src/
├── app/
│   └── page.tsx
├── components/
│   ├── ui/           # shadcn components
│   ├── sections/     # Page sections
│   └── 3d/           # Three.js components
├── lib/
│   └── utils.ts
└── styles/
    └── globals.css

デザインシステム

• 参照：style-guide.md

ページセクション

セクション	仕様ファイル	優先度
ヒーロー	hero-section.md	P0
特徴	features-section.md	P1
[etc.]	[etc.]	[etc.]

レスポンシブ対応

• モバイル：320px - 767px
• タブレット：768px - 1023px
• デスクトップ：1024px+

パフォーマンス要件

• LCP：< 2.5s
• FID：< 100ms
• CLS：< 0.1

アクセシビリティ

• WCAG 2.1 AA 準拠
• キーボード操作
• スクリーンリーダー対応

---

### 7. Tasks Document
**What**: Step-by-step implementation plan.
**Purpose**: Gives AI a clear execution path.

```markdown
# Implementation Tasks

## Phase 1: Project Setup
- [ ] Initialize Next.js project
- [ ] Install dependencies
- [ ] Configure Tailwind CSS
- [ ] Set up shadcn/ui
- [ ] Create folder structure
- [ ] Configure fonts
- [ ] Set up color variables

## Phase 2: Core Components
- [ ] Build navigation bar
- [ ] Create button variants
- [ ] Set up typography components
- [ ] Create layout components

## Phase 3: Section Building
- [ ] Build Hero section
- [ ] Build Trust Logos section
- [ ] Build Features section
- [ ] [Continue for each section]

## Phase 4: Polish
- [ ] Add animations
- [ ] Optimize images
- [ ] Add loading states
- [ ] Mobile responsiveness pass
- [ ] Accessibility audit

## Phase 5: Launch
- [ ] Performance optimization
- [ ] SEO metadata
- [ ] Final review

---

コンポーネントのリソース

shadcn/ui

基盤となるコンポーネントライブラリです。完全にカスタマイズ可能なコンポーネントをコピーして貼り付けられます。

• ウェブサイト：https://ui.shadcn.com
• 用途：基本コンポーネント（ボタン、入力欄、カードなど）

21st.dev

shadcn/ui を基盤として構築されたプレミアムコンポーネントです。

• ウェブサイト：https://21st.dev
• 用途：アニメーション付きの高度なコンポーネント
• 主な機能：各コンポーネントに以下が含まれます。
  • プレビュー
  • コピーできるコード
  • インストール用 AI プロンプト

Three.js／React Three Fiber

ブラウザーで3Dグラフィックスを扱えます。

• Three.js の例：https://threejs.org/examples/
• 用途：ヒーローの3D要素、インタラクティブな背景

Sketchfab

コミュニティが提供する3Dモデルとアニメーションです。

• ウェブサイト：https://sketchfab.com
• 用途：ヒーローセクション用の3Dアセットをダウンロード

---

ベストプラクティス

1. セクションの分離

セクションを切り替えるたびに、新しいチャットを開始します：

• コンテキストが整理されます（他のセクションの情報が混ざりません）
• コストを抑えられます（消費トークン数が減ります）
• より焦点の合った結果が得られます

2. セクションごとにコミット

各セクションが完成したら：

git add .
git commit -m "feat(landing): add [section-name] section"

これにより、反復作業がうまくいかない場合でも簡単にロールバックできます。

3. 参考画像を含める

プロンプトには必ずスクリーンショットを貼り付けます：

• AI が希望するものを正確に把握できます
• あいまいさが軽減されます
• 目指すデザインに早く収束できます

4. コンポーネントのコードを含める

21st.dev または shadcn のコンポーネントを指定する場合：

• 実際のコードをコピーします
• セクションの仕様に含めます
• AI がそのまま実装できます

5. スタイルガイドを自動更新

ルールファイルを作成します：

# .cursorrules or similar

When building a section and making design decisions that differ from
the style guide, automatically update the style guide to reflect the
new learnings.

6. スクリーンショットを使った反復

変更を依頼する場合：

1. 現在の状態のスクリーンショットを撮ります
2. プロンプトに貼り付けます
3. 変更点を説明します
4. 必要に応じて、元の参考資料にも言及します

---

500ドルと5,000ドルの違い

汎用的な AI の出力	プレミアムなフレームワークの出力
コンテキストなし	コンテキストを網羅した資料
希望を推測	明確な仕様に従う
一貫性のないスタイル	更新され続けるスタイルガイド
ランダムなコンポーネント	厳選されたコンポーネントライブラリ
視覚的な参考資料なし	ムードボード＋スクリーンショット
すべてを一度に構築	セクションごとに分離
反復のループなし	定義 → 構築 → レビュー → 改善

---

プロンプトのテンプレート

スタイルガイドを生成

Based on my mood board and design preferences in [website-sections folder]
and in the [product-brief.md], create a style guide that includes:
- Color palette (with usage guidance)
- Typography scale
- Component styles
- Spacing system
- Animation guidelines

This will be our single source of truth for the entire project.
Do not duplicate content from the section specs.

PRD を生成

Based on my [product-brief.md], [style-guide.md], and all section specs
in [website-sections], create a Project Requirements Document that includes:
- Project overview
- Tech stack (extract from component code in specs)
- Dependencies (extract from component libraries used)
- Design system reference
- Page sections with file references
- File structure
- Responsiveness requirements
- Performance requirements

タスクを生成

Based on the [style-guide.md] and [prd.md], create a tasks markdown file with:
- Phase 1: Project setup tasks
- Phase 2: Core component tasks
- Phase 3: Section building tasks (one per section)
- Phase 4: Polish tasks
- Phase 5: Launch tasks

Each task should be a checkbox item.
Reference the specific spec files for each section.

セクションを構築

Build the [Section Name] section.

Reference files:
- Style guide: @style-guide.md
- Section spec: @[section-name]-section.md
- PRD: @prd.md

Follow the design specs exactly.
Use the components specified.
Match the reference images.

セクションを反復改善

[Paste screenshot of current state]

Changes needed:
1. [Specific change 1]
2. [Specific change 2]

Reference the original inspiration: [paste reference image]

---

クレジット

このフレームワークは、BuilderSpace による動画「AI で 5,000 ドル級のプレミアムな SaaS ウェブサイトを構築する方法」（2025 年 12 月）をもとにしています。この動画では、AI を活用した開発向けに応用した、10 年にわたるプロフェッショナルなデザインワークフローが紹介されています。

出典：https://www.youtube.com/watch?v=WqSf0noa4hk

---

「準備作業は仕事のように感じます。すぐに構築を始めたくなるでしょう。しかし、最初に用意するコンテキスト――概要、ムードボード、スタイルガイド、セクションの仕様――こそが、500 ドルのありきたりなウェブサイトと、5,000 ドルの洗練されたプレミアムなウェブサイトを分けるものです。」