Product Showcase Generator

Web アプリケーション向けのマーケティングサイトを生成します。ただし、単なるヒーローセクションと機能グリッドではなく、実際のスクリーンショット、ワークフローのアニメーション GIF、機能の深掘り解説を含む複数ページのサイトです。「これは何か」から「具体的にどう使うのか」まで、段階的に詳しく説明します。

複雑なアプリ、エージェント型の AI ツール、静止画スクリーンショットでは価値を伝えられない製品に特に有効です。

深さレベル

深さ	出力	所要時間
quick	単一ページ — ヒーロー、機能、CTA。従来と同じ。	15-20 分
standard	複数ページサイト — ホーム、機能ページ、スクリーンショット付きの「使い方」。	1-2 時間
thorough	包括的なサイト — ホーム、機能ごとのページ、アニメーション GIF ウォークスルー、ユースケース、比較ページ、ドキュメント形式のデモ。	3-6 時間

デフォルト: standard

ブラウザツール検出

開始前に、利用可能なブラウザツールを検出します：

1. Chrome MCP (mcp__claude-in-chrome__*) — 認証が必要なアプリに推奨
2. Playwright MCP (mcp__plugin_playwright_playwright__*) — 公開アプリ向け
3. playwright-cli — スクリプト化されたフロー向け

ワークフロー

1. 入力情報の収集

フィールド	必須	例
アプリ URL	はい	https://app.example.com または http://localhost:5173
アプリ名	はい	"Acme CRM"
タグライン	いいえ	"邪魔にならない CRM"
ターゲットオーディエンス	いいえ	"小規模事業所のオーナー"
料金情報	いいえ	無料版、$29/月のプロ版
CTA テキスト + URL	いいえ	"無料で始める" → サインアップページ
推薦文	いいえ	ユーザーが提供するか、セクションをスキップ

2. スクリーンショットの取得

bin/ に同梱されている capture-screenshots を使用してアプリをキャプチャします。毎回 Playwright スクリプトを生成するより高速で一貫性があります。

クイックキャプチャ（すべてのキーページを一度に）：

capture-screenshots http://localhost:5173 \
  --pages /,/dashboard,/contacts,/settings \
  --output showcase/screenshots \
  --prefix screen \
  --mobile --dark

各ページのデスクトップ（1280x720）、モバイル（375px）、ダークモードバリアントを一度に生成します。

認証が必要なアプリの場合：

capture-screenshots https://app.example.com \
  --pages /,/dashboard,/settings \
  --auth user:password \
  --output showcase/screenshots \
  --mobile --dark

キャプチャ対象：

a. 第一印象 — メインページ/ダッシュボードがヒーロー画像になります。すぐに分かる価値提案に注目。

b. 機能 — 各主要セクション。ナビゲーションパスをすべて --pages に指定します。製品ストーリーを語る 6～10 個のキースクリーンをキャプチャ。

c. 「使い方」フロー — メインワークフローを順序どおりに。--prefix workflow-step を使いながら、フロー手順を進めるにつれて複数回 capture-screenshots を実行。

d. 詳細ショット — 特定の UI 要素にズーム。スクロール可能な内容には --full-page を使用。

e. 両モード — --dark フラグで自動的にライトとダークのバリアントをキャプチャ。最も見栄えの良いモードをヒーローに使用。

キャプチャ後の最適化：

img-process batch showcase/screenshots --action optimise --max-width 1920 -o showcase/screenshots-opt

f. 価値提案の抽出

機能をただリストするのではなく、各機能について答えます：ユーザーはなぜこれを気にするのか？

• 悪い例：「連絡先管理ページ」
• 良い例：「すべてのクライアント、その履歴、注意が必要な点を 1 つのビューで確認」
• 悪い例：「検索機能」
• 良い例：「秒単位で何でも検索 — セマンティック検索は入力内容だけでなく、あなたが本当に意図していることを理解」

3. サイトの生成

クイックモード：単一ページ（従来と同じ）

1 つの HTML ファイル：ヒーロー + 機能グリッド + CTA。MVP とクイックマーケティング向け。

標準モード：複数ページサイト

showcase/
├── index.html              # ホーム — ヒーロー、概要、機能ハイライト、CTA
├── features.html           # スクリーンショットと説明付きのすべての機能
├── how-it-works.html       # スクリーンショット付きのステップバイステップワークフローガイド
├── screenshots/            # 取得したすべての画像
│   ├── hero.png
│   ├── feature-*.png
│   ├── workflow-step-*.png
│   └── *.gif               # アニメーション付きウォークスルー
└── styles.css              # 共有スタイル（または Tailwind CDN インライン）

ホームページ：アニメーション GIF またはキースクリーンショット付きヒーロー、3～4 個の機能ハイライト（すべてではなく、最高のもののみ）、「使い方」サマリー（3 ステップ）、CTA。

機能ページ：すべての機能を実際のスクリーンショットと利点重視の説明付きで掲載。6 個以上ある場合はカテゴリー別にグループ化。各機能を実際に説明するのに十分なスペースを確保。

「使い方」ページ：プライマリワークフローをステップバイステップのビジュアルガイドとして表示。各ステップにはスクリーンショット（またはアニメーション GIF）、見出し、2～3 文の説明を配置。このページは「実際に使うとどんな見た目か？」に答えます。

徹底モード：包括的なサイト

showcase/
├── index.html              # ホーム — ヒーロー、概要、価値提案
├── features/
│   ├── index.html          # 機能概要グリッド
│   ├── [feature-1].html    # 深掘り：1 つの主要機能ごとに 1 ページ
│   ├── [feature-2].html    # スクリーンショット、GIF、ユースケース付き
│   └── [feature-n].html
├── how-it-works.html       # 完全なワークフローウォークスルー
├── use-cases/
│   ├── [use-case-1].html   # シナリオ：「あるビジネスマンの 1 日」
│   └── [use-case-2].html   # シナリオ：「新しいクライアントが電話してきたとき」
├── compare.html            # 「[アプリ] vs 他の選択肢」（オプション）
├── screenshots/
│   ├── hero.png
│   ├── feature-*/           # 機能ごとのスクリーンショットセット
│   └── workflows/           # アニメーション GIF
└── styles.css

機能ごとの深掘りページ：各主要機能は専用ページで以下を含みます：

• 機能の実動作を示すヒーロースクリーンショット
• 「何をするのか」 — 価値を説明する 1～2 段落
• 「どう機能するのか」 — スクリーンショットまたは GIF 付きのステップバイステップ
• 「なぜ重要か」 — この機能が解く問題
• エッジケースまたはパワーユーザーのヒント
• 次の機能へのリンク（ページ間のフロー）

ユースケースページ：現実的なシナリオでアプリを示すストーリー駆動型ページ：

• 「月曜日の朝。ダッシュボードを開くと...」
• 各ステップでスクリーンショット付きの現実的なワークフローを進行
• 成果を表示 — このアプリを使ったことで何が異なったか
• 説明が難しいアプリの場合、最も説得力のあるページ

比較ページ（オプション）：「[アプリ] vs [代替品]」 — マーケティングじみた誇大表現ではなく、正直な比較。機能表、主な差別化要因、最適なユーザー層。

4. アニメーション GIF ウォークスルー

静止画スクリーンショットではワークフローを伝えられません。キー機能については、実際のインタラクションを示すアニメーション GIF をキャプチャします：

キャプチャ方法（Playwright または Chrome MCP を使用）：

1. 開始状態に移動
2. スクリーンショットの記録を約 2fps で開始
3. ワークフローを実行（クリック、入力、ナビゲーション）
4. 記録停止
5. フレームを GIF に組み合わせる

GIF の生成 — 順序付きスクリーンショットをキャプチャし、組み合わせます：

# 各ステップを連続的なプレフィックス付きでキャプチャ
capture-screenshots http://localhost:5173/clients \
  --prefix workflow-01 --output .jez/screenshots
# ... 次の状態に移動 ...
capture-screenshots http://localhost:5173/clients/new \
  --prefix workflow-02 --output .jez/screenshots

# フレームを GIF に組み合わせ（Pillow を使用した Python ワンライナー）
python3 -c "
from PIL import Image; import glob
frames = [Image.open(f) for f in sorted(glob.glob('.jez/screenshots/workflow-*.png'))]
frames[0].save('showcase/screenshots/workflows/create-client.gif',
    save_all=True, append_images=frames[1:], duration=500, loop=0)
"

アニメーション化するもの：

• プライマリの「何か作成」フロー（2～4 秒）
• 検索/フィルター操作（結果が表示される様子）
• ドラッグアンドドロップまたは並び替え操作
• ダークモード切り替え（満足のいくビジュアル）
• アプリが何か素晴らしいことをする任意の「魔法の瞬間」（AI 分類、インスタント検索、リアルタイム更新）

GIF ガイドライン：

• 最大 10 秒 / 20 フレーム — 短いほどよい
• 1280x720 でキャプチャ、640x360 で表示（ファイルサイズ削減）
• 最終状態で短い一時停止（3 フレーム）を追加して、視聴者に結果が見えるようにする
• 継続的にループ — 「再生をクリック」なし
• GIF が 5MB を超える場合、フレーム数を減らすか、関連エリアに切り抜き

HTML での表示：

<div class="browser-frame">
  <div class="browser-frame-bar">
    <span class="browser-frame-dot"></span>
    <span class="browser-frame-dot"></span>
    <span class="browser-frame-dot"></span>
  </div>
  <img src="screenshots/workflows/create-client.gif"
       alt="Creating a new client in 3 clicks"
       loading="lazy" width="640" height="360">
</div>

5. エージェント型 / AI アプリの説明

エージェント型アプリは特に売り込みが難しいです。ユーザーに見えない AI が仕事をするため、価値が目に見えません。標準的なスクリーンショットはチャットインターフェースを示すだけです。これは説得力がありません。

エージェント型アプリで機能するパターン：

パターン	何を示すか	例
ビフォー/アフター	ユーザーが手作業で行っていたこと vs エージェントが行うこと	「用：3 つのシステムからコピペ。現：エージェントがバックグラウンドで実行。」
タイムライン	時間経過で何が起こるか — 数時間/数日間のエージェント動作を表示	「8時：メール確認。9時：47 通のメール分類。10時：3 通を緊急フラグ。」
結果ショーケース	プロセスをスキップ、出力を表示	「エージェントが 1,200 通のメール解析 → 89 クライアント、340 連絡先、2,100 知識ファクト」
サイドバイサイド	エージェントの仕事と人間がしたであろうことを並べて表示	分割スクリーン：左は生のメール、右は抽出された構造化データ
魔法の瞬間 GIF	最も素晴らしいことの 1 つのアニメーション	ユーザーが質問 → エージェント検索 → ソース付き回答を返す

エージェント型アプリのコピーのヒント：

• 成果でリード、テクノロジーではなく（「すべてのクライアント履歴を把握」ではなく「AI 搭載 CRM」）
• 量を表示（「1,200 通のメール処理」は「メール処理」より印象的）
• 時間比較を使用（「2 時間かかったことが 30 秒に」）
• 専門用語を避ける（「データの接続を見つける」ではなく「セマンティックベクトル検索 with RAG」）

5. スクリーンショットのプレゼンテーション

スクリーンショットはブラウザフレームモックアップで CSS を使用して表示：

.browser-frame {
  border-radius: 8px;
  box-shadow: 0 25px 50px -12px rgba(0,0,0,0.25);
  overflow: hidden;
  border: 1px solid rgba(0,0,0,0.1);
}
.browser-frame-bar {
  background: #f1f5f9;
  padding: 8px 12px;
  display: flex;
  gap: 6px;
}
.browser-frame-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #e2e8f0;
}

これにより、画像を編集せずにスクリーンショットが「ブラウザ内のアプリ」という洗練された見た目になります。

6. サイトナビゲーション（複数ページ）

複数ページサイトには一貫性のあるナビゲーションが必要：

<nav>
  <a href="/">Home</a>
  <a href="/features/">Features</a>
  <a href="/how-it-works.html">How It Works</a>
  <a href="/use-cases/">Use Cases</a>  <!-- thorough only -->
  <a href="#pricing">Pricing</a>
  <button>Get Started</button>
</nav>

• すべてのページで固定ナビゲーション
• 現在のページをハイライト
• モバイルハンバーガーメニュー
• CTA ボタンは常にナビゲーションに表示

7. 出力

生成後、ユーザーに以下を伝えます：

• プレビュー：python3 -m http.server -d showcase を実行し、http://localhost:8000 を開く
• デプロイ：showcase/ フォルダを Cloudflare Pages、Netlify、または任意のスタティックホストにドラッグ
• 置き換える必要があるプレースホルダコンテンツをリスト
• 生成された GIF とそのファイルサイズを記録

デザインパターン

色：アプリに明確なブランドカラーがある場合は抽出してプライマリとして使用。そうでない場合はニュートラルパレット（スレート/ブルー）がデフォルト。

タイプグラフィ：システムフォントスタック（外部リクエストなし）。landing-page と同じアプローチ。

レスポンシブ：モバイルファースト、スクリーンショットはスケールダウン対応。モバイルでは、スクリーンショットはグリッドではなく垂直積み重ね。

ダークモード：3 つの状態切り替え（ライト/ダーク/システム）、CSS カスタムプロパティ。

パフォーマンス：スクリーンショット画像をレイジーロード。スタイリングには Tailwind CDN。ビルドステップなし。

プレミアム感を出す

スクリーンショット改善

• クリーンなデータ：スクリーンショット前に、アプリに現実的なデータが含まれていることを確認 — 「Test Client」や「asdf@example.com」ではなく
• 一貫性のあるウィンドウサイズ：すべてのスクリーンショットを同じビューポート幅（1280x720）で取得
• スクリーンショットにブラウザクロームなし：実際の Chrome ツールバーをキャプチャするのではなく、CSS ブラウザフレームモックアップを使用
• 操作をハイライト：スクリーンショットが機能を示す場合、その機能がアクティブ/オープン（モーダル開く、フィルター適用、項目選択）

ビジュアルストーリーテリング

• ダッシュボードで始める：ヒーロースクリーンショットは、データが入力されており、活気があり、有用に見えるアプリを表示する必要があります
• アプリが動作する様子を表示：空のフォームのスクリーンショットより結果のスクリーンショットの方がよい
• 段階的なリビール：ヒーローは全体像を表示、使い方はフローを表示、機能は詳細を表示
• 見返りで終わる：CTA 前の最終セクションは結果を示す — 生成されたレポート、完了したタスク、管理されたクライアント

スクリーンショットとモックアップを混ぜる

実スクリーンショットは製品が実在することを示します。モックアップは製品がポーランド製であることを示します。両方を使用：

• ヒーロー：ブラウザフレームモックアップの実スクリーンショット — 製品が存在し、見栄えがよいことを証明
• 「使い方」：フロー手順には簡略化されたモックアップイラスト（CSS 図形、アイコン、矢印）を使用できますが、詳細には実スクリーンショットを使用
• 機能グリッド：実スクリーンショット — ユーザーは実際の UI を見たい
• モバイルショーケース：CSS デバイスフレームモックアップ（電話のアウトライン）をモバイルスクリーンショットの周りに配置
• ダッシュボード/概要：実スクリーンショット — これはの金銭的なショット

電話モックアップフレーム（CSS）：

.phone-frame {
  border: 8px solid #1f2937;
  border-radius: 32px;
  overflow: hidden;
  max-width: 280px;
  box-shadow: 0 25px 50px -12px rgba(0,0,0,0.3);
}
.phone-frame-notch {
  background: #1f2937;
  height: 24px;
  border-radius: 0 0 16px 16px;
  width: 120px;
  margin: 0 auto;
}

アニメーション（CSS のみ、JS 不要）

/* ユーザーがスクロール時にセクションをフェードイン（交差オブザーバー経由 CSS） */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}
.section { animation: fadeInUp 0.6s ease-out both; }

/* ヒーロースクリーンショットの微妙なフロート */
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}
.hero-screenshot { animation: float 6s ease-in-out infinite; }

グラデーションアクセント

アプリのプライマリカラーを抽出し、セクション上の微妙なグラデーション背景に使用：

.hero { background: linear-gradient(135deg, var(--primary) 0%, transparent 60%); }
.cta-banner { background: linear-gradient(135deg, var(--primary), var(--primary-dark)); color: white; }

デプロイメント

ショーケースサイトは実際のどこかでホストされる必要があります — ファイルから開くだけではありません。利用可能なものに基づいて選択：

オプション 1：Cloudflare Workers とスタティックアセット（推奨）

ショーケース対象のアプリが既に Cloudflare 上にある場合、ショーケースも Worker としてデプロイ：

# showcase/ ディレクトリで、最小限の wrangler.jsonc を作成：
{
  "name": "myapp-showcase",
  "main": "src/index.ts",  // またはスタティックのみパターンを使用
  "compatibility_date": "2026-03-01",
  "assets": { "directory": "./" }
}

npx wrangler deploy

またはカスタムドメインをアタッチ：showcase.myapp.com または myapp.com（アプリ自体が app.myapp.com にある場合）。

オプション 2：Cloudflare Pages（ドラッグアンドドロップ）

ダッシュボード → Pages → 作成 → アセットアップロード → showcase/ フォルダをドラッグ。すぐに .pages.dev URL が取得。

オプション 3：スタティックホスト（Netlify、Vercel、GitHub Pages）

任意のスタティックホストで動作 — HTML + CSS + 画像のみです。サーバー側のコードなし。

カスタムドメイン

プロフェッショナルなショーケースには常にカスタムドメインを使用：

• myapp.com — ショーケースがメインサイト、アプリは app.myapp.com
• www.myapp.com → ショーケース、app.myapp.com → 実際のアプリ

お問い合わせ / 問い合わせフォーム

すべてのショーケースは、関心を持つ人が連絡する方法が必要。単に「メールしてください」と記載しないでください — 実際のフォームを追加。

パターン 1：Formspree / Formsubmit（バックエンド不要）

<form action="https://formspree.io/f/YOUR_FORM_ID" method="POST">
  <input type="text" name="name" placeholder="Your name" required>
  <input type="email" name="email" placeholder="Your email" required>
  <textarea name="message" placeholder="Tell us about your needs"></textarea>
  <button type="submit">Get in Touch</button>
</form>

無料版はほとんどのショーケースボリュームを処理します。送信メールはメールアドレスに送信。

パターン 2：Cloudflare Worker エンドポイント

ショーケースが Workers 上にある場合、/api/enquiry ルートを追加：

app.post('/api/enquiry', async (c) => {
  const { name, email, message } = await c.req.json();
  // SMTP2Go、Resend、または D1 に保存することで送信
  await sendEmail({ to: 'hello@company.com', subject: `Enquiry from ${name}`, body: message });
  return c.json({ success: true });
});

パターン 3：Turnstile + メール（スパム保護）

Cloudflare Turnstile をフォームに追加してボット送信を防止：

<div class="cf-turnstile" data-sitekey="YOUR_SITE_KEY"></div>

送信処理前に、サーバー側でトークンを検証。

フォームで取得する内容

フィールド	必須	理由
名前	はい	フォローアップをパーソナライズ
メール	はい	返信チャネル
会社/役職	いいえだが有用	リードを適格化
メッセージ / 「何をお探しですか？」	いいえだが有用	返信のコンテキスト
電話	いいえ	通話を好む人がいます

送信後：サンキューページにリダイレクトするか、インライン確認を表示。フォームをただリセットしないでください。

生成する価値のある追加ページ

ページ	含める時期	機能
料金	料金情報が定義されている場合	ティアカード、機能比較、請求 FAQ
について	ストーリーを持つ製品向け	誰がビルドしたか、なぜ、ジャーニー（jez-voice とペア）
Changelog	出荷済み製品向け	最近の更新、製品が積極的に開発中であることを表示
ドキュメントリンク	app-docs が存在する場合	ユーザーガイドへのリンク（/app-docs で生成）
ブログ / 記事	コンテンツが存在する場合	ニュースレターアーカイブまたは製品ブログ記事へのリンク
プライバシー / 利用規約	常に	プレースホルダーであっても — 合法性を示す
ステータスページ	SaaS 向け	アップタイム監視へのリンク（Cloudflare ヘルスチェック）

SEO の基本

すべてのショーケースページは以下を含める：

<title>[アプリ名] — [タグライン]</title>
<meta name="description" content="[1 文の価値提案]">
<meta property="og:title" content="[アプリ名]">
<meta property="og:description" content="[価値提案]">
<meta property="og:image" content="screenshots/hero.png">
<link rel="canonical" href="https://myapp.com/">

複数ページの場合：各ページは独自のタイトルと説明を取得。すべてのページで同じメタを使用しないでください。

製品が特定の場所にサービスを提供する場合、seo-local-business スキルを JSON-LD で使用。

品質ルール

1. 実在する機能のみをスクリーンショット — アプリにない機能を作らない
2. 最高のスクリーンショットを選択 — すべてのページがショーケース対象ではない。製品ストーリーを語るページを選択
3. 利点重視のコピーを記載 — 「すべての連絡先を 1 か所で見る」ではなく「連絡先リストページ」
4. 架空の推薦文を使用しない — 提供されていない場合はセクションを削除
5. 作られた統計を使用しない — 実データがない場合は統計ブロックを空にしておく
6. 実在する URL にデプロイ — ローカルファイルのままにしないでください。ショーケースは共有可能である必要があります