src/Journey.jsx

import React, { useRef, useState } from "react";
import "./journey.css";
import "./responsive-fixes.css";
import { storyboards } from "./storyboards.js";

const outputs = [
  { id: "kling", label: "B", model: "Kling v3 Pro", file: "/media/pengin-kling-v3.mp4", generated: "2 cuts / 5 sec each", cost: "$1.12", result: "会話は表情変化が大きい。改善作業は安定するが動きは控えめ。" },
  { id: "veo", label: "A", model: "Veo 3.1 Fast", file: "/media/pengin-veo-v3.mp4", generated: "2 cuts / 6 sec each", cost: "$1.20", result: "会話の手振りが明確。改善作業はカメラ移動とパララックスが大きい。" },
];

const resetConcepts = [
  { id: "A", type: "EDITORIAL MANIFESTO", title: "会社を、作品にする。", image: "/evidence/reset-v1/concept-a-editorial-manifesto-hook-v2.png", hook: "実在チーム × 紙のインスタレーション", story: "自社サイト制作を、会社の判断と文化を可視化する行為として描く。", role: "広告画としての強度を検証" },
  { id: "B", type: "PROCESS TENSION", title: "5案。1つも、妥協しない。", image: "/evidence/reset-v1/concept-b-five-routes-hook-v3.png", hook: "5つの実デザイン案 × 選択の緊張", story: "案数の自慢ではなく、違う5案を作ったからこそ選べた過程を描く。", role: "構成と証拠性を検証" },
  { id: "C", type: "SOCIAL DOCUMENTARY", title: "画面の外まで、設計する。", image: "/evidence/reset-v1/concept-c-documentary-hook-v2.png", hook: "当事者の顔 × 一言目の違和感", story: "本人の発言から、会話・撮影・設計・実装・公開後の変化へつなぐ。", role: "媒体ネイティブさを検証" },
];

const embeddedStudies = [
  {
    id: "GALLERY",
    title: "5案。1つも、妥協しない。",
    image: "/evidence/reset-v1/concept-b-embedded-type-gallery-v1.png",
    role: "0–2.5秒 / 事実フック",
    material: "公式5デザイン方向 + 生成した紙・ロープ・クランプ",
    structure: "5枚を一目で数えられる展示へ変換し、巨大な5とコピーを物理空間へ衝突させる。",
    prompt: "exactly five boards / exact headline only / giant cropped 5 / typography interlocks with boards and clamp / high-key editorial photography / PENGIN blue + safety orange / no footer, logo or extra text",
    result: "PASS / 5枚・文字・余計な要素を目視確認"
  },
  {
    id: "DECISION",
    title: "選ぶ、ではない。決める。",
    image: "/evidence/reset-v1/concept-b-embedded-type-decision-v1.png",
    role: "8–12秒 / 物語の転換",
    material: "公式5デザイン方向 + 実在メンバーの制作写真",
    structure: "俯瞰の検討現場へ5案を扇状に置き、オレンジの筆跡を判断の瞬間として固定する。",
    prompt: "exactly five sheets / preserve real team identity / one orange decision circle / embedded screen-print typography / exact headline only / no stock-office expression",
    result: "PASS AFTER EDIT / 初稿の余計な文字を除去"
  }
];

const motionValidations = [
  {
    id: "C",
    title: "Direct address / 人物同一性",
    file: "/media/reset-v1/c-hook-direct-address-v1-seedance-2.mp4",
    image: "/evidence/reset-v1/concept-c-documentary-hook-v2.png",
    cost: "$3.41 / 5 sec / 1080p",
    verdict: "FAIL / 70",
    note: "人物・背景の保持は良好。ただし指定以上のフレーミング変化と、トーキングヘッド単体の停止力不足により冒頭フックから外す。本編中の本人発言カット候補。",
    prompt: "One continuous premium creator-documentary shot. The real Japanese man holds direct eye contact with the camera, takes a small natural breath, and begins speaking with restrained conviction. His head and shoulders make subtle conversational movements; his mouth forms natural Japanese speech without exaggerated gestures. The clipped design sheets and blue fabric behind him respond to a very light studio airflow. Camera remains close and handheld with only 2–3 cm of organic drift, no push-in. Preserve his exact identity, hair, clothing, skin texture, background layout, blue palette and orange tape. No cuts, no text, no logos, no added people, no foreground hands, no face morphing, no beauty smoothing, no dramatic lighting change. End with the same direct gaze so the next hard cut remains clean."
  },
  {
    id: "B",
    title: "Five routes v1 / 複合動作",
    file: "/media/reset-v1/b-hook-five-routes-v1-seedance-2.mp4",
    image: "/evidence/reset-v1/concept-b-five-routes-hook-v3.png",
    cost: "$3.41 / 5 sec / 1080p",
    verdict: "FAIL / 73",
    note: "5案の視覚メタファーは強いが、カメラ寄りと人物動作が勝ち、核となる落下→中央キャッチ→左右スイングが弱い。",
    prompt: "One continuous high-key editorial installation shot. All five hanging PENGIN proposal boards are visible and countable. At the first instant the five boards complete a short downward drop of 8–12 cm, ropes tighten and boards swing with believable paper-board weight. The safety-orange industrial clamp firmly catches and grips the central dark penguin-and-water board; the central board stops while the four side boards continue one diminishing swing. The real Japanese designer at the bottom looks from the left routes to the selected center board and makes one small decisive marker gesture without touching the board. Camera performs a restrained 10 cm upward dolly with subtle parallax, preserving the clean white copy field above. Preserve exactly five boards, exactly one person, all artwork, rope attachment points, hands, marker, high-key white studio, blue/black palette and orange clamp. No cuts, no extra boards, no extra hands, no text, no logos, no morphing, no floating UI, no fast chaotic motion."
  },
  {
    id: "B2",
    title: "Five routes v2 / 物理だけ",
    file: "/media/reset-v1/b-hook-five-routes-v2-physics-seedance-2.mp4",
    image: "/evidence/reset-v1/concept-b-five-routes-hook-v3.png",
    cost: "$3.41 / 5 sec / 1080p",
    verdict: "FAIL / 64",
    note: "中央固定と左右スイングは改善。ただし横長案の2本吊りが6枚目に見える曖昧さと、裏面が別案に見える変化が残った。I2V反復を止め、5枚を別レイヤー管理するコンポジットへ移行。",
    prompt: "One continuous locked-off high-key editorial installation shot focused on one unmistakable physical event. Begin motion immediately in the first frames: all five visible hanging proposal boards are already traveling downward together with residual inertia; do not begin as a still display. Within the first 0.8 second, all five boards drop 10 cm, their ropes snap fully taut, and the safety-orange industrial clamp catches the central dark penguin-and-water board. The caught center board makes one small vertical rebound and becomes nearly still. At the same time, the four side boards clearly overshoot, swing forward and backward with believable board weight, then complete two visibly diminishing swings. Keep every board fully inside frame and clearly countable as exactly five for all five seconds. Camera is tripod-locked: zero zoom, zero dolly, zero pan, zero reframing. The single Japanese designer remains almost completely still at the bottom, watching the center board; no arm raise and no marker gesture. Preserve exactly five boards, exactly five ropes, exactly one orange clamp, exactly one person, the original artwork, rope attachment points, hands, marker, white studio, blue-black palette and negative space. No cuts, no extra boards, no duplicated panels, no stretching, no resizing, no warped paper, no extra hands, no text, no logos, no morphing, no floating UI. The drop, taut-rope stop, center rebound and side-board swings must be visibly readable even with no audio."
  },
  {
    id: "K",
    model: "KLING V3 PRO / EMBEDDED TYPE",
    title: "Gallery type / 文字保持",
    file: "/media/reset-v1/embedded-type-gallery-v1-kling-v3-pro.mp4",
    image: "/evidence/reset-v1/concept-b-embedded-type-gallery-v1.png",
    cost: "$0.56 / 5 sec",
    verdict: "PASS / 90",
    note: "Claude -pが0.5秒刻み10フレームを実画像確認。全文字を保持し、5枚を識別可能なまま微揺れと影で生命感を追加。現時点の本編フック採用。",
    prompt: "Preserve the exact Japanese headline, all five boards, every artwork and the single orange clamp. Very slow 3 cm forward drift; only restrained 1–2 cm board sway and subtle daylight-shadow movement. Typography must remain pixel-stable and perfectly legible. No cuts, reframing, new text, changed characters, duplicated boards or morphing."
  },
  {
    id: "S",
    model: "SEEDANCE 2 / EMBEDDED TYPE",
    title: "Gallery type / 質感優先",
    file: "/media/reset-v1/embedded-type-gallery-v1-seedance-2.mp4",
    image: "/evidence/reset-v1/concept-b-embedded-type-gallery-v1.png",
    cost: "$3.41 / 5 sec / 1080p",
    verdict: "FAIL / 73",
    note: "0〜2秒の紙・光・影は最良。ただし2.5秒以降に寄りと下移動が進み、5・案・句点と左端パネルが見切れた。固定カメラv2はfal残高枯渇で未実行。",
    prompt: "Preserve the exact Japanese headline, all five boards, every artwork and the single orange clamp. Very slow 3 cm forward drift; only restrained 1–2 cm board sway and subtle daylight-shadow movement. Typography must remain pixel-stable and perfectly legible. No cuts, reframing, new text, changed characters, duplicated boards or morphing."
  },
];

const phases = [
  ["00", "開始", "予算5万円で、単発動画ではなく再利用可能なAI動画制作基盤を作る", "Provider候補・品質Gate・費用上限を定義"],
  ["01", "無効テスト", "Culture / Thoughtの静止画を3モデルで5〜6秒I2V化", "6秒1シーンでは完成広告を比較できないため、順位を撤回"],
  ["02", "素材探索", "Claude/Codexセッション、Meetメモ、Drive、公式サイト、YouTube、ローカル資産を棚卸し", "最終作は公開可能なPENGIN実写・公式資料・公式サイトへ限定"],
  ["03", "画像Gate", "Culture / Proof / Thoughtの3構成を静止画で先に検証", "Claude採点79 / 68 / 61。80点未満のまま有料動画化しない"],
  ["04", "完成尺を先に設計", "24秒・8カットの編集タイムラインを仮素材で組む", "生成AIが必要なのは人物2カットだけと判定"],
  ["05", "有料比較", "同じ入力画像・同じプロンプトでVeo / KlingをAPI生成", "4生成 $2.32。生成モデル以外の条件を固定"],
  ["06", "合成・QA", "文字・ロゴ・UI・資料・音・尺を決定論的に合成", "2本とも24秒 / 1080×1920 / 30fps / AACで公開"],
  ["07", "全体棄却・工程リセット", "構成・素材・文字・スライド・ストーリーが全項目で基準未達", "v3をREJECTED。媒体ベンチマークと広告画像生成からやり直す"],
  ["08", "文字込み画像へ転換", "参照プロンプトを文字階層・色・違和感・禁止表現・目視QAへ分解し、PENGIN一次資産から2構成を生成", "GALLERY / DECISIONを採用。予定外文字が入った初稿は不採用"],
  ["09", "文字保持モデル比較", "同一文字込み画像をKling / SeedanceへAPI投入し、0.5秒刻み20フレームをClaude -pで独立採点", "Kling 90 PASS、Seedance 73 FAIL。Klingを本編フックへ採用"],
];

const scenes = [
  ["01", "0.0–2.2", "フック", "つくる。", "PENGIN実写 + タイポ", "編集"],
  ["02", "2.2–5.0", "会話へ寄る", "その先まで。", "shot-02-conversation.jpg", "Veo / Kling"],
  ["03", "5.0–7.8", "支援領域", "戦略 / DESIGN / BUILD", "PENGIN公式サイト実績UI", "編集"],
  ["04", "7.8–10.8", "価値提示", "リード獲得に強い、制作。", "会社概要資料", "編集"],
  ["05", "10.8–14.0", "一気通貫", "届ける。", "認知→リード→商談の図解", "編集"],
  ["06", "14.0–17.2", "改善作業", "改善する。", "shot-06-improvement.jpg", "Veo / Kling"],
  ["07", "17.2–20.6", "証拠集約", "制作 × マーケティング", "実績UI + 制作写真 + 図解", "編集"],
  ["08", "20.6–24.0", "CTA", "つくって終わらない。PENGIN", "正規ロゴ + PENGINブルー", "編集"],
];

const prompts = [
  { id: "shot-02", title: "CUT 02 / CONVERSATION", input: "/evidence/inputs/shot-02-conversation.jpg", text: "Documentary office moment. The seated team naturally continues an animated discussion: one person turns to another and gestures clearly with one hand, another smiles and leans forward, a third reacts. The camera performs a deliberate 20–30 cm handheld push-in with slight parallax. Preserve every person’s identity, clothing, room layout, hands, and facial features. No text, no logos added, no morphing, no extra people, no slow-motion, no glowing effects.", intent: "静止写真を会話中の自然な瞬間へ。人物同一性を維持しつつ、20〜30cmの寄りと軽いパララックスだけを加える。" },
  { id: "shot-06", title: "CUT 06 / IMPROVEMENT", input: "/evidence/inputs/shot-06-improvement.jpg", text: "Candid creative work session. The people at laptops actively review their screens together: one points toward a laptop, another nods and makes a small adjustment, and the photographer shifts slightly in the foreground. The camera arcs gently from left to right with clear parallax and settles closer on the collaborators. Preserve identity, clothing, laptops, hands, and office geometry. No text, no added interface, no morphing, no extra people, no artificial light streaks.", intent: "PCを見ながら改善する動作を作る。左から右への緩いアーク移動で奥行きを出し、実在人物・手・PC・室内形状は保持する。" },
];

const roleRows = [
  ["Codex", "統括 / 実装", "素材探索、比較設計、構成、プロンプト、API実行、合成スクリプト、QA、費用記録"],
  ["Claude -p", "独立レビュー", "3枚の構成キーフレームを100点基準で採点。Codex自己採点92〜93を撤回させ、79 / 68 / 61へ修正"],
  ["PENGIN一次資産", "事実と固有性", "社内撮影原本、会社概要資料、公式サイト実績UI、正規ロゴ、公開図解"],
  ["Veo / Kling", "生成担当", "人物の自然動作とカメラ移動。全8カット中、CUT 02・06だけ"],
  ["FFmpeg / 決定論的編集", "正確性担当", "日本語、ロゴ、UI、資料モーション、パン・ズーム、尺、音、最終書き出し"],
];

const baseline = [
  ["Veo 3.1 Fast", "/evidence/baseline/veo-culture.mp4", "6 sec", "$0.60", "人物の自然な動きは良いが、広告全体の判断材料にならない"],
  ["Kling v3 Pro", "/evidence/baseline/kling-culture.mp4", "5 sec", "$0.56", "顔とレイアウトは安定。動き・構成の比較には不足"],
  ["Seedance 2.5", "/evidence/baseline/seedance-culture.mp4", "5 sec", "$2.3112", "品質は成立するが、価格・待機時間を正当化できない"],
];

function CopyPrompt({ text: prompt }) {
  const [copied, setCopied] = useState(false);
  const copy = async () => { await navigator.clipboard.writeText(prompt); setCopied(true); window.setTimeout(() => setCopied(false), 1500); };
  return <button className="copy-button" onClick={copy}>{copied ? "COPIED" : "COPY PROMPT"}</button>;
}

function StoryboardConcept({ concept }) {
  return <article className="story-concept">
    <header><div><span>{concept.id}</span><small>{concept.form} / {concept.duration}</small><h3>{concept.title}</h3></div><dl><div><dt>PREMISE</dt><dd>{concept.premise}</dd></div><div><dt>CONFLICT</dt><dd>{concept.conflict}</dd></div><div><dt>TURN</dt><dd>{concept.turn}</dd></div><div><dt>PAYOFF</dt><dd>{concept.payoff}</dd></div></dl></header>
    <div className="story-frames">{concept.frames.map((frame, index) => <figure key={`${concept.id}-${frame.time}`}><div className={`frame-visual ${frame.className || ""}`}><img src={frame.image} alt={`${concept.title} ${frame.time}秒の絵コンテ`}/><div className="frame-meta"><b>{frame.time}s</b><span>{frame.beat}</span></div><strong>{frame.copy.split("\n").map((line) => <React.Fragment key={line}>{line}<br/></React.Fragment>)}</strong></div><figcaption><span>#{String(index + 1).padStart(2, "0")}</span><p><b>画</b>{frame.visual}</p><p><b>動</b>{frame.motion}</p><p><b>音</b>{frame.sound}</p></figcaption></figure>)}</div>
  </article>;
}

export default function Journey() {
  const videoRefs = useRef([]);
  const [playing, setPlaying] = useState(false);
  const toggleBoth = async () => {
    const videos = videoRefs.current.filter(Boolean);
    if (playing) { videos.forEach((video) => video.pause()); setPlaying(false); return; }
    videos.forEach((video) => { video.currentTime = 0; video.muted = true; });
    await Promise.allSettled(videos.map((video) => video.play())); setPlaying(true);
  };

  return <main className="lab-log">
    <header className="log-header"><div className="log-brand"><b>AVS / AI VIDEO LAB</b><span>EXPERIMENT RECORD 001</span></div><nav><a href="#film">22秒本編</a><a href="#reset">再設計</a><a href="#embedded">文字込み画像</a><a href="#storyboards">絵コンテ</a><a href="#motion">有料動画</a><a href="#trajectory">軌跡</a><a href="#compare">旧成果物</a></nav></header>

    <section className="record-head"><div className="record-title"><p>STATUS <strong>22 SEC REVIEW DRAFT / ITERATION 02</strong></p><h1>生成動画の品質を<br/><span>企画から、作り直す。</span></h1><p className="record-summary">24秒版はモデル比較以前に、構成・素材・文字・スライド・ストーリーが基準未達だったため棄却。媒体実例とPENGIN一次資産を基準に、構成、文字込み広告画、動きの順で再設計する。</p></div><dl className="record-facts"><div><dt>GOAL</dt><dd>再利用可能なAI動画制作基盤</dd></div><div><dt>BUDGET</dt><dd>約¥3,900 / ¥50,000</dd></div><div><dt>PAID RUNS</dt><dd>15（旧10 + reset 5）</dd></div><div><dt>CURRENT GATE</dt><dd>22秒本編 67 / 100</dd></div></dl></section>

    <section className="scope-strip"><div><span>今回比較するもの</span><strong>同一キーフレームの動かし方</strong><p>Kling v3 Pro ↔ Seedance 2</p></div><div><span>固定したもの</span><strong>文字込み画像・5秒・運動指示</strong><p>モデル以外の条件を固定</p></div><div><span>最優先Gate</span><strong>日本語と5枚を壊さない</strong><p>動きの派手さより広告画の保持を優先</p></div></section>

    <section className="full-film-section" id="film"><div className="section-index"><span>FILM</span><div><p>22 SEC PROCESS TENSION / REVIEW DRAFT</p><h2>5案が、1つの“らしさ”になるまで</h2></div></div><div className="full-film-grid"><div className="full-film-player"><video src="/media/reset-v1/pengin-process-tension-film-v1.mp4" poster="/evidence/reset-v1/concept-b-embedded-type-resolve-v2.png" controls playsInline preload="metadata"/><span>9:16 / 22 SEC / SOUND ON</span></div><div className="full-film-copy"><div className="score-shift"><span>CLAUDE -p</span><strong>59 <i>→</i> 67<small>/100</small></strong><b>REVIEW DRAFT / FAIL &lt; 80</b></div><p>初稿の「横長ロゴカード」「5案が収束しない着地」を棄却。5案を背景へ退かせ、選ばれた1枚と正規PENGINロゴが前面に立つ終幕へ再生成した。構造は改善したが、文字の端切れ・静止ホールド・最終CTAは未合格として残す。</p><dl><div><dt>STORY</dt><dd>提示 → 迷い → 判断基準 → 決断 → 1案へ収束</dd></div><div><dt>MATERIAL</dt><dd>PENGIN公式5デザイン方向・実在メンバー・正規ロゴ・生成した文字込み広告画</dd></div><div><dt>ROLES</dt><dd>Codex: 構成/生成/編集　Kling: 冒頭I2V　Claude -p: 全15フレーム独立採点</dd></div><div><dt>COST</dt><dd>本編追加課金なし / 累計約¥3,900</dd></div></dl></div></div><div className="film-beats">{[["0–3.5","5案を提示"],["3.5–6.5","差を連打"],["6.5–9.5","決められない"],["9.5–12.5","ワクワクが基準"],["12.5–16.5","決める"],["16.5–22","1案へ収束"]].map(([time,beat]) => <div key={time}><span>{time}s</span><b>{beat}</b></div>)}</div></section>

    <section className="reset-section" id="reset"><div className="reset-kicker">BENCHMARK RESET / 2026.08.31</div><div className="reset-heading"><h2>小手先で直さない。<br/>入口が違う3企画を作る。</h2><p>現行24秒版への個別FBは停止。TikTokの2秒・6秒視聴、YouTubeのAttention / Branding / Connection / Direction、Reelsの9:16・音・safe zoneを最低条件にした。下の3枚はPENGIN固有素材から作った構成仮説。この段階の後載せ文字は広告画として弱いと判定し、次工程で文字込み生成へ切り替えた。</p></div><div className="reset-grid">{resetConcepts.map((concept) => <article key={concept.id}><div className="reset-visual"><img src={concept.image} alt={`${concept.title}のフック候補`}/><span>{concept.id}</span><div className="reset-copy"><small>{concept.type}</small><strong>{concept.title}</strong></div></div><dl><div><dt>HOOK</dt><dd>{concept.hook}</dd></div><div><dt>STORY</dt><dd>{concept.story}</dd></div><div><dt>TEST</dt><dd>{concept.role}</dd></div></dl></article>)}</div><div className="reset-gate"><b>DECISION</b><span>後載せ文字を撤回。参照プロンプトの文字設計・違和感・素材統合を、画像生成条件と不採用基準へ固定した。</span></div></section>

    <section className="embedded-section" id="embedded"><div className="section-index"><span>KV</span><div><p>EMBEDDED TYPOGRAPHY KEYFRAMES</p><h2>文字を載せず、文字まで撮る</h2></div></div><p className="section-lead">同じB構成を、役割が異なる2枚へ分解。参照プロンプトの「巨大文字」「被写体との前後交差」「意図的な違和感」「短く大きく少なく」を、プロンプトと目視QAの両方へ入れた。</p><div className="embedded-grid">{embeddedStudies.map((study) => <article key={study.id}><figure><img src={study.image} alt={`${study.title}の文字込み広告キーフレーム`}/><figcaption><b>{study.id}</b><span>{study.role}</span></figcaption></figure><div><small>{study.result}</small><h3>{study.title}</h3><dl><div><dt>素材</dt><dd>{study.material}</dd></div><div><dt>構成</dt><dd>{study.structure}</dd></div><div><dt>生成指示</dt><dd>{study.prompt}</dd></div></dl></div></article>)}</div></section>

    <section className="storyboard-section" id="storyboards"><div className="section-index"><span>SB</span><div><p>STRUCTURE / STORY / STORYBOARD</p><h2>18フレームで、物語を比較する</h2></div></div><p className="section-lead">同じ素材の見た目違いではない。主人公、葛藤、転換、着地が異なる3本を、0秒から約20秒まで6地点で固定した。各フレームに画・動き・音の責任を持たせる。</p><div className="storyboard-list">{storyboards.map((concept) => <StoryboardConcept concept={concept} key={concept.id}/>)}</div></section>

    <section className="motion-section" id="motion"><div className="section-index"><span>MV</span><div><p>PAID MOTION VALIDATION</p><h2>合格した静止画だけ、動かす</h2></div></div><p className="section-lead">完成動画を一発生成しない。前半3本で人物・複数物体の難所を特定し、後半2本では文字込み合格画像を同条件でKling / Seedanceへ投入。Claude -pが0.5秒刻みの全20フレームを実画像レビューし、Klingだけが80点Gateを通過した。</p><div className="motion-grid">{motionValidations.map((item) => <article key={item.id}><div className="motion-media"><video src={item.file} poster={item.image} controls muted playsInline preload="metadata"/><span>{item.id}</span></div><div className="motion-copy"><div className="motion-title"><div><small>{item.model || "SEEDANCE 2 / I2V"}</small><h3>{item.title}</h3></div><b className={item.verdict.startsWith("PASS") ? "pass" : "pending"}>{item.verdict}</b></div><p>{item.note}</p><dl><div><dt>COST</dt><dd>{item.cost}</dd></div><div><dt>ROLE</dt><dd>{item.id === "C" ? "supporting shot / direct address" : "story hook / selection tension"}</dd></div></dl><div className="motion-prompt"><CopyPrompt text={item.prompt}/><pre>{item.prompt}</pre></div></div></article>)}</div><div className="motion-next"><b>ADOPTED</b><strong>文字込みキーフレーム → Kling v3 Proで最小限の生命感 → 編集で物語へ接続</strong><p>後載せ文字の安っぽさとI2Vの文字破壊を両方避ける。Seedance固定カメラ再試行はfal残高枯渇のため保留し、合格済みKlingで先へ進む。</p></div></section>

    <section className="log-section" id="trajectory"><div className="section-index"><span>01</span><div><p>TRAJECTORY</p><h2>どう辿ったか</h2></div></div><div className="trajectory-list">{phases.map(([no,name,action,decision]) => <article key={no}><span>{no}</span><h3>{name}</h3><p>{action}</p><strong>{decision}</strong></article>)}</div></section>

    <section className="log-section baseline-section"><div className="section-index"><span>02</span><div><p>REJECTED BASELINE</p><h2>なぜ最初の比較を捨てたか</h2></div></div><p className="section-lead">同じCultureキーフレームを3モデルでI2V化した初回テスト。疎通・課金・速度の確認には使えたが、構成、情報伝達、音、CTA、24秒の視聴維持を評価できないため、モデル順位を撤回した。</p><div className="baseline-grid">{baseline.map(([model,file,duration,cost,note]) => <article key={model}><video src={file} controls playsInline preload="metadata"/><div><h3>{model}</h3><p>{duration} / {cost}</p><span>{note}</span></div></article>)}</div><div className="cost-note"><b>この段階の費用</b><span>$6.9424 / 約¥1,109</span><p>成果物比較としては無効。API接続・処理時間・実課金の学習として記録。</p></div></section>

    <section className="log-section gate-section"><div className="section-index"><span>03</span><div><p>IMAGE QUALITY GATE</p><h2>動画化する前に、構成を落とす</h2></div></div><div className="gate-grid">{[["Culture",79,"/evidence/keyframes/culture-v2.jpg","最優先。実写の固有性は強いがクロップと完成実績への接続が不足"],["Proof",68,"/evidence/keyframes/proof-v2.jpg","証拠性は高いが、1画面3カードで情報過多・文字欠け"],["Thought",61,"/evidence/keyframes/thought-v2.jpg","フックは強いが、横長図解を縦画面へ詰め込み可読性を失った"]].map(([name,score,image,note]) => <article key={name}><img src={image} alt={`${name}構成のキーフレーム`}/><div><span>CLAUDE -p SCORE</span><strong>{score}<small>/100</small></strong><h3>{name}</h3><p>{note}</p></div></article>)}</div><p className="gate-decision"><b>Gate:</b> 80点未満は有料生成へ送らない。Codex自己採点92〜93点は甘いと判定し、Claude -pの指摘を受けて撤回。</p></section>

    <section className="log-section" id="structure"><div className="section-index"><span>04</span><div><p>STRUCTURE / 24 SEC</p><h2>最終構成と素材の役割</h2></div></div><div className="scene-table-wrap"><table className="scene-table"><thead><tr><th>CUT</th><th>TIME</th><th>役割</th><th>コピー</th><th>素材</th><th>担当</th></tr></thead><tbody>{scenes.map((scene) => <tr key={scene[0]}>{scene.map((cell,index) => <td key={`${scene[0]}-${index}`} data-label={["CUT","TIME","役割","コピー","素材","担当"][index]}>{cell}</td>)}</tr>)}</tbody></table></div><div className="scene-strip">{scenes.map(([no]) => <figure key={no}><img src={`/evidence/scenes/scene-${no}.png`} alt={`完成動画CUT ${no}`}/><figcaption>CUT {no}</figcaption></figure>)}</div></section>

    <section className="log-section asset-section"><div className="section-index"><span>05</span><div><p>SOURCE LEDGER</p><h2>使った素材と使わなかった素材</h2></div></div><div className="asset-ledger"><article><span>USED / PUBLIC-SAFE</span><h3>最終成果物へ採用</h3><ul><li>PENGIN社内撮影原本：人物カットの事実性</li><li>PENGIN会社概要資料：訴求と図解</li><li>PENGIN公式サイト実績UI：制作実績の証拠</li><li>PENGIN正規ロゴ・ブランドカラー：CTA</li><li>自作電子音：第三者音源を使わない音設計</li></ul></article><article><span>RESEARCH ONLY</span><h3>企画探索には使用、公開物へ原文不使用</h3><ul><li>Claude 200セッション / Codex 1,445セッション</li><li>PENGIN DriveのMeet・Geminiメモ100件以上</li><li>ローカル案件資産513件</li><li>PENGIN公式YouTube・台本・撮影資料</li></ul></article><article><span>EXCLUDED</span><h3>最終成果物から除外</h3><ul><li>顧客機密・非公開会議の原文</li><li>生成AIが描いた日本語・ロゴ・UI</li><li>出所が曖昧な画像と第三者音源</li><li>構成比較に使えない6秒デモの順位</li></ul></article></div></section>

    <section className="log-section" id="prompts"><div className="section-index"><span>06</span><div><p>PROMPTS / EXACT INPUT</p><h2>生成した2カットの全プロンプト</h2></div></div><p className="section-lead">VeoとKlingへ同じ画像・同じ本文を入力。Provider固有の差はパラメータだけ。プロンプトには「何を動かすか」と同時に「何を壊さないか」を明記した。</p><div className="prompt-list">{prompts.map((prompt) => <article key={prompt.id}><div className="prompt-input"><img src={prompt.input} alt={`${prompt.title}の入力画像`}/><span>EXACT INPUT IMAGE</span></div><div className="prompt-body"><div className="prompt-title"><div><span>{prompt.id}</span><h3>{prompt.title}</h3></div><CopyPrompt text={prompt.text}/></div><p className="prompt-intent">{prompt.intent}</p><pre>{prompt.text}</pre></div></article>)}</div><div className="parameter-grid"><article><span>VEO 3.1 FAST</span><dl><div><dt>endpoint</dt><dd>fal-ai/veo3.1/fast/image-to-video</dd></div><div><dt>duration</dt><dd>6s</dd></div><div><dt>resolution</dt><dd>720p</dd></div><div><dt>aspect</dt><dd>9:16</dd></div><div><dt>audio</dt><dd>false</dd></div><div><dt>safety</dt><dd>4</dd></div></dl></article><article><span>KLING V3 PRO</span><dl><div><dt>endpoint</dt><dd>fal-ai/kling-video/v3/pro/image-to-video</dd></div><div><dt>duration</dt><dd>5s</dd></div><div><dt>shot type</dt><dd>customize</dd></div><div><dt>cfg scale</dt><dd>0.5</dd></div><div><dt>audio</dt><dd>false</dd></div><div><dt>negative</dt><dd>blur / morphing / extra people / fingers / text / logos</dd></div></dl></article></div></section>

    <section className="log-section role-section"><div className="section-index"><span>07</span><div><p>RESPONSIBILITY MAP</p><h2>誰に、何を任せたか</h2></div></div><div className="role-table">{roleRows.map(([name,role,work]) => <article key={name}><h3>{name}</h3><strong>{role}</strong><p>{work}</p></article>)}</div><div className="method-rule"><b>方法を切り替える基準</b><p>同じ種類の生成破綻が2回続いたら、プロンプト修正を続けない。人物・日本語・ロゴ・UIは生成から外し、実素材と決定論的編集へ戻す。</p></div></section>

    <section className="log-section final-compare" id="compare"><div className="section-index invert"><span>08</span><div><p>ARCHIVED / INVALID COMPARISON</p><h2>棄却した24秒版</h2></div><button onClick={toggleBoth}>{playing ? "PAUSE BOTH" : "PLAY BOTH FROM 00:00"}</button></div><p className="invalid-notice"><b>REJECTED:</b> 以下は完成品でもモデル順位でもない。構成・素材・文字・資料・物語の前提が基準未達だったため、制作工程の失敗記録としてのみ残す。</p><div className="output-grid">{outputs.map((output,index) => <article key={output.id}><div className="output-head"><span>{output.label}</span><div><h3>{output.model}</h3><p>{output.generated} / {output.cost}</p></div></div><video ref={(node) => { videoRefs.current[index] = node; }} src={output.file} controls playsInline preload="metadata" onPause={() => setPlaying(false)}/><p>{output.result}</p></article>)}</div><div className="compare-checks"><h3>残す学習</h3><ol><li>人物2カットだけの差では、完成動画AIの比較にならない</li><li>静止資料のパン・ズームを主構成にしない</li><li>参考プロンプトは説明文ではなく、実際の画像生成工程へ使う</li><li>媒体ベンチマークと静止コンテの合格前に課金しない</li></ol></div></section>

    <footer><b>AGENT VENTURE STUDIO / AI VIDEO LAB</b><span>BUILD LOG 001 — UPDATED 2026.08.31</span><p>FBはこの会話スレッドで管理。ページ上に評価フォームは設置しない。</p></footer>
  </main>;
}