---
id: 2026-10-07-motion-sample   # lab-id。作ったら改名しない
title: 「画像と図解を、在庫のように管理する」を、動きで説明する5枚のデッキ
purpose: 記事・ヘルプのティザーに派生させる見本。「口述 → モーションのある HTML プレゼン → 記事」の作り方の最初の1本（tools/deck の動作確認を兼ねる）
target: deck
target_path: ""
status: 選定中
lane: 通常
selector: ""
decided_at: ""
shipped_at: ""
routes: [html-opus]
how: 各カードの動画は、そのスライドの動きを 480px のループにしたもの（原本は 1280×720・60fps の mp4 を Drive に保存済み）。良い・直したい・使わないをスライドの ID（例 r01-s3）で言うだけ。派生先（記事の図・記事内ループ・ヘルプのティザー）の候補も、どれを作るか一言で。AI が lab.md と manifest に選定者・日付・理由を書く
---

# 「画像と図解を、在庫のように管理する」を、動きで説明する5枚のデッキ

## お題

- 論点（1行）: 2026-10-07 に決めた「ビジュアルの置き場」を、文字を減らして図と動きで伝えられるか
- 正本: nanco-knowledge `decision-log/2026-10-07-visual-lab-placement.md`、reports `visual-lab-2026-10.html`
- 可算構造: 置き場は4つ（棚札 = knowledge / 倉庫 = Drive / 作業台 = reports の labs / 出荷口 = 各リポ）。伝票番号 = lab-id
- 掲載先と実寸: デッキは 1280×720。派生の候補は記事の図（静止＋テキスト）・記事内ループ（幅 480〜720px）・ヘルプのティザー
- 固定するもの: 白地（cream・beige・ivory は使わない）/ teal #367976 / セージのラダー / mustard #C99A2E は点だけ（1枚に1つ）/ 見出しは明朝・ラベルはゴシック / 1枚1メッセージ・本文要素は3つまで
- 振るもの: 動きの型（広がる・収まる・流れる・絞る・降りて並ぶ）

## 作り方

- エンジン: `tools/deck/`（README に手順）。ソースは `src/`（`deck.json`・`slides/*.html`・`deck.css`・`deck.js`）、ビルドした1枚の HTML は `src/deck.html`（オフラインで開ける）
- 書き出し: `node tools/deck/record.mjs labs/2026-10-07-motion-sample/src/deck.html --name r01-s{n} --webm labs/2026-10-07-motion-sample/motion --poster labs/2026-10-07-motion-sample/thumbs --manifest labs/2026-10-07-motion-sample/manifest.json`
- 原本: mp4 5本と PDF（`deck-r01.pdf`）は Drive `visual-lab/2026-10-07-motion-sample/originals/` に退避済み（md5 照合、manifest に Drive ID）
- テキスト: `src/deck-text.md`（`python3 tools/deck/notes.py` で書き出した見出し・図の中身・ノート）。記事にはスライドのスクショを貼らず、ここから使う

## ラウンド

### r01（発散）— 2026-10-07

5枚それぞれで違う動きの型を試した。

| 案 | 見出し | 動き | ループ |
|---|---|---|---|
| r01-s1 | 作るほど、行方が分からなくなる。 | 1枚の案が近くの案から生まれるように広がり、54枚に散らばる。最後に探す輪が3枚の上をさまよって「?」 | out |
| r01-s2 | 置き場は、物の種類で決める。 | 4つの置き場の枠が描かれ、クリックで案が種類ごとに収まる（文書は棚札、原本は倉庫、縮小は作業台、1枚だけ出荷口へ） | veil |
| r01-s3 | 伝票番号が、全部をつなぐ。 | 伝票（2026-10-07-top-stage）がクリックごとに 倉庫 → 作業台 → 出荷口 と進み、着くたびに記録の札（原本 24案 / 選定 r02-a12 / 採用 www）が付く | out |
| r01-s4 | 12案を並べて、1つを出す。 | 12案 → 3案だけ残る → 1案に点 → 出荷口へ運ばれる。左下の数が 12 → 3 → 1 | out |
| r01-s5 | 落ちた案も、倉庫に全部残す。 | 4枚目の終わりから、11案と採用案の原本の写しが倉庫の棚に降りて並ぶ。退避済み 0 → 12 | veil |

- つなぎ: 1→2 と 4→5 は「前の終わり = 次の始まり」（同じ seed・同じ座標）にして xfade でつなぐ。見出しは `.vt-hd` で古い方を消してから新しい方を出す
- 書き出しの確認: 同じスライドを2回撮って比べ、90フレーム中87枚が完全一致、残り3枚も画素の差は最大 1/255（描画のゆらぎ。時間のずれはない）
- 残した案 / 落とした案: 未選定

## 裁定

- 採用:
- 理由:
- 採用先のパス:
- 勝った軸値（次の探索の弾になるもの）: