> [編集素材一式をダウンロード](source.zip) · [動画を見る](index.html)

# Dotsを2分で — 動く手書きホワイトボード

一言：細いペンの線と、紙を運ぶ棒人間で、Dotsの仕事を2分で紹介します。

完成物URL：[動画と作り方を見る](https://okemonogatari-hash.github.io/html-share-box/dots-whiteboard-2026-10-03/)

サムネ：`poster.png`（完成MP4の34秒から保存）

## 本人の頼み方（原文）

「あと、ついでに昨日途中まで作っていたDotsの使い方についてもお願いします！✨ Dotsはこんな機能でこんなことができて、今のところこんなユースケースとか、世界中の人たちとか、SNSではこんな使い方もあるよ、みたいなことをまとめたいです😊 手書き風ホワイトボードが動く紹介動画を3分くらいの枠で作ってみようか🎬 他のAIの課金は最低限にして、あれは使っていいよ。ちなみにGemini TTSは使って、2分ぐらいの動画にしてみようか💰 ね、あの、手書き風ホワイトボードのスタイルも自分の中で使えるようにしてみたいな✍️」

最後の「2分」を採用。前作への「絵とか手書きのクオリティがまだ差がある」を引き継いだ。今回の映像は新しいフォルダで作り、前作ファイルを変更していない。

## AIへ渡した制作指示

親担当からの視覚制作委任は `CREATIVE_PROMPT.txt`。確定内容は `script.json`、各章の実時間は `narration/timing.json`。正式台本受領前に絵柄と描画ライブラリを用意し、受領後に文言と描き順を同期した。

## 道具とモデル

- 視覚設計・実装：Codex内の制作担当。親は今回の本人指定に基づきAstra ultraを委任指定。API応答から実行モデル名を独立取得した記録はない。
- 動画：HyperFrames **0.8.114**、ローカルGSAP。前作のCLI固定版0.8.99とは別プロジェクトで、当日のnpm現行版を確認して固定した。
- 絵：オリジナルSVG。画像生成API・有料素材は使用しない。白板の線は既存 `whiteboard-ink` レジストリ部品の「経路の実測長と描き順」の仕組みを参照し、人物と小物、場面を新規実装。
- 字：Google Fontsの **Yomogi Regular**。OFLライセンス本文を `assets/Yomogi-OFL.txt` に同梱。
- 声：親担当が **Gemini 3.8 Flash TTS / Kore** で生成。生成記録・使用量は `narration/generation-record.json`。原音102.6秒を音速度を変えずに段落へ分け、間を足して120秒へ配置。
- BGM・効果音：なし。線と声が追えることを優先。
- 検査：HyperFrames `check`、ローカルPNGの目視、ffprobe、FFmpegによる出力MP4のフレーム抽出。音声の内容検査は親担当のASR。耳での実聴を済ませたとは扱わない。

## 追加のAPI利用について

初回のHyperFrames `snapshot` で、ツールが環境の既存Gemini接続を自動検出し、9枚のフレーム説明を生成した。コマンドの既定動作を事前に把握できておらず、想定外の追加解析となった。生成物は `qa/automatic-frame-descriptions.md`。使用量と課金額はCLI結果に記録されておらず未確認。以降は **`--describe false`** を指定して停止した。画像・音声の追加生成はしていない。

## 素材の出どころ

- 説明の根拠：`sources.md` にあるOpenAI公式資料とSNS原投稿。研究担当が2026-10-03に確認。投稿者の顔写真、画像、動画は映像素材に使わない。
- 前作の絵柄参照：`../openai-devday-2026-09-30/motion-whiteboard/style-test/radio-handdrawn-v2.png`。画像自体は今回の動画へ貼り込まず、細い線、十分な余白、人物が動作を担う点を参照した。
- 字：https://github.com/google/fonts/tree/main/ofl/yomogi
- ランタイム：前作のローカル `assets/gsap.min.js` をコピー。
- 絵と図：本作品用に新規作成したSVG。ブランドロゴや製品UIの再現ではない。

## 作成と修正

1. 前作の試作画像を目視し、白地・細線・Yomogiの文字で統一。
2. 8場面の棒人間、小物、線の描画順、紙の連続した手渡しを実装。
3. 正式台本と120秒音声を受領。18／36／53／65／74／85／106秒の章境界に合わせる。
4. Riley Brownさんの投稿は移動場所が確定しないため、「移動中」の文言と歩行表現を除去。
5. SVGの配置グループと移動グループを分離し、紙が意図した手元へ渡るよう修正。人物の歩行に脚の交互の動きを加える。
6. 文字が書き終わってから読む時間を確保。商談場面で人物と重なった矢印を除去。SNS末尾の余分な免責文を正式台本の「それぞれの利用者の体験談です」へ戻す。
7. 正規レンダラーで1080p/30fpsのMP4を書き出し、出力の尺・映像・音声・末尾を確認する。実際の最終結果は `QA.md`。

初回出力後、冒頭の手渡しと締めの紙の上辺を顔より下へ修正。独立査読で、商談場面の56.4秒にも口と紙の重なりが見つかったため、持っている間は40px下げ、机へ置く終点は維持した。修正後の56.4秒・58秒は別担当も原寸で確認した。追加修正はローカルレンダリングのみ。

## 作り直し方

`README.md` の7手順。次回も `lib/whiteboard.mjs` の人物・小物・描画処理を使える。題材を替える際は、台本だけでなく「誰が、何を、どうする」の物の受け渡しも替える。日本語文字は編集可能なSVGテキストのまま保持している。

## そのまま貼れるプロンプト

道具：HyperFrames（ローカルSVG・GSAP）、Gemini TTS、無料フォントYomogi。

```text
この作品の手書きホワイトボードの部品を使って、次の題材を約2分で紹介する日本語動画を作ってください。

題材：[紹介したいテーマ]
見てほしい人：[相手]
伝えたいこと：[3つ程度]
参照資料：[公式資料や元の投稿URL]

1920×1080、30fps、約120秒。白地に細い墨色の線、Yomogiの手書き文字、差し色は薄青と桃を少し。
人が何を渡し、誰が受け取り、どう進めるかを棒人間の動きで表してください。線は順番に描き、人物は紙を渡す・運ぶ・指す・頷く動作を担います。
単なる静止画の切り替えにせず、説明の動詞が目で分かるようにしてください。

まず参照資料を確認して、公式の説明・利用者の体験談・こちらで作った例を区別します。
Gemini TTSの既存接続でナレーションを作り、実際の声の長さへ描き順を合わせます。追加の画像生成や有料素材は使わず、BGMはなし。新たな有料APIが必要になった場合は、先に用途と費用を示してください。

lib/whiteboard.mjs の線・文字・人物・小物・場面切替を再利用し、build.mjs の物の受け渡しを題材に合わせて替えます。
HyperFramesの正規レンダラーを使い、snapshotは必ず --describe false を付けて追加解析APIを止めます。
日本語の読みやすさ、紙と顔の重なり、持ち始め・運ぶ途中・置く直前、最後の切れを実フレームで確認してください。

完成MP4、実フレームの表紙、章から頭出しできる視聴ページ、出典、編集可能なコード、PROCESSと再制作手順を保存してください。外部公開は公開先と内容の許可を得てから行います。
```