phase-3-mockup

フェーズ 3：モックアップ開発

デザイナーなしでトレンドを押さえた UI を作成 + Next.js のコンポーネント化を考慮

目的

実際に実装する前に、アイデアをすばやく検証します。デザイナーがいなくても、UI/UX のトレンドを調査して高品質なプロトタイプを作成し、後から Next.js のコンポーネントに簡単に変換できるように設計します。

このフェーズで行うこと

1. 画面のモックアップ：HTML/CSS で UI を実装
2. インタラクション：基本的な JavaScript で動作を実装
3. データのシミュレーション：JSON ファイルで API レスポンスをシミュレート
4. 機能の検証：ユーザーフローをテスト

成果物

mockup/
├── pages/          # HTML pages
│   ├── index.html
│   ├── login.html
│   └── ...
├── styles/         # CSS
│   └── main.css
├── scripts/        # JavaScript
│   └── app.js
└── data/           # JSON mock data
    ├── users.json
    └── products.json

docs/02-design/
└── mockup-spec.md  # Mockup specification

PDCA の適用

• Plan（計画）：モックアップを作成する画面／機能を決めます
• Design（設計）：画面構成とインタラクションを設計します
• Do（実行）：HTML/CSS/JS を実装します
• Check（評価）：機能の動作を確認します
• Act（改善）：フィードバックを適用し、フェーズ 4 に進みます

レベル別の適用方法

レベル	適用方法
Starter	この段階を最終成果物にできる場合があります
Dynamic	次の段階に進む前の検証に使用します
Enterprise	迅速な PoC に使用します

基本原則

"Working prototype over perfect code"

- Pure HTML/CSS/JS without frameworks
- JSON files instead of APIs for data simulation
- Fast feedback loops
- Structure considering Next.js componentization

---

UI/UX トレンドの調査方法

デザイナーなしでトレンドを押さえた UI を作成する

1. トレンド調査の情報源

情報源	目的	URL
Dribbble	UI デザインのトレンド、カラーパレット	dribbble.com
Behance	実際のプロジェクトの事例	behance.net
Awwwards	アワード受賞作から見る最新のウェブトレンド	awwwards.com
Mobbin	モバイルアプリの UI パターン	mobbin.com
Godly	ランディングページの参考例	godly.website
Land-book	ランディングページのギャラリー	land-book.com

2. 2025～2026 年の UI/UX トレンド

🎨 Visual Trends
├── Bento Grid Layout
├── Glassmorphism
├── Gradient Mesh
├── 3D Elements (minimal 3D elements)
└── Micro-interactions

📱 UX Trends
├── Dark Mode First
├── Skeleton Loading
├── Progressive Disclosure
├── Thumb-friendly Mobile Design
└── Accessibility (WCAG 2.1)

🔤 Typography
├── Variable Fonts
├── Large Hero Text
└── Mixed Font Weights

3. UI をすばやく実装するためのツール

ツール	目的
v0.dev	AI による UI 生成（shadcn/ui 互換）
Tailwind UI	高品質なコンポーネントテンプレート
Heroicons	アイコン
Lucide	アイコン（React 互換）
Coolors	カラーパレットの生成
Realtime Colors	リアルタイムのカラー表示

4. モックアップ作成前のチェックリスト

## UI Research Checklist

- [ ] Analyzed 3+ similar services
- [ ] Decided color palette (Primary, Secondary, Accent)
- [ ] Selected typography (Heading, Body)
- [ ] Chose layout pattern (Grid, Bento, etc.)
- [ ] Collected reference design screenshots

---

Next.js のコンポーネント化を考慮した設計

モックアップからコンポーネントへの移行戦略

モックアップの段階からコンポーネントの分割を考慮すると、Next.js への移行が容易になります。

1. コンポーネント単位で HTML 構造を設計する

<div class="page">
  <header>...</header>
  <main>
    <div class="hero">...</div>
    <div class="features">...</div>
  </main>
  <footer>...</footer>
</div>



<header data-component="Header">
  <nav data-component="Navigation">...</nav>
</header>


<section data-component="Hero">
  <h1 data-slot="title">...</h1>
  <p data-slot="description">...</p>
  <button data-component="Button" data-variant="primary">...</button>
</section>

2. コンポーネントごとに CSS を分ける

mockup/
├── styles/
│   ├── base/
│   │   ├── reset.css
│   │   └── variables.css      # CSS variables (design tokens)
│   ├── components/
│   │   ├── button.css
│   │   ├── card.css
│   │   ├── header.css
│   │   └── hero.css
│   └── pages/
│       └── home.css

3. コンポーネントのマッピング資料を作成する

## Component Mapping (mockup → Next.js)

| Mockup File | Next.js Component | Props |
|-------------|------------------|-------|
| `components/button.html` | `components/ui/Button.tsx` | variant, size, disabled |
| `components/card.html` | `components/ui/Card.tsx` | title, description, image |
| `components/header.html` | `components/layout/Header.tsx` | user, navigation |

4. Props としてデータ構造を設計する

// mockup/data/hero.json
{
  "title": "Innovative Service",
  "description": "We provide better experiences",
  "cta": {
    "label": "Get Started",
    "href": "/signup"
  },
  "image": "/hero-image.png"
}

// → When transitioning to Next.js
// components/Hero.tsx
interface HeroProps {
  title: string;
  description: string;
  cta: {
    label: string;
    href: string;
  };
  image: string;
}

Next.js への移行例

モックアップ（HTML）：

<div class="feature-card" data-component="FeatureCard">
  <div class="feature-card__icon">🚀</div>
  <h3 class="feature-card__title">Fast Speed</h3>
  <p class="feature-card__description">We provide optimized performance.</p>
</div>

Next.js コンポーネント：

// components/FeatureCard.tsx
interface FeatureCardProps {
  icon: string;
  title: string;
  description: string;
}

export function FeatureCard({ icon, title, description }: FeatureCardProps) {
  return (
    <div className="feature-card">
      <div className="feature-card__icon">{icon}</div>
      <h3 className="feature-card__title">{title}</h3>
      <p className="feature-card__description">{description}</p>
    </div>
  );
}

---

JSON データのシミュレーション例

// scripts/app.js
async function loadProducts() {
  const response = await fetch('./data/products.json');
  const products = await response.json();
  renderProducts(products);
}

JSON 構造を API スキーマとして使用する

// mockup/data/products.json
// This structure becomes the basis for Phase 4 API design
{
  "data": [
    {
      "id": 1,
      "name": "Product Name",
      "price": 10000,
      "image": "/products/1.jpg"
    }
  ],
  "pagination": {
    "page": 1,
    "limit": 10,
    "total": 50
  }
}

---

成果物チェックリスト

• UI 調査

  • 参考デザインを収集しました（最低 3 件）
  • カラーパレットを決定しました
  • フォントを選択しました

• モックアップの実装

  • HTML をコンポーネント単位で分割しました
  • CSS 変数でデザイントークンを定義しました
  • JSON でデータをシミュレートしました

• Next.js への移行準備

  • コンポーネントのマッピング資料を作成しました
  • Props のインターフェースを定義しました
  • 再利用可能な構造であることを確認しました

---

テンプレート

templates/pipeline/phase-3-mockup.template.md を参照してください。

次のフェーズ

フェーズ 4：API の設計／実装 → モックアップの検証が完了したので、実際のバックエンドを実装します