Ship to Show は何をしますか？
プロトタイプをポートフォリオケーススタディに変換する7フェーズのフレームワーク。
このスキルをいつ使うか
- ユーザーがプロトタイプ（React、Vue、HTML、Figma出力）を持っていて、それを文書化したい場合
- ユーザーがポートフォリオ用のケーススタディを作成したい場合
- ユーザーがインターフェースのデモンストレーションビデオを作成したい場合
- ユーザーがプロトタイププロジェクトを自分のサイトに公開したい場合
事前確認事項
開始前に、以下のツールがインストールされていることを確認します：
node --version && npm --version && ffmpeg -version | head -1 && git --version && gh --version && vercel --version
ツールが不足している場合は、インストールコマンド（macOS）を案内します：
- Node.js：
brew install node - FFmpeg：
brew install ffmpeg - Git：
brew install git - GitHub CLI：
brew install gh、その後gh auth login - Vercel CLI：
npm i -g vercel
7つのフェーズ
1. CADRER → セクター、ユーザー、問題、設計の視点を特定
2. STRUCTURER → プロトタイプをローカルで実行可能にする
3. ENRICHIR → 不足しているユーザーストーリーを追加し、5本のビデオを生成可能にする
4. FILMER → Puppeteer + FFmpeg でビデオを生成
5. RACONTER → ナラティブ構造とキャプションを備えたケーススタディを作成
6. EMPAQUETER → GitHub、Vercel、自己完結型統合ファイル
7. PUBLIER → ポートフォリオサイトに統合
フェーズは順番に実行します。各フェーズは具体的な成果物を生成してから次のフェーズに進みます。フェーズを圧縮しないでください。
フェーズ1：CADRER（15分）
入力：コードファイルまたはプロトタイプ 出力：case-study.md（v1）、CLAUDE.md、プロジェクトメモリー
アクション
- プロトタイプのソースコードを読む
- 以下を特定する：
- 事業セクターと市場コンテキスト
- ターゲットユーザー（役割、使用コンテキスト、プレッシャー）
- 対処する問題（できれば重要な数字を使って）
- 既存の主要機能
- 設計の視点（プロトタイプがテストする仮説）
- ナラティブ見出しを含む1500文字のエグゼクティブサマリーを作成する
- プロジェクトのポジショニングを記載したCLAUDE.mdを作成する
- 完全なコンテキストを含むメモリーファイルを作成する
チェックリスト
- セクターが特定された
- ユーザーが説明された（役割、コンテキスト、プレッシャー）
- 問題が数字を使って明確化された
- 設計の視点が明示された
- エグゼクティブサマリーが作成された
- CLAUDE.mdが作成された
フェーズ2：STRUCTURER（10分）
入力：生のコードファイル 出力：localhostで動作するプロジェクト
アクション
- 検出された依存関係を含むpackage.jsonを作成する
- ビルドツールを設定する（Vite推奨）
- Tailwind CSSが使用されている場合は設定する
- index.htmlとエントリーポイントを作成する
- npm installを実行する
- localhostで起動する
注意点
プロジェクトがネットワークファイルシステム（Google Drive、Dropbox、OneDrive）上にある場合は、起動前にローカルにコピーします。ファイルウォッチャーはリモートファイルシステムでは機能しません。
チェックリスト
- npm installがエラーなく完了した
- npm run devでサーバーが起動する
- ブラウザにプロトタイプが表示される
- コンソールエラーがない
フェーズ3：ENRICHIR（30〜45分）
入力：動作するプロトタイプ + フレーミング 出力：完全なユーザーストーリーを備えた撮影可能なプロトタイプ
アクション
- 撮影可能な5つのユーザーストーリーを特定する：
- 全体ビュー / トリアージ（受信トレイ、フィルタリング、選択）
- 主要機能（製品の主要なインタラクション）
- 意思決定とフィードバック（アクション、確認、影響）
- エッジケース（誤検知、エラー、迅速なケース）
- 完全なフロー（連続した操作、セッションメトリクス）
- 各ユーザーストーリーに不足しているインタラクションをリストアップする
- 不足しているインタラクションを実装する
- ケースごとに多様なデータを追加する
- シミュレートされた統合（Slack、メール、CRM、エクスポート）を追加する
- マイクロインタラクション（アニメーション、必要に応じてサウンドフィードバック）を追加する
チェックリスト
- 5つのユーザーストーリーが特定され、機能する
- 各ケースに異なるデータが設定されている
- シミュレートされた統合が表示可能
- 各ユーザーストーリーが10〜20秒で撮影可能である
フェーズ4：FILMER（30分）
入力：定義されたユーザーストーリー + 動作するプロトタイプ 出力：5〜8本のMP4ビデオ、5枚のPNGスクリーンショット
アクション
- ビデオパイプラインの構造を作成する：
video-scenes/
├── capture.js
├── scenes/
│ ├── shared/
│ │ ├── design-tokens.css
│ │ ├── animations.css
│ │ └── components.css
│ ├── 01-scene.html
│ └── ...
└── output/
- プロトタイプからデザイントークンを抽出する（色、フォント、スペーシング、ボーダー半径）
- 共有CSSアニメーションを作成する（fadeIn、slideUp、scaleIn、stagger、typing）
- 各シーンについて、以下の内容を含むHTMLファイルを作成する：
- CSSコメント内の時間的ストーリーボード
- フレーム単位で制御可能なCSSタイムラインアニメーション
- プロトタイプのインターフェースを再現するマークアップ
- Web Animations APIを使用した制御機能を持つcapture.js（Puppeteer + FFmpeg）を作成する
- すべてのビデオをレンダリングする
- 実際のプロトタイプから5枚のRetinaスクリーンショットをキャプチャする
重要なテクニック：フレームごとの制御
// すべてのアニメーションを一時停止
document.getAnimations({ subtree: true }).forEach(a => a.pause());
// 各フレームで、時間を進める
document.getAnimations({ subtree: true }).forEach(a => {
a.currentTime = currentTimeMs;
});
ビデオ仕様
- 1920x1080
- 30 fps
- H.264（MP4）+ WebM（オプション）
- 黒背景（#0a0a0a）
- フォント：Inter（Google Fonts）
- 動画時間：8〜20秒
チェックリスト
- すべてのビデオがMP4でレンダリングされた
- プレビューがアクセス可能（ローカルHTTPサーバー）
- Retinaスクリーンショットがキャプチャされた
- 視覚品質が確認された
フェーズ5：RACONTER（20分）
入力：フレーミング + ビデオ + ユーザーストーリー 出力：case-study.md（FR）、case-study-en.md（EN）
アクション
-
以下のナラティブ構造でケーススタディを作成する：
- ヘッダー（タイトル、サブタイトル、カテゴリ、著者）
- ヒーロー画像（全幅）
- 実験の意図（個人的なコンテキスト、3段落）
- 基礎となるインサイト（数字を使った問題）
- ビデオ：Before/After（または比較）
- デザインの問い（指針となる原則）
- ビデオ：データフロー / アーキテクチャ
- 機能ごとのセクション（テキスト + ビデオ + キャプション）
- 学び（転用可能なメカニズム）
- スタック + リンク
-
各ビデオにはキャプションを付ける：
- 太字のタイトル（ビデオが示すもの）
- フラストレーション： ユーザーの問題
- ベネフィット： 提供される価値
-
コンテキストのないビデオグリッドは使用しない。各ビデオには独自のナラティブが必要。
-
FR版とEN版を作成する
トーン
実験を共有する実践者として。製品を宣伝する販売者ではない。タイトルは具体的で専門的に（くだけた言葉は使わない）。構造を明確に：問題、メカニズム、示唆。
チェックリスト
- 完全なFRケーススタディ
- 完全なENケーススタディ
- 各ビデオにフラストレーション/ベネフィットのキャプションがある
- 転用可能なメカニズムを含む学びのセクション
- セクションタイトルがナラティブで専門的
フェーズ6：EMPAQUETER（15分）
入力：以前のフェーズのすべての成果物 出力：GitHubリポジトリ、Vercelプロトタイプ、PORTFOLIO-INTEGRATION.md
アクション
- .gitignoreを作成する（node_modules、dist、.env、frames）
- gitリポジトリを初期化し、構造化されたコミットを行う
- GitHubにプッシュする（公開リポジトリ）
- プロトタイプをVercelにデプロイする（本番環境）
- 自己完結型のPORTFOLIO-INTEGRATION.mdを作成する：
- プロジェクトのYAMLメタデータ
- アセットコピーコマンド
- ケーススタディの完全な内容（セクションごと）
- アセットインベントリ（ビデオ、スクリーンショット、位置）
- ビデオフォーマット（autoplay/loop/muted/playsinline）
- キャプションフォーマット
- 公開チェックリスト
チェックリスト
- GitHubリポジトリが作成され、プッシュされた
- プロトタイプがVercelにデプロイされた
- 自己完結型のPORTFOLIO-INTEGRATION.mdが作成された
- ファイルがポートフォリオプロジェクトにコピーされた
フェーズ7：PUBLIER（変動）
入力：ポートフォリオプロジェクト内のPORTFOLIO-INTEGRATION.md 出力：サイトに公開されたプロジェクトページ
アクション
このフェーズは、ポートフォリオプロジェクト内の別のセッションで実行します。プロンプト：
PORTFOLIO-INTEGRATION.mdを読み、私のサイト上のプロジェクトとしてケーススタディを実装してください。
このファイルには、アセット、コンテンツ、ページ構造、
ビデオとキャプションのフォーマットに関するすべての指示が含まれています。
チェックリスト
- アセットがポートフォリオプロジェクトにコピーされた
- プロジェクトページが作成された
- ビデオがautoplay/loop/mutedで設定された
- 各ビデオの下にキャプションがある
- og:imageが設定された
- FR版とEN版がある
- プロトタイプとGitHubへのリンクが機能する
まとめ
| フェーズ | 所要時間 | 成果物 |
|---|---|---|
| 1. Cadrer | 15分 | case-study v1、CLAUDE.md |
| 2. Structurer | 10分 | localhostプロジェクト |
| 3. Enrichir | 30〜45分 | 撮影可能なプロトタイプ |
| 4. Filmer | 30分 | ビデオ + スクリーンショット |
| 5. Raconter | 20分 | case study FR/EN |
| 6. Empaqueter | 15分 | GitHub、Vercel、パック |
| 7. Publier | 変動 | ポートフォリオページ |
| 合計 | 約2時間30分 | 完全なケーススタディ公開 |