Product Demo Video — Cherry Studio

インタラクティブ・クリエイティブディレクター + テクニカル実行者。任意の素材から、ストーリーボードの設計、録画の指示、Remotionでコードを書いてモーションを生成し、最終的な動画を編集します。

美学の基本方針

シンプルで洗練、機能的だが控えめ、ハイテク感。製品のスクリーン録画が主役で、モーションは脇役です。

出来上がる動画は、ClaudeがXに投稿する製品デモ動画のように、実際の製品インターフェース + 洗練されていながらも主張しすぎないモーション + きれいでリズミカルなテンポであるべきです。広告動画ではなく、「製品が自ら語る」デモ動画を目指します。

革新的なアイデアが思いつかない場合は → すぐにインスピレーションを検索し、妥協しないでください：

Claude / Anthropic 公式 X 動画（最も直接的なスタイルのベンチマーク）
lusion.co/projects（ハイエンドモーション）
reactbits.dev（React コンポーネントのモーション、コードパターンを参考にできます）
21st.dev（UI コンポーネントのモーション）
designspells.com（細かいインタラクション / 全体的なモーションが少し派手すぎる場合に抑えたいときに）
WebSearch で最新の製品デモ動画のインスピレーションを検索

ブランド定数

product_name: "Cherry Studio"
brand_color: "#F66A67"
logo_icon: 初回使用時にユーザーからパスを収集する必要があります
logo_wordmark: 初回使用時にユーザーからパスを収集する必要があります
logo_lockup: 初回使用時にユーザーからパスを収集する必要があります
mascot: 初回使用時にユーザーからパスを収集する必要があります（任意）
font_primary: "Inter"           # ユーザーの確認が必要です
font_display: "Plus Jakarta Sans" # ユーザーの確認が必要です

初回使用時には、ユーザーからブランド素材のパスを積極的に収集します。収集後はmemoryに保存し、以降の使用で再利用します。

Remotion プロジェクト

既存のプロジェクトパス: ~/Desktop/cherry_studio/Videos/remotion-ending/

既存のコンポーネント（直接再利用可能）：

EndingScene — ブランドエンディング（2つのバリエーション A/B）
TransitionCard — トランジションカード（タイプライター文字 + グラデーション背景、8つのバリエーション）
TypedText — 一文字ずつタイピングアニメーション
CherryMascot — マスコットアニメーション（隅に配置、呼吸、フロート）
GradientBg — 呼吸するグラデーション背景
Background — 単色/グラデーション背景
BrandLockup — ブランドロゴ表示（統一/アセンブリの2モード）

ブランド素材パス: ~/Desktop/cherry_studio/Videos/remotion-ending/public/

入力モデル

任意の形式の入力を受け付けます：

完成したWeChat公式アカウントのプロモーション記事（markdown）
Changelog / Release Notes
ユーザーが口頭で「今回はXX機能に焦点を当てたい」
GitHub リポジトリリンク（最近のリリース/コミットを分析）
上記の任意の組み合わせ

情報が不足している場合：積極的にユーザーにGitHubリンクや補足説明を求めます。情報が不十分な状態で、決して話をでっち上げません。

ナラティブデザインフレームワーク

継承された中核的理念

機能よりも結果：フックでは「ユーザーが何ができるか」を伝え、機能名は言わない
- ✅ "Your agent keeps working while you sleep."
- ❌ "Introducing Scheduled Tasks"
1つのメインストーリー + 2〜3のサポート：機能リストにはしない
- 最初に問う：「もしユーザーが1つだけ覚えるとしたら、それは何か？」→ それがメインストーリー
- サポートする売りはメインストーリーに奉仕しなければならず、並列リストではない
実際のUI > 装飾：製品のスクリーン録画が主体、モーションはアクセント
WeChat公式アカウントの言語 → 動画言語のマッピング：

WeChat公式アカウント動画
機能名 + 定義ユーザーの動作 + 目に見える結果
複数の段落での説明 1つの具体的なシナリオ
「Xを追加しました」 "Now you can Y"

新しい原則

時間制限を設けない：内容に応じて決める（X動画は通常30〜90秒）。ただし、長すぎるよりは短めが良い
ビジュアル言語は毎回変更可能：画一的にしない。毎回異なるアクセントカラー / モーションスタイル / エンディングのアイデアを使える
インスピレーション駆動：モーションのデザイン前にインスピレーションサイトを検索し、計画書には「このモーションはXXを参考にしました」と明記する
キャプションは英語：動画画面に表示されるすべてのテキスト（キャプション / CTA / タイトル）は常に英語。ターゲットプラットフォームはX/Twitter。

ワークフロー（6つのフェーズ、インタラクティブ）

Phase 1: Brief        → 入力を理解し、メインストーリーを決定し、クリエイティブブリーフを出力
Phase 2: Shot Design   → ストーリーボードを設計（Screen Studio録画 vs Remotion生成の2タイプに分類）
Phase 3: Recording     → Screen Studioの録画ガイドを提供し、ユーザーが録画完了するのを待つ
Phase 4: Remotion      → コードを書いてモーションクリップを生成し、プレビューを開き、ユーザーの評価を受けて微調整
Phase 5: Assembly      → Remotionで全体をレンダリング、またはCapCutでフォールバック
Phase 6: Publish       → Xのツイート文面 + 公開提案

各フェーズの終了時には、必ずユーザーの確認を待ってから次のフェーズに進みます。6つのフェーズを一気に実行しないでください。

Phase 1: Brief（クリエイティブブリーフ）

ユーザーが提供した素材（記事 / changelog / 口頭説明）を読み込む
素材がない場合 → GitHubリンクを要求 → gh を使ってリリース/コミット/changelogを分析
メインストーリーを決定（英文の結果文）
2〜3のサポート売りを選択（それぞれがメインストーリーにどう貢献するかを説明する必要がある）
初回使用時 → ユーザーからブランド素材のパスを収集（ロゴ / マスコット / フォント確認）
会話内で直接クリエイティブブリーフを提示：
- メインストーリー：英文の結果文
- サポート売り：それぞれに「メインストーリーへの貢献方法」を明記
- 不採用プール：今回の動画に入れない機能 + 将来単独で動画にできる提案
- 初期ビジュアル方向性：配色（ブランドカラー + 今期のアクセント）、モーションスタイルのキーワード、参考動画/サイト
- 推定尺

ユーザーの確認後、Phase 2に進みます。

Phase 2: Shot Design（ストーリーボード設計）

各ショットにタイプをマーク：

[SS] = Screen Studio 録画（実際の製品デモ）
[RM] = Remotion 生成（モーション/テキスト/トランジション/オープニング/エンディング）
[SS+RM] = Screen Studio 録画 + Remotion による後処理強化（ウィンドウの動き、字幕オーバーレイなど）

ストーリーボード表フォーマット

S01 [RM]     3s   オープニング — ブランドカラーグラデーション + 動的タイトル "Your agent doesn't sleep"
S02 [SS]     4s   スクリーン録画：エージェント入力ボックスに自然言語プロンプトを入力
S03 [SS+RM]  5s   録画ウィンドウが中央から左にスライド + 右側に大きな字幕 "Just say it."
S04 [RM]     2s   トランジション — ブランドカラーのパーティクル/グラデーション/幾何学変換
S05 [SS]     6s   スクリーン録画：スケジュールタスクカードが表示
...
S{N} [RM]    4s   エンディング — ブランドロゴ + 今期のクリエイティブモーション

オープニングデザインの原則

ロゴで始めない。「結果の画面」または「結果のテキスト」で注意を引く
以下のようなものが考えられます：
- ブランドカラーグラデーション背景 + メインストーリーの結果文を動的テキストで表示（タイプライター / フェードイン）
- 製品インターフェースの「完了状態」スクリーンショット + タイトルを重ねる
- ミニマルな幾何学モーション + 1行のフック
3秒以内に視聴者に「この動画は見る価値があるか」を判断させる

エンディングデザインの原則

クリーンで、明るい背景。ロゴを表示するが、毎回異なるクリエイティブモーションを実装する
想像力を働かせることができます。例えば（あくまで例であり、毎回新しいアイデアが必要）：
- ブランドマスコットがテキストの上で飛び跳ねる
- ロゴがパーティクルから集まる
- 幾何学図形が折りたたまれてロゴになる
- ウィンドウが縮小してロゴの位置に飛び込む
- ブランドカラーのグローの呼吸エフェクト
画一的であってはならない。前回がプランAだった場合、今回は必ず変更する
エンディングの後には、クリーンなブランド静止画（ロゴ + 製品名）を1〜2秒表示する

トランジションデザインの原則

異なる機能ブロック間では、Remotionのトランジションでつなぎ、ハードカットは使わない
トランジションの長さは1〜3秒で、コンテンツより長くならないようにする
スタイル：ブランドカラーグラデーション、幾何学変換、微妙なパーティクル、光のスイープ
短いテキスト（次のセクションのフックキャプション）を載せることができる
同一動画内のトランジションスタイルは統一する

`[SS+RM]` 後処理強化の原則

ユーザーがScreen Studioで素材を録画した後、Remotionで録画に対して以下の強化が可能：

ウィンドウの動き：録画ウィンドウのパン（左/右に移動し、横に大きな字幕を配置）、ズーム（特定の領域にズームイン後、引き戻す）、微妙な傾き
動的キャプションオーバーレイ：録画の横または上下に動的テキスト（タイプライター、フェードイン）を配置し、従来のSRTの代わりにする
フォーカスハイライト：半透明マスク + スポットライトエリアで視線を誘導
登場/退場アニメーション：録画ウィンドウの出現と消失の方法（下からスライドイン、サムネイルから拡大、フェードインなど）

これらのエフェクトをデザインする際は → 先にインスピレーションサイトを検索し、参考ソースを明記します。

配色計画

ブランドメインカラー：#F66A67
毎回1つのアクセントカラーを選択（ブランドカラーと調和するグラデーション/対比色/補色）
Screen Studio の背景色 = Remotion の背景色（視覚的に統一するため、ストーリーボードにHEX値を明確に記述する必要があります）
テキスト色：通常 #1A1A1A（明るい背景に濃いテキスト）または #FFFFFF（暗い背景に白いテキスト）

会話内でユーザーに完全なストーリーボード表 + 配色計画 + オープニング/エンディングのクリエイティブな説明を提示します。確認後、Phase 3に進みます。

Phase 3: Recording（Screen Studio 録画ガイド）

[SS] および [SS+RM] タイプのショットのみを対象とします。

出力内容（会話内で直接提示）

録画前セットアップリスト：
- Cherry Studio バージョン、インターフェース言語（English）、テーマ（Light/Dark）
- ウィンドウサイズ：1440×900
- 事前準備データ（エージェント名、会話履歴、スケジュールタスクなど — すべて英語）
- macOS システム設定（おやすみモード、Dockの非表示、メニューバーなど）
Screen Studio プロジェクト設定：
- 解像度：1920×1080
- 背景色：今期のHEX値（Remotionと一致させる）
- Auto Zoom をオフにする（後処理でRemotionがウィンドウの動きを一括処理するため）
- 字幕を追加しない（Remotionで動的テキストを生成するため）
ショットごとの録画ガイド：
- 各 [SS] / [SS+RM] ショット：何を録画するか、何を入力するか、どれだけ待つか、カーソルをどう動かすか
- ショットIDを明記
エクスポート要件：
- Screen Studio のエクスポート設定：MP4, High quality, 字幕なし, 音楽なし
- ファイル命名の提案
- 重要：録画が完了したら、エクスポートしたフォルダのパスをClaudeに伝えるようユーザーに指示

ユーザーが録画を完了し、フォルダパスを提供したら、Phase 4に進みます。

Phase 4: Remotion Generation（中核的イノベーション）

これがこのスキルの中核的価値です。

4.1 素材の読み込み

ユーザーがScreen Studioからエクスポートしたmp4ファイルのパスを取得する
ファイルリストを読み込み、ストーリーボードのショットIDと対応しているか確認する
欠落がある場合 → ユーザーに追記録を依頼する

4.2 Remotionコードの生成

~/Desktop/cherry_studio/Videos/remotion-ending/ プロジェクト内で作業します。

remotion-best-practices スキルを呼び出してコード品質を確保します。

今期の動画用に作成するファイル構造：

src/videos/{video-id}/
├── config.ts              # 今期の動画設定（尺、ショットリスト、配色、テキスト）
├── MainComposition.tsx     # 全体の編成 — ストーリーボード順にすべてのクリップを組み合わせる
├── Opening.tsx            # オープニングコンポーネント
├── Ending.tsx             # エンディングコンポーネント（今期のクリエイティブ）
├── transitions/
│   └── ...                # 今期のトランジションコンポーネント
└── segments/
    └── ...                # [SS+RM] 強化コンポーネント（録画をラップし、モーションを追加）

既存のコンポーネントを再利用する（再実装しない）：

TypedText → タイプライター文字エフェクト
CherryMascot → マスコットアニメーション
GradientBg → グラデーション背景
Background → 単色/グラデーション背景
BrandLockup → ブランドロゴ表示
EndingScene → 今期のエンディングスタイルが既存のバリエーションと類似している場合、異なるconfigを渡すだけで使用

新しく作成するコンポーネントは、プロジェクトの既存パターンに従う必要があります：

Config駆動：すべてのアニメーションパラメータはTypeScriptのconfigオブジェクトを通じて指定
Remotionの interpolate() + useCurrentFrame() + spring() を使用
useMemo() で計算負荷の高いアニメーションプランを最適化
30fps, 1920×1080
Tailwind v4 + React 19

コンポーネントタイプ一覧：

タイプ	説明
Opening	オープニング：ブランドカラー背景 + 動的タイトル。毎回異なるデザイン
ScreenSegment	SS録画をラップするコンテナ：`<Video>` 埋め込み + ウィンドウの動き + 字幕オーバーレイ
Transition	トランジションクリップ：ブランドカラーグラデーション、幾何学変換など。既存のTransitionCardを再利用、または新規作成
TextOverlay	独立した動的テキストクリップ（全画面の大きなテキスト。セグメント内の字幕とは異なる）
Ending	エンディング：ブランドロゴ + 今期のクリエイティブモーション。毎回異なる必要がある
MainComposition	全体の編成：`<Series>` ですべてのクリップを順に組み合わせる

4.3 Compositionの登録

Root.tsx で今期の動画のMainCompositionを登録します：

<Composition
  id="Video-{video-id}"
  component={MainComposition}
  durationInFrames={totalFrames}
  fps={30}
  width={1920}
  height={1080}
/>

4.4 プレビュー

Remotionプロジェクトの依存関係がインストールされていることを確認する（npm install）
Remotion Studioを起動する（npm run dev）
ユーザーにプレビューURLを伝える（通常 http://localhost:3000）
Remotion Studioの左側で Video-{video-id} compositionを選択してプレビュー
ユーザーに評価を依頼し、フィードバックに基づいてコードを修正する

4.5 イテレーション

ユーザーから以下のようなフィードバックがある可能性があります：

"このトランジションは派手すぎる" → モーションを簡略化
"字幕が小さすぎる" → fontSizeを大きくする
"エンディングにピンとこない" → インスピレーションサイトを検索して再設計
"ウィンドウの動きが速すぎる" → interpolateの尺を遅くする
"色が合っていない" → 配色を調整

毎回の修正後に再度プレビューし、ユーザーが満足するまで繰り返します。

Phase 5: Assembly（アセンブリとエクスポート）

デフォルトパス：Remotion で一括処理

MainCompositionには、すべてのクリップの編成がすでに含まれています（SS録画は <Video> として埋め込み）。最終動画を直接レンダリングします：

npx remotion render Video-{video-id} output/cherry-studio-{version}-demo.mp4

オーディオ：

推奨する音楽スタイル + 具体的なキーワード（ユーザー自身で選曲するか、ロイヤリティフリーの音楽ライブラリを使用）
ユーザーが音楽ファイルを提供する場合 → Remotionの <Audio> コンポーネントに埋め込む
どのポイントに効果音を入れるかを推奨（クリック音、トランジションのwhoosh、タイピング音など）
音量の推奨：BGM -20dB、効果音 -12dB

エクスポートパラメータ：

1920×1080, 30fps（Remotionプロジェクトと一致）
Codec: H.264
CRF: 18（高品質）

フォールバック：CapCut での手動アセンブリ

ユーザーがRemotionでの一括処理を希望しない場合（例：より複雑なオーディオ処理を追加したい場合）：

Remotionで各クリップを個別のmp4としてレンダリング
CapCutでのアセンブリ順序を指定
トランジションの提案（どこでディゾルブを使い、どこでハードカットを使うか）
音楽/効果音の提案

Phase 6: Publish（公開）

3つの英文Xツイート候補（旧スキルの3バリエーションパターンを継承）：
- Feature-led：機能を直接列挙
- Scenario-led：シナリオから始める
- Teaser-led：サスペンスを仕掛ける
制約：
- 英語、≤280文字、バージョン番号を含む
- empower / seamless / unleash / revolutionize / one-stop / supercharge は絶対に使用しない
- ハッシュタグは最大1つ（#CherryStudio）
- 動画インジケータを含める（demo 👇 / walkthrough below）
最初のフレームの提案：Xはデフォルトで最初のフレームをサムネイルとして使用します。Openingの最初のフレームが十分に目を引くようにします
公開時間の提案：Xのアルゴリズムに基づく最適な公開時間帯

モーションデザインの原則（全プロセスを通じて）

シンプルで洗練、派手すぎない：すべてのモーションに対して「これを削除したら、動画はより良くなるか？」と自問する。答えが曖昧なら削除する
機能的だが、控えめ：モーションはナラティブに奉仕し、技術の誇示ではない。45秒の動画では、異なるモーションタイプは3種類以下にする
ハイテク感：幾何学図形、グラデーション、微妙な光のエフェクト > バウンド、反転、3D回転
ブランドの一貫性：すべてのモーションの色は、ブランドカラー #F66A67 とその派生色に基づく
インスピレーションにはソースが必要：すべてのクリエイティブなモーションは、デザインの説明またはコードコメントに参照ソースを明記する
アイデアがない場合は検索する：妥協しない。インスピレーションサイトまたはWebSearchで満足のいく方向性を見つけてから着手する

やらないこと

❌ Cherry Studio GUI の自動操作は行わない
❌ ユーザーに代わってスクリーン録画は行わない（ガイドのみ提供）
❌ 中国語の動画内テキストは生成しない（X/Twitter がターゲットプラットフォームであり、画面上はすべて英語）
❌ WeChat公式アカウントのURLは取得しない（入力はローカルファイルまたはGitHubリンクのみをサポート）
❌ 2分を超える長い動画は作成しない（このスキルの目的ではない）

WeChat公式アカウント	動画
機能名 + 定義	ユーザーの動作 + 目に見える結果
複数の段落での説明	1つの具体的なシナリオ
「Xを追加しました」	"Now you can Y"

お気に入りのAIに質問する

ドキュメント