/minara-usecase-video — Minara ユースケースチュートリアルビデオ

2026年10月に作成されたケース1（モバイルアプリ：質問→BTC戦略→ワンタップで実行）とケース3（デスクトップ：Strategy Studio：一文→Choice Boxes→バックテスト→最適化→ライブデプロイ）から抽出されました。デスクトップのリファレンス：assets/pc-monitor-frame.html および assets/helpers-reference.js（ヘルパーは直接コピー可能）。

minara-videoとの違い（最初にお読みください）

	minara-video (マーケティングデモ)	minara-usecase-video (このスキル)
UI	製品をコピーせず、大文字で最小限のリデザイン	忠実に再現：フロントエンドコードのコンポーネント、サイズ、色、コピーに従う
コピー	独自のマーケティングコピーを作成	ボタン/タイトル/プロンプトは製品の原文をそのまま使用（ロケール）；文法ミスもそのまま
インタラクションパス	カットまたは省略可能	完全な実際のパス：すべてのクリック、モーダル、チェックボックスがコードと同じ順序で存在する必要がある
カメラ	豊富なカメラワーク	クリック/タイピング時にのみ顕著にズームインし、それ以外は静止；明瞭性を最優先
画面上のテキスト	注釈テキストなし	フレーム内にキャプションなし；開始時の3秒間のタイトルカードのみ例外；テキストオーバーレイは別バージョン（別のプロジェクトフォルダ内）
構成	複数のシーンを個別にレンダリング	単一の連続したコンポジション（画面録画のような）

minara-videoから継承された厳格なルール：Geistフォント、シグネチャイージング minaraSnap = cubic-bezier(0.95,0.03,0,0.98)、トランジション≤0.5秒、Math.random() / repeat:-1 不使用、タイムライン paused:true で window.__timelines に登録、最大ドローダウンが20%を超える戦略については先にオペレーターに確認、テストページはドラッグ可能なタイムラインを持つこと。起動時に、まず Skill(hyperframes) を実行してコンポジションルールを読み込む。

トピックとデモアセット（オペレーター設定、2026年10月15日）

株式戦略が優先：ユースケースはデフォルトで株式/TradFi商品をデモに使用する（例：TradFi 30、個別の米国株、指数）。戦略名、アセットプール、保有資産、ティッカーバーは株式を優先する。
暗号資産は二次的：BTCやETHのような主要なコインは登場可能だが、主役ではない。ビデオに株式と暗号資産の両方がある場合、株式を最初に配置し、より多くの時間を割り当てる。
ミームコインは不可：オペレーターがその都度明示的に要求しない限り、ミームコイン（DOGE、PEPE、WIF、BONKなど）をフレーム、アセットプール、ティッカーバー、AI回答、またはサンプルプロンプトに含めない。製品のデフォルトデータにそれらが含まれている場合は、置き換える。
スクリプトとストーリーボードを作成する際は、このルールに従ってアセットを選択する。製品資料の例が適合しない場合は、再構築する前に証券商品に置き換え、スクリプトにその置き換えを記載する。

信頼できる情報源（優先順位順）

フロントエンドコード（参照前に最新版をプル；スクリプトの「ベース」セクションにコミット日を記載）
- Web：製品のWebフロントエンドリポジトリ（最初に git pull を実行）
- モバイル：製品のモバイルアプリソース（apps/mobile/src）
  - コピー：locales/en.json（中国語版は対応するzhファイル）
  - 色/スペーシング：theme/colors.light.ts、theme/tokens.ts
  - コンポーネント：ui/、features/<module>/（例：features/strategy/strategy-card、run-strategy、running-detail、features/agent/composer）
オペレーターからの画面録画/スクリーンショット（use case/ アセットフォルダ内）：レイアウト、階層、実際のビジュアルに使用。⚠️ これらのアセットはUIリファレンスであり、コンテンツリファレンスではありません — 「エージェントの発言は無視」；回答コンテンツは自分たちでデザインする。
スクリプトmd：ショットの内訳、ライン、テキストオーバーレイ。

ビデオで表示する必要があるが、コードがサポートしていないインタラクション（例：ケース1のチャット内のクリック可能な戦略カード）は構築可能ですが、そのインタラクションは現在のコードにはまだない計画中のものであることをオペレーターに明確に伝え、最も近い既存のコンポーネントから再構築する（ケース1は MarketplaceStrategyCard に従い、実行をタップするとマーケットプレイスと同じ実行パスをたどる）。

ワークフロー

1. スクリプトを確認する

各ショットを最新のコードと照合する：ボタン名、ページ順序、必要な手順（例：リスク開示チェックボックス、デプロイ前にバックテストが成功する必要がある）、しきい値の数値。
スクリプトを編集する場合、オペレーターは通常「元のファイルを上書きする」と言います；提案のみを求める場合は「最初に提案をください、スクリプトは編集しないで」と言います — これらを見分けてください。
1つのmdに複数のケースが含まれている場合は、必要に応じて単一ケースのファイルに分割します。

2. インタラクションパスから逆算してストーリーボードを作成する

コードからの実際のパスをテーブルとしてリストする：各画面のタイトル、コンポーネント、クリックターゲット、次の画面。例（モバイル、戦略の実行）： Run → Select Wallet → Next → Configuration (Risk Control drawdown cap / auto-update / check risk disclosure) → Run → success page Running (View Details / Notify me) → Running Strategy Details → back → Strategy tab Running
タイムラインがある場合は、直接 storyboard.html（テンプレート assets/storyboard-template.html）に進み、次に1秒あたりのスケジュールを作成する；オペレーターが確認した後にのみコードを作成する。

3. 仕様

項目	モバイルアプリ	デスクトップ
キャンバス	コンポジション1080×1920、エクスポート1440×2560 / 60fps	コンポジション1920×1080、エクスポート2560×1440 / 60fps
UI	390pt幅のアプリ画面、フレームの90%に拡大縮小、全辺にマージン、角丸 + 1pxボーダー	1440×810のWebページをコンピュータモニター（暗いベゼル＋スタンド、スケール1.15）内に配置、フォントサイズは製品の元のサイズより10〜15%大きく
テーマ/言語	オペレーターが設定；デフォルトは英語＋アプリのデフォルトのライトテーマ	左と同じ
デモデータ	3〜4桁のPnL、ドローダウン<20%、デモとしてマーク	左と同じ
オープニング	0〜3秒のタイトルカード、その後ウォークスルー	左と同じ

モバイル座標系：K = 1080*0.9/390、#app を left:54px; top:96px に配置、transform: scale(K)。すべての要素CSSをアプリ内のpt座標で記述し、コード内のサイズから再構築します。

デスクトップ座標系：K = 1.15、OX = 132、OY = 38（フレーム内の画面の左上隅のpx位置）、1440×810 pt。レイアウト：左サイドバー264 / 中央カラム766 / 右アシスタント410、下部ティッカーバー26。

デスクトップはコンピュータモニターを使用する必要があります（オペレーター設定、2026年10月15日）：製品UIはフレームを満たさなくなりました；コンピュータモニターの画面内に配置され、その背面にモニターのベゼルとスタンドがあります。assets/pc-monitor-frame.html を直接使用します：

構造：#cam > #stand-neck + #stand-base + #monitor > #screen > #app。モニター外形1684×959.5、left 118 / top 24、14pxベゼル、26角丸；画面1656×931.5、12角丸；スタンドはモニターの下中央に配置。背景は暗いラジアルグラデーションを維持。
モニターとスタンドは両方とも #cam 内にあるため、プッシュイン時にUIと一緒に拡大縮小されます；カーソルとクリックリップルも #cam 内にあり、OX + x*K、OY + y*K で配置されます。camTo の式は変更されません；3つの値 K / OX / OY のみを交換します。
UIはフレームを満たしていた時よりも約14%小さくなっているため（1.333 → 1.15）、ワイドショットではテキストが少し小さくなります；クリックやタイピング中のプッシュインがそれを補います。オペレーターがワイドショットのテキストが小さすぎると感じた場合は、フォントサイズ仕様に従ってすべてを一段階上げます；モニターは削除しないでください。
オープニングタイトルカードがフェードアウトした後、モニター全体（スタンドを含む）が1.04倍からフェードインします。
モバイルはモニターを取得しません；現在の角丸とボーダーのある90%画面を維持します。

フォントサイズ仕様（デスクトップ；オペレーター、2026年10月15日：「ユーザーが携帯電話で読めるようにUI全体のフォントを少し大きくしてください」） — 最終ビデオは携帯電話で視聴されるため、これらのサイズが最小値です：

要素	pt
ページタイトル（戦略名）	21
サイドバーナビゲーション / タブ / ツールバー / ボタン / サブタブ	16–16.5
アシスタント本文 / ユーザーバブル / Choice Boxオプション説明	15 / 15 / 14
Choice Box質問 / オプション名	17.5 / 16
メトリックカードラベル / 値	14 / 22
テーブル / コード	15 / 14.5（行の高さ24）
モーダルタイトル / フィールドラベル / 入力、チップ、ボタン	20 / 14.5 / 15.5–16

大きなテキストが収まらなくなった場合は、小さなマイナーテキストを削除します（例：メトリックカードの「1,264 Trades」や「684W 580L」）；フォントサイズは縮小しないでください。モバイル画面をデスクトップビデオに配置する場合は、スケール1.2、中央揃えを使用します。

オープニングタイトルカード（2026年10月15日の仕様）：0〜3秒の暗い背景、中央に配置された1つの大きな見出し（Geist 76px / 650、text-wrap: balance）、単語が1つずつ上昇（0.09秒間隔）；2.55秒で見出しが拡大しフェードアウト；2.75秒で製品UIが1.04倍から1倍にフェードイン。見出しのコピーはオペレーターから提供されます（例：ケース3「トレーディングアイデアをライブ戦略に変える」）。実装：ウォークスルーを tl（pausedではない）に記述し、タイトル用の外部 master = gsap.timeline({paused:true}) を使用し、master.add(tl, 3) とし、master を登録します；data-duration とテストページの DUR の両方に3を追加します。

4. コンポジションを作成する

プロジェクトを $VIDEO_WORKSPACE/hyperframes/<slug>/ に配置します：

index.html        シングルコンポジション（data-composition-id="main"）
_test.html        テストページ（assets/test-wrapper.html をコピー、DUR とタイムライン ID を変更）
assets/           ローカルの gsap、CustomEase、Geist woff2、minara-avatar.png（CDN依存なし）
references/       ソースアセットのコピー
audio/            lines.tsv（ナレーションコピー）、vo-placement.tsv（タイミング）
storyboard.html / _backups/ / output/

コアヘルパーは assets/helpers-reference.js（ケース1の実際のコード）にあります：

R(el)：モーションアニメーションの前に、要素のアプリ内pt座標を測定し、MAP に保存します。以降のすべてのクリックはこれらの予測座標を使用します — 画面がフレーム外に押し出された後に測定すると390ptずれてしまい、カーソルが合いません。
camTo(t, px, py, s, d) / camReset：カメラのプッシュイン。s>1 の場合、フォーカスポイントを中央に向かって少し引き寄せます（デスクトップ：720+(px-720)*0.75、yも同様）；位置がフレーム内に収まるようにクランプし、外側が表示されないようにします。変数 curS を使用して現在のスケールを追跡します（camTo が設定、camReset が1に戻す）。
curShow / curMove / tap / moveTap：モバイルは半透明のソフトタッチポイントを使用し、デスクトップは白い矢印カーソルを使用します；クリックは押下＋リップルを伴います。curS>1 の場合、moveTap はクリックターゲットへの camTo を同期的に実行（duration = move duration + 0.15s）するため、ズームイン中にフレームが自動的にカーソルを追跡します。
pushIn / pushBack：水平方向のページプッシュ、0.45秒。
splitWords + stream：AI回答が単語ごとにストリーミング表示されます。

5. カメラとペーシング（オペレーター自身の言葉から設定されたルール）

「マウスクリック時やタイピング時は、その特定のアクションのエリアにズームインし、フレームはマウスを追従できます；クリックしていない時は、ズームインする必要はありません。」

「カーソルが移動するズームをより目立つようにする」（2026年10月15日、古い≤1.25の上限を置き換え）。デスクトップのスケール：

アクション	スケール
タイピング（入力ボックス）	1.7
ボタン/タブ/サイドバーのクリック	1.6
アシスタントチャット、Choice Boxの閲覧	1.5
モーダル内の連続アクション	1.45、カーソルに追従
モバイルのケース1では1.25を使用しました；新しいモバイルビデオも「目立つ」ようにする必要があります — スケールをオペレーターに確認してください。

連続クリック（Choice Boxオプション、デプロイ手順のモーダル）では、クローズアップを維持し、常に追従します；毎回引き出して押し戻すことはしません。
クリックによって視聴者が確認する必要がある結果（タブの切り替え、By symbol / Fills、バックテスト結果の表示、メトリクスの更新、AI生成後のツールバー値の入力）が表示される場合、クリックの0.5〜0.6秒後にワイドショットに引き戻します。
ズームイン時、モーダルの上下の端がフレームから一時的に外れることは許容されますが、カーソルとクリック対象のターゲットはフレーム内に留まり、テキストがフレームの端に接触してはいけません。
「派手なカメラワークは不要；主な目標は各ステップを明確に示すこと」；通常のナレーションペースで切り替え、途切れないようにします。
フレーム内にキャプションはありません。

6. 忠実度チェックリスト（ケース1からの落とし穴）

タイピングエフェクト：文字ごとに1つの <span> を使用し、tl.set(span,{display:'inline'}) で1つずつ表示します。毎フレーム textContent 全体を書き換えないでください — シークバック時に誤った中間値が残ります（v2ではプレースホルダーテキストの上に余分な「C」が重なっていました）。
入力ボックスの行折り返し：セットアップ中に、文字を1つずつ表示して、どの文字が2行に折り返され、高さがどれだけ増加するかを測定します；その時点で、その上のクイッククエスチョンカードを同期して移動します。
レイヤリング：クイッククエスチョンカードは入力ボックスの白い背景マスクの上に配置する必要があります；詳細ページはタブバーを覆う必要があります（詳細ページのz-index > tabbar）。
クラス名の衝突を避ける：テキストオーバーレイレイヤーは hz- プレフィックスを使用します（hz-main / hz-note / hz-cta）；かつて実行パネルの .cta と衝突し、黒いバーが発生しました。
ページ切り替え後のコンテンツはステータスバー/トップバーの下にスライドしてはいけません；テーブルは灰色の背景を引き継いではいけません。
fromTo では常に immediateRender:false を使用します。そうしないと、シーク時に最初のフレームが正しく表示されません。
フレームグラブは以下をカバーする必要があります：すべてのクリックの前後、タイピング中、行折り返しの瞬間、すべてのページ切り替え後。

デスクトップの追加事項（ケース3からの落とし穴）

クラス名の衝突を避ける：コンポーザーのモデルピッカーはかつて .md を使用していましたが、モーダルの .md と衝突し、ブロック全体が入力ボックスの外に出てしまいました。モーダル、テキストオーバーレイ、コンポーネントにはそれぞれ独自のプレフィックスを付けます。
ボタンには拡大されたフォントサイズに対応する十分な幅を持たせます（例：「Run Backtest」≥160pt）。そうしないと、ラベルが2行に折り返されます。
アシスタントでは、バブル、Choice Box、返信を動的に実際の高さで積み重ねます（セットアップ中に offsetTop/offsetHeight を読み取り、順番にレイアウトし、チャットのスクロールを計算します...

（翻訳は省略されました）

Minara ユースケースチュートリアルビデオスキル