作った物と、そのプロンプト。

あなたが今できる最高のモーショングラフィックで、見た人が思わず「すごい」と声に出す1本を作ってください。
いま世界中で話題の「AIが本気で作るモーショングラフィック」です。あなたの腕前を、出し惜しみせず全力で証明してください。

■ 作りたいもの（本人の言葉）
月の満ち欠けのしくみを教える30秒の縦長の教材。先に満月を見せてから、太陽・地球・月の位置を上から見た図と、地球から見た月の見え方を並べ、新月→三日月→半月→満月と1つずつ積み上げる

■ お手本（この1本のテンポ・文字・切り替えに寄せる）
- お手本：回る円だけで絵が描ける：フーリエ級数の解説（難しい数式を遊びにする教材）（Miguel Ángel） https://x.com/Miguel07Code/status/2103626582896091611
- 特徴：紺の地に金の線1色、細い円の群れ／答え（ト音記号）を先に見せてから、円1つに戻って積み上げる／円の数（1→3→5…301）が数えられ、形が育つ／数式は小さく添えるだけ、主役は動き
- 動画が見られなくても大丈夫。上の特徴に寄せて作る。お手本の色・ロゴ・言葉・キャラはそのまま使わず、「作りたいもの」に置きかえる
- 作業フォルダにお手本のスクリーンショットがあれば、それも見て寄せる

■ 仕上がりのイメージ
神秘的に、かっこいい解説。30秒。夜の静けさの中で、ひとつの形が次々に変身して、一本の線が走って形を描く。少しずつ時間差で順番に動き、前の場面の形が、そのまま次の場面になる。最後に要点がひと目でわかる形で止まる。

■ 使ってほしい演出（これは出発点です。もっと良い見せ方を思いついたら、そちらを選んでかまいません）
1. モーフィング（Morphing）：ひとつの形が別の形へなめらかに変身していく（丸→ロゴ→文字、など）
2. ラインアニメーション（Line Animation）：線が描かれていく動きで、図・ロゴ・文字の輪郭を見せる
3. マッチカット（Match Cut）：場面の切り替えでカットせず、前の場面の形を次の場面の部品へ受け渡す
4. スタッガー（Stagger）：複数の要素をほんの少しずつ時間差で動かし、波のような流れを作る
5. ブリージング（Breathing Animation）：光や形が、呼吸のようにゆっくりふくらんでしぼむ（ループ作品なら、切れ目なくつなぐ）
6. ライトスイープ（Light Sweep）：光の筋が表面を横切ってきらっと輝く。光のにじみ（グロー）も少し
7. アンビエントサウンド（Ambient Sound Design）：BGMは静かなパッドやオルゴールのような音にして、効果音は大事な瞬間だけ小さく鳴らす

■ 条件
- 長さ：30秒　画面：縦長 9:16（1080×1920）
- 縦長なので、ブラウザの真ん中に 9:16 の枠を高さいっぱいに置き、枠の外は黒にする（画面収録で切り取りやすいように）
- 形式：HTMLファイル1枚（HTML・CSS・JavaScriptをすべてこの中にまとめる）。今いる作業フォルダに motion.html として保存し（同じ名前があれば motion-2.html のように番号をつける）、できたらブラウザで開く（Mac なら open コマンド）
- 再生：最後まで行ったら「もう一度見る」ボタンを出す
- 外部のライブラリを使う時は CDN から読み込む（three.js など）。フォントはパソコンに入っている日本語フォントを使う
- 時間の管理：すべての動きを1本のタイムライン（経過時間から各場面の状態を計算する形）で管理し、コマ落ちしても時間どおりに進むようにする
- 音：Web Audio API で、BGM（テンポ 89BPM 前後の静かな曲）と効果音をコードだけで作る。ブラウザの決まりで最初は音が出ないので、最初の画面に大きな「▶ 音つきで再生」ボタンを置き、押したら映像と音を同時に始める。大事な動きと効果音は同じ瞬間に（効果音は控えめに）
- 画面に出す言葉：「月は、どうして形が変わる？」「新月」「三日月」「半月」「満月」「光っている半分の、見える分だけ」（どれも一字一句そのまま使う）
- 手順の見せ方：「新月」→「三日月」→「半月」→「満月」の順に1つずつ出す。1つあたり約5.4秒、最後に全部が並んだ所で3秒以上止める
- 色：夜の藍色に、月明かりのクリーム色と淡い青（神秘的な空気を少し）（例：#0B1026 #1E2A5A #F6E7B0 #8FB8DE #E9ECF5）
- 文字：日本語は読みやすい太さのフォントで。小さすぎる文字は使わない

■ いちばん大事なこと
- いちばん大事なのは「作りたいもの（本人の言葉）」。上の『仕上がりのイメージ』『使ってほしい演出』『色』が本人の言葉と食い違うところは、本人の言葉を優先する
- 「すごい」は派手さのことではない。静かな作品なら、静けさと美しさで「すごい」と言わせる
- 演出を並べるだけにしない。ひとつの芯のアイデア（たとえば最初に出た形が最後まで姿を変え続ける）で、全部の場面をつなぐ
- その芯は、説明がなくても画面を見るだけで伝わるようにする
- 場面の切れ目はパッと切らず、前の場面の形を次の場面へ受け渡してつなぐ
- 動きは等速にしない。加速・減速（イージング）と、止める瞬間（間）をつける
- キャラクターや動物の絵をコードで描かない。図形・文字・模様・光・3Dの形で表現する（写真やイラストのファイルを渡された時だけ、それを使う）

作り始める前に、芯のアイデアと場面の流れを3行で書き出してから作ってください。
完成したら、使った演出と、芯のアイデアを1行ずつ教えてください。

あなたが今できる最高のモーショングラフィックで、見た人が思わず「すごい」と声に出す1本を作ってください。
いま世界中で話題の「AIが本気で作るモーショングラフィック」です。あなたの腕前を、出し惜しみせず全力で証明してください。

■ 作りたいもの（本人の言葉）
虹ができるしくみの解説（横長16:9・25秒）。机の上の実験室で、白い光がプリズムで7色に分かれ、カメラが寄って雨粒1つの中へ入り、光が曲がって・はね返って・もう一度曲がって出てくるのを見せ、引くと空に虹がかかっている

■ お手本（この1本のテンポ・文字・切り替えに寄せる）
- お手本：ブラックホールで光が曲がる実験室（触れる理科の教材を録画した1本）（Vox） https://x.com/Voxyz_ai/status/2103117246860345550
- 特徴：金属と光の質感の3Dの実験室／道具を並べて、光の通り道を見せる／カメラが寄って、実験の中の宇宙へ入る／最後は光の輪で止まる（触って動かせる）
- 動画が見られなくても大丈夫。上の特徴に寄せて作る。お手本の色・ロゴ・言葉・キャラはそのまま使わず、「作りたいもの」に置きかえる
- 作業フォルダにお手本のスクリーンショットがあれば、それも見て寄せる

■ 仕上がりのイメージ
神秘的に、近未来の解説。25秒。光の粒が集まっては弾けて、カメラが3Dの奥へ飛び込む。少しずつ時間差で順番に動き、カメラが静かに寄っていく。最後に要点がひと目でわかる形で止まる。

■ 使ってほしい演出（これは出発点です。もっと良い見せ方を思いついたら、そちらを選んでかまいません）
1. パーティクル（Particle Animation）：小さな粒（光・紙吹雪・星）が集まって形になり、また散る
2. 3Dカメラワーク（3D Camera Move）：three.js などで奥行きのある空間を作り、カメラが中を進んでいく
3. プッシュイン（Push-in）：カメラがゆっくり寄っていく（途中で止めず、なめらかに）
4. マッチカット（Match Cut）：場面の切り替えでカットせず、前の場面の形を次の場面の部品へ受け渡す
5. スタッガー（Stagger）：複数の要素をほんの少しずつ時間差で動かし、波のような流れを作る
6. ブリージング（Breathing Animation）：光や形が、呼吸のようにゆっくりふくらんでしぼむ（ループ作品なら、切れ目なくつなぐ）
7. ライトスイープ（Light Sweep）：光の筋が表面を横切ってきらっと輝く。光のにじみ（グロー）も少し
8. アンビエントサウンド（Ambient Sound Design）：BGMは静かなパッドやオルゴールのような音にして、効果音は大事な瞬間だけ小さく鳴らす

■ 条件
- 長さ：25秒　画面：横長 16:9（1920×1080）
- 形式：HTMLファイル1枚（HTML・CSS・JavaScriptをすべてこの中にまとめる）。今いる作業フォルダに motion.html として保存し（同じ名前があれば motion-2.html のように番号をつける）、できたらブラウザで開く（Mac なら open コマンド）
- 再生：最後まで行ったら「もう一度見る」ボタンを出す
- 外部のライブラリを使う時は CDN から読み込む（three.js など）。フォントはパソコンに入っている日本語フォントを使う
- 時間の管理：すべての動きを1本のタイムライン（経過時間から各場面の状態を計算する形）で管理し、コマ落ちしても時間どおりに進むようにする
- 音：Web Audio API で、BGM（テンポ 95BPM 前後の静かな曲）と効果音をコードだけで作る。ブラウザの決まりで最初は音が出ないので、最初の画面に大きな「▶ 音つきで再生」ボタンを置き、押したら映像と音を同時に始める。大事な動きと効果音は同じ瞬間に（効果音は控えめに）
- 画面に出す言葉：「虹は、どうしてできる？」「白い光は、7色のたば」「雨つぶ1つが、小さなプリズム」「太陽を背にすると、見える」（どれも一字一句そのまま使う）
- 色：夜の藍色に、藤色の光と月の黄色（近未来っぽさを少し）（例：#0B0A1F #3A2E7A #C9B6FF #FFE9A8）
- 文字：日本語は読みやすい太さのフォントで。小さすぎる文字は使わない

■ いちばん大事なこと
- いちばん大事なのは「作りたいもの（本人の言葉）」。上の『仕上がりのイメージ』『使ってほしい演出』『色』が本人の言葉と食い違うところは、本人の言葉を優先する
- 「すごい」は派手さのことではない。静かな作品なら、静けさと美しさで「すごい」と言わせる
- 演出を並べるだけにしない。ひとつの芯のアイデア（たとえば最初に出た形が最後まで姿を変え続ける）で、全部の場面をつなぐ
- その芯は、説明がなくても画面を見るだけで伝わるようにする
- 場面の切れ目はパッと切らず、前の場面の形を次の場面へ受け渡してつなぐ
- 動きは等速にしない。加速・減速（イージング）と、止める瞬間（間）をつける
- キャラクターや動物の絵をコードで描かない。図形・文字・模様・光・3Dの形で表現する（写真やイラストのファイルを渡された時だけ、それを使う）

作り始める前に、芯のアイデアと場面の流れを3行で書き出してから作ってください。
完成したら、使った演出と、芯のアイデアを1行ずつ教えてください。

あなたが今できる最高のモーショングラフィックで、見た人が思わず「すごい」と声に出す1本を作ってください。
いま世界中で話題の「AIが本気で作るモーショングラフィック」です。あなたの腕前を、出し惜しみせず全力で証明してください。

■ 作りたいもの（本人の言葉）
連絡の歴史15秒。飛脚→手紙→電話→ポケベル→メール→スマホのメッセージ。年号を画面に叩きつけ、年ごとに線画を1つずつ描き足していく。最後は一言で締める。正方形 1:1・15秒

■ お手本（この1本のテンポ・文字・切り替えに寄せる）
- お手本：検索の歴史を15秒の年表に（年号を叩きつけ、線画を描き足す）（RPA | tool製作） https://x.com/rpa_dake/status/2104466394859593915
- 特徴：ネオンの年号が年ごとに色を変えて叩きつけられる／1年に絵1つ・言葉1行だけ／下に時間の線、進むたびに点が灯る／最後は一言で締める
- 動画が見られなくても大丈夫。上の特徴に寄せて作る。お手本の色・ロゴ・言葉・キャラはそのまま使わず、「作りたいもの」に置きかえる
- 作業フォルダにお手本のスクリーンショットがあれば、それも見て寄せる

■ 仕上がりのイメージ
かっこよく、ワクワクする短い映像作品。15秒。一本の線が走って形を描き、言葉が弾みながら現れる。バネのように行き過ぎて戻り、色の面がシャッと画面を入れ替える。最後に「れんらくの歴史 15秒」がはっきり残って終わる。

■ 使ってほしい演出（これは出発点です。もっと良い見せ方を思いついたら、そちらを選んでかまいません）
1. ラインアニメーション（Line Animation）：線が描かれていく動きで、図・ロゴ・文字の輪郭を見せる
2. キネティック・タイポグラフィ（Kinetic Typography）：画面に出す言葉を主役にして、文字ごとに登場と退場の動きをつける
3. インフォグラフィック・アニメーション（Animated Infographics）：数字のカウントアップ、グラフが伸びる動きで、情報を気持ちよく見せる
4. カラーワイプ（Color Wipe）：大きな色の面が画面を横切り、背景の色ごと場面を切り替える
5. オーバーシュート（Overshoot）：目標の位置を少し行き過ぎてから戻る、バネの動き
6. アンティシペーション（Anticipation）：大きく動く前に、いったん反対にためる
7. テクスチャオーバーレイ（Texture Overlay）：紙の繊維やうっすらした粒子を画面にのせて、手ざわりを出す
8. ビートシンク（Beat Sync）：テンポを1つ決め、場面の切り替えや大事な動きを拍に合わせる。効果音も動きと同じ瞬間に鳴らす

■ 条件
- 長さ：15秒　画面：正方形 1:1（1080×1080）
- 形式：HTMLファイル1枚（HTML・CSS・JavaScriptをすべてこの中にまとめる）。今いる作業フォルダに motion.html として保存し（同じ名前があれば motion-2.html のように番号をつける）、できたらブラウザで開く（Mac なら open コマンド）
- 再生：最後まで行ったら「もう一度見る」ボタンを出す
- 外部のライブラリを使う時は CDN から読み込む（three.js など）。フォントはパソコンに入っている日本語フォントを使う
- 時間の管理：すべての動きを1本のタイムライン（経過時間から各場面の状態を計算する形）で管理し、コマ落ちしても時間どおりに進むようにする
- 音：Web Audio API で、BGM（テンポ 127BPM 前後）と効果音をコードだけで作る。ブラウザの決まりで最初は音が出ないので、最初の画面に大きな「▶ 音つきで再生」ボタンを置き、押したら映像と音を同時に始める。大事な動きと効果音は同じ瞬間に
- 画面に出す言葉：「れんらくの歴史 15秒」「飛脚」「手紙」「電話」「ポケベル」「メール」「いま」「伝えたい気持ちは、ずっと同じ。」「スマホのメッセー」（どれも一字一句そのまま使う）
- 手順の見せ方：「飛脚」→「手紙」→「電話」→「ポケベル」→「メール」→「スマホのメッセー」の順に1つずつ出す。1つあたり約1.7秒、最後に全部が並んだ所で3秒以上止める
- 色：黒と白を基本に、差し色に蛍光イエローを1色だけ（ワクワク感を少し）（例：#0E0E10 #F4F4EF #E8FF3A #6B6B70）
- 文字：日本語は読みやすい太さのフォントで。小さすぎる文字は使わない

■ いちばん大事なこと
- いちばん大事なのは「作りたいもの（本人の言葉）」。上の『仕上がりのイメージ』『使ってほしい演出』『色』が本人の言葉と食い違うところは、本人の言葉を優先する
- 演出を並べるだけにしない。ひとつの芯のアイデア（たとえば最初に出た形が最後まで姿を変え続ける）で、全部の場面をつなぐ
- その芯は、説明がなくても画面を見るだけで伝わるようにする
- 場面の切れ目はパッと切らず、前の場面の形を次の場面へ受け渡してつなぐ
- 動きは等速にしない。加速・減速（イージング）と、止める瞬間（間）をつける
- キャラクターや動物の絵をコードで描かない。図形・文字・模様・光・3Dの形で表現する（写真やイラストのファイルを渡された時だけ、それを使う）

作り始める前に、芯のアイデアと場面の流れを3行で書き出してから作ってください。
完成したら、使った演出と、芯のアイデアを1行ずつ教えてください。

画像を作成する 画像を作成する ノウハウ図書館の「ChatGPT Dots」体験記事に使うサムネ候補を、**独立した画像10枚**で制作してください。コラージュや1枚に10分割はしないでください。まず作れる枚数を実際に生成し、残りはこのチャットで続けて生成してください。各画像は横長16:9（目標1320×742）。文字込みの一枚絵です。
添付1枚目は採用済みサムネのOK見本、2枚目は明るい生活場面・キャラのOK見本、3枚目は暗さと神秘方向のNG見本。3枚目を模倣しないでください。カピバラは丸い薄茶色、黒い丸目、赤いほっぺ、青緑のパーカー。小さな黄緑のインコが相棒。明るい昼の島暮らし、クリーム紙＋ミント＋空色＋たんぽぽ黄、手描き水彩。ほのぼの、実用、小さな笑い。カピバラとインコは毎枚違う表情と動作。特定ゲーム・既存ロゴ・実在UIは模倣しない。各枚の焦点は大きな日本語コピーとキャラの実演の2つ。最大語を1つだけ。補助コピーは不要または短く。小画面でも読める濃紺の極太文字。誤字や余分な文言を入れない。
これは記事本文決定前の探索案です。無料・無制限・完全自動・24時間代行などの未確認の機能保証や売上・時短数字は入れない。
10案は次の順に、文字と場面をそれぞれ変えてください。
1「おしゃべりが形になる」散歩中、カピバラがインコに話しかけ、隣に小さな完成ページ。
2「散歩の思いつきが作品に」海沿いの道、メモから作品が生まれる。
3「会話から案内ページへ」机上でインコと相談し、見せられる案内ページを手にする。
4「ひとり仕事に相棒ができた」明るい仕事机、カピバラとインコが並んで作業。
5「まず1つ頼んでみよう」島の道具箱、最初のお願いを選ぶ場面。
6「dotsと作る小さな一歩」庭の掲示板に初めての成果物を飾る。
7「アイデアが動き出す」ピクニック中の雑談から、試作品を作る動き。
8「やりたいを一緒に育てる」畑の苗を育てる比喩。ただし実物の仕事道具も見せる。
9「AIと歩く、仕事が進む」散歩道と帰宅後の机を一続きの風景で表す。
10「私のdots、こんな使い方」カピバラが小さな作品を1点見せ、インコが驚く。
1枚ごとに独立した画像として生成してください。今すぐ1枚目から制作開始。

Use case: illustration-story. Create a brand-new horizontal 16:9 event thumbnail for おけもん×みずの ゆるっと水曜AIラジオ, October 7 2026. Input image is ONLY a character identity and cheerful painted illustration style reference, NOT an edit target. Do not merely change its date. Make a new composition and new setting: an autumn bookshop broadcasting corner with huge arched window, orange-gold street trees outside, stacks of books, cozy desk and radio microphones. Keep the four characters recognizable: happy fluffy capybara wearing headphones, friendly youthful short black-haired man in blue hoodie wearing headphones, small yellow-green budgerigar, and a caique with orange head, white cheeks and chest, dark green wings and yellow-orange belly. Birds distinct and anatomically coherent. Inviting warm autumn amber and deep teal, professionally finished hand-painted anime illustration, joyful friendly radio chatting, not Halloween, no forest campsite or lantern setting. Use clear uncluttered hierarchical Japanese signage in upper and middle area with large highly legible exact text only: "ゆるっと水曜AIラジオ"; below "おけもん × みずの"; date panel "10/7(水) 21:00"; two small clean badges "oVice開催" and "初心者歓迎"; a small "ON AIR" lamp. No other tiny lettering. 16:9 full-bleed 1920x1080 composition with all important text and faces safely inside 8% margins; characters lower area without obstructing date. This is a new episode-specific thumbnail, not a clone of reference layout.

うちのお店の紹介ムービーを、絵や写真を使わず「大きな文字の動きだけ」で作ってください。
縦長 1080×1920・20秒くらい・音つき・音を消しても全部読めること。

お店の名前：【あなたの店名】
どんなお店か（3つまで・短く）：【例：予約制】【例：ひとりずつ】【例：ゆっくり聞きます】
初めてのお客さんが感じていそうな不安（3つ）：【例：なに話せばいい？】【例：浮かないかな？】【例：聞いていいのかな？】
最後に伝えたい一言：【例：緊張が、ほどける。】

流れ：
1. 黒い地に、固い太い字で「【お店の種類】って、ちょっと緊張する。」が1語ずつ拍に合わせて入る
2. 不安の言葉が手前から奥へ流れていく
3. 「緊張」の2文字が割れて、明るい地が丸く開く。丸い太い字で「大丈夫ですよ。」
4. お店のことを1語ずつ積む
5. 最後の一言を画面いっぱいに。字がゆらゆらゆるむ
6. 店名を札に入れて見せる

色は黒・生成りの白・金、オレンジは文末の「。」だけ。冷たい高級広告にせず、親しみやすい言葉づかいで。
1つの字は1.5秒以上画面に置く。料金・効果の言い切り・口コミは入れない。
字の動きは Canvas で時刻だけから決まるように書き、Chrome で1コマずつ撮って mp4 にする。
音はその場で合成（前半は鼓動、割れた後はあたたかい和音。−16 LUFS 前後）。
先に 0.5秒ごとのコマ一覧を見せてください。

あなたは、いまできる最高のモーショングラフィックを作る作り手です。作業フォルダを1つ作り、作った物はすべてそこに置いてください。

## ゴール
宇宙が好きな人が見て「うわ……遠っ！」と声に出す、約45秒・音つき・1920×1080・60コマ／秒の1本。題材は、水金地火木土天海冥の距離を本当の比のまま辿ること。「すごい」は派手さではなく、待たされる長さで距離が体に入ること。

## 絵の言葉
一本の水平な物差し（太陽からの距離・天文単位）を、太陽を出た光の先頭と並んで右へ走る。星は動かさない。カメラは最後の一度しか引かない。

## 流れ
1. 太陽と9つの惑星を、本当の大きさの比で並べる。「水金地火木土天海冥」の9つの字を、等間隔で、9つの音と一緒に出す
2. 距離も本当の比にする（縮尺を連続して変える。太陽が点になり、惑星は見えなくなる）。「この縮尺だと見えない」と言ってから、惑星だけ500倍にする（変えたと分かる演出で）
3. 光が太陽を出る。最初の1〜2秒は早回しなし（光は画面でほとんど動かない）。そこから400倍の早回し。水・金・地・火は1.4秒のあいだに続けて来る。光が着くたびにコツンと音がして、上に等間隔で並べた9つの字の棚が1つずつ点く。木星まで4.6秒、同じ速さで待つ
4. 木星のあと、早回しを1000倍へ一度だけ上げる（上げたと字で言う。物差しの流れと音の高さも上がる）。それでも土星・天王星・海王星・冥王星はもっと待つ。画面の下に「太陽からの距離」と「光が太陽を出てから◯時間◯分◯秒」を流し続ける
5. 冥王星のあと、惑星の拡大をやめて全体が1画面に入るまで引く。棚の9つの字が、物差しの本当の位置へ降りる（4つは太陽のそばに固まる）。太陽から冥王星まで一定の速さで光を走らせ、最初の9音を本当の間隔で鳴らす

## 作り方の近道
- 早回しの倍率から「何秒に太陽から何天文単位か」の表を1つ作り、絵も音もそれを読む
- 絵は WebGL のシェーダ1枚（星・太陽・物差し・惑星の球と模様・土星の輪を式で）＋2Dキャンバスの字。Chrome（headless）で1コマずつ撮って ffmpeg でつなぐ。横に流れる物のぶれは式で付ける（1コマを何回も描かない）
- 速い区間でも1天文単位ごとの目盛りは見えるように残す（流れて消えると止まって見える）
- 音は自分で合成する：コツン、星ごとの音（内側ほど高く）、物差しの速さに比例する低い唸り、目盛りの刻み。何もない区間は静かに
- 全編の前に、最初の10秒を音つきで書き出して自分の目で見る

## 守るもの
- 数字は次の表だけ（天文単位／光で）：水星 0.39／約3分、金星 0.72／約6分、地球 1.00／約8分20秒、火星 1.52／約12分40秒、木星 5.2／約43分、土星 9.5／約1時間20分、天王星 19.2／約2時間40分、海王星 30.1／約4時間10分、冥王星 約39.5／約5時間30分。1天文単位＝約1億5000万km。太陽の直径は地球の約109倍
- 比が嘘にならない。縮尺や早回しを変える時は、変えたと分かるようにする
- 音が、絵と同じ時刻表を読んでいる
- 人・キャラクター・クレジットは出さない

## 出す前に
自分の目で見る。「数字を読まなくても、遠さが待ち時間で分かるか」「1つの字は1.5秒以上出ているか」「止まって見えるコマが続いていないか」。

あなたは、いまできる最高のモーショングラフィックを作る作り手です。作業フォルダを1つ作り、作った物はすべてそこに置いてください。

## ゴール
初めてのお客さんがスマホで見て「ここなら行けそう」と思える、縦長（1080×1920）・約25秒・音つき・無音でも全部読める、お店の紹介ムービーを1本。
お店の名前：【店名】（読み：【よみ】／肩書きの一言：【例：private salon】）
どんなお店か：【例：予約制・一対一・個室の美容サロン】
伝えたいことは1つだけ：【例：初めての人の緊張が、ほどける】

## 流れ
夜の路地に小さな扉と灯り。扉が開くと、あたたかい灯りの部屋。カメラが中へ入り、①最初に話を聞く場面（紙とペン）②ケアを1つだけ（【例：あたたかいタオル】）を寄りで見せる。最後にカメラが上へ抜けて、部屋ぜんたいが小さな箱庭として見え、店名と【例：はじめての方、ご相談だけでもどうぞ。】が出る。

## 画面に出す字（この通りに。1つの字は1.5秒以上）
1. 【例：美容サロン、ちょっと緊張する。】
2. 【例：扉の向こうは、あなただけの個室。】
3. 【例：予約制・一対一。人目を気にせず、ゆっくり。】
4. 【例：まずは、話を聞くところから。】
5. 【例：はじまりは、あたたかいタオルから。】
6. 店名と【最後の一言】

## 絵
- 色：【例：黒・白・金に、あたたかいオレンジ】。冷たい高級広告にしない。明るさと相談しやすさが残ること
- 部屋に置く物：【例：寝台、ひじ掛け椅子、丸いテーブル、観葉植物、タオル、灯り】
- 人の顔は描かない（椅子・灯り・紙とペン・湯気で伝える）
- 画像生成AIは使わず、形と光で描く

## 作り方の近道
- Three.js で屋根のない小さな部屋を組み、Chrome（headless）で1コマずつ撮って ffmpeg でつなぐ。1コマを数十回に分けて描いて足し、1回ごとにレンズの位置・灯りの位置・時刻を少しずらす（ミニチュア写真のような浅いピントとやわらかい影）
- 物の動きは「時刻 t の式」で決める（どのコマからでも書き出せる）。扉・ペン・カメラ・字を同じ時刻表に乗せ、音もそれを読む
- 字は絵の上に重ねた HTML。スマホで持って読める大きさ（1080幅で70px以上）
- 音は自分で合成してよい。落ち着いた、あたたかい曲と小さな合図の音。−16 LUFS 前後
- まず1コマ1回で全編の動きを決め、分ける回数を上げるのは最後。全編の前に最初の8秒を音つきで書き出して、自分の目で見る

## 守るもの
- 効果の言い切り（必ず・永久・痛みゼロ・安全）、ビフォーアフター、作った口コミや実績の数字は入れない
- 料金・住所・予約先は、【入れる／入れない】。入れる時はこの通りに：【  】
- ここに書いていない事実（数字・肩書き・受賞など）を足さない

## 出す物
1. 最初の8秒の試し（音つき・540×960）とコマ一覧
2. 全編（1080×1920・音つき・30MB未満）と、0.5秒ごとのコマ一覧
3. 動かし方のメモ（店名・字・色をどこで替えるか）

## 出す前に
自分の目で見る。「字がスマホで読めるか」「初めての人が安心できる理由が1つ伝わるか」「止まって見えるコマが続いていないか」。

あなたは、いまできる最高のモーショングラフィックを作る作り手です。
題は「宇宙の1年」。宇宙の約138億年を1年のカレンダーに縮めた、約45秒・音つき・1920×1080・60コマ／秒の1本を作ってください。

流れ：
1. 机の上に12枚の月の紙。1月1日 0時が宇宙のはじまり。マス目が1日ずつ染まっていく（1日＝約3800万年）
2. 9月1日に太陽と地球、9月30日にいちばん古い生命のあと。12月の紙へ寄ると、恐竜は25日に来て30日にいなくなる
3. 12月31日のマスの中へ潜る → 24時間の紙 → 最後の1時間（60分の紙）→ 最後の1分（60秒の紙）。人は23時48分、農耕は23時59分32秒、文字は47秒
4. 最後の5秒は、本当の1秒＝1秒で見せる。最後のマスの右端の0.2秒が100年。鐘が鳴って「いま」
5. 1年の紙へ戻って「文字に残る人の歴史は、大みそかの、最後の12秒。」

絵の言葉：机の上の紙のカレンダー。墨が1日ずつ染み、出来事は紅の判子。最後のマスの中へ、何度も潜る。暗い宇宙・星は出さない。
守ること：出来事の「何年前」は出どころ（NASA・国立天文台・博物館）を開いて確かめ、日付は「138億年＝365日」の割り算を自分でして式を残す。確かめられなかった出来事は入れない。絵と音は同じ時刻表を読む。
出す物：最初の10秒の試し（960幅・音つき）とコマ一覧 → 全編 → スマホ用720p（30MB未満・faststart）。全編のあと、コマ一覧を0.5秒ごとに、山場は0.1秒ごとに自分の目で見る。

あなたは、いまできる最高のモーショングラフィックを作る作り手です。作業フォルダを1つ作り、作った物はすべてそこに置いてください。

## ゴール
宇宙が大好きな人が見て「うわ……遠っ！」「宇宙ひろっ！」と声に出す、約45秒・音つき・1920×1080 の1本。「すごい」は派手さではなく、距離や広さが体で分かる瞬間があること。

## 流れ
真っ暗な画面に点が1つ（太陽）。カメラを一度も切らずに引いていく。まわりの星が見え、星が増えて光の帯になり、天の川銀河の渦の全体（直径 約10万光年・星は数千億個）になる。ここで一度だけ「太陽はここ（中心から 約2万6000光年）」。さらに引くと渦は1つの点になり、アンドロメダ銀河（約250万光年）が画面の外から入ってくる。点は無数になる（点ひとつが銀河ひとつ）。その中の1つへ一気に飛び込むと、それも渦巻く銀河。また引くと、銀河は網の目のように連なり、最後は観測できる宇宙の全体（半径 約465億光年・銀河は少なくとも数千億〜2兆個）。カメラが止まっても粒は外へ流れ続ける（遠いほど速く・赤く）。時間を巻き戻すと全部が1点に集まり（約138億年前）、そこからもう一度広がって静かに終わる。

## 作り方の近道
- 黒い空間に光の粒だけ（足し算で光る点）。球・軌道の線・地面は描かない。Three.js の舞台を Chrome（headless）で1コマずつ撮って ffmpeg でつなぐ
- 縮尺は「画面の縦の半分に入る長さ S」を時刻 t の式で決める（log10 S の鍵コマをなめらかにつなぐ）。場所は光年のまま倍精度で持ち、シェーダには「単位 ÷ S」を掛けて渡す
- 粒は動かさない。近くは本当の濃さ（星1個＝粒1個、銀河1個＝粒1個）、遠くは粗く置いて1粒の明るさで合わせる。層を分けずに「遠いほど粗い1つの置き場」にすると、境目が玉に見えない
- 左下に物差し（10^n 光年の線。引くほど縮み、短くなったら次のけたに替わる）。替わる瞬間に1音。引くほど低い音へ
- 絵と音が同じ時刻表のファイルを読む。音は自分で合成してよい（宇宙の静けさ・低い響き・小さな合図の音）
- まず1コマ1回で全編の絵を決め、動きのぶれ（1コマを何回にも分けて足す）は最後。全編の前に最初の10秒を音つきで書き出して自分の目で見る

## 守るもの
- 画面に出す数字と名前は、ここに書いた物だけ（けた数と比が合っていること）。物差しの「1光年・10光年…」は出してよい
- 縮尺を変える時は、変えたと分かる演出にする（物差しがいつも画面にある）
- 人・キャラクター・クレジットは出さない

## 出す物
1. 最初の10秒の試し（音つき・960×540）とコマ一覧
2. 全編（1920×1080・音つき）と、スマホ用（1280×720・30MB未満）、0.5秒ごとのコマ一覧
3. 動かし方のメモ

## 出す前に
自分の目で見る。「数字を読まなくても、遠さ・広さが分かる瞬間があるか」「字は1.5秒以上出ているか」「止まって見えるコマが続いていないか」。

あなたは、いまできる最高のモーショングラフィックを作る作り手です。宇宙が大好きな人が朝起きて見て「うわ……遠っ！」と声に出す、約45秒・音つき・1920×1080 の1本を作ってください。
題：太陽系は狭い。いちばん近い星・ケンタウリまで。

絵の言葉：一本の物差しと、流れていく目盛りの輪。紺の闇に、細い線と数字と光の点だけ（計算尺・測量図）。写真や惑星の絵は使わない。

流れ：
1. 太陽が灯り、8本の軌道が1本ずつ描かれる。海王星の軌道（30天文単位）が画面いっぱい。太陽から右へ物差しが伸びて「30 天文単位」。
2. 太陽から光の輪が出て、1秒に10天文単位で広がる（海王星まで3秒＝本当は約4時間10分）。軌道を通るたびに鈴。届いた瞬間に「広い。」
3. 引いて、ボイジャー1号（約170天文単位・1977年に出発して49年・光でも約1日）。さっきの光の輪は消さずに、同じ速さで広げつづける。まだボイジャーに届かない。
4. 「では、いちばん近い隣の星まで。」そこから1秒に0.26桁の一定の速さで引きつづける。物差しの先の数字（天文単位・光で何日・太陽系の何倍）が上がりつづけ、太陽系の10倍・100倍・1,000倍の輪が物差しの先を通るたびにカチン。太陽系は点になり、印だけが残る。1光年・2光年・3光年の輪。
5. 約9,000倍の手前で、画面の右端に隣の星の光が入り、ゆっくり物差しの先に着く（プロキシマ・ケンタウリ 約4.2光年）。寄ると、アルファ星 A・B（約4.4光年）と3つで1つの星系。
6. 太陽とお隣を1枚に。「光の速さでも、4.2年。はじめの光が届くのは、この動画の約7時間あと。」「ボイジャー1号の速さなら、7万年以上。49年で進んだのは、まだここ」。結び「ここが、いちばん近いお隣さん。」

守るもの：
- 太陽からの距離は、画面の上でいつも正しい比にする（物差し・距離の輪・ボイジャー・星の位置）。天体の大きさは印。A と B の離れだけは「拡大」と書いた丸の中で。
- 数字は次の物だけ：海王星 30天文単位・光で約4時間10分／1天文単位＝太陽と地球の距離＝約1億5000万km／ボイジャー1号 約170天文単位・1977年・光で約1日／1光年＝約6万3000天文単位／プロキシマ・ケンタウリ 約4.2光年（約27万天文単位）＝太陽〜海王星の約9,000倍／アルファ星 A・B 約4.4光年／ボイジャーの速さで7万年以上。
- 音が、絵と同じ時刻表を読んでいる。引いている間は、物差しの桁に高さを結んだ「落ちつづける音」。着く直前に息をのみ、着いた瞬間に和音。

作り方：カメラと出来事の秒を1つの時刻表（JSON）に書き、絵（Canvas 2D・時刻 t だけで決まる描画）と音（numpy で合成）の両方がそれを読む。Chrome で1コマずつ撮って ffmpeg でつなぐ。最初の10秒を先に書き出して自分の目で見てから全編へ。

あなたは、いまできる最高のモーショングラフィックを作る作り手です。
題は「光は、遅い。」。光の速さを、縮めずに本当の時間で見せる約45秒・音つき・1920×1080・60コマ／秒の1本を作ってください。

流れ：
1. 光は1秒で地球を7周半。白い点が、本当に1秒で地球のまわりを7周半する（「速い」と声が出る）
2. 地球と月を、大きさも距離も本当の比で置く。光の点が本当に約1.28秒かけて渡る（往復も。早回しなし）
3. 同じ速さ・同じ縮尺のまま、太陽から地球へ。月までの距離を目盛り1つにすると、地球は389個先。「地球まで あと 8:19」の時計が本当の速さで減りつづけ、動画が終わっても着かない
4. その8分19秒を1粒にして、約27万粒。いちばん近い星まで、光で4年あまり

絵の言葉：一面の朱。切り絵の平たい円と、画面いっぱいの太い数字。光は白い点。暗い宇宙・星・光のにじみは使わない。
守ること：数字は出どころ（NASA・NIST など）を開いて確かめ、割り算は自分でして式を残す。光の点は等速（気持ちよく加減速させない）。絵と音は同じ時刻表を読む。
出す物：最初の10秒の試し（960幅・音つき）とコマ一覧 → 全編 → スマホ用720p（30MB未満・faststart）。全編のあと、コマ一覧を0.5秒ごとに自分の目で見る。

あなたは、いまできる最高のモーショングラフィックを作る作り手です。
土台は /Users/monoke/Okemori/outputs/motion-saigen-kit-2026-10-01/runs/salon_ehon/ehon（これを写して使う。動かし方は HOWTO.md）。

## 作るもの
【お店の名前】の紹介ムービー。飛び出す絵本を開くと、お店が立ち上がる。縦長 1080×1920・約28秒・音つき・無音でも全部読める。
見る人は、まだ来たことのないお客さん。目的は1つ：「初めてでも、ここなら大丈夫そう」と思ってもらう。

## ページ（4つ。絵は写真ではなく、紙の形で描く）
1. 入口：【お店の外の特徴。例：路地のおくの白い扉】
2. 相談：【最初にすること。例：テーブルでお茶を出して話を聞く】
3. ケアをひとつ：【いちばん見せたいメニュー1つ】
4. 帰り：【帰りぎわの一言。例：またね。】

## 画面の字（1枚 12文字×2行まで・2秒ずつ）
【最初の一言。例：美容サロン、ちょっと緊張する。】／【各ページに1〜2枚】／【最後：ご相談だけでも、お気軽に。】

## 色
【お店の色を3つ。例：白い紙・黒・金＋あたたかいオレンジ】

## 入れないもの
料金、効果の言い切り（必ず・永久・痛みゼロ）、ビフォーアフター、口コミ。人の顔は描かない（いす・手元・灯りで伝える）。

## 出す前に
540×960 の下見を0.5秒ごとのコマ一覧で見る（字がスマホで読めるか・止まって見えるコマが続いていないか）。直しは1回。

うちのお店で「こんな予約リストがあったらいいな」を、スマホの画面が動く短いムービーにしてください。
縦長 1080×1920・20〜25秒・音つき・音を消しても全部読めること。
まだ作っていない道具の「見本」なので、画面の上に小さく「制作見本」と出し続けてください。

お店の名前：【あなたの店名】
予約の連絡がいま届く所（3〜5つ）：【例：メッセージ】【例：電話】【例：ふせんのメモ】
毎日やっている手間（1つ）：【例：閉店後に、手帳へ書き写す】
一覧で見えたらうれしいこと（3つ）：【例：はじめての方の印】【例：前回話したことのひとことメモ】【例：空いている枠】
朝に届いてほしいもの：【例：今日来る3人のカード】
お客さんの名前は「Aさん」「Bさん」のように作ってください。本当のお客さんの名前・料金は入れません。

流れ：
1. 予約の連絡が、吹き出しやメモの形であちこちに散らかって届く
2. 毎日やっている手間の場面（手帳にえんぴつで書き写す、など）
3. スマホが1台入ってきて、散らかった吹き出しが1つずつ一覧の行になる
4. 一覧で見えたらうれしいことを、1つずつ（印がつく／指で行を押すとメモが開く／空いている枠が色づく）
5. 朝のカード「今日は◯人です」
6. 最後に「こんな予約リスト、あったらよくないですか？」

色は白っぽい地に黒・金・あたたかいオレンジ。実在のサービスのロゴや画面は描かず、吹き出しは一般的な形で。
人の顔や手は描かず、指は半透明の丸で。
1つの字は1.5秒以上画面に置く。スマホで読める大きさに（いちばん小さい字でも 1080 の幅の中で 30px 以上）。
画面は HTML の部品で作り、時刻だけから全部の位置が決まるように書いて、Chrome で1コマずつ撮って mp4 にする。
音はその場で合成（前半は散らかった感じ、スマホが入ったらリズムが入る。−16 LUFS 前後）。
先に 0.5秒ごとのコマ一覧を見せてください。

あなたは、いまできる最高のモーショングラフィックを作る作り手です。作業フォルダは【作業フォルダ】（ここだけで作業し、作った物はすべてここに置く）。

## 頼まれていること（頼んだ人の言葉・原文）
【最初の依頼を原文で。要約しない。途中でもらった一言も時系列のまま】

## ゴール
【見せたい相手】がスマホやPCで見て、「え、旅の写真がこんなになるの！？私のも作りたい！」と声に出す、約60秒・音つき・1920×1080 の1本。題材は【いつ・どこからどこへの旅か】。「すごい」は派手さではなく、見た人が声を出すこと。テイストはあなたが決める。語りは無しでよい。

## 出発点の案（もっと声が出る形を思いついたら、理由を1行残して変えてよい。順番も中身もあなたが決める）
「机の上の旅の絵本が開くと、紙の線路が折り目から立ち上がり、紙の列車が走った先々で、本物の旅の写真がプリントになってパタパタ立ち上がる」。
流れの例：暗い机に切符が1枚ぽとり→本が開く→見開きごとに旅の場面（乗り物が走り抜け、その場面の写真が立つ）→最後の見開きで景色がせり上がり、いちばんの写真が大きく立つ→最後の札に本人の言葉。冒頭の切符を終盤で回収する仕掛けを1本。

## 守るもの（3つ）
- 事実（日時・地名・乗り物の名前・本人の言葉）は、作業フォルダの FACTS.md のとおりに。これ以外の数字・日付・肩書き・作者名・クレジットは画面に出さない（演出の数字は使ってよい）
- 人のキャラクターは出さない。主役は乗り物と写真と景色（出してよいキャラがいれば名指しする）
- 音が、絵と同じ時刻表を読んでいる

## 遊び心
無難にまとめるより、見ていて思わず笑ってしまう小さないたずらや仕掛けを入れる。迷ったら楽しい方。

## 使える素材
- 写真：【写真のフォルダ】（ファイル名は撮影時刻。何の写真かは FACTS.md の表）
- 曲・効果音：【曲のファイル、または「自分で音を作ってよい」】

## 今回出す物
1. 最初の15〜25秒の試し動画（音つき・960×540）とコマ一覧。全編の前にここで一度、自分の目で見る（止まって見えないか・舞台が1つに見えるか・音が絵と合っているか）。直してから全編へ
2. 全編（音つき）とコマ一覧
3. 何秒に何が起きるかの表、動かし方、考えたこと・捨てた案・うまくいかなかった所

## 出す前に
自分の目で見る（コマ一覧と、動きは数コマ続けて）。「写真が小さすぎて何の写真か分からない場面が続いていないか」「写真が動きのぶれで読めなくなっていないか（1枚ずつ止めて見せる）」。全編が通ったら一度出す。出来た版は消さない。

## 返すもの
動画のパス、「声が出るか」への自分の答え（1行）、見劣りする一点（1行）、耳で未確認の所、つまずいた所、かかった時間。

あなたは、いまできる最高のモーショングラフィックを作る作り手です。作業フォルダを1つ作り、作った物はすべてそこに置いてください。

## ゴール
見た人が「え、これ粒でできてるの！？」と声に出す、約20秒・音つき・1920×1080 の1本。題材は、添付した私のアイコン。

## 流れ
砂色の紙のような地面に、うっすら赤い下描きの線（アイコンの輪郭）。小さな立方体が1個、上から落ちてきてコツンと弾む。2個、数個、と増え、やがて雨のように降って積もり、外へ外へ広がっていく。立方体はそれぞれ絵の色を持っていて、11万個以上（340×340）で1枚のアイコンのモザイクになる。カメラはごく近い斜めの寄り（浅いピント・動きのぶれ）から、ゆっくり引いて上がり、最後はほぼ真上から絵の全体。広がる縁はギザギザで、遅れて降ってくる粒がある。最後は元の絵に溶かさず、粒の絵のまま締める。

## 作り方の近道
- Three.js の舞台を Chrome（headless）で1コマずつ撮って ffmpeg でつなぐ。1コマを数十〜百回に分けて描いて足し、1回ごとに時刻・レンズの位置・光の向きを少しずらす（動きのぶれ・浅いピント・やわらかい影）
- 粒は InstancedMesh（か InstancedBufferGeometry）。各粒の位置と回転は「時刻 t の式」で決める（落下→弾み→着地。物理シミュレーションを毎コマ進めない。どのコマからでも書き出せる）
- 何個目がいつ着地するかの時刻表を1つ作り、絵も音もそれを読む
- 最初の1個は、地面の色に沈まない濃い色の粒にする。最初の数十個は、間をあけて散らす
- まず1コマ1回・数秒で動きを決め、分ける回数を上げるのは最後。全編の前に最初の8秒を音つきで書き出して、自分の目で見る

## 守るもの
- アイコンは渡した絵の色と形のまま（描き直さない・顔を作り替えない）。サインやロゴが入っていたら、そこは背景色の粒で埋める
- 画面に文字・数字・クレジットは出さない
- 音が、絵と同じ時刻表を読んでいる（最初の1個のコツン、増えていく粒の音、広がりの山）。音は自分で合成してよい

## 遊び心
無難にまとめるより、この絵ならではの小さないたずらを1つ。絵の中の「動きそうな所」（振っている手、乗っている鳥、しっぽ、耳など）の粒だけを、できあがったあとに少し動かす。迷ったら楽しい方。

## 出す物
1. 最初の8秒の試し動画（音つき・960×540）とコマ一覧。お手本にしたい動画があれば、その一覧と並べて見る
2. 全編（1920×1080・音つき）と、スマホ用（1280×720・30MB未満）
3. 動かし方のメモ

## 出す前に
自分の目で見る。「粒が立体の箱に見えるか（平らな点々になっていないか）」「最初の1個→数個→雨、の増え方が急ぎすぎていないか」「最後の絵で、何の絵かはっきり分かるか」。

リベシティの本人詳細プロフィールの自己紹介欄に、既存文を残したまま短い動画紹介を追加します。今回のプロフィール用の案だけを評価してください。X投稿本文は評価・流用しないでください。

確認点：おけもんの自然な口調に合うか、短く読みやすいか、指定された2本と秒数の説明が正確か、内部のAI社員名など余計な情報を出していないか。大きな問題がなければ「ready」と理由を返し、直すべき点があれば最小の修正案を返してください。プロフィールの保存・公開操作は求めていません。

追加予定文：
🎬 自信作：AI初心者サポートチャット1,000人記念
1,000人記念に作った2本のムービーです🎉
・夜の湖版（66秒）
https://youtu.be/oLGL-TDDOpE
・飛び出す絵本版（ナレーション入り・65秒）
https://youtu.be/6D-ijbaHcSM

確認済み事実：本人はこの2本を最高傑作と呼んでいる。夜の湖版は66秒、飛び出す絵本版は65秒でナレーション入り。どちらもAI初心者サポートチャットの1,000人記念に作った作品。

「風の機関室」という、羽根と軸をほどいて眺める、小さな機械模型のブラウザ作品を作ってください。

【作品の姿】
静かな工房の机に置かれた、青緑の外殻と真鍮の縁を持つ卓上模型です。銀色の羽根は、平たい三角形ではなく、厚みとねじれ、丸く流れる曲がりを持たせてください。入口の大きな羽根、中央の羽根と軸、奥の小さな羽根の3つのまとまりを見分けられるようにします。軸受、輪、六角のボルト、先端、支えと台座も作り込みます。金属の鈍い反射、細いハイライト、接地する影で、触りたくなる姿にしてください。
実機の性能や熱力学を再現するとは説明せず、形と動きを楽しむ模型として作ります。外部作品のコードや画像をコピーせず、独自の形と画面を設計してください。

【手で動かす】
「殻をひらく」は外殻の前上側を実際に欠いて、内部が見える断面を広げます。閉じると一周つながった殻に戻ります。
「軸に沿ってほどく」は、入口、中央、出口のまとまりを共通の軸に沿って分解し、元に戻せます。羽根だけでなく、各まとまりの外殻と縁も一緒に移動します。
羽根の回転速度、一時停止・再開、停止中の手動角度を用意します。速度0でも角度は静止させます。風の通り道は細い青緑の線で表し、表示を切り替えられます。閉じた殻の向こうにある線や部品は隠してください。
工房、真横、入口、上からの視点ボタンと、マウス・タッチのドラッグ、キーボードの矢印キーによる視点変更を付けます。はじめの姿に戻すボタンも付けてください。断面と分解が最大でも、どの視点でも部品を画面に収めます。

【描画と保存】
ブラウザ標準のWebGLで深度を扱い、見える面を正しく描きます。厚みのある形、曲面の法線、素材ごとの反射を自前の幾何とシェーダーで作ってください。外部CDN、新ライブラリ、外部フォント、追加のAPIは使いません。
停止中は操作や画面サイズ変更の時だけ再描画します。タブが背景にある間も不要な描画を止めます。初回、負の時間差、巨大な時間差、ページ復帰で角度が飛ばないようにし、pagehideで予約番号を0へ戻してください。prefers-reduced-motionでは最初から停止し、手で操作できます。
PNG保存はクリックした時点の構図をその場で別のCanvasへ同期的にコピーしてから非同期に画像化します。保存中の回転や操作を混ぜず、画面の状態を保ちます。古いBlob URLを解放し、ページから戻った後も操作と保存が働くようにしてください。
WebGLを使えない時は作品の実PNGと短い案内を表示し、操作は無効にします。

【画面と引き渡し】
クリーム色の展示台、深い緑の文字、真鍮色の小さな番号。大きな模型と余白、読みやすい日本語で、工房の小冊子のように整えてください。375pxでも主要操作とラベルに手が届くようにします。
自己完結したHTML・CSS・JavaScript、制作手順、README、PROCESS、依頼と修正の原文、再利用できるこのプロンプト全文とコピーボタンを保存します。状態、時間進行、形状、画面内フィットを数理検査し、別担当が実ブラウザのPC・スマートフォン幅・タッチ・PNG・コピー・ページ復帰を確認して仕上げてください。

木組みの水車小屋を、ブラウザで触れる3D作品にして。水門の流量と水車・歯車・石臼を連動させて、屋根の開閉と3つの視点を付けて。木目、梁、桶、樽、麻袋、石と小川まで丁寧に作り、暖かい午後の光にして。日本語UIでスマホでも全体が見え、完成画面をPNG保存できるように。Three.jsを同梱し、外部APIは使わず、PROCESS.mdに素材と作り直し方を残して。

あなたは日本語の旅行ブログを仕上げる編集者です。以下の共通原稿を最終チェックし、読者が続きを読みたくなる自然な記事へ必要な修正をしてください。
これは「普通に書く→AntigravityのGeminiで最終チェック」の条件です。特定の文章スキルを使わず、通常の編集判断で読みにくさ・誤記・話のつながりを見直してください。競合候補の推測や採点はしません。
ツール、ブラウザ、他のファイル、スキルは使わず、このプロンプトにある材料だけで回答してください。ファイルや設定の変更は不要です。前置きや確認質問も不要です。
意味・事実・本人引用・主張の強さを保ってください。本人が体験していない場面や感情を創作せず、実際の乗車は瀬戸の東京→姫路です。出雲や岡山より先の体験に置き換えないでください。良い文は無理に変えなくて構いません。
一人称の紹介ブログ、900〜1200字程度を目安にし、字数のために水増しや過剰削減をしないでください。5章のidと順序は固定、タイトル・見出し・段落分けは変更可。記事に比較実験や校正作業のメタ説明を入れないでください。
応答はJSONのみ。構造は {"article":{"title":"...","sections":[{"id":"opening","heading":"...","paragraphs":["..."]}, ...]},"changes":["変更理由を最大5点"],"fact_concerns":[]} 。5章idは opening,routes,room,morning,next。fact_concernsには資料で確定できない事実があれば記載し、問題がなければ空配列。

【共通材料】
# 三つの記事に共通して渡す材料

テーマ：サンライズ出雲・サンライズ瀬戸の紹介。鉄道に詳しくない読者が、帰り道も楽しみになる夜行列車の旅に興味を持つブログ。

## 本人の体験として使えること

- 2026年9月29日の夜、東京からサンライズ瀬戸に乗り、翌朝姫路で降りた。初めての寝台特急だった。
- 乗車中に本人が残した言葉は「寝台特急も最高だよー」。この言葉はそのまま引用できる。
- 個室シングルを利用。保存した写真の台帳には、ベッド、窓、浴衣が記録されている。
- 姫路で降り、その朝は姫路城の近くへ行った。
- 記事は本人の体験を材料にAIが作る紹介文。本人が書いた原稿そのものとは表示しない。

## 一般的な列車の説明として使えること

- サンライズ瀬戸は東京と高松、サンライズ出雲は東京と出雲市を結ぶ寝台特急。
- 東京〜岡山は併結する。東京から西へ向かう列車は岡山で分かれ、それぞれ高松・出雲市へ向かう。本人は岡山より手前の姫路で下車しており、分割を見た体験は書かない。
- 個室を中心とした車両構成。一人用のソロ・シングル、二人用のサンライズツイン等がある。ノビノビ座席は個室とは別の選択肢。
- 全員が終点まで乗る必要はなく、本人は東京→姫路で利用した。上下で停車駅は異なるため、自分の乗降駅を公式案内で確認する。
- 予約前に利用日、区間、部屋の種類・空きを公式予約案内で確認する。記事に固定運賃、予約可能性、運行保証は書かない。

## 加えないこと

サンライズ出雲にも乗った、瀬戸大橋を渡った、岡山の切離しを見た、熟睡した、揺れや騒音が快適だった、シャワーを使った、朝焼けに感動した、といった未確認の体験。窓外の景色、匂い、人物との会話も創作しない。同行者名、券番号、部屋番号、金額など記事に不要な私的情報を足さない。

## 確認元

本人の記録の詳しい所在は同フォルダの local-experience.md。

公式確認日：2026-10-03。
- JR西日本・車両と停車駅 https://www.jr-odekake.net/railroad/train/sunriseseto_izumo/
- JR東海・285系 https://railway.jr-central.co.jp/train/express/detail_02_05/index.html
- JR西日本・予約案内 https://www.jr-odekake.net/goyoyaku/campaign/sunriseseto_izumo/form.html
- JR西日本・時刻表 https://timetable.jr-odekake.net/train-timetable/38491?date=20260720 （東京〜岡山の併結の確認に使用。現在の発着時刻の転載には使用しない）

【共通原稿】
{
  "title": "初めての寝台特急。サンライズで東京から姫路へ",
  "sections": [
    {
      "id": "opening",
      "heading": "夜の東京から、寝台特急に乗る",
      "paragraphs": [
        "「寝台特急も最高だよー」。初めて寝台特急に乗った夜、私が残していた言葉だ。2026年9月29日、東京からサンライズ瀬戸に乗り、翌朝の姫路で降りた。",
        "今回の旅で選んだのは、夜に移動して翌朝に到着する帰り道。寝台特急という名前を知っていても、どこへ行く列車なのか、どんな部屋があるのかまでは知らない人もいると思う。私が乗った瀬戸と、よく一緒に名前を聞く出雲を紹介したい。"
      ]
    },
    {
      "id": "routes",
      "heading": "瀬戸は高松へ、出雲は出雲市へ",
      "paragraphs": [
        "サンライズ瀬戸は東京と高松を、サンライズ出雲は東京と出雲市を結ぶ寝台特急だ。東京から西へ向かうときは、二つの列車がつながって岡山まで走り、そこで分かれてそれぞれの行き先へ向かう。",
        "四国へ行くなら瀬戸、出雲市へ行くなら出雲。まずは目的地から考えると、二つの名前も覚えやすい。私が降りた姫路は岡山より手前なので、列車が分かれる場面は見ていない。同じサンライズでも、どこで降りるかによって旅の組み方が変わる。"
      ]
    },
    {
      "id": "room",
      "heading": "今回選んだのは、個室のシングル",
      "paragraphs": [
        "私が利用したのは、一人用の個室「シングル」。残していた写真には、ベッドと窓、浴衣が写っている。列車の中に自分の部屋があり、そこにベッドがある。座席に座って移動する列車とは、過ごす場所のつくりが違う。",
        "サンライズは個室が中心で、一人用にはソロやシングル、二人用にはサンライズツインなどがある。個室とは別に、ノビノビ座席という選択肢もある。行き先に加えて、何人で乗るか、どんな場所で夜を過ごしたいかを考えるのも、旅の準備の一つになりそうだ。"
      ]
    },
    {
      "id": "morning",
      "heading": "終点まで乗らず、翌朝は姫路へ",
      "paragraphs": [
        "翌朝、私は姫路で下車し、その朝は姫路城の近くへ行った。東京を夜に出て、次の朝には姫路にいる。今回の旅は、寝台特急を降りたあとにも行き先があった。",
        "サンライズは、必ず終点まで乗る必要はない。私のように途中で降りる使い方もできる。ただし、上下で停車駅は異なるので、乗りたい駅と降りたい駅は公式案内で確認しておこう。"
      ]
    },
    {
      "id": "next",
      "heading": "自分の旅なら、どこで降りよう",
      "paragraphs": [
        "サンライズを旅に入れるなら、まずは利用日と乗る区間を決め、部屋の種類や空きを公式の予約案内で確認したい。列車の名前だけで選ぶより、到着した朝に何をしたいかまで考えると、自分に合う使い方を探しやすそうだ。",
        "高松や出雲市まで向かう旅も、私のように姫路で降りる旅もある。次の旅の予定を立てるときは、夜の移動と、降りたあとの朝を一緒に思い浮かべてみてほしい。"
      ]
    }
  ]
}

Use the uploaded animation for the bowling motion, timing, camera, and lane layout. Replace the bowler with the compact golden capybara from the image, wearing its teal bowling shirt and cream trousers. Render soft detailed fur and warm cinematic 3D lighting. Preserve the full approach, high backswing, final sliding step, low release at 5.3 seconds, and first pin contact at 8.0 seconds. Keep one ball continuously attached to the bowling paw until release, then rolling along the same path. Keep the capybara’s compact proportions and grounded feet. Place the same yellow-green budgie on the ball return at screen right, happily watching. One continuous shot; no added cuts or slow motion.

「インクの盤上」という、青いボールペン画でできた立体チェス盤のブラウザ作品を作ってください。

これは自由に駒を並べて一枚の絵をつくる「自由に並べるスケッチ盤」です。チェスの対局ルールは実装しません。

【見た目】
暖かいクリーム色のスケッチ用紙に、ネイビーの細い線。盤と駒は、艶のある3D素材ではなく、ボールペンで何度もなぞった絵に見えるようにします。線幅と濃さをわずかに揺らし、丸い面には輪郭に沿う線、暗い面には斜線と交差する線を重ねてください。紙の繊維と粒子も計算で描き、外部画像は使いません。
キングの十字、クイーンの冠、ルークの城壁、ビショップの切り込み、ナイトの馬の横顔、ポーンの丸い頭を、それぞれ見分けられる立体の形にします。白の駒は紙の余白を残し、青の駒は線を密に重ねます。盤の隅には小さな手描きの印を添えます。

【操作】
「選ぶ・動かす」と「駒を置く」を明確に切り替えます。駒の種類と白／青を選び、空いたマスをタップして配置します。駒をタップして選び、空いたマスをタップすると移動。別の駒をタップすれば選び直し、選んだ駒は消せます。マスの重複は防ぎ、理由を短く伝えます。配置、移動、削除、構図変更には元に戻す／やり直すを用意します。
最初から美しい8駒の構図、六種類を眺める6駒の構図、32駒の初期配置、空の盤を用意してください。斜め／真上の視点、左右の回転、インクの濃さ、線の重なりを操作できます。ドラッグは使わず、375pxのスマートフォンでもタップで確実に扱えるようにします。キーボード操作とマスを指定する代替操作も付けてください。

【描画と保存】
ブラウザ標準のWebGLを使い、手前の面だけが見えるように深度テストを行います。どの視点でも駒と盤が画面から切れないよう、実際の大きさに合わせて収めてください。アイドル時に描画を回し続けず、操作時だけ更新します。ページを離れたら予約描画を解除してください。
PNG保存は、その瞬間のCanvasを別のCanvasへ同期的にコピーしてから画像化します。保存中に操作しても内容が混ざらないようにし、古いダウンロードURLを解放します。

【仕上げ】
日本語の操作は短く、スマートフォンでも12px以上で読みやすく。明朝の見出しと余白で、静かな文具の小冊子のようにしてください。追加ライブラリ、外部CDN、外部フォント、生成API、画像素材は使わず、コードと形を独自に作ります。
HTML、CSS、JavaScriptの自己完結したフォルダに、作品、作り方ページ、コピーできるこのプロンプト、README、PROCESS、操作状態とカメラのテストを保存してください。実ブラウザで表示、タッチ、キーボード、PNGの実ファイル、コピーの全文一致、戻る操作を確認して仕上げます。

「ひらく、紙の森」という、触れる飛び出す絵本のブラウザ作品を作って。厚みのある本を0〜100%で開閉し、木や家の紙がページへ倒れて収まる様子を、途中で止めて眺められるように。生成りの紙、苔色の木、珊瑚色の屋根の「森の喫茶」、小川と橋、狐、花、灯りを手切りの紙の模型として描いて。ドラッグと矢印キーの視点操作、正面・上から・近く、昼・夕暮れ、折り目表示、リセット、その瞬間のPNG保存を付けて。閉じた表紙や中間のページから裏の物が透けないように、全ての面をWebGLの深度バッファで描いて。標準倍率はどの角度でも本が画面に収まり、375pxで操作できるように。動きを減らす設定を尊重し、静止中の描画は止めて。外部コード・画像・フォント・ライブラリ・有料APIを使わず独自に制作し、作り方ページ、コピーできるプロンプト、PROCESS.md、検査と実物の証拠を残して。

「ひかりのエンボス工房」という、触れるブラウザ作品を作って。好きな短文を紙の浮彫りと箔押しにし、指で光を動かすと文字の凹凸と箔の反射がはっきり変わるように。コットン紙・シャンパン箔・黒箔、浮き出す／くぼませる、深さ、光の位置、リセット、今見ている光のままPNG保存を付けて。最初は「光を、ひと押し。」を美しく組版し、静かな日本語UIと贅沢な余白にして。日本語・英数字・長文・スマホに対応し、画像素材や有料APIを使わずCanvas 2Dで独自に描画して。参考例のコードや素材はコピーせず、PROCESS.mdに頼み方・道具・素材の出どころ・再制作手順を残して。

今、確認したんですが、ボールの投げるタイミングやピンの倒れるタイミングが不自然です。もっと元動画のタイミングを見てきて修正してください。
この辺も、みんながどうやってうまいこと作ってるかっていうののお手本とかお作法をもう一回見てきた上で、どうやったらうまくいくか、あんまり禁止とかルールに縛られずに自由に力を発揮してみてください。

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

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

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

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

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

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

Use case: illustration-story
Asset type: horizontal editorial cover illustration for a Japanese ChatGPT Space collecting real-world Dots use ideas.
Create one finished 16:9 landscape image, about 2048 × 1152. Warm, tactile, inviting editorial notebook illustration, with excellent Japanese lettering.
Image 1 is ONLY a style and original-character reference: inherit the friendly circle-headed stick people, a tiny teal head accent and coral scarf on the Dots helper, fine gently imperfect dark pen contours, meaningful interactions with papers, and spaciousness. Create a new composition; do not copy the diagram or any text from the reference.
Composition: generous open top area for the headline and subtitle; lower half to two-thirds is one connected playful scene. A small person hands over an idea note; a helpful Dots-role stick person gathers calendar and document pages into an open idea notebook; another curious figure leans in to look. Calendar, loose documents, a crescent moon and a small morning sun connect through a few light, hand-drawn sweeping lines. The notebook has a slightly curled corner and discreet paper tabs, giving a pleasant sense of something worth opening. Figures and meaningful objects have a clear visual hierarchy, not tiny decorative icons.
Palette: white to very light warm cream, fine charcoal ink, restrained soft teal and a small amount of coral. Gentle colored-pencil fills on a few objects, subtle pencil grain, no strong paper texture. Warm light, charming but composed, sophisticated Japanese editorial illustration.
Text must be exactly these two lines, no extra copy:
Large main title, verbatim: Dots 活用アイデア集
Clear smaller subtitle, verbatim: 世界の「こんな使い方」を集めよう
The Japanese characters should be accurate and confidently hand-lettered, with modest natural irregularity, good dark-on-light contrast and wide spacing. Keep all text and faces well away from edges; never overlap text or faces with props. Title must read even at thumbnail size.
Avoid official logos, imitated product UI, screenshots, glowing AI brains, robot heads, glossy 3D, heavy black marker outlines, generic corporate card grids, large solid color panels, gradients, dense details, extra labels, watermarks, tiny illegible text. This is a newly drawn welcoming cover, not a static reproduction of the supplied diagram.

Use case: infographic-diagram
Asset type: a finished Japanese horizontal diagram for a ChatGPT Space article, showing an example of a bounded overnight Dots assignment.
Create one polished 16:9 landscape image, about 2048 × 1152. White/light cream paper, fine imperfect charcoal pen lines, restrained teal with tiny coral accents, gentle colored-pencil fills. Inviting, thoughtful, handmade Japanese editorial illustration. The three steps must remain comprehensible when reduced for a phone.
Image 1 is ONLY a style and original-character reference. Inherit its friendly simple circle-head stick characters, expressive physical gestures, thin ink lines and whitespace. Use the Dots-role helper with a little teal head accent and small coral scarf. Invent a new full composition. Do not copy reference text, layout, or official UI/logo.
Top: large, very readable handwritten Japanese headline, exactly:
寝ている間、Dotsに任せるなら
Middle: three distinct spacious illustrated moments arranged left to right, connected by two simple hand-drawn arrows:
1. Before bed, an awake person hands the helper a small bounded task note; nearby are a cozy bed and a moon. The person is setting the scope, with a small pencil line/bracket around the note. Heading exactly "寝る前：範囲を決める".
2. At night, the friendly Dots-role helper sits or stands at a little desk arranging research notes and draft pages. A crescent moon above. Only rough notes and drafts, no message sending, no calendar booking, no green “all done” claims. Heading exactly "夜：整理・調査・下書き".
3. In soft morning light with a small sun, the human and the helper inspect the returned notes together. Some pages are gathered and one remains aside for follow-up, clearly communicating review of results AND unfinished work. Heading exactly "朝：結果と未完了を確認".
Use large two-line stage headings if needed, breaking ONLY after the colon. Keep each phrase intact and readable. Text below or above each illustration must not overlap characters. Title largest, stage labels generously sized, minimal other details.
Bottom: one small but clearly readable charcoal note on clean light paper, exactly:
8時間は指示の例。動作や完了の保証ではありません
The three stages are an example of requesting work, not proof of success. Do not draw a giant “8 hours” timer or imply continuous guaranteed operation.
No other words, logos, UI imitation, screenshots, checkmark trophies, success percentages, outward-sending arrows, locked-on guarantee, watermarks, heavy borders, corporate card UI, glossy gradients or photorealism. Fine line drawings, calm hand-lettering, delightful restrained colored-pencil warmth, beautiful clear whitespace. All Japanese must be reproduced verbatim.

ソースは note https://note.com/yonsan43/n/n88103a56bea2 と公開公式 https://fourthplace43.com/works/kesisaru/ 、取説 /Users/monoke/Downloads/個人情報消し去るくん_はじめにお読みください.txt、購入 /Users/monoke/Okemori/outputs/sumikeshi-purchase-2026-10-02/outcome_contract.json。親が使い方正本 あおいCDO/各種ツール/個人情報消し去るくん/README.md を作成するのでリンク可。起動は Gatekeeper の Apple 未検証警告で止まり、アプリだけの例外許可を非同期で本人に確認中。実測欄は購入/インストール確認と起動未完了を区別した現状で作ってください。取説にパスワードがあれば保存/転載しない。親が後で実測の結果を追記します。

（2026-10-02 11:1x・記憶喪失の子＝Opus 1人へ渡した頼み方。これと materials/ だけ。再現キット・注文書の型・過去の作品・親の見立ては渡していない。相談役 Fable とのやり取りは親が運ぶ）

あなたは Claude Code です。あるユーザー（おけもん）が、空の作業フォルダで新しい会話を始め、下のメッセージを送ってきました。ふつうの Claude Code として、このメッセージに全力で応えてください。質問で止めず、あなたが最善と思う形で作品を作り、最後は音つきの動画ファイル（mp4）まで仕上げてください。

【作業環境】
- 作業フォルダ：/Users/monoke/Okemori/outputs/yoko-photo-motion-2026-10-02/opus（ここで作業する。作ったものはすべてここに置く。これより外は、materials/道具.md に書いてある場所だけ読んでよい）
- materials/ に、ユーザーが用意した素材がある（使うかどうか・どう使うかは自由）：
  - yoko_meets_service.md：メッセージの URL（スキルマーケットMeets の出品ページ）の原文。サービス内容・料金・流れ・感想
  - yoko_profile.md：ヨーコさんのリベシティのプロフィールの原文
  - photos/meets_photo_01〜08.jpg：出品ページに載っている画像8枚（各1320×880。ヨーコさんが撮った写真を並べた物と、ヨーコさん本人が写った案内の画像）
  - photos/profile_album_1〜2.jpg：プロフィールのアルバムの2枚
  - yoko_icon.png：ヨーコさんのアイコン／okemon_icon.png：ユーザー（おけもん）のアイコン
  - 道具.md：この Mac で使える道具（絵を作る・声を作る・曲の棚・重い書き出しの付け方）
- メッセージの meets.libecity.com と libecity.com はログインが必要なサイトで、その中身は materials/ に写してある。
- 「ヨーコさんが撮った写真」として画面に出るのは、materials/photos の本物（そこから切り出した物）。画面に出す数字・名前・言葉は、materials の原文にある事実。
- メッセージの「ストレングスファインダー」について分かっている事実：ユーザーのおけもん（リベシティでの名前「おけもん🦫AIを難しいから楽しいに🌈」）は、スキルマーケットMeets に、ストレングスファインダーのセッション「さよならじぶん迷子👋ストレングスで本当の私に会いに行こう✨」（https://meets.libecity.com/service/12040）を出品している。親の読み：このムービーづくりは、そのストレングスファインダーのセッションを入口にしている。だから最後に「興味のある方は、おけもんのストレングスファインダーへ」という案内をひとこと添える。ムービーの主役はヨーコさん。案内の言い回しと見せ方は、あなたが決める。
- 書き出した版は消さずに残す（renders/ に v1、v2…と別名で）。

===== ユーザーのメッセージ =====
https://meets.libecity.com/service/2534

このスキルマーケットミーツの内容であったりとか、今日のオフ会に来ている陽子さんのプロフィールを見てきて、思わずみんなが陽子さんに写真を撮ってもらいたいって言ってもらえるような最高のモーショングラフィックを作ってください。

やり方は任せますが、せっかく写真いろんな素材があるので、もうこんな写真を撮りたいっていうふうな、みんなが世界が驚くような最高のモーショングラフィックムービーを、そうですね、30秒ぐらいでまず作ってみてください。

一応ストレングスファインダーでやっているので、ご興味ある方はストレングスファインダーで、みたいな案内も最後に添えてくださいね。

あなたが今できる最高のモーショングラフィックで、見た人が思わず「すごい」と声に出す1本を作ってください。
いま世界中で話題の「AIが本気で作るモーショングラフィック」です。あなたの腕前を、出し惜しみせず全力で証明してください。

（少しあとに足された言葉）
せっかくだからいいものを作りたいから、じゃあフェーブルもちょっと呼び出して、フェーブルは相談役とか設計役とかチェック役とか役割分担をして、フェーブルに相談させながら、さらに世界が驚くような、びっくりするような作品を作ってください。
===== ここまで =====

【相談役 Fable との進め方】
Fable（別のAI）が、相談役・設計役・チェック役として付きます。決めるのも作るのも、あなたです。Fable の意見はうのみにせず、採る・採らないをあなたが決めてください。Fable とのやり取りは、親（この会話を起こした側）が運びます。

いまの回（1回目）にやること：
素材をあなたの目で見て（写真は Read で開く）、あなたの案を作業フォルダの DESIGN.md に書いて、いったん返してください。書くのは、「これなら見た人が声を出す」の1行とその理由、舞台と見せ場のあらすじ（秒の流れ）、音の考え、Fable に相談したいこと。この回は作り込まずに早く返します（目安10分）。

このあとの流れ：
同じ時間に Fable も素材を見て、設計の提案を書いています。次の回で、Fable の提案と、あなたの案への Fable の意見を渡します。そこからあなたが決めて、通しで見られる1本目（v1）まで作ります。そのあと Fable が v1 を見て意見を出し、あなたが磨いて v2 を出します。最後に PROCESS.md（作り方・使った素材と道具・外のAIに渡したプロンプトの原文・作り直し方）を置きます。

（2026-10-02 13:0x・記憶喪失の子＝Opus 1人へ渡した頼み方。これと materials/ だけ。再現キット・注文書の型・親の見立ては渡していない。前に作ったヨーコさんの2本は「違うパターンで」の相手として場所だけ教えた。相談役 Fable とのやり取りは親が運ぶ）

あなたは Claude Code です。あるユーザー（おけもん）が、空の作業フォルダで新しい会話を始め、下のメッセージを送ってきました。ふつうの Claude Code として、このメッセージに全力で応えてください。質問で止めず、あなたが最善と思う形で作品を作り、最後は音つきの動画ファイル（mp4）まで仕上げてください。

【作業環境】
- 作業フォルダ：/Users/monoke/Okemori/outputs/petiteporte-motion-2026-10-02/opus（ここで作業する。作ったものはすべてここに置く。これより外は、下に書いた場所と materials/道具.md に書いてある場所だけ読んでよい）
- materials/ に、ユーザーが用意した素材がある（使うかどうか・どう使うかは自由）。最初に materials/README_素材.md を読むと、何がどこにあるか分かる。
- メッセージの URL（リベシティのプロフィール）はログインが必要で、中身は materials/yuzu_profile.md に写してある。「こっちの人」は、ゆずさん（ゆず@なんば開業ネイリスト）。お店は、大阪・なんばのネイルサロン nailsalon petite porte（プティポルト）。Instagram・リットリンク・ホットペッパーのお店のページの中身も materials/ に写してある。
- メッセージの「陽子さんの方」「ちょっと違うパターンで」について：同じ日に先に、フォトグラファーのヨーコさんの紹介ムービーを別の作り手が作りました。実物は見てかまいません（読むだけ。あのフォルダは別の作り手が作業中なので書き換えない）。
  - 15秒版：/Users/monoke/Okemori/outputs/yoko-photo-motion-2026-10-02/quick15/out/yoko_quick15_v3_narr.mp4 （コマ一覧 同じ場所の sheet_v2.jpg）
  - 本編の1本目：/Users/monoke/Okemori/outputs/yoko-photo-motion-2026-10-02/opus/renders/yoko_v1.mp4 （コマ一覧 /Users/monoke/Okemori/outputs/yoko-photo-motion-2026-10-02/opus/work/look/v1_all.jpg）
  - どちらも横長で、「写真を紙焼きにして壁に並べ、カメラが飛ぶ／ファインダーとシャッター／最後に QR の札」という型でした。ユーザーは今回、それとは違うパターンで、と言っています。
  - 本編の作り手が書いた道具（Chrome で1コマずつ撮る tools/render.mjs、効果音を計算で作る tools/make_audio.py など。/Users/monoke/Okemori/outputs/yoko-photo-motion-2026-10-02/opus/tools/ と src/）は、読んで、写して使い回してかまいません。絵の型は変えてください。
- お店の写真として画面に出るのは、materials の本物（そこから切り出した物）。画面に出す数字・名前・値段・言葉は、materials の原文にある事実。materials/shop の人物の写真は、誰なのか確かめられていません（README_素材.md）。
- 書き出した版は消さずに残す（renders/ に v1、v2…と別名で）。

===== ユーザーのメッセージ =====
https://libecity.com/user_profile/Wv1C84Nqd8Va99LfH4iIcIkRwRL2?redirect=/room_list?room_id=7nQBWLIpA4AACv1KqVNe

いいですね。じゃあ、陽子さんの方の完全バージョンを作りつつ、次はこっちの人のバージョンも作ってみようか。

Instagramとかにお店の情報あるみたいだし、この人のお店にぜひ来てみたいっていうふうなモーショングラフィックを作ってみてください。また、せっかくだから、ちょっと違うパターンで作ってみてほしいな。

あなたが今できる最高のモーショングラフィックで、見た人が思わず「すごい」と声に出す1本を作ってください。
いま世界中で話題の「AIが本気で作るモーショングラフィック」です。あなたの腕前を、出し惜しみせず全力で証明してください。
===== ここまで =====

【相談役 Fable との進め方】
ヨーコさんの時にユーザーが決めた形（Fable が相談役・設計役・チェック役として付く）を、今回も続けます。決めるのも作るのも、あなたです。Fable の意見はうのみにせず、採る・採らないをあなたが決めてください。Fable とのやり取りは、親（この会話を起こした側）が運びます。

いまの回（1回目）にやること：
素材をあなたの目で見て（写真は Read で開く）、あなたの案を作業フォルダの DESIGN.md に書いて、いったん返してください。書くのは、「これなら見た人が声を出す」の1行とその理由、形（縦か横か・長さ）、舞台と見せ場のあらすじ（秒の流れ）、音の考え、Fable に相談したいこと。この回は作り込まずに早く返します（目安10分）。

このあとの流れ：
同じ時間に Fable も素材を見て、設計の提案を書いています。次の回で、Fable の提案を渡します。そこからあなたが決めて、通しで見られる1本目（v1）まで作ります。そのあと Fable が v1 を見て意見を出し、あなたが磨いて v2 を出します。最後に PROCESS.md（作り方・使った素材と道具・外のAIに渡したプロンプトの原文・作り直し方）を置きます。

Use case: identity-preserve
Asset type: character model sheet for the existing illustrated character Mizuno, chibi-blue-hoodie variant, v1 draft.
Input image: sole identity and style reference; existing full-body wave pose. It is NOT a real child portrait, it is an illustrated mascot of an adult. Preserve this exact existing illustrated character; do not design a new one.
Create a clean landscape reference sheet on plain warm white, with three equally sized full-body drawings in one horizontal row: front, exact profile facing screen right, back. All three depict the same identical character in neutral standing pose, arms resting slightly away from body, feet fully visible on a shared baseline, enough margin. Preserve the head-to-body ratio of the attached reference exactly (large head and short rounded body, approximately 3 heads), black/charcoal tousled spiky hair with the same front fringe and hair mass, large round warm brown irises with dark upper area and golden brown lower area, rounded cheeks, small nose, warm cheerful expression. Preserve the original reference's illustration medium, line weight, detailed hair rendering, color rendering and texture; no style makeover, no 3D, no photorealism.
The outfit stays identical: saturated royal-blue pullover hoodie, hood down on the back, two white drawstrings with the reference's small knots/tips, ribbed sleeve cuffs and bottom hem, one front kangaroo pocket, NO chest logo or symbols; beige full-length trousers; blue sneakers with white laces and white soles. No headphones, bag, strap, bird, lion, additional props or decorations. Back hoodie has a plain back and a visible lowered hood; this rear construction is a conservative proposed completion, do not invent logos or extra seams. Profile/back are inferred draft views to be reviewed, not authoritative originals. Front view must match the supplied face, eye shape, fringe and clothing.
No text, no palette, no labels, no extra portraits or expression heads. Only the three full-body views. Neutral even lighting with no color casts, no scenic backgrounds, no floor shadows, no sticker outline. Preserve identity over visual spectacle.

Use case: identity-preserve / stylized-concept.
Create a single vertical 9:16 cinematic animation keyframe for a short video of the user's capybara bowling like a professional. The attached image is the exact character identity reference, not a layout to copy. Preserve its golden tan fur, large broad rounded dark-tan muzzle, small upright rounded ears with pink inner ears, dark expressive half-lidded eyes and charming calm confident expression. Make it a beautifully crafted tactile 3D animated capybara, still unmistakably this character.
Camera: full body, rear three-quarter view from behind and slightly to the capybara's left, at its waist height. The face is readable in natural three-quarter profile while looking down the lane. Entire body, both feet, and the bowling ball are clearly visible with generous room ahead for approach. One capybara only, no bird in this specific scene.
Pose: at the start of the bowling approach, balanced upright anthropomorphic stance, holding one glossy deep midnight-blue bowling ball at waist height with right paw beneath it and left paw lightly supporting, eyes focused on distant pins. Wear a tasteful teal short-sleeve professional bowling jersey, cream trousers and two bowling shoes. Short rounded animal paws, natural animal facial proportions, no human skin.
Scene: bright modern bowling alley, polished honey colored maple approach and full lane extending into the upper center with ten white pins in a correct triangular rack at the far end, side gutters, elegant soft ceiling light reflections. The capybara is in the foreground left of center, facing the pins. Charming yet serious sports-film mood, crisp physically plausible reflections, soft detailed fur, shallow but not excessive depth of field.
Constraints: single complete scene, no montage, no labels, no text, no logo, no watermark, no giant ball, no extra limbs. Render actual vertical portrait 9:16. This is the start frame, before the run-up or backswing.

  A native Japanese speaker who speaks only natural Japanese (never English). A soft-spoken woman in her mid thirties with a gentle, warm, natural mid-range voice, slightly breathy. Modest and sincere, like an ordinary person talking quietly to a close friend. Close-mic, intimate, calm; standard Japanese; not cute, not childish, not an announcer, not robotic.

  A native Japanese speaker who speaks only natural Japanese (never English). A cheerful woman around thirty with a bright, clear, friendly voice, like a happy customer telling a friend about something she loved. Smiling, lively, natural conversational rhythm, a little quick; casual standard Japanese; not childish, not squeaky, not an announcer, not robotic.

A native Japanese speaker who speaks only natural Japanese (never English). A gentle young woman in her mid-twenties with a soft, slightly breathy, clear voice; unhurried and close to the microphone, like quietly recommending her favorite little nail salon to a close friend. Warm and smiling, calm and elegant, with a small sparkle of delight; never bouncy, never squeaky, not an announcer, not robotic.

Speak only Japanese. Soft, intimate and smiling, like quietly telling a close friend about a lovely little nail salon; unhurried but not slow, gentle clear endings, a short pause between sentences. Not an announcer.

# 原画生成プロンプト（原文）

## 初回
Use case: illustration-story. Asset type: six isolated cutout drawings for a Japanese whiteboard explainer video about collaborative work notes. Primary request: Create a 3-column x 2-row sprite sheet of the SAME charming simple round-headed office person, with small tousled black hair, dot eyes, thin uneven hand-inked black contours, white paper-like interior fill, NO text or captions, NO grid lines. Each cell has plenty of blank transparent margin; subjects never cross cell boundaries. Top left: worried person kneeling to look through loose papers, a question mark above. Top middle: seated person at a small desk happily sorting three documents into an open notebook. Top right: standing person pointing at a large open notebook with friendly tiny AI companion (rounded square head, two dot eyes). Bottom left: person comparing two sheets with magnifying glass, checking facts. Bottom middle: two friendly people exchanging a question card beside an open notebook. Bottom right: happy person proudly holding an open notebook with a small sparkle. Style: spare elegant slightly wobbly pen drawing, very thin line, simple stick-limbs but detailed expressive hands, minimal blue/yellow accents, lots of whitespace, like a skilled whiteboard educator, not corporate flat vector, not anime, no heavy outlines, no shadows. All six scenes same physical scale, centered in evenly sized cells. Transparent background. Original characters.

## 背景確認用の編集
Edit this sprite sheet for clean whiteboard compositing: remove ALL background gradients, blurred halos, shadows and background color, leaving a genuinely transparent background. Preserve exactly the six drawings, character identity, pose, cell arrangement, black line art, white interior fills and small blue/yellow accents. Keep NO pixels outside the inked subject silhouettes, objects and accent marks. Fine thin handdrawn line art for a white background explainer. Do not add text.

内蔵imagegenを使用。返却メタデータは個別モデル名を示さないため、モデル名は未確認。どちらもRGBAの透明出力。画像表示工具では透明部分のRGBが黒く表示されるが、RGBA画素を確認し背景alpha=0。原画を3×2のセル境界で機械的に分けて動画に組み込む。原画の参考として他者の画像データは渡していない。

あなたが今できる最高のモーショングラフィックで、見た人が思わず「すごい」と声に出す1本を作ってください。
いま世界中で話題の「AIが本気で作るモーショングラフィック」です。あなたの腕前を、出し惜しみせず全力で証明してください。

■ 作りたいもの（本人の言葉）
解説「重いボールと軽いボール」（教材・動きの原則その2）：同じ高さから、ボウリングの球・ゴムボール・風船の3つを同時に落とす。重さが動き（つぶれ方・跳ね方・止まり方）にどう出るかを、同じ場面で比べて見せる。横長16:9・20秒

■ お手本（この1本のテンポ・文字・切り替えに寄せる）
- お手本：動きの基本を手書きの注釈で見せるショーリール（つぶれる・ためる・なめらかに止まる）（Himanshu） https://x.com/himanshutwtxs/status/2103495232637882858
- 特徴：白い地に青い玉と、赤・青の手書きの注釈／動きの基本を1つずつ、名前を書き込んで見せる／動きのグラフと残像で、速さの変化を見せる／128BPMほどの電子音楽、最後は名前で静止
- 動画が見られなくても大丈夫。上の特徴に寄せて作る。お手本の色・ロゴ・言葉・キャラはそのまま使わず、「作りたいもの」に置きかえる
- 作業フォルダにお手本のスクリーンショットがあれば、それも見て寄せる

■ 仕上がりのイメージ
にぎやかに、かっこいい解説。20秒。言葉が弾みながら現れて、一本の線が走って形を描く。ぽよんとつぶれて伸び、色の面がシャッと画面を入れ替える。最後に要点がひと目でわかる形で止まる。

■ 使ってほしい演出（これは出発点です。もっと良い見せ方を思いついたら、そちらを選んでかまいません）
1. キネティック・タイポグラフィ（Kinetic Typography）：画面に出す言葉を主役にして、文字ごとに登場と退場の動きをつける
2. ラインアニメーション（Line Animation）：線が描かれていく動きで、図・ロゴ・文字の輪郭を見せる
3. カラーワイプ（Color Wipe）：大きな色の面が画面を横切り、背景の色ごと場面を切り替える
4. スクワッシュ＆ストレッチ（Squash and Stretch）：着地でつぶれ、飛ぶ時に伸びる。体積は保つ
5. アンティシペーション（Anticipation）：大きく動く前に、いったん反対にためる
6. グリッチ（Glitch）：場面の切り替えで一瞬だけ色ずれやノイズを入れる（多用しない）
7. ビートシンク（Beat Sync）：テンポを1つ決め、場面の切り替えや大事な動きを拍に合わせる。効果音も動きと同じ瞬間に鳴らす

■ 条件
- 長さ：20秒　画面：横長 16:9（1920×1080）
- 形式：HTMLファイル1枚（HTML・CSS・JavaScriptをすべてこの中にまとめる）。今いる作業フォルダに motion.html として保存し（同じ名前があれば motion-2.html のように番号をつける）、できたらブラウザで開く（Mac なら open コマンド）
- 再生：最後まで行ったら「もう一度見る」ボタンを出す
- 外部のライブラリを使う時は CDN から読み込む（three.js など）。フォントはパソコンに入っている日本語フォントを使う
- 時間の管理：すべての動きを1本のタイムライン（経過時間から各場面の状態を計算する形）で管理し、コマ落ちしても時間どおりに進むようにする
- 音：Web Audio API で、BGM（テンポ 131BPM 前後）と効果音をコードだけで作る。ブラウザの決まりで最初は音が出ないので、最初の画面に大きな「▶ 音つきで再生」ボタンを置き、押したら映像と音を同時に始める。大事な動きと効果音は同じ瞬間に
- 画面に出す言葉：「おもさは、うごきで わかる。」「重いボールと軽いボール」（どれも一字一句そのまま使う）
- 色：白地に、ビビッドな赤・黄・ミントをはっきり（かっこよさを少し）（例：#FFFFFF #FF3E6C #FFD23F #3BCEAC #2D2D2D）
- 文字：日本語は読みやすい太さのフォントで。小さすぎる文字は使わない

■ いちばん大事なこと
- いちばん大事なのは「作りたいもの（本人の言葉）」。上の『仕上がりのイメージ』『使ってほしい演出』『色』が本人の言葉と食い違うところは、本人の言葉を優先する
- 演出を並べるだけにしない。ひとつの芯のアイデア（たとえば最初に出た形が最後まで姿を変え続ける）で、全部の場面をつなぐ
- その芯は、説明がなくても画面を見るだけで伝わるようにする
- 場面の切れ目はパッと切らず、前の場面の形を次の場面へ受け渡してつなぐ
- 動きは等速にしない。加速・減速（イージング）と、止める瞬間（間）をつける
- キャラクターや動物の絵をコードで描かない。図形・文字・模様・光・3Dの形で表現する（写真やイラストのファイルを渡された時だけ、それを使う）

作り始める前に、芯のアイデアと場面の流れを3行で書き出してから作ってください。
完成したら、使った演出と、芯のアイデアを1行ずつ教えてください。

Create a NEW cinematic photographic scene, not a collage, for a private Japanese creative company's DevDay game-day dashboard. Landscape 16:9, 1792x1024 or similar wide high quality composition.
Camera angle: slightly above seated eye level from the owner’s empty chair, across an inviting oak creative studio table. The photographer/owner is not visible. Frame exactly six adult fictional Japanese women in their mid twenties to early thirties naturally gathered around the table, interacting with one another and a small handmade adventure-map board, laughing at an exciting discovery. They are friends and colleagues, not models posing in a row. Use the five provided files as fictional identity references, only face/hair features, not their old backgrounds or outfits:
1 Haruka from first image, soft warm smile, natural dark brown hair softly tied back, cream cardigan, leaning toward camera with a joyful welcoming expression.
2 Aoi from second image, shorter black bob, calm focused smile, navy relaxed shirt, studying a tiny 3D prototype beside a laptop.
3 Yui from third image, translucent natural appearance, straight brown shoulder-length hair and airy fringe, white linen shirt, quietly delighted, holding a notebook.
4 Shiori from fourth reference is an anime design reference ONLY: translate into a photographic fictional woman, precise straight blunt bangs and sleek dark shoulder-length hair longer than Aoi, white shirt and forest-green vest, understated approving smile, holding five small brass game tokens.
5 Mana is the LEFT woman in fifth reference, long warm brown hair, black blazer over white shirt, laughing and gesturing toward the miniature board. Do NOT include the right pink-haired woman in that reference.
6 Rin is a new interpretation of an established fictional description: loose medium-length light chestnut waves, pastel pink knit, delicate gold earrings, radiant cheerful smile, filming a tiny miniature scene with a phone.
Their faces must be distinct. Beautiful but natural unretouched photographic skin, realistic hands, playful spontaneous body language.
On table: a carefully handcrafted miniature forest adventure map, tiny wooden library cabinet, miniature capybara-like creative mascot and small bird as handmade resin models, little filmstrip and keyboard, a laptop showing an abstract colorful creative interface with no readable private data. No alcohol. Warm morning October sunlight from a large side window, forest greenery, cozy creative workshop shelves softly out of focus, sage and cream color palette with peach and lilac accents.
The table/map is foreground lower third; women and faces are central across the middle. Professional editorial photography, tactile oak/cork/paper materials. Keep all six faces visible, no duplication or fused limbs. No embedded text, no logos, no watermark. This is an imaginative scene for a game-day page, not a representation of a real event.

# AIに渡した原文

制作親への注文は `ORDER_SOURCE.md` と `PROCESS.md` のユーザー原文。

## 音制作 native subagent morning_audio

Own ONLY /Users/monoke/Okemori/outputs/motion-saigen-kit-2026-10-01/runs/codex/audio/ files. You are not alone; do not revert others. User asks highest-quality 26s morning AI study group motion graphic, single cozy sunrise windowsill desk, three supplied cute paper characters; no posting. Produce original instrumental music + precisely synced SFX using numpy wave/ffmpeg (no network/generation charges, no voices) with script audio/make_audio.py and audio/mix.wav 48k stereo exactly 26sec; cue manifest audio/cues.json and short AUDIO_NOTES.md. Shared beat BPM120.5 grid G0=.168 GP=.49795. Main cues .168 hello phone bell;2.1598 sunrise7:00;4.1516 title and characters; actor landing 4.1516,4.64955,5.1475;8.1352,8.63315,9.1311 three news unfolding;12.1188 phone listening warm soundwave;16.1024 archive card soft tape/swipe;20.086 invitation chair slides/CTA;24.0696 music resolves to ending26. Need inviting morning playful, warm plucked/mallet instruments, restrained bass/percussion, original memorable melodic arc with sunrise build, full but gentle. Opening quiet, lift2.16, music peak at8.14 and20.09; listener restful at12, archiving16; satisfying ending not arbitrary fade. Use pitch coherent soft transient synthesis; no harsh high sine. Music/SFX written to same table, demonstrate onset in rendered wave and LUFS aim -16 to-14, true peak below -1.5dB. You can read TEST_BRIEF/STARTER but keep work within owned audio. Don't run >30s processing without heavy_lock.sh. Return paths, measured duration/LUFS, unresolved ears quality. No REPORT.md. Work autonomously.

要求設定：agent_type worker / model gpt-6-luna / reasoning_effort max / fork_turns none。

## 独立画像レビュー native subagent fresh_visual_review

Read-only fresh visual review, do not edit. User commissioned 26-sec highest-quality morning AI study group promo for Libecity beginners, target utterance '明日の朝、のぞいてみようかな'. Facts allowed only name 朝のAI勉強会; every morning7:00〜7:30 oVice; latest AI explained gently for beginners; smartphone listen-only OK; archive videos. Three original character sticker drawings must stay cute. Stage single sunrise windowsill desk, phone, cup, chair. Review actual images using view_image: /Users/monoke/Okemori/outputs/motion-saigen-kit-2026-10-01/runs/codex/preview/first_test_sheet.jpg and preview/wip/wip02_news.jpg, wip02_listen.jpg,wip02_end.jpg. Full preview being rendered; can read when arrives but no need to wait. Answer two questions: would viewer say 'tomorrow morning maybe peek in'? would it make you want attend? Be candid; give highest priority 1–2 specific feasible visual improvements (not vague polish). Renderer is CPU software 3D because Chrome and Blender GPU both crash in sandbox; don't propose GPU engine. No audio hearing supported. Aim useful 1 short response, do not write REPORT.md. Ownership read-only, others editing source.

要求設定：agent_type default / model gpt-6-astra / reasoning_effort high / fork_turns none。

Ownership: ONLY /Users/monoke/Okemori/outputs/okesake-devday-2026-10-01/video/ (create) and its PROCESS.md. You are not alone; do not revert others, modify site/ or Sites checkout/parent docs. Goal: produce polished 20–30 sec Japanese MP4 entry demo for actual fictional interactive capybara sake Site. User authorizes autonomous 'どんどん目的ゴールへ進めて', already approved 20 sec filming script and local polish. No extra interviews or approval before local rendering; user's latest intent overrides skill gates that would stop at plan. No external publishing/posts/entries/tools. Parent owns Sites publication and CUA. Read /Users/monoke/.agents/skills/hyperframes/SKILL.md then appropriate workflow/core/domain only. Parent route selected product-launch-video with show-it-as-is intent, autonomous/storyboard:no, ~25sec, 1920×1080 Japanese, no narration required (captions acceptable). If init/build worker workflow required delegate within available slots? Prefer do your bounded project yourself, no new external agents. Supplied source material at outset: /Users/monoke/Okemori/outputs/okesake-devday-2026-10-01/site/ full actual authored Site; evidence/final-preview.png desktop and mobile-caught.png screenshots, source three-d/viewer.js/back-room.js and actual Blender kapipara.glb, generated raster planes. No need browser scrape; no-capture branch valid original source supplied. Do NOT launch Playwright or UI browser via shell; all actual browser UI belongs parent via CUA. Product showcase must use real screenshot as base; may recreate ONLY moving 3D component from actual source/GLB at measured positions, or a deterministic exported scene if no honest screenshot sequence. Don't fake interaction states with text alone. Prefer live actual original 3D with deterministic seekable rendering. Inspect source and choose reliable way. Timed sequence: completed bottle0–4, turn to back4–9, knock/open door9–13, sleeping→caught→excuse13–21, returnfront/actualSiteURL21–25. First frame has persistent readable disclosure 'OpenAI DevDay Side Questの懸賞応募です。賞品が当たるチャンスがあります。' small but readable ≥30px; hashtag #OpenAISideQuest on final/description. Public Site URL https://okemon-ai-box.okemon.chatgpt.site/kapipara/. Exact source claims: bottle/door actual Blender3D, interior capybaras generated artwork on planes. No selling/realcommerce. Optional source author-generated SkyDrop20sec CM already site assets but can leave audio absent for clear demo (no external music). SUBMISSION_KIT.md at parent folder has official constraints. Need finished MP4, inspect contact sheet midpoints and cuts, duration ffprobe, MP4 realdecode, PROCESS with user rawquote above, AI prompt exact (save this message), tool/model/assets/reproduce. If skill asks to run skills-update with confirmation, avoid unnecessary manual update; init integrated freshness is permitted under user authorized local build. Return concise actualpaths/duration/checks/limitations, not enormous dumps. Ask parent for CUA screenshots if need additional real views. Do not claim original Site publicly updated—that's parent's work. Current local URL http://127.0.0.1:8769/?preview=final. Astra is read-only quality advisor later; parent accepts independently.

Read only viewer.js and back-room.js. Do not edit files or claim to have run the website. In exactly four concise Japanese lines (maximum 160 characters total), explain: (1) the exact button label that rotates the bottle to reveal the hidden room, (2) the exact button label that opens the room, (3) the precise automatic trigger and delay for the reaction, also noting whether another click can trigger it sooner, and (4) the exact visible reaction phrase. Use only facts grounded in these files and cite source basenames. Be precise: distinguish the timer from a click on the 3D door.

（チャットのURL）

AI初心者サポートチャットが1000人こえたのーー👏
というわけで私のノウハウ図書館を保管ウルトラコード起動させたから今できる最高のモーショングラフィック使ってね

3人の管理者さんのアイコンやチャットのコンセプトを理解した上で、このちゃっとにはいりたいとか興味を持ってもらえるような1分ぐらいのやつつくってー

必要であればChatGPTで画像も作ってね

あなたが今できる最高のモーショングラフィックで、見た人が思わず「すごい」と声に出す1本を作ってください。
いま世界中で話題の「AIが本気で作るモーショングラフィック」です。あなたの腕前を、出し惜しみせず全力で証明してください。

（作業フォルダに入れて渡した物：チャットの概要欄の文と管理者3人の名前・3人のアイコン画像・このお祝い用に作った曲。使うかどうか、どう使うかは自由）

Create a square 1:1 chat icon for Oke's friendly beginner-welcome coworking meetup. Reference image: the supplied official Oke icon, a fluffy tan capybara with a small yellow-green budgerigar on its head. Preserve the recognizable face, fur, and bird design; reference is for character identity, not an edit target. Scene: Oke happily concentrating on a laptop at a small warm wooden desk, budgerigar perched on its head looking at the screen, a notebook and warm mug subtly present. Style: charming Japanese hand-drawn illustration with soft rounded shapes, clean bold outlines, warm cream and fresh sage green colors, friendly focused atmosphere. Composition: large capybara face in the upper center and laptop in the lower center, both readable at 80 pixels; ample margins safe for circular avatar cropping, uncluttered cream and sage background. No humans, no title, no text, no dates, no logos, no watermark. Opaque background. This is a cozy work-session icon, not a lecture scene.

あなたが今できる最高のモーショングラフィックで、見た人が思わず「すごい」と声に出す1本を作ってください。
いま世界中で話題の「AIが本気で作るモーショングラフィック」です。あなたの腕前を、出し惜しみせず全力で証明してください。

■ 作りたいもの（本人の言葉）
架空のオンラインショップの「システムメンテナンスのお知らせ」（縦長 9:16・15秒）。画面が乱れて文字化けし、そこから日時が整い、最後に戻る時刻を伝える

■ お手本（この1本のテンポ・文字・切り替えに寄せる）
- お手本：Databricks の開発者サイトのブランド映像（Pixel Point） https://x.com/alex_barashkov/status/2084313374393835699
- 特徴：赤と黒、ドット絵のような角ばった大きな文字／3Dの古いパソコンの画面の中へカメラが入る／見出しが一瞬文字化けしてから決まる／拍のはっきりした電子音楽（約130BPM）
- 動画が見られなくても大丈夫。上の特徴に寄せて作る。お手本の色・ロゴ・言葉・キャラはそのまま使わず、「作りたいもの」に置きかえる
- 作業フォルダにお手本のスクリーンショットがあれば、それも見て寄せる

■ 仕上がりのイメージ
かっこよく、近未来の告知。15秒。一本の線が走って形を描き、カメラが3Dの奥へ飛び込む。少しずつ時間差で順番に動き、前の場面の形が、そのまま次の場面になる。最後にタイトルと日付がはっきり読める形で止まる。

■ 使ってほしい演出（これは出発点です。もっと良い見せ方を思いついたら、そちらを選んでかまいません）
1. ラインアニメーション（Line Animation）：線が描かれていく動きで、図・ロゴ・文字の輪郭を見せる
2. 3Dカメラワーク（3D Camera Move）：three.js などで奥行きのある空間を作り、カメラが中を進んでいく
3. キネティック・タイポグラフィ（Kinetic Typography）：画面に出す言葉を主役にして、文字ごとに登場と退場の動きをつける
4. マッチカット（Match Cut）：場面の切り替えでカットせず、前の場面の形を次の場面の部品へ受け渡す
5. スタッガー（Stagger）：複数の要素をほんの少しずつ時間差で動かし、波のような流れを作る
6. アンティシペーション（Anticipation）：大きく動く前に、いったん反対にためる
7. グリッチ（Glitch）：場面の切り替えで一瞬だけ色ずれやノイズを入れる（多用しない）
8. ビートシンク（Beat Sync）：テンポを1つ決め、場面の切り替えや大事な動きを拍に合わせる。効果音も動きと同じ瞬間に鳴らす

■ 条件
- 長さ：15秒　画面：縦長 9:16（1080×1920）
- 縦長なので、ブラウザの真ん中に 9:16 の枠を高さいっぱいに置き、枠の外は黒にする（画面収録で切り取りやすいように）
- 形式：HTMLファイル1枚（HTML・CSS・JavaScriptをすべてこの中にまとめる）。今いる作業フォルダに motion.html として保存し（同じ名前があれば motion-2.html のように番号をつける）、できたらブラウザで開く（Mac なら open コマンド）
- 再生：最後まで行ったら「もう一度見る」ボタンを出す
- 外部のライブラリを使う時は CDN から読み込む（three.js など）。フォントはパソコンに入っている日本語フォントを使う
- 時間の管理：すべての動きを1本のタイムライン（経過時間から各場面の状態を計算する形）で管理し、コマ落ちしても時間どおりに進むようにする
- 音：Web Audio API で、BGM（テンポ 127BPM 前後）と効果音をコードだけで作る。ブラウザの決まりで最初は音が出ないので、最初の画面に大きな「▶ 音つきで再生」ボタンを置き、押したら映像と音を同時に始める。大事な動きと効果音は同じ瞬間に
- 画面に出す言葉：「システムメンテナンスのお知らせ」「10」「15 2:00〜5:00」「5:00に、もどります」（どれも一字一句そのまま使う）
- 色：黒と白を基本に、差し色に蛍光イエローを1色だけ（近未来っぽさを少し）（例：#0E0E10 #F4F4EF #E8FF3A #6B6B70）
- 文字：日本語は読みやすい太さのフォントで。小さすぎる文字は使わない

■ いちばん大事なこと
- いちばん大事なのは「作りたいもの（本人の言葉）」。上の『仕上がりのイメージ』『使ってほしい演出』『色』が本人の言葉と食い違うところは、本人の言葉を優先する
- 演出を並べるだけにしない。ひとつの芯のアイデア（たとえば最初に出た形が最後まで姿を変え続ける）で、全部の場面をつなぐ
- その芯は、説明がなくても画面を見るだけで伝わるようにする
- 場面の切れ目はパッと切らず、前の場面の形を次の場面へ受け渡してつなぐ
- 動きは等速にしない。加速・減速（イージング）と、止める瞬間（間）をつける
- キャラクターや動物の絵をコードで描かない。図形・文字・模様・光・3Dの形で表現する（写真やイラストのファイルを渡された時だけ、それを使う）

作り始める前に、芯のアイデアと場面の流れを3行で書き出してから作ってください。
完成したら、使った演出と、芯のアイデアを1行ずつ教えてください。

Use the most recent screenshot (an X post showing a whiteboard explanation video) ONLY as a visual style reference. Create a brand new high quality STILL FRAME for a Japanese explanatory whiteboard video, 16:9 horizontal, 1920x1080. This is a style test for improving illustrations in an existing video, not a promotional banner.
Inherit the reference's restrained fine black felt-tip pen marks on pure flat white, confident gently imperfect curves, large airy negative space, tiny original stick people participating in the diagram, and friendly hand-lettered Japanese labels. Do not include any X interface, player buttons, avatar, watermark, chapter UI, photorealistic screenshot or duplicate the screenshot's composition.
Original composition: top-left handwritten title exactly 「ラジオの準備、お願い。」, modest sized. In the middle a left-to-right story in ONE connected whiteboard diagram, no boxes/card UI: at left an expressive stick person leaning forward slightly, holding a microphone and giving three loose pages of activity notes to a tiny round-headed AI stick person. The AI has a small handwritten "AI" on its chest and is actively carrying or arranging the pages, not standing decoratively. A hand-drawn clock floats modestly above the AI (24 hours concept), not dominant. To the right, a lightly sketched stack of three topic cards on a table with an outline microphone, and a lightly sketched laptop showing a simple document with just lines, next to another small person pointing and checking it with a check mark. Single loose arrows connect the notes -> AI working -> topics/document -> human check. Place small precise hand-lettered labels 「記録」 beneath notes, 「話題」 beneath topic cards, 「資料」 beneath laptop, 「確認」 near checker. The hands, head angles and body pose should reveal what each figure is doing. All characters are original generic stick figures with circle heads, line limbs, small dot eyes and simple friendly expressions.
Drawing style: pen drawing, black only on white; organic line weights around 1.5-2.5px at 1920px scale, natural single continuous strokes, a few tasteful short hatch accents on pages, no excessive repeated parallel lines, no shaky random distortion. The small original clock is intentionally slightly noncircular, ticks individually placed, limbs and hands are thoughtfully curved rather than ruler-straight. A very thin, gently uneven baseline below the figures. Clear explanation, professional editorial whiteboard illustration. Keep the full illustration in middle 65% of the frame, generous white margins.
Avoid bold Noto-style typography, heavy card borders, colored accents, gradients, shadows, paper texture, elaborate hair/clothes, cartoon mascot, marker-filling, huge title, thick outlines, flat corporate vector icon style. This should feel drawn by a skilled human explaining a workflow with a pen.

あなたが今できる最高のモーショングラフィックで、見た人が思わず「すごい」と声に出す1本を作ってください。
いま世界中で話題の「AIが本気で作るモーショングラフィック」です。あなたの腕前を、出し惜しみせず全力で証明してください。

■ 作りたいもの（本人の言葉）
動く誕生日カード（縦長 9:16・15秒）。丸いケーキに小さな炎が並び、ぐっと息を吸うようにケーキがふくらんで力をため、炎がふっと消えて紙吹雪がはじける。名前を入れる空き枠つき

■ お手本（この1本のテンポ・文字・切り替えに寄せる）
- お手本：動きの基本を手書きの注釈で見せるショーリール（つぶれる・ためる・なめらかに止まる）（Himanshu） https://x.com/himanshutwtxs/status/2103495232637882858
- 特徴：白い地に青い玉と、赤・青の手書きの注釈／動きの基本を1つずつ、名前を書き込んで見せる／動きのグラフと残像で、速さの変化を見せる／128BPMほどの電子音楽、最後は名前で静止
- 動画が見られなくても大丈夫。上の特徴に寄せて作る。お手本の色・ロゴ・言葉・キャラはそのまま使わず、「作りたいもの」に置きかえる
- 作業フォルダにお手本のスクリーンショットがあれば、それも見て寄せる

■ 仕上がりのイメージ
にぎやかに、かっこいいお祝い。15秒。冬の澄んだ空気の中で、光の粒が集まっては弾けて、言葉が弾みながら現れる。ぐっとためてから一気に動き、色の面がシャッと画面を入れ替える。最後に「おたんじょうびおめでとう」が大きく残る。

■ 使ってほしい演出（これは出発点です。もっと良い見せ方を思いついたら、そちらを選んでかまいません）
1. パーティクル（Particle Animation）：小さな粒（光・紙吹雪・星）が集まって形になり、また散る
2. キネティック・タイポグラフィ（Kinetic Typography）：画面に出す言葉を主役にして、文字ごとに登場と退場の動きをつける
3. ラインアニメーション（Line Animation）：線が描かれていく動きで、図・ロゴ・文字の輪郭を見せる
4. カラーワイプ（Color Wipe）：大きな色の面が画面を横切り、背景の色ごと場面を切り替える
5. アンティシペーション（Anticipation）：大きく動く前に、いったん反対にためる
6. スクワッシュ＆ストレッチ（Squash and Stretch）：着地でつぶれ、飛ぶ時に伸びる。体積は保つ
7. テクスチャオーバーレイ（Texture Overlay）：紙の繊維やうっすらした粒子を画面にのせて、手ざわりを出す
8. ビートシンク（Beat Sync）：テンポを1つ決め、場面の切り替えや大事な動きを拍に合わせる。効果音も動きと同じ瞬間に鳴らす

■ 条件
- 長さ：15秒　画面：縦長 9:16（1080×1920）
- 縦長なので、ブラウザの真ん中に 9:16 の枠を高さいっぱいに置き、枠の外は黒にする（画面収録で切り取りやすいように）
- 形式：HTMLファイル1枚（HTML・CSS・JavaScriptをすべてこの中にまとめる）。今いる作業フォルダに motion.html として保存し（同じ名前があれば motion-2.html のように番号をつける）、できたらブラウザで開く（Mac なら open コマンド）
- 再生：最後まで行ったら「もう一度見る」ボタンを出す
- 外部のライブラリを使う時は CDN から読み込む（three.js など）。フォントはパソコンに入っている日本語フォントを使う
- 時間の管理：すべての動きを1本のタイムライン（経過時間から各場面の状態を計算する形）で管理し、コマ落ちしても時間どおりに進むようにする
- 音：Web Audio API で、BGM（テンポ 131BPM 前後）と効果音をコードだけで作る。ブラウザの決まりで最初は音が出ないので、最初の画面に大きな「▶ 音つきで再生」ボタンを置き、押したら映像と音を同時に始める。大事な動きと効果音は同じ瞬間に
- 画面に出す言葉：「おたんじょうびおめでとう」「（なまえ）さん」（どれも一字一句そのまま使う）
- 色：雪の白と氷の青、差し色に赤（にぎやかさを少し）（例：#F7FAFC #B8D8EB #E63946 #2A9D8F #1D3557）
- 文字：日本語は読みやすい太さのフォントで。小さすぎる文字は使わない

■ いちばん大事なこと
- いちばん大事なのは「作りたいもの（本人の言葉）」。上の『仕上がりのイメージ』『使ってほしい演出』『色』が本人の言葉と食い違うところは、本人の言葉を優先する
- 演出を並べるだけにしない。ひとつの芯のアイデア（たとえば最初に出た形が最後まで姿を変え続ける）で、全部の場面をつなぐ
- その芯は、説明がなくても画面を見るだけで伝わるようにする
- 場面の切れ目はパッと切らず、前の場面の形を次の場面へ受け渡してつなぐ
- 動きは等速にしない。加速・減速（イージング）と、止める瞬間（間）をつける
- キャラクターや動物の絵をコードで描かない。図形・文字・模様・光・3Dの形で表現する（写真やイラストのファイルを渡された時だけ、それを使う）

作り始める前に、芯のアイデアと場面の流れを3行で書き出してから作ってください。
完成したら、使った演出と、芯のアイデアを1行ずつ教えてください。

あなたが今できる最高のモーショングラフィックで、見た人が思わず「すごい」と声に出す1本を作ってください。
いま世界中で話題の「AIが本気で作るモーショングラフィック」です。あなたの腕前を、出し惜しみせず全力で証明してください。

■ 作りたいもの（本人の言葉）
架空の小さなデザイン会社の仲間募集。縦長 9:16・15秒。「いっしょに、つくる人。」「デザイナー 1名」「リモートOK」が拍で入れ替わり、色の面がシャッと替わって、最後に応募〆切と問い合わせ先（架空）。字が主役の採用告知

■ お手本（この1本のテンポ・文字・切り替えに寄せる）
- お手本：文字アニメの見本帳 animate-text（色の面が切り替わり、言葉が意味どおりに動く）（Pixel Point） https://x.com/alex_barashkov/status/2055276192106774738
- 特徴：画面いっぱいの色（白・青・緑・黒）が約0.8秒ごとに切り替わる／言葉は1〜3語だけ、1語ずつ・1字ずつ出て消える／6つのマスで、別々の文字の動きが時間差で流れる／言葉がその意味どおりに動く（左へ押す・上から積む）
- 動画が見られなくても大丈夫。上の特徴に寄せて作る。お手本の色・ロゴ・言葉・キャラはそのまま使わず、「作りたいもの」に置きかえる
- 作業フォルダにお手本のスクリーンショットがあれば、それも見て寄せる

■ 仕上がりのイメージ
にぎやかに、かっこいい告知。15秒。言葉が弾みながら現れて、言葉が自分の意味どおりに動く。少しずつ時間差で順番に動き、色の面がシャッと画面を入れ替える。最後にタイトルと日付がはっきり読める形で止まる。

■ 使ってほしい演出（これは出発点です。もっと良い見せ方を思いついたら、そちらを選んでかまいません）
1. キネティック・タイポグラフィ（Kinetic Typography）：画面に出す言葉を主役にして、文字ごとに登場と退場の動きをつける
2. エクスプレッシブ・タイポグラフィ（Expressive Typography）：言葉の意味をそのまま動きにする（例：「ゆっくり」はゆっくり、「ぴたっ」で完全に止める）
3. カラーワイプ（Color Wipe）：大きな色の面が画面を横切り、背景の色ごと場面を切り替える
4. マスクリビール（Mask Reveal）：マスク（見えない窓）で文字や形を少しずつ見せる
5. スタッガー（Stagger）：複数の要素をほんの少しずつ時間差で動かし、波のような流れを作る
6. オーバーシュート（Overshoot）：目標の位置を少し行き過ぎてから戻る、バネの動き
7. ライトスイープ（Light Sweep）：光の筋が表面を横切ってきらっと輝く。光のにじみ（グロー）も少し
8. ビートシンク（Beat Sync）：テンポを1つ決め、場面の切り替えや大事な動きを拍に合わせる。効果音も動きと同じ瞬間に鳴らす

■ 条件
- 長さ：15秒　画面：縦長 9:16（1080×1920）
- 縦長なので、ブラウザの真ん中に 9:16 の枠を高さいっぱいに置き、枠の外は黒にする（画面収録で切り取りやすいように）
- 形式：HTMLファイル1枚（HTML・CSS・JavaScriptをすべてこの中にまとめる）。今いる作業フォルダに motion.html として保存し（同じ名前があれば motion-2.html のように番号をつける）、できたらブラウザで開く（Mac なら open コマンド）
- 再生：最後まで行ったら「もう一度見る」ボタンを出す
- 外部のライブラリを使う時は CDN から読み込む（three.js など）。フォントはパソコンに入っている日本語フォントを使う
- 時間の管理：すべての動きを1本のタイムライン（経過時間から各場面の状態を計算する形）で管理し、コマ落ちしても時間どおりに進むようにする
- 音：Web Audio API で、BGM（テンポ 131BPM 前後）と効果音をコードだけで作る。ブラウザの決まりで最初は音が出ないので、最初の画面に大きな「▶ 音つきで再生」ボタンを置き、押したら映像と音を同時に始める。大事な動きと効果音は同じ瞬間に
- 画面に出す言葉：「いっしょに、つくる人。」「デザイナー 1名」「リモートOK」「応募〆切 10」「31」「架空のデザイン会社」（どれも一字一句そのまま使う）
- 色：白地に、ビビッドな赤・黄・ミントをはっきり（かっこよさを少し）（例：#FFFFFF #FF3E6C #FFD23F #3BCEAC #2D2D2D）
- 文字：日本語は読みやすい太さのフォントで。小さすぎる文字は使わない

■ いちばん大事なこと
- いちばん大事なのは「作りたいもの（本人の言葉）」。上の『仕上がりのイメージ』『使ってほしい演出』『色』が本人の言葉と食い違うところは、本人の言葉を優先する
- 演出を並べるだけにしない。ひとつの芯のアイデア（たとえば最初に出た形が最後まで姿を変え続ける）で、全部の場面をつなぐ
- その芯は、説明がなくても画面を見るだけで伝わるようにする
- 場面の切れ目はパッと切らず、前の場面の形を次の場面へ受け渡してつなぐ
- 動きは等速にしない。加速・減速（イージング）と、止める瞬間（間）をつける
- キャラクターや動物の絵をコードで描かない。図形・文字・模様・光・3Dの形で表現する（写真やイラストのファイルを渡された時だけ、それを使う）

作り始める前に、芯のアイデアと場面の流れを3行で書き出してから作ってください。
完成したら、使った演出と、芯のアイデアを1行ずつ教えてください。

あなたが今できる最高のモーショングラフィックで、見た人が思わず「すごい」と声に出す1本を作ってください。
いま世界中で話題の「AIが本気で作るモーショングラフィック」です。あなたの腕前を、出し惜しみせず全力で証明してください。

■ 作りたいもの（本人の言葉）
ハロウィンのあいさつ 10/31（縦長 9:16・15秒）：紫と橙の夜に、月・丘・枯れ木・かぼちゃの灯りを層に分け、カメラが丘から月へ昇るあいだ手前の層ほど速く動き、灯りが1つずつ灯って「Happy Halloween 10/31」。かぼちゃの顔は三角の切り抜きだけ、動物やキャラは描かない。橙・紫・黒のシルエット。絵は図形だけ、音は低い持続音と灯るたびの鈴を Web Audio で合成

■ お手本（この1本のテンポ・文字・切り替えに寄せる）
- お手本：満月の夜の2.5Dパララックス（絵の層を、手前ほど速く動かす）（Higgsfield AI） https://x.com/higgsfield_ai/status/2103964599737536831
- 特徴：紫の夜空、満月、浮世絵のような波（縦長の完成映像）／山・波・丘・木を層に分け、手前ほど速く動かす／灯籠がゆっくり浮かび、小さな光がまたたく／最後は満月へ寄って、光が画面に広がる
- 動画が見られなくても大丈夫。上の特徴に寄せて作る。お手本の色・ロゴ・言葉・キャラはそのまま使わず、「作りたいもの」に置きかえる
- 作業フォルダにお手本のスクリーンショットがあれば、それも見て寄せる

■ 仕上がりのイメージ
和の風情たっぷりに、神秘的な短い映像作品。15秒。秋の実りの中で、切り抜いた紙がぺたぺた重なって、丸や三角がリズムよく並び替わる。呼吸するようにゆっくりふくらんで、手前と奥が違う速さで流れる。最後に「Happy Halloween 10/31」がはっきり残って終わる。

■ 使ってほしい演出（これは出発点です。もっと良い見せ方を思いついたら、そちらを選んでかまいません）
1. カットアウト・アニメーション（Cutout Animation）：紙を切り抜いたような形が重なり、影つきで貼られたり剥がれたりする
2. シェイプアニメーション（Shape Animation）：丸・三角・四角などの図形がリズムよく並び、回り、組み替わる
3. パララックス（Parallax）：手前・中・奥の層を違う速さで動かして奥行きを出す
4. ブリージング（Breathing Animation）：光や形が、呼吸のようにゆっくりふくらんでしぼむ（ループ作品なら、切れ目なくつなぐ）
5. ホールド（Hold）：見せたい瞬間は動きをピタッと止めて、一拍しっかり見せる
6. ライトスイープ（Light Sweep）：光の筋が表面を横切ってきらっと輝く。光のにじみ（グロー）も少し
7. ビートシンク（Beat Sync）：テンポを1つ決め、場面の切り替えや大事な動きを拍に合わせる。効果音も動きと同じ瞬間に鳴らす

■ 条件
- 長さ：15秒　画面：縦長 9:16（1080×1920）
- 縦長なので、ブラウザの真ん中に 9:16 の枠を高さいっぱいに置き、枠の外は黒にする（画面収録で切り取りやすいように）
- 形式：HTMLファイル1枚（HTML・CSS・JavaScriptをすべてこの中にまとめる）。今いる作業フォルダに motion.html として保存し（同じ名前があれば motion-2.html のように番号をつける）、できたらブラウザで開く（Mac なら open コマンド）
- 再生：最後まで行ったら「もう一度見る」ボタンを出す
- 外部のライブラリを使う時は CDN から読み込む（three.js など）。フォントはパソコンに入っている日本語フォントを使う
- 時間の管理：すべての動きを1本のタイムライン（経過時間から各場面の状態を計算する形）で管理し、コマ落ちしても時間どおりに進むようにする
- 音：Web Audio API で、BGM（テンポ 90BPM 前後）と効果音をコードだけで作る。ブラウザの決まりで最初は音が出ないので、最初の画面に大きな「▶ 音つきで再生」ボタンを置き、押したら映像と音を同時に始める。大事な動きと効果音は同じ瞬間に
- 画面に出す言葉：「Happy Halloween」「10」「31」「Happy Halloween 10/31」（どれも一字一句そのまま使う）
- 色：秋の実りのクリーム色、栗色、かぼちゃのオレンジ（和の風情を少し）（例：#FFF4E6 #D9822B #8C3B1E #F2C14E #4A2C1A）
- 文字：日本語は読みやすい太さのフォントで。小さすぎる文字は使わない

■ いちばん大事なこと
- いちばん大事なのは「作りたいもの（本人の言葉）」。上の『仕上がりのイメージ』『使ってほしい演出』『色』が本人の言葉と食い違うところは、本人の言葉を優先する
- 演出を並べるだけにしない。ひとつの芯のアイデア（たとえば最初に出た形が最後まで姿を変え続ける）で、全部の場面をつなぐ
- その芯は、説明がなくても画面を見るだけで伝わるようにする
- 場面の切れ目はパッと切らず、前の場面の形を次の場面へ受け渡してつなぐ
- 動きは等速にしない。加速・減速（イージング）と、止める瞬間（間）をつける
- キャラクターや動物の絵をコードで描かない。図形・文字・模様・光・3Dの形で表現する（写真やイラストのファイルを渡された時だけ、それを使う）

作り始める前に、芯のアイデアと場面の流れを3行で書き出してから作ってください。
完成したら、使った演出と、芯のアイデアを1行ずつ教えてください。

Use case: illustration-story. Asset type: wide hero illustration for a Japanese community winter gathering planning document. Create an inviting, joyful, sophisticated editorial illustration of a small community snack-style gathering in a cozy modern shared lounge on a December evening in Osaka. Adults of varied appearances casually laughing together around round tables, glasses of tea and soft drinks, small snacks, soft fairy lights, winter coats on hooks, warm amber interior contrasted with blue night windows. Stylish hand-painted gouache with fine pencil texture, expressive friendly faces, refined magazine art, cream, burnt orange, coral pink, ink navy palette. Wide panoramic composition, the room and people visible clearly, rich atmosphere, no text, no lettering, no logos, no watermarks. This is an imagined mood illustration, not a rendering of any real office. Avoid nightclub, luxury restaurant, stage, Christmas branding, photorealism.

Use case: ads-marketing
Asset type: share-link thumbnail / Open Graph cover for a Japanese community works gallery.
Create a polished landscape illustration, approximately 1.91:1 aspect ratio (1200x630 composition). Warm cream background, coral accents, soft mint and lavender matching a welcoming gallery website.
Primary idea: a joyful shelf of miniature creative worlds made by a community, inviting the viewer to make and share their own work. Elegant playful papercraft / soft 3D editorial illustration. A beautiful tiered display shelf with varied small creations: a glowing spiral galaxy, green plant, winter bridge landscape, colorful motion shapes and a small game-screen motif. These represent the kinds of works in the gallery, not exact reproductions. A few sparkling light accents express discovery. Keep generous breathing room and a clear focal point.
Large prominent Japanese title, verbatim, easily readable at small thumbnail size:
みんなの
「作ってみた」棚
Smaller subline, verbatim: リベのみんなの作品集
Use refined friendly rounded Japanese typography, dark charcoal for strong contrast, with coral emphasis. Lettering must be correct and uncluttered.
Mood: excitement, warmth, creative possibility, belonging. Sophisticated rather than noisy. No logos, no official Libecity mascot, no watermarks, no real faces, no invented member portraits. All important text and shelf details inside a 7 percent safe margin.

あなたは日本語noteの編集者兼ライターです。確認済み資料だけから、おけもんの既公開相談案内記事の改稿全文をMarkdownで執筆してください。ツール操作、他ファイル読取りや編集は不要、応答本文のみ。

本人の依頼原文：『サンプルは欲しい』『ストレングスファインダーの診断結果をどういうふうに作っているのかとか、AI活用研修でどんなことをしているのかっていう実例がないと』『ただ書けばいいっていうもんじゃない』『良い記事を書いている人はどんな書き方』『どんな内容であればこの記事を書く目的が達成できる』『AIくさい文章になるので必ずGeminiに執筆/チェックを挟む』。
記事の目的：AIを仕事で使いたい個人/企業・施設、診断を受けたが活かせていない個人が、自分の困りごとに役立つか、何を一緒にするか、どんな整理を持ち帰れるかを実物から判断し、無理なく初回相談へ進める。宣伝の羅列にしない。読者が相談せずとも試せる一歩を必ず渡す。サンプルの役割と読む着眼点を説明。

書き手の声：私は、おけもん。普段の言葉、あたたかいですます調、🤣/😊は控えめに自然に。『伴走』『価値を提供』『実現します』『あなたらしさ』『徹底』『本質』『単なるXではなくY』など抽象的/広告的な均質文は避け、実際の作業を動詞で書く。掛け合い/AI社員名/顧客名は不要。

確認済み情報：
1. 介護・障害福祉の現場経験16年、Gallup認定ストレングスコーチ。現行タイトル『AI活用・研修＆ストレングスの相談案内｜「何から始める？」から一緒に考えます』は維持。
2. AIサンプルは自分の公開HP https://okemonogatari-hash.github.io/portfolio-seikotsuin-lp/okemon-care-ai.html#try の作成済みデモ。ミニ質問で『介護・医療・福祉→メモや記録をまとめる→まだ使ったことがない』を選ぶと架空メモを表示。前：『来週火曜に研修。資料は金曜まで。新人さんも参加。場所は会議室。担当は自分。』。後：『【研修のご案内・下書き】日時：来週火曜日（時間は要確認）／場所：会議室／対象：新人を含む職員／準備：金曜までに資料を用意／担当：案内者（氏名を確認）』。カピバラを押して例の前後を表示、既に作ってある表示デモでその場で生成AIは走らない。顧客実績ではない。スクショ挿入マーカー ![メモを案内文の下書きへ整理したデモ](ai-demo-after.png) を置く。前は引用/コードで文字として見せ、後はスクショ+肝を説明。入力にない開始時刻を作らず確認に残す、元メモと照合して人が確定。研修で一緒に試す内容として、架空メモ→依頼→出力を照合→いつもの作業に合わせる流れを示す。具体プロンプト全文を標準コードブロックに：『次の架空のメモを、研修案内の下書きに整理してください。メモにない情報は作らず「要確認」と書いてください。日時・場所・対象・準備・担当に分け、最後に確認が必要なことを挙げてください。
メモ：来週火曜に研修。資料は金曜まで。新人さんも参加。場所は会議室。担当は自分。』。これは読者用提案プロンプト。『このプロンプトでこの画像を生成した』とは言わない。
3. 実際の初心者向けハンズオン勉強会の記録に、初期設定、質疑応答、ファイル操作/サイト作成を参加者と体験したことがある（4/3、4/5正本）。企業研修受注実績や全員成果をこの事実から推測しない。研修実施の個人/組織名や内部資料は載せない。初心者向け勉強会で設定から触る一歩を扱ってきた、程度に留める。今回の画像は研修受講者の成果ではなく、研修内容をイメージする自作デモと明記。
4. ストレングスは、AIが公式診断を作るのではない。本人がGallupのCliftonStrengthsを受けて得た結果を、話と照合し暮らし/仕事での使い方を一緒に読む。本人の公開サンプル https://okemonogatari-hash.github.io/okemon-strengths-home/okemon.html#top5 。本人TOP5は調和性・共感性・アレンジ・親密性・最上志向。公式の順位が入力根拠、おけもんの場合の説明/使い方は自分の読み解き。ページの調和性の例は『みんなの意見を入れたい』『意見が割れたとき重なるところを探す』、共感性は人の感情から離れる時間も意識する。アレンジは人・AI・スキルを組み合わせて仕事を進める。診断で性格/適職/未来/行動原因を断定しない。スクショ ![結果と自分の具体的な場面を並べた本人サンプル](strengths-sample.png) を置く。TOP5名を簡潔に載せ、調和性→みんなの意見を聞く→来週ひとつ試す行動（会議で一致点をひとつ言葉にする等、提案と分かる）を例として説明。サンプルはおけもん本人で顧客データなし。Gallup PDF/説明文は転載しない。診断結果はGallup、記事の解釈/活用支援はおけもん、AIは補助。
5. 読者用小ワークは『最近うまくいった場面／自分がしたこと／来週もう一度試すこと』を短く書く、結果ある場合は資質と照合。AIに新たな診断をさせない。
6. 初回はオンライン30分〜1時間無料ヒアリング。話して整理する範囲。AIなら試す業務を一つ、強みなら振り返る場面と小さな行動を一つ整理する目安（新しい完成レポートや研修丸ごと納品を約束しない）。後の研修・導入支援・コーチングは内容/料金を個別案内。連絡 https://okemonogatari-hash.github.io/portfolio-seikotsuin-lp/#talk のメールまたはX。返信目安2〜3日、日時は返信で調整、無料初回のみ。連絡テンプレ標準コード3行：相談テーマ：AI／強み／両方／まだ未定
相談する人：個人／会社・施設
いま気になること：＿＿＿＿（ひとこと）
7. 実際に作った動画28本の記事リンク https://note.com/nice_gnu546/n/nc4ddba30e1fc は補助的に1回、冒頭主題にしない。

先行記事の観察（文章コピー禁止）：野口侑渡 https://note.com/yuzulemon1/n/n2c166eb06193 は『こんな方に→具体的にすること→問い合わせ後の進み方→FAQ』で適合性を判断できる。梶 https://note.com/kynokb/n/n96f9b7678837 は悩み→具体的なすれ違い→試せる問い→必要なら相談。今回この目的設計だけ参考にし、実績数/料金/声を転載しない。先行例の引用を記事内に増やす必要なし。

構成：冒頭で読者の2つの具体的な困りごととサンプルで読めること。H2でAIサンプルと試す順番、強みサンプルと読み解き、無料相談で整理するもの、連絡の一歩。H3は必要な場所のみ。目次はnote UIで別途挿入するためMarkdownに目次なし。画像2点が本文に溶け込む。長さは内容に必要な範囲、目安2400〜3300字、箇条書きの乱発しない。最後は『カピバラの絵：あや＠ロロカデザインさん』。出力は改稿Markdownのみ。

まず一度きりの試運転をしよう。下の架空イベントの材料だけを使って、日本語の「イベント準備セット」を、ダウンロードできる単体HTMLファイル event-kit-v1.html に仕上げて、この会話に完成ファイルを返して。

材料：
・架空の試用イベント「AIで記録整理を小さく試す会」
・2026年10月8日 20:00開始、日本時間、45分間
・初心者向け、参加費無料、定員12人
・テーマ：架空のメモ1本から、読みやすい要約と次にやることを作る
・オンライン開催、会場URLは未確定
・主催者と申込方法は未確定
・参加者は紙やメモアプリを用意。実在の個人情報は持ち込まない

HTMLに入れるもの：①上の材料の整理、②そのまま確認に回せる200字前後の告知下書き、③実施までの準備チェックリスト（提案だと明記）、④未確定事項。全体に「架空例・試用」と明記し、スマホでも読めるように。未確定の会場URL・主催者・申込方法は勝手に埋めない。

これは成果物作成だけの一回のテスト。あなた自身のクラウド環境で作業し、外部公開、第三者への送信、予約、購入、カレンダーや定期タスクの登録、新たなアプリ・私のPCの接続は行わない。完成したファイルと、実際にできたこと・未実行を短く教えて。

Recreate the attached avatar icon as a high-resolution illustration for a celebration video. Keep the SAME person: same face, glasses-free eyes, short dark hair, big friendly smile, navy hoodie, and the same clean flat illustration style and colors. This must be a faithful high-quality redraw of this exact character, not a new character. Remove the orange ring and the text MIZUNO WEB DESIGN; show only the portrait (head and shoulders), centered, on a plain flat pure white background. Square 1:1, crisp clean lines, no text anywhere.

Sorry, I forgot to attach the image. Here is the second avatar icon. Do exactly the same as the first one, in the same clean illustration quality: keep the SAME character, round bald head with a small tuft of hair on top, thin rectangular glasses, rosy cheeks, happy open-mouth smile, grey shirt, small hands resting on the rim of a pot of variegated green-and-white pothos leaves, peeking out from the leaves. Faithful high-quality redraw of this exact character in the same soft cute style, not a new character. Remove the blurry green bokeh background; plain flat pure white background. Square 1:1, centered, crisp, no text anywhere.

Perfect again, thank you. Now the third avatar icon (attached), same treatment and the same clean illustration quality: keep the SAME character exactly: a friendly capybara raising one paw in a cheerful wave, a small yellow-green parakeet sitting on top of its head, the same face, colors, soft outline style. Faithful high-quality redraw of this exact artwork, not a new character. Remove the orange and green sunburst background and any small signature or text; show only the capybara and parakeet, centered, on a plain flat pure white background. Square 1:1, crisp, no text anywhere.

あなたが今できる最高のモーショングラフィックで、見た人が思わず「すごい」と声に出す1本を作ってください。
いま世界中で話題の「AIが本気で作るモーショングラフィック」です。あなたの腕前を、出し惜しみせず全力で証明してください。

■ 作りたいもの（本人の言葉）
解説「AIに頼む前の1行」（横長 16:9・20秒）：入力欄に「いい感じの動画つくって」と打たれ、「だれに」「なにを」「どんな感じで」の3つの問いが付箋のように順に現れて、1行が書き換わり、カメラが送信ボタンへ寄る。初心者が自分の1行に置きかえられる言葉だけで、専門用語は出さない。入力欄も付箋も HTML の図形、音は打鍵と送信を Web Audio で合成

■ お手本（この1本のテンポ・文字・切り替えに寄せる）
- お手本：Claude Code と Remotion で、デモ動画のモーションを全部作った（Tim Kochjar） https://x.com/timkochjar/status/2092278549679886507
- 特徴：小さな字が1語ずつ出て、決めの語だけ大きく青い下地／傾けたアプリ画面にカメラが寄り、カーソルで操作／カットせず、ぼかし＋ズームでつなぐ／低音の電子音楽に、ヒュッ・ポッの効果音
- 動画が見られなくても大丈夫。上の特徴に寄せて作る。お手本の色・ロゴ・言葉・キャラはそのまま使わず、「作りたいもの」に置きかえる
- 作業フォルダにお手本のスクリーンショットがあれば、それも見て寄せる

■ 仕上がりのイメージ
やさしく、近未来の解説。20秒。アプリの画面が動いて使い方を見せ、丸や三角がリズムよく並び替わる。少しずつ時間差で順番に動き、カメラが静かに寄っていく。最後に要点がひと目でわかる形で止まる。

■ 使ってほしい演出（これは出発点です。もっと良い見せ方を思いついたら、そちらを選んでかまいません）
1. UIアニメーション（UI Animation）：架空のスマホやPCの画面を作り、ボタンやカードが動いて操作の流れを見せる
2. シェイプアニメーション（Shape Animation）：丸・三角・四角などの図形がリズムよく並び、回り、組み替わる
3. カットアウト・アニメーション（Cutout Animation）：紙を切り抜いたような形が重なり、影つきで貼られたり剥がれたりする
4. プッシュイン（Push-in）：カメラがゆっくり寄っていく（途中で止めず、なめらかに）
5. マスクリビール（Mask Reveal）：マスク（見えない窓）で文字や形を少しずつ見せる
6. スタッガー（Stagger）：複数の要素をほんの少しずつ時間差で動かし、波のような流れを作る
7. ブリージング（Breathing Animation）：光や形が、呼吸のようにゆっくりふくらんでしぼむ（ループ作品なら、切れ目なくつなぐ）
8. ライトスイープ（Light Sweep）：光の筋が表面を横切ってきらっと輝く。光のにじみ（グロー）も少し
9. アンビエントサウンド（Ambient Sound Design）：BGMは静かなパッドやオルゴールのような音にして、効果音は大事な瞬間だけ小さく鳴らす

■ 条件
- 長さ：20秒　画面：横長 16:9（1920×1080）
- 形式：HTMLファイル1枚（HTML・CSS・JavaScriptをすべてこの中にまとめる）。今いる作業フォルダに motion.html として保存し（同じ名前があれば motion-2.html のように番号をつける）、できたらブラウザで開く（Mac なら open コマンド）
- 再生：最後まで行ったら「もう一度見る」ボタンを出す
- 外部のライブラリを使う時は CDN から読み込む（three.js など）。フォントはパソコンに入っている日本語フォントを使う
- 時間の管理：すべての動きを1本のタイムライン（経過時間から各場面の状態を計算する形）で管理し、コマ落ちしても時間どおりに進むようにする
- 音：Web Audio API で、BGM（テンポ 90BPM 前後の静かな曲）と効果音をコードだけで作る。ブラウザの決まりで最初は音が出ないので、最初の画面に大きな「▶ 音つきで再生」ボタンを置き、押したら映像と音を同時に始める。大事な動きと効果音は同じ瞬間に（効果音は控えめに）
- 画面に出す言葉：「いい感じの動画つくって」「だれに」「なにを」「どんな感じで」「秋の古着屋の告知を、縦長15秒で、やさしい感じで」「AIに頼む前の1行」（どれも一字一句そのまま使う）
- 色：生成り、セージグリーン、淡い水色（近未来っぽさを少し）（例：#F3F5EF #A8C5B5 #6E9FB5 #F2E3C4 #3E4A46）
- 文字：日本語は読みやすい太さのフォントで。小さすぎる文字は使わない

■ いちばん大事なこと
- いちばん大事なのは「作りたいもの（本人の言葉）」。上の『仕上がりのイメージ』『使ってほしい演出』『色』が本人の言葉と食い違うところは、本人の言葉を優先する
- 「すごい」は派手さのことではない。静かな作品なら、静けさと美しさで「すごい」と言わせる
- 演出を並べるだけにしない。ひとつの芯のアイデア（たとえば最初に出た形が最後まで姿を変え続ける）で、全部の場面をつなぐ
- その芯は、説明がなくても画面を見るだけで伝わるようにする
- 場面の切れ目はパッと切らず、前の場面の形を次の場面へ受け渡してつなぐ
- 動きは等速にしない。加速・減速（イージング）と、止める瞬間（間）をつける
- キャラクターや動物の絵をコードで描かない。図形・文字・模様・光・3Dの形で表現する（写真やイラストのファイルを渡された時だけ、それを使う）

作り始める前に、芯のアイデアと場面の流れを3行で書き出してから作ってください。
完成したら、使った演出と、芯のアイデアを1行ずつ教えてください。

Edit the provided original image, which is the official 2026 Libecity Kasegeya Festival campaign template. Preserve the official template exactly; this is a precise text-overlay edit, not a redesign or restyling. Keep the canvas at exactly 800x600 and keep all original pixels and layout unchanged except for the two new text overlays. Do not overwrite the source.

Add only these exact Japanese texts, with exact punctuation, spelling, and capitalization:
1) In the large upper blank ivory field, centered in the open area to the right of the mascot and below the existing title, add:
「稼げや祭りで稼いで、最高のMacBookを買う！」
Break the line after 「稼いで、」 into two balanced lines:
「稼げや祭りで稼いで、」
「最高のMacBookを買う！」
Use bold, highly legible dark brown Japanese typography with clean edges and subtle contrast that matches the official festive palette. Keep it away from the mascot, header, and field edges.

2) Inside the lower rope frame, in the blank area to the right of the existing vertical 「やること」 label, add:
「毎日1個、AIで遊んで作品を1つ形にする」
Break it into two lines only at this natural point:
「毎日1個、AIで遊んで」
「作品を1つ形にする」
Center the two lines in the usable interior of the rope frame, away from the rope border and existing vertical label. Use bold, legible dark brown typography, sized for easy reading at 800x600.

Preserve all original campaign title lettering, mascot and fan, colored flame/ribbon background, white/ivory fields, rope frame, and vertical 「やること」 label exactly as shown. Do not change, erase, redraw, move, recolor, crop, or blur any existing element. Do not add extra text, punctuation, decorations, badges, logos, or graphics. The only changes should be the two specified text overlays.

This is a precision edit of an official campaign template. Do not recreate or redesign the image. Treat the supplied 800x600 raster as a fixed, finished background and add only two text overlays. Preserve its original canvas, geometry, scale, crop, colors, and every existing element exactly where it is. The official design must remain visually identical outside the letters you add.

The original image has:
- a multicolor official 「稼げや祭り2026 目標」 title across the top,
- a mascot at the upper left,
- an empty ivory goal field to the right of the mascot,
- a red-white braided horizontal divider,
- a lower ivory rectangle with a red-white rope border,
- the original vertical 「やること」 label at the lower left.
All of these are fixed and must remain unchanged: no moving, enlarging, shrinking, redrawing, recoloring, cropping, adding margins, or altering any logo, mascot, rope, label, or background ornament.

Add exactly the two requested texts and no other content:
UPPER GOAL (line break after comma):
「稼げや祭りで稼いで、」
「最高のMacBookを買う！」
Place these two lines modestly in the blank upper ivory field, right of the mascot and under the existing title. Use dark brown bold Japanese text at a moderate size; keep clear margins from the mascot and divider. Do not expand the text to fill the whole image.

LOWER ACTION (line break after 遊んで):
「毎日1個、AIで遊んで」
「作品を1つ形にする」
Place these two lines modestly inside the existing lower rope frame, to the right of the vertical 「やること」 label. Keep the entire text inside the rope frame with generous margins. Use the same moderate-size dark brown bold Japanese text.

Use exact Japanese characters and punctuation shown above, including the Japanese comma and the uppercase/lowercase spelling MacBook. Do not paraphrase, translate, add text, or add graphics. Keep the aspect ratio 4:3 and keep the original layout and proportions unchanged.

あなたが今できる最高のモーショングラフィックで、見た人が思わず「すごい」と声に出す1本を作ってください。
いま世界中で話題の「AIが本気で作るモーショングラフィック」です。あなたの腕前を、出し惜しみせず全力で証明してください。

■ 作りたいもの
夜勤あけのまま新幹線のグリーン車で東京へ、帰りは寝台特急サンライズ瀬戸。「なりたい未来の生活を、今日もう体験している」1日が、見ただけでワクワクする20秒。見た人が「うわ、これが私の未来の1日だ」と思い、SNSで見た人も思わず「すごい」と言う。

■ 仕上がりのイメージ
横長 16:9（1920×1080）・30fps・20秒・音つき。雨の朝の窓から始まり、しずくが割れて明るい駅のホームへ、写真が3Dの奥から飛び込む。文字が走る列車のように流れ、色の面が場面を入れ替え、最後に手描きのしおりへ着地して「体験じゃなく、当たり前に」で終わる。

■ 使ってほしい演出
キネティック・タイポグラフィ／3Dカメラワーク（写真を平面に貼って奥行きと視差）／カラーワイプ／アンティシペーションとオーバーシュート／ライトスイープ／ビートシンク（124 BPM）

■ 条件
- 画面に出す言葉は「会いたい人のために」「今日は、未来の私の1日」「体験じゃなく、当たり前に」と、事実「新大阪 11:30 発」「東京 13:57 着」「東京 21:26 発 サンライズ瀬戸」「姫路 05:25 着」（のぞみ90号・グリーン車）だけ。一字一句そのまま
- 受け取りコード・予約番号・電話番号・金額は画面にも音にも出さない。会う友達の待ち合わせの時刻や場所は書かない
- 音は 124 BPM 前後を Python で合成。効果音は動きと同じ瞬間に。レールの音・発車ベル・到着のチャイム・夜明けの鳥のさえずり
- フォントはパソコンに入っている日本語フォント（ヒラギノ角ゴ W8）。HTML はライト固定

■ いちばん大事なこと
- 芯のアイデアは説明なしで画面だけで伝わるように（最初の「しずく」が、最後まで点として1日の線を走る）
- キャラや動物の絵はコードで描かない。すでにできている本物の画像（写真・しおり）をそのまま使う。顔は加工せず、拡大・パン・重ねだけ
- 場面の切れ目は前の形を次へ渡してつなぐ。動きは等速にしない（ため・行き過ぎ・イージング）
作り始める前に、芯のアイデアと場面の流れを3行で書き出してから作ってください。

今日のリベシティ9月末キャンペーン作業に限定し、何を確認・作成したかと、公開後に初めて達成といえる条件を分ける。本人ができること、本人がチェックすべきこと、Codexが次にできることを独立した見出しで示す。参加表明の画像と本文をレポート内に表示し、出品 #29611 のメール対応条件は未確定として扱う。公式出典と保存済み台帳へリンクし、スマートフォンでも読める1ファイルHTMLにする。

Use the two provided Haruka images ONLY as identity references, with the Aman Tokyo face frame primary. Make a photorealistic, tasteful 3:4 vertical close portrait of the same clearly adult Japanese woman in a Japanese outdoor spa at night. A dark navy modest one-piece swimsuit with broad visible straps and a cream bath towel around her shoulders keep her fully clothed. She is seated in the water, upper body visible above the waterline, natural hair damp and pinned loosely into a high bun, fringe and a few strands framing her face. Viewpoint: her partner is close at the pool edge, camera at water height from her right-front side. She turns her face three-quarters toward frame left and glances upward toward her partner with a soft small open-lipped smile, a newly invented expression unlike the references. She gently cups a little water between both hands near her face, with natural anatomically correct fingers. Place her face from center to right, a glowing lantern and gold ripples in the left background, dark wet rock and wood behind, light steam, warm amber key light, shallow depth of field. A personal candid moment, natural skin texture, crisp photographic quality. Preserve Haruka's specific recognizable facial features and her warm familiar character. Avoid glamour posing, heavy makeup, extra people, text, and watermarks.

  Create an image, square 1:1 photograph. Top-down view at a slight angle of a workbench in a traditional Kyoto machiya workshop: one piece of unpicked kimono komon fabric (small repeating pattern, muted rose and indigo) spread diagonally across the upper two thirds of the frame, with a bone spatula and a bamboo ruler resting at its lower right. The lower third and the lower-left corner are plain wood grain of the workbench, left empty. Soft morning side light from a lattice window, 50mm lens, warm 4200K tones, deep ebi-brown and mustard accents. No people's faces, no text, no logos, no signboards, no brand names, no watermark.

  Create an image, square 1:1 photograph. A black silk haori jacket in the middle of being re-tailored, hanging on a wooden kimono rack (ikou) in the upper two thirds of the frame; behind it, a Kyoto machiya lattice window with soft diffused light. The lower third of the frame is a dark wooden floor, left empty. No people. Soft morning side light from a lattice window, 50mm lens, warm 4200K tones, deep ebi-brown and mustard accents. No people's faces, no text, no logos, no signboards, no brand names, no watermark.

名言が流れる縦長の1本「疲れた時に」。名言シリーズの1本目（シチュエーション別）。疲れた時にそっと効く言葉を4つ、ゆっくり流れる字で。言葉の下に作り手の名前と作品名。言葉は原典（著作・書簡・日記）までたどれる物だけ。締めはやさしく「今日は、ここまでで十分。」

あなたが今できる最高のモーショングラフィックで、見た人が思わず「すごい」と声に出す1本を作ってください。
いま世界中で話題の「AIが本気で作るモーショングラフィック」です。あなたの腕前を、出し惜しみせず全力で証明してください。

■ 作りたいもの（本人の言葉）
名言が流れる縦長の1本「疲れた時に」。名言シリーズの1本目（シチュエーション別）。疲れた時にそっと効く言葉を4つ、ゆっくり流れる字で。言葉の下に作り手の名前と作品名。言葉は原典（著作・書簡・日記）までたどれる物だけ。締めはやさしく「今日は、ここまでで十分。」

■ 仕上がりのイメージ
やさしい短い映像作品。30秒。色がインクのようににじみ広がって、一本の線が走って形を描く。呼吸するようにゆっくりふくらんで、カメラが静かに寄っていく。最後に「今日は、ここまでで十分。」がはっきり残って終わる。

■ 使ってほしい演出（これは出発点です。もっと良い見せ方を思いついたら、そちらを選んでかまいません）
1. リキッドモーション（Liquid Motion）：インクがにじむ、しずくが落ちて広がる、液体のように形がとろける
2. ラインアニメーション（Line Animation）：線が描かれていく動きで、図・ロゴ・文字の輪郭を見せる
3. プッシュイン（Push-in）：カメラがゆっくり寄っていく（途中で止めず、なめらかに）
4. ブリージング（Breathing Animation）：光や形が、呼吸のようにゆっくりふくらんでしぼむ（ループ作品なら、切れ目なくつなぐ）
5. スタッガー（Stagger）：複数の要素をほんの少しずつ時間差で動かし、波のような流れを作る
6. テクスチャオーバーレイ（Texture Overlay）：紙の繊維やうっすらした粒子を画面にのせて、手ざわりを出す
7. アンビエントサウンド（Ambient Sound Design）：BGMは静かなパッドやオルゴールのような音にして、効果音は大事な瞬間だけ小さく鳴らす

■ 条件
- 長さ：30秒　画面：縦長 9:16（1080×1920）
- 縦長なので、ブラウザの真ん中に 9:16 の枠を高さいっぱいに置き、枠の外は黒にする（画面収録で切り取りやすいように）
- 形式：HTMLファイル1枚（HTML・CSS・JavaScriptをすべてこの中にまとめる）。今いる作業フォルダに motion.html として保存し（同じ名前があれば motion-2.html のように番号をつける）、できたらブラウザで開く（Mac なら open コマンド）
- 再生：最後まで行ったら「もう一度見る」ボタンを出す
- 外部のライブラリを使う時は CDN から読み込む（three.js など）。フォントはパソコンに入っている日本語フォントを使う
- 時間の管理：すべての動きを1本のタイムライン（経過時間から各場面の状態を計算する形）で管理し、コマ落ちしても時間どおりに進むようにする
- 音：Web Audio API で、BGM（テンポ 72BPM 前後の静かな曲）と効果音をコードだけで作る。ブラウザの決まりで最初は音が出ないので、最初の画面に大きな「▶ 音つきで再生」ボタンを置き、押したら映像と音を同時に始める。大事な動きと効果音は同じ瞬間に（効果音は控えめに）
- 画面に出す言葉：「疲れた時に」「今日は、ここまでで十分。」（どれも一字一句そのまま使う）
- 色：生成り、セージグリーン、淡い水色（例：#F3F5EF #A8C5B5 #6E9FB5 #F2E3C4 #3E4A46）
- 文字：日本語は読みやすい太さのフォントで。小さすぎる文字は使わない

■ いちばん大事なこと
- いちばん大事なのは「作りたいもの（本人の言葉）」。上の『仕上がりのイメージ』『使ってほしい演出』『色』が本人の言葉と食い違うところは、本人の言葉を優先する
- 「すごい」は派手さのことではない。静かな作品なら、静けさと美しさで「すごい」と言わせる
- 演出を並べるだけにしない。ひとつの芯のアイデア（たとえば最初に出た形が最後まで姿を変え続ける）で、全部の場面をつなぐ
- その芯は、説明がなくても画面を見るだけで伝わるようにする
- 場面の切れ目はパッと切らず、前の場面の形を次の場面へ受け渡してつなぐ
- 動きは等速にしない。加速・減速（イージング）と、止める瞬間（間）をつける
- キャラクターや動物の絵をコードで描かない。図形・文字・模様・光・3Dの形で表現する（写真やイラストのファイルを渡された時だけ、それを使う）

作り始める前に、芯のアイデアと場面の流れを3行で書き出してから作ってください。
完成したら、使った演出と、芯のアイデアを1行ずつ教えてください。

あなたが今できる最高のモーショングラフィックで、見た人が思わず「すごい」と声に出す1本を作ってください。
いま世界中で話題の「AIが本気で作るモーショングラフィック」です。あなたの腕前を、出し惜しみせず全力で証明してください。

■ 作りたいもの（本人の言葉）
架空の陶芸教室の先生の自己紹介（原稿を渡して作る）：見出し「土と、30年。」、生徒の数が0から数え上がり、棒グラフが伸び、窯の町から今の教室まで地図の弧の線、最後に教室の名前

■ お手本（この1本のテンポ・文字・切り替えに寄せる）
- お手本：原稿を渡して作った自己紹介（黄・黒・生成りの日本語レイアウトと、数え上がる数字）（しらき@パワポ図解） https://x.com/kumiko_shiraki/status/2103771566982959414
- 特徴：生成り・黄・黒の3色、日本語の太い見出しと小さな英字／1場面に言いたいこと1つ、左に見出し・右に図／数字が数え上がり、棒グラフが伸び、線が引かれる／静かな電子音楽の拍に合わせて、ゆっくり進む
- 動画が見られなくても大丈夫。上の特徴に寄せて作る。お手本の色・ロゴ・言葉・キャラはそのまま使わず、「作りたいもの」に置きかえる
- 作業フォルダにお手本のスクリーンショットがあれば、それも見て寄せる

■ 仕上がりのイメージ
上品に、やさしい自己紹介。15秒。数字やグラフが気持ちよく伸びて、一本の線が走って形を描く。大事なところでピタッと止まり、文字がスッと幕の向こうから現れる。最後に「土と、30年。」が気持ちよく止まって終わる。

■ 使ってほしい演出（これは出発点です。もっと良い見せ方を思いついたら、そちらを選んでかまいません）
1. インフォグラフィック・アニメーション（Animated Infographics）：数字のカウントアップ、グラフが伸びる動きで、情報を気持ちよく見せる
2. ラインアニメーション（Line Animation）：線が描かれていく動きで、図・ロゴ・文字の輪郭を見せる
3. マスクリビール（Mask Reveal）：マスク（見えない窓）で文字や形を少しずつ見せる
4. ホールド（Hold）：見せたい瞬間は動きをピタッと止めて、一拍しっかり見せる
5. ブリージング（Breathing Animation）：光や形が、呼吸のようにゆっくりふくらんでしぼむ（ループ作品なら、切れ目なくつなぐ）
6. テクスチャオーバーレイ（Texture Overlay）：紙の繊維やうっすらした粒子を画面にのせて、手ざわりを出す
7. アンビエントサウンド（Ambient Sound Design）：BGMは静かなパッドやオルゴールのような音にして、効果音は大事な瞬間だけ小さく鳴らす

■ 条件
- 長さ：15秒　画面：横長 16:9（1920×1080）
- 形式：HTMLファイル1枚（HTML・CSS・JavaScriptをすべてこの中にまとめる）。今いる作業フォルダに motion.html として保存し（同じ名前があれば motion-2.html のように番号をつける）、できたらブラウザで開く（Mac なら open コマンド）
- 再生：最後まで行ったら「もう一度見る」ボタンを出す
- 外部のライブラリを使う時は CDN から読み込む（three.js など）。フォントはパソコンに入っている日本語フォントを使う
- 時間の管理：すべての動きを1本のタイムライン（経過時間から各場面の状態を計算する形）で管理し、コマ落ちしても時間どおりに進むようにする
- 音：Web Audio API で、BGM（テンポ 80BPM 前後の静かな曲）と効果音をコードだけで作る。ブラウザの決まりで最初は音が出ないので、最初の画面に大きな「▶ 音つきで再生」ボタンを置き、押したら映像と音を同時に始める。大事な動きと効果音は同じ瞬間に（効果音は控えめに）
- 画面に出す言葉：「土と、30年。」（どれも一字一句そのまま使う）
- 色：アイボリー、墨色、控えめな金（やさしさを少し）（例：#F7F3EC #1F1D1A #B8975A #8C8479）
- 文字：日本語は読みやすい太さのフォントで。小さすぎる文字は使わない

■ いちばん大事なこと
- いちばん大事なのは「作りたいもの（本人の言葉）」。上の『仕上がりのイメージ』『使ってほしい演出』『色』が本人の言葉と食い違うところは、本人の言葉を優先する
- 「すごい」は派手さのことではない。静かな作品なら、静けさと美しさで「すごい」と言わせる
- 演出を並べるだけにしない。ひとつの芯のアイデア（たとえば最初に出た形が最後まで姿を変え続ける）で、全部の場面をつなぐ
- その芯は、説明がなくても画面を見るだけで伝わるようにする
- 場面の切れ目はパッと切らず、前の場面の形を次の場面へ受け渡してつなぐ
- 動きは等速にしない。加速・減速（イージング）と、止める瞬間（間）をつける
- キャラクターや動物の絵をコードで描かない。図形・文字・模様・光・3Dの形で表現する（写真やイラストのファイルを渡された時だけ、それを使う）

作り始める前に、芯のアイデアと場面の流れを3行で書き出してから作ってください。
完成したら、使った演出と、芯のアイデアを1行ずつ教えてください。

あなたが今できる最高のモーショングラフィックで、見た人が思わず「すごい」と声に出す1本を作ってください。
いま世界中で話題の「AIが本気で作るモーショングラフィック」です。あなたの腕前を、出し惜しみせず全力で証明してください。

■ 作りたいもの（本人の言葉）
架空の喫茶店の「メロンクリームソーダ 30秒レシピ」：空のグラスの線→氷が1個ずつ→緑のシロップ→炭酸（泡が上がる）→バニラアイス→さくらんぼ。右に手順カード、下に6つの丸で進み具合、最後に「いただきます！」

■ お手本（この1本のテンポ・文字・切り替えに寄せる）
- お手本：30秒のカクテルレシピ（注ぐと液面が目盛りまで上がり、手順カードが進む）（Rory Flynn） https://x.com/Ror_Fly/status/2102853258582880547
- 特徴：生成りの地に、手描き風の太い線と赤1色／瓶が傾いて注ぎ、液面が目盛りまで上がる／右に手順カード、下に6つの丸で進み具合／氷が1個ずつ落ち、最後は乾杯の一言で止まる
- 動画が見られなくても大丈夫。上の特徴に寄せて作る。お手本の色・ロゴ・言葉・キャラはそのまま使わず、「作りたいもの」に置きかえる
- 作業フォルダにお手本のスクリーンショットがあれば、それも見て寄せる

■ 仕上がりのイメージ
にぎやかに、あたたかいお店・商品の紹介。30秒。春のやわらかい光の中で、色がインクのようににじみ広がって、数字やグラフが気持ちよく伸びる。少しずつ時間差で順番に動き、色の面がシャッと画面を入れ替える。最後に「いただきます！」が主役で止まる。

■ 使ってほしい演出（これは出発点です。もっと良い見せ方を思いついたら、そちらを選んでかまいません）
1. リキッドモーション（Liquid Motion）：インクがにじむ、しずくが落ちて広がる、液体のように形がとろける
2. インフォグラフィック・アニメーション（Animated Infographics）：数字のカウントアップ、グラフが伸びる動きで、情報を気持ちよく見せる
3. カラーワイプ（Color Wipe）：大きな色の面が画面を横切り、背景の色ごと場面を切り替える
4. スタッガー（Stagger）：複数の要素をほんの少しずつ時間差で動かし、波のような流れを作る
5. ホールド（Hold）：見せたい瞬間は動きをピタッと止めて、一拍しっかり見せる
6. テクスチャオーバーレイ（Texture Overlay）：紙の繊維やうっすらした粒子を画面にのせて、手ざわりを出す

■ 条件
- 長さ：30秒　画面：正方形 1:1（1080×1080）
- 形式：HTMLファイル1枚（HTML・CSS・JavaScriptをすべてこの中にまとめる）。今いる作業フォルダに motion.html として保存し（同じ名前があれば motion-2.html のように番号をつける）、できたらブラウザで開く（Mac なら open コマンド）
- 再生：開いたらすぐ再生し、最後まで行ったら「もう一度見る」ボタンを出す
- 外部のライブラリを使う時は CDN から読み込む（three.js など）。フォントはパソコンに入っている日本語フォントを使う
- 時間の管理：すべての動きを1本のタイムライン（経過時間から各場面の状態を計算する形）で管理し、コマ落ちしても時間どおりに進むようにする
- 音：なし（映像だけで気持ちよく見せる）
- 画面に出す言葉：「メロンクリームソーダ 30秒レシピ」「いただきます！」（どれも一字一句そのまま使う）
- 色：桜色と若葉色、やわらかい黄色（にぎやかさを少し）（例：#FFF7FA #F6B5C6 #A8D8B9 #FFE08A #5A4A5E）
- 文字：日本語は読みやすい太さのフォントで。小さすぎる文字は使わない

■ いちばん大事なこと
- いちばん大事なのは「作りたいもの（本人の言葉）」。上の『仕上がりのイメージ』『使ってほしい演出』『色』が本人の言葉と食い違うところは、本人の言葉を優先する
- 演出を並べるだけにしない。ひとつの芯のアイデア（たとえば最初に出た形が最後まで姿を変え続ける）で、全部の場面をつなぐ
- その芯は、説明がなくても画面を見るだけで伝わるようにする
- 場面の切れ目はパッと切らず、前の場面の形を次の場面へ受け渡してつなぐ
- 動きは等速にしない。加速・減速（イージング）と、止める瞬間（間）をつける
- キャラクターや動物の絵をコードで描かない。図形・文字・模様・光・3Dの形で表現する（写真やイラストのファイルを渡された時だけ、それを使う）

作り始める前に、芯のアイデアと場面の流れを3行で書き出してから作ってください。
完成したら、使った演出と、芯のアイデアを1行ずつ教えてください。

あなたが今できる最高のモーショングラフィックで、見た人が思わず「すごい」と声に出す1本を作ってください。
いま世界中で話題の「AIが本気で作るモーショングラフィック」です。あなたの腕前を、出し惜しみせず全力で証明してください。

■ 作りたいもの（本人の言葉）
解説「ボール1個でわかる、動きの気持ちよさ4つ」（教材）：白い紙に赤い玉が落ちてつぶれ、ためてから跳び、なめらかに止まり、遅れて尾がついてくる。1つずつ手書きの注釈と動きのグラフを添える

■ お手本（この1本のテンポ・文字・切り替えに寄せる）
- お手本：動きの基本を手書きの注釈で見せるショーリール（つぶれる・ためる・なめらかに止まる）（Himanshu） https://x.com/himanshutwtxs/status/2103495232637882858
- 特徴：白い地に青い玉と、赤・青の手書きの注釈／動きの基本を1つずつ、名前を書き込んで見せる／動きのグラフと残像で、速さの変化を見せる／128BPMほどの電子音楽、最後は名前で静止
- 動画が見られなくても大丈夫。上の特徴に寄せて作る。お手本の色・ロゴ・言葉・キャラはそのまま使わず、「作りたいもの」に置きかえる
- 作業フォルダにお手本のスクリーンショットがあれば、それも見て寄せる

■ 仕上がりのイメージ
にぎやかに、かっこいい解説。15秒。数字やグラフが気持ちよく伸びて、言葉が弾みながら現れる。ぐっとためてから一気に動き、色の面がシャッと画面を入れ替える。最後に要点がひと目でわかる形で止まる。

■ 使ってほしい演出（これは出発点です。もっと良い見せ方を思いついたら、そちらを選んでかまいません）
1. インフォグラフィック・アニメーション（Animated Infographics）：数字のカウントアップ、グラフが伸びる動きで、情報を気持ちよく見せる
2. キネティック・タイポグラフィ（Kinetic Typography）：画面に出す言葉を主役にして、文字ごとに登場と退場の動きをつける
3. ラインアニメーション（Line Animation）：線が描かれていく動きで、図・ロゴ・文字の輪郭を見せる
4. カラーワイプ（Color Wipe）：大きな色の面が画面を横切り、背景の色ごと場面を切り替える
5. アンティシペーション（Anticipation）：大きく動く前に、いったん反対にためる
6. スクワッシュ＆ストレッチ（Squash and Stretch）：着地でつぶれ、飛ぶ時に伸びる。体積は保つ
7. テクスチャオーバーレイ（Texture Overlay）：紙の繊維やうっすらした粒子を画面にのせて、手ざわりを出す
8. ビートシンク（Beat Sync）：テンポを1つ決め、場面の切り替えや大事な動きを拍に合わせる。効果音も動きと同じ瞬間に鳴らす

■ 条件
- 長さ：15秒　画面：横長 16:9（1920×1080）
- 形式：HTMLファイル1枚（HTML・CSS・JavaScriptをすべてこの中にまとめる）。今いる作業フォルダに motion.html として保存し（同じ名前があれば motion-2.html のように番号をつける）、できたらブラウザで開く（Mac なら open コマンド）
- 再生：最後まで行ったら「もう一度見る」ボタンを出す
- 外部のライブラリを使う時は CDN から読み込む（three.js など）。フォントはパソコンに入っている日本語フォントを使う
- 時間の管理：すべての動きを1本のタイムライン（経過時間から各場面の状態を計算する形）で管理し、コマ落ちしても時間どおりに進むようにする
- 音：Web Audio API で、BGM（テンポ 131BPM 前後）と効果音をコードだけで作る。ブラウザの決まりで最初は音が出ないので、最初の画面に大きな「▶ 音つきで再生」ボタンを置き、押したら映像と音を同時に始める。大事な動きと効果音は同じ瞬間に
- 画面に出す言葉：「ボール1個でわかる、動きの気持ちよさ4つ」（どれも一字一句そのまま使う）
- 色：白地に、ビビッドな赤・黄・ミントをはっきり（かっこよさを少し）（例：#FFFFFF #FF3E6C #FFD23F #3BCEAC #2D2D2D）
- 文字：日本語は読みやすい太さのフォントで。小さすぎる文字は使わない

■ いちばん大事なこと
- いちばん大事なのは「作りたいもの（本人の言葉）」。上の『仕上がりのイメージ』『使ってほしい演出』『色』が本人の言葉と食い違うところは、本人の言葉を優先する
- 演出を並べるだけにしない。ひとつの芯のアイデア（たとえば最初に出た形が最後まで姿を変え続ける）で、全部の場面をつなぐ
- その芯は、説明がなくても画面を見るだけで伝わるようにする
- 場面の切れ目はパッと切らず、前の場面の形を次の場面へ受け渡してつなぐ
- 動きは等速にしない。加速・減速（イージング）と、止める瞬間（間）をつける
- キャラクターや動物の絵をコードで描かない。図形・文字・模様・光・3Dの形で表現する（写真やイラストのファイルを渡された時だけ、それを使う）

作り始める前に、芯のアイデアと場面の流れを3行で書き出してから作ってください。
完成したら、使った演出と、芯のアイデアを1行ずつ教えてください。

あなたが今できる最高のモーショングラフィックで、見た人が思わず「すごい」と声に出す1本を作ってください。
いま世界中で話題の「AIが本気で作るモーショングラフィック」です。あなたの腕前を、出し惜しみせず全力で証明してください。

■ 作りたいもの（本人の言葉）
パチスロのプレミア演出「ブラックアウト・フリーズ」みたいな、脳汁が出るモーショングラフィック。カピバラの絵柄がならぶ台の画面がいつもどおり回っていたのに、突然プツンと画面も音も真っ暗になって、完全に止まる。スマホが固まった？と思うくらいの無音のあと、ズンと一撃。虹色の光と金の粒がはじけて、絵柄がそろい、「極楽フィーバー」の文字が出る

■ 仕上がりのイメージ
ワクワクするように、かわいい短い映像作品。20秒。言葉が弾みながら現れて、光の粒が集まっては弾ける。大事なところでピタッと止まり、色の面がシャッと画面を入れ替える。最後に「極楽フィーバー」がはっきり残って終わる。

■ 使ってほしい演出（これは出発点です。もっと良い見せ方を思いついたら、そちらを選んでかまいません）
1. キネティック・タイポグラフィ（Kinetic Typography）：画面に出す言葉を主役にして、文字ごとに登場と退場の動きをつける
2. パーティクル（Particle Animation）：小さな粒（光・紙吹雪・星）が集まって形になり、また散る
3. カラーワイプ（Color Wipe）：大きな色の面が画面を横切り、背景の色ごと場面を切り替える
4. ホールド（Hold）：見せたい瞬間は動きをピタッと止めて、一拍しっかり見せる
5. アンティシペーション（Anticipation）：大きく動く前に、いったん反対にためる
6. ライトスイープ（Light Sweep）：光の筋が表面を横切ってきらっと輝く。光のにじみ（グロー）も少し
7. ビートシンク（Beat Sync）：テンポを1つ決め、場面の切り替えや大事な動きを拍に合わせる。効果音も動きと同じ瞬間に鳴らす

■ 条件
- 長さ：20秒　画面：縦長 9:16（1080×1920）
- 縦長なので、ブラウザの真ん中に 9:16 の枠を高さいっぱいに置き、枠の外は黒にする（画面収録で切り取りやすいように）
- 形式：HTMLファイル1枚（HTML・CSS・JavaScriptをすべてこの中にまとめる）。今いる作業フォルダに motion.html として保存し（同じ名前があれば motion-2.html のように番号をつける）、できたらブラウザで開く（Mac なら open コマンド）
- 再生：最後まで行ったら「もう一度見る」ボタンを出す
- 外部のライブラリを使う時は CDN から読み込む（three.js など）。フォントはパソコンに入っている日本語フォントを使う
- 時間の管理：すべての動きを1本のタイムライン（経過時間から各場面の状態を計算する形）で管理し、コマ落ちしても時間どおりに進むようにする
- 音：Web Audio API で、BGM（テンポ 120BPM 前後）と効果音をコードだけで作る。ブラウザの決まりで最初は音が出ないので、最初の画面に大きな「▶ 音つきで再生」ボタンを置き、押したら映像と音を同時に始める。大事な動きと効果音は同じ瞬間に
- 画面に出す言葉：「極楽フィーバー」「ブラックアウト・フリーズ」（どれも一字一句そのまま使う）
- 色：明るい白に、朱赤と紺、ひとさじの黄色（かわいさを少し）（例：#FFF8F0 #FF5A36 #1E2A78 #FFC93C）
- 文字：日本語は読みやすい太さのフォントで。小さすぎる文字は使わない

■ いちばん大事なこと
- いちばん大事なのは「作りたいもの（本人の言葉）」。上の『仕上がりのイメージ』『使ってほしい演出』『色』が本人の言葉と食い違うところは、本人の言葉を優先する
- 演出を並べるだけにしない。ひとつの芯のアイデア（たとえば最初に出た形が最後まで姿を変え続ける）で、全部の場面をつなぐ
- その芯は、説明がなくても画面を見るだけで伝わるようにする
- 場面の切れ目はパッと切らず、前の場面の形を次の場面へ受け渡してつなぐ
- 動きは等速にしない。加速・減速（イージング）と、止める瞬間（間）をつける
- キャラクターや動物の絵をコードで描かない。図形・文字・模様・光・3Dの形で表現する（写真やイラストのファイルを渡された時だけ、それを使う）

作り始める前に、芯のアイデアと場面の流れを3行で書き出してから作ってください。
完成したら、使った演出と、芯のアイデアを1行ずつ教えてください。

名言が流れる縦長の1本「ニーチェ」。名言シリーズの2本目（作り手別）。ニーチェの言葉を4つ、力強く組み上がる字で、かっこいい1本に。山・高み・星・嵐・踊る、言葉に合う舞台で。言葉の下に作品名。言葉はドイツ語の原典までたどれる物だけ、うちで訳す。締めは「ニーチェ」の名前と、作品名の並び

あなたが今できる最高のモーショングラフィックで、見た人が思わず「すごい」と声に出す1本を作ってください。
いま世界中で話題の「AIが本気で作るモーショングラフィック」です。あなたの腕前を、出し惜しみせず全力で証明してください。

■ 作りたいもの（本人の言葉）
名言が流れる縦長の1本「ニーチェ」。名言シリーズの2本目（作り手別）。ニーチェの言葉を4つ、力強く組み上がる字で、かっこいい1本に。山・高み・星・嵐・踊る、言葉に合う舞台で。言葉の下に作品名。言葉はドイツ語の原典までたどれる物だけ、うちで訳す。締めは「ニーチェ」の名前と、作品名の並び

■ 仕上がりのイメージ
かっこよく、神秘的な短い映像作品。30秒。光の粒が集まっては弾けて、カメラが3Dの奥へ飛び込む。大事なところでピタッと止まり、前の場面の形が、そのまま次の場面になる。最後に「ニーチェ」がはっきり残って終わる。

■ 使ってほしい演出（これは出発点です。もっと良い見せ方を思いついたら、そちらを選んでかまいません）
1. パーティクル（Particle Animation）：小さな粒（光・紙吹雪・星）が集まって形になり、また散る
2. 3Dカメラワーク（3D Camera Move）：three.js などで奥行きのある空間を作り、カメラが中を進んでいく
3. マッチカット（Match Cut）：場面の切り替えでカットせず、前の場面の形を次の場面の部品へ受け渡す
4. ホールド（Hold）：見せたい瞬間は動きをピタッと止めて、一拍しっかり見せる
5. スタッガー（Stagger）：複数の要素をほんの少しずつ時間差で動かし、波のような流れを作る
6. ライトスイープ（Light Sweep）：光の筋が表面を横切ってきらっと輝く。光のにじみ（グロー）も少し
7. ビートシンク（Beat Sync）：テンポを1つ決め、場面の切り替えや大事な動きを拍に合わせる。効果音も動きと同じ瞬間に鳴らす

■ 条件
- 長さ：30秒　画面：縦長 9:16（1080×1920）
- 縦長なので、ブラウザの真ん中に 9:16 の枠を高さいっぱいに置き、枠の外は黒にする（画面収録で切り取りやすいように）
- 形式：HTMLファイル1枚（HTML・CSS・JavaScriptをすべてこの中にまとめる）。今いる作業フォルダに motion.html として保存し（同じ名前があれば motion-2.html のように番号をつける）、できたらブラウザで開く（Mac なら open コマンド）
- 再生：最後まで行ったら「もう一度見る」ボタンを出す
- 外部のライブラリを使う時は CDN から読み込む（three.js など）。フォントはパソコンに入っている日本語フォントを使う
- 時間の管理：すべての動きを1本のタイムライン（経過時間から各場面の状態を計算する形）で管理し、コマ落ちしても時間どおりに進むようにする
- 音：Web Audio API で、BGM（テンポ 111BPM 前後）と効果音をコードだけで作る。ブラウザの決まりで最初は音が出ないので、最初の画面に大きな「▶ 音つきで再生」ボタンを置き、押したら映像と音を同時に始める。大事な動きと効果音は同じ瞬間に
- 画面に出す言葉：「ニーチェ」（どれも一字一句そのまま使う）
- 色：黒と白を基本に、差し色に蛍光イエローを1色だけ（神秘的な空気を少し）（例：#0E0E10 #F4F4EF #E8FF3A #6B6B70）
- 文字：日本語は読みやすい太さのフォントで。小さすぎる文字は使わない

■ いちばん大事なこと
- いちばん大事なのは「作りたいもの（本人の言葉）」。上の『仕上がりのイメージ』『使ってほしい演出』『色』が本人の言葉と食い違うところは、本人の言葉を優先する
- 演出を並べるだけにしない。ひとつの芯のアイデア（たとえば最初に出た形が最後まで姿を変え続ける）で、全部の場面をつなぐ
- その芯は、説明がなくても画面を見るだけで伝わるようにする
- 場面の切れ目はパッと切らず、前の場面の形を次の場面へ受け渡してつなぐ
- 動きは等速にしない。加速・減速（イージング）と、止める瞬間（間）をつける
- キャラクターや動物の絵をコードで描かない。図形・文字・模様・光・3Dの形で表現する（写真やイラストのファイルを渡された時だけ、それを使う）

作り始める前に、芯のアイデアと場面の流れを3行で書き出してから作ってください。
完成したら、使った演出と、芯のアイデアを1行ずつ教えてください。

あなたが今できる最高のモーショングラフィックで、見た人が思わず「すごい」と声に出す1本を作ってください。
いま世界中で話題の「AIが本気で作るモーショングラフィック」です。あなたの腕前を、出し惜しみせず全力で証明してください。

■ 作りたいもの（本人の言葉）
南国のパチスロで当たった瞬間の「キュイーン！」と、台の上のパトランプが回って光る演出みたいなモーショングラフィック。ハイビスカスとヤシの南国の色。回っていた絵柄がそろう瞬間にキュイーン！と鳴り、パトランプの赤い光が部屋じゅうをぐるぐる照らす。見た人が思わず笑顔になる、当たりの気持ちよさ

■ 仕上がりのイメージ
ワクワクする短い映像作品。15秒。言葉が弾みながら現れて、カメラが3Dの奥へ飛び込む。ぐっとためてから一気に動き、色の面がシャッと画面を入れ替える。最後に「キュイーン！」がはっきり残って終わる。

■ 使ってほしい演出（これは出発点です。もっと良い見せ方を思いついたら、そちらを選んでかまいません）
1. キネティック・タイポグラフィ（Kinetic Typography）：画面に出す言葉を主役にして、文字ごとに登場と退場の動きをつける
2. 3Dカメラワーク（3D Camera Move）：three.js などで奥行きのある空間を作り、カメラが中を進んでいく
3. カラーワイプ（Color Wipe）：大きな色の面が画面を横切り、背景の色ごと場面を切り替える
4. アンティシペーション（Anticipation）：大きく動く前に、いったん反対にためる
5. オーバーシュート（Overshoot）：目標の位置を少し行き過ぎてから戻る、バネの動き
6. ライトスイープ（Light Sweep）：光の筋が表面を横切ってきらっと輝く。光のにじみ（グロー）も少し
7. ビートシンク（Beat Sync）：テンポを1つ決め、場面の切り替えや大事な動きを拍に合わせる。効果音も動きと同じ瞬間に鳴らす

■ 条件
- 長さ：15秒　画面：横長 16:9（1920×1080）
- 形式：HTMLファイル1枚（HTML・CSS・JavaScriptをすべてこの中にまとめる）。今いる作業フォルダに motion.html として保存し（同じ名前があれば motion-2.html のように番号をつける）、できたらブラウザで開く（Mac なら open コマンド）
- 再生：最後まで行ったら「もう一度見る」ボタンを出す
- 外部のライブラリを使う時は CDN から読み込む（three.js など）。フォントはパソコンに入っている日本語フォントを使う
- 時間の管理：すべての動きを1本のタイムライン（経過時間から各場面の状態を計算する形）で管理し、コマ落ちしても時間どおりに進むようにする
- 音：Web Audio API で、BGM（テンポ 124BPM 前後）と効果音をコードだけで作る。ブラウザの決まりで最初は音が出ないので、最初の画面に大きな「▶ 音つきで再生」ボタンを置き、押したら映像と音を同時に始める。大事な動きと効果音は同じ瞬間に
- 画面に出す言葉：「キュイーン！」（どれも一字一句そのまま使う）
- 色：明るい白に、朱赤と紺、ひとさじの黄色（例：#FFF8F0 #FF5A36 #1E2A78 #FFC93C）
- 文字：日本語は読みやすい太さのフォントで。小さすぎる文字は使わない

■ いちばん大事なこと
- いちばん大事なのは「作りたいもの（本人の言葉）」。上の『仕上がりのイメージ』『使ってほしい演出』『色』が本人の言葉と食い違うところは、本人の言葉を優先する
- 演出を並べるだけにしない。ひとつの芯のアイデア（たとえば最初に出た形が最後まで姿を変え続ける）で、全部の場面をつなぐ
- その芯は、説明がなくても画面を見るだけで伝わるようにする
- 場面の切れ目はパッと切らず、前の場面の形を次の場面へ受け渡してつなぐ
- 動きは等速にしない。加速・減速（イージング）と、止める瞬間（間）をつける
- キャラクターや動物の絵をコードで描かない。図形・文字・模様・光・3Dの形で表現する（写真やイラストのファイルを渡された時だけ、それを使う）

作り始める前に、芯のアイデアと場面の流れを3行で書き出してから作ってください。
完成したら、使った演出と、芯のアイデアを1行ずつ教えてください。

あなたが今できる最高のモーショングラフィックで、見た人が思わず「すごい」と声に出す1本を作ってください。
いま世界中で話題の「AIが本気で作るモーショングラフィック」です。あなたの腕前を、出し惜しみせず全力で証明してください。

■ 作りたいもの（本人の言葉）
架空のダンス大会「カピバラ・ステップ2026」の告知：ChatGPT で作ったカピバラの絵（`outputs/okemon-intro-v3-ai-staff-2026-09-23/assets/cast/capy-jump.png` ほか）を切り抜き、影絵・縦の帯・マス目に並べて拍ごとに色を替え、「踊れ」「STEP」を画面いっぱいに。人に出す時はあや＠ロロカデザインさんをクレジット

■ お手本（この1本のテンポ・文字・切り替えに寄せる）
- お手本：AIで作ったキャラに、ライムと紫の太い文字と影絵を重ねたショーリール（hiraoku） https://x.com/2020_hira/status/2103765908351295791
- 特徴：ライム・紫・黒・白の4色、画面いっぱいの太い文字／切り抜いたキャラと、その影絵を並べて色を替える／白い帯が開いて文字が現れる・一瞬の色ずれ／128BPMほどの電子音楽、拍の頭ごとに切り替え
- 動画が見られなくても大丈夫。上の特徴に寄せて作る。お手本の色・ロゴ・言葉・キャラはそのまま使わず、「作りたいもの」に置きかえる
- 作業フォルダにお手本のスクリーンショットがあれば、それも見て寄せる

■ 仕上がりのイメージ
ワクワクするように、かっこいい告知。15秒。切り抜いた紙がぺたぺた重なって、言葉が弾みながら現れる。ぐっとためてから一気に動き、文字がスッと幕の向こうから現れる。最後にタイトルと日付がはっきり読める形で止まる。

■ 使ってほしい演出（これは出発点です。もっと良い見せ方を思いついたら、そちらを選んでかまいません）
1. カットアウト・アニメーション（Cutout Animation）：紙を切り抜いたような形が重なり、影つきで貼られたり剥がれたりする
2. キネティック・タイポグラフィ（Kinetic Typography）：画面に出す言葉を主役にして、文字ごとに登場と退場の動きをつける
3. マスクリビール（Mask Reveal）：マスク（見えない窓）で文字や形を少しずつ見せる
4. アンティシペーション（Anticipation）：大きく動く前に、いったん反対にためる
5. オーバーシュート（Overshoot）：目標の位置を少し行き過ぎてから戻る、バネの動き
6. ライトスイープ（Light Sweep）：光の筋が表面を横切ってきらっと輝く。光のにじみ（グロー）も少し
7. ビートシンク（Beat Sync）：テンポを1つ決め、場面の切り替えや大事な動きを拍に合わせる。効果音も動きと同じ瞬間に鳴らす

■ 条件
- 長さ：15秒　画面：横長 16:9（1920×1080）
- 形式：HTMLファイル1枚（HTML・CSS・JavaScriptをすべてこの中にまとめる）。今いる作業フォルダに motion.html として保存し（同じ名前があれば motion-2.html のように番号をつける）、できたらブラウザで開く（Mac なら open コマンド）
- 再生：最後まで行ったら「もう一度見る」ボタンを出す
- 外部のライブラリを使う時は CDN から読み込む（three.js など）。フォントはパソコンに入っている日本語フォントを使う
- 時間の管理：すべての動きを1本のタイムライン（経過時間から各場面の状態を計算する形）で管理し、コマ落ちしても時間どおりに進むようにする
- 音：Web Audio API で、BGM（テンポ 125BPM 前後）と効果音をコードだけで作る。ブラウザの決まりで最初は音が出ないので、最初の画面に大きな「▶ 音つきで再生」ボタンを置き、押したら映像と音を同時に始める。大事な動きと効果音は同じ瞬間に
- 画面に出す言葉：「カピバラ・ステップ2026」「踊れ」「STEP」（どれも一字一句そのまま使う）
- 色：明るい白に、朱赤と紺、ひとさじの黄色（かっこよさを少し）（例：#FFF8F0 #FF5A36 #1E2A78 #FFC93C）
- 文字：日本語は読みやすい太さのフォントで。小さすぎる文字は使わない

■ いちばん大事なこと
- いちばん大事なのは「作りたいもの（本人の言葉）」。上の『仕上がりのイメージ』『使ってほしい演出』『色』が本人の言葉と食い違うところは、本人の言葉を優先する
- 演出を並べるだけにしない。ひとつの芯のアイデア（たとえば最初に出た形が最後まで姿を変え続ける）で、全部の場面をつなぐ
- その芯は、説明がなくても画面を見るだけで伝わるようにする
- 場面の切れ目はパッと切らず、前の場面の形を次の場面へ受け渡してつなぐ
- 動きは等速にしない。加速・減速（イージング）と、止める瞬間（間）をつける
- キャラクターや動物の絵をコードで描かない。図形・文字・模様・光・3Dの形で表現する（写真やイラストのファイルを渡された時だけ、それを使う）

作り始める前に、芯のアイデアと場面の流れを3行で書き出してから作ってください。
完成したら、使った演出と、芯のアイデアを1行ずつ教えてください。

名言が流れる縦長の1本「アドラー」。名言シリーズの3本目（作り手別）。アドラーの言葉を4つ、人と人がつながっていく、あたたかい1本に。ばらばらの点が線でつながって、人と人の輪になっていく。言葉の下に作品名。言葉はアドラー本人の著作（ドイツ語か英語の原典）までたどれる物だけ、うちで訳す。締めは「アドラー」の名前と、作品名の並び

あなたが今できる最高のモーショングラフィックで、見た人が思わず「すごい」と声に出す1本を作ってください。
いま世界中で話題の「AIが本気で作るモーショングラフィック」です。あなたの腕前を、出し惜しみせず全力で証明してください。

■ 作りたいもの（本人の言葉）
名言が流れる縦長の1本「アドラー」。名言シリーズの3本目（作り手別）。アドラーの言葉を4つ、人と人がつながっていく、あたたかい1本に。ばらばらの点が線でつながって、人と人の輪になっていく。言葉の下に作品名。言葉はアドラー本人の著作（ドイツ語か英語の原典）までたどれる物だけ、うちで訳す。締めは「アドラー」の名前と、作品名の並び

■ 仕上がりのイメージ
あたたかい短い映像作品。30秒。一本の線が走って形を描き、切り抜いた紙がぺたぺた重なる。ぽよんとつぶれて伸び、前の場面の形が、そのまま次の場面になる。最後に「アドラー」がはっきり残って終わる。

■ 使ってほしい演出（これは出発点です。もっと良い見せ方を思いついたら、そちらを選んでかまいません）
1. ラインアニメーション（Line Animation）：線が描かれていく動きで、図・ロゴ・文字の輪郭を見せる
2. カットアウト・アニメーション（Cutout Animation）：紙を切り抜いたような形が重なり、影つきで貼られたり剥がれたりする
3. マッチカット（Match Cut）：場面の切り替えでカットせず、前の場面の形を次の場面の部品へ受け渡す
4. スクワッシュ＆ストレッチ（Squash and Stretch）：着地でつぶれ、飛ぶ時に伸びる。体積は保つ
5. ブリージング（Breathing Animation）：光や形が、呼吸のようにゆっくりふくらんでしぼむ（ループ作品なら、切れ目なくつなぐ）
6. アンビエントサウンド（Ambient Sound Design）：BGMは静かなパッドやオルゴールのような音にして、効果音は大事な瞬間だけ小さく鳴らす

■ 条件
- 長さ：30秒　画面：縦長 9:16（1080×1920）
- 縦長なので、ブラウザの真ん中に 9:16 の枠を高さいっぱいに置き、枠の外は黒にする（画面収録で切り取りやすいように）
- 形式：HTMLファイル1枚（HTML・CSS・JavaScriptをすべてこの中にまとめる）。今いる作業フォルダに motion.html として保存し（同じ名前があれば motion-2.html のように番号をつける）、できたらブラウザで開く（Mac なら open コマンド）
- 再生：最後まで行ったら「もう一度見る」ボタンを出す
- 外部のライブラリを使う時は CDN から読み込む（three.js など）。フォントはパソコンに入っている日本語フォントを使う
- 時間の管理：すべての動きを1本のタイムライン（経過時間から各場面の状態を計算する形）で管理し、コマ落ちしても時間どおりに進むようにする
- 音：Web Audio API で、BGM（テンポ 92BPM 前後の静かな曲）と効果音をコードだけで作る。ブラウザの決まりで最初は音が出ないので、最初の画面に大きな「▶ 音つきで再生」ボタンを置き、押したら映像と音を同時に始める。大事な動きと効果音は同じ瞬間に（効果音は控えめに）
- 画面に出す言葉：「アドラー」（どれも一字一句そのまま使う）
- 色：クリーム色、キャラメル、トマトの赤、はちみつ色（例：#FFF4E6 #E8A35C #C8553D #F2C14E #5B3A29）
- 文字：日本語は読みやすい太さのフォントで。小さすぎる文字は使わない

■ いちばん大事なこと
- いちばん大事なのは「作りたいもの（本人の言葉）」。上の『仕上がりのイメージ』『使ってほしい演出』『色』が本人の言葉と食い違うところは、本人の言葉を優先する
- 「すごい」は派手さのことではない。静かな作品なら、静けさと美しさで「すごい」と言わせる
- 演出を並べるだけにしない。ひとつの芯のアイデア（たとえば最初に出た形が最後まで姿を変え続ける）で、全部の場面をつなぐ
- その芯は、説明がなくても画面を見るだけで伝わるようにする
- 場面の切れ目はパッと切らず、前の場面の形を次の場面へ受け渡してつなぐ
- 動きは等速にしない。加速・減速（イージング）と、止める瞬間（間）をつける
- キャラクターや動物の絵をコードで描かない。図形・文字・模様・光・3Dの形で表現する（写真やイラストのファイルを渡された時だけ、それを使う）

作り始める前に、芯のアイデアと場面の流れを3行で書き出してから作ってください。
完成したら、使った演出と、芯のアイデアを1行ずつ教えてください。

あなたが今できる最高のモーショングラフィックで、見た人が思わず「すごい」と声に出す1本を作ってください。
いま世界中で話題の「AIが本気で作るモーショングラフィック」です。あなたの腕前を、出し惜しみせず全力で証明してください。

■ 作りたいもの（本人の言葉）
昭和のテレビCMのような「ゆるっと水曜AIラジオ」の1分CM。フィルムのざらつきと色あせ、ブラウン管の丸い角、大きな手書き風のテロップ、明るい昭和のナレーション風の語りと、覚えやすいジングル。「毎週水曜 夜9時」「リベシティで」「みずやんさん × おけもん」を元気に呼びかけて、最後に番組名のサウンドロゴ。見た人がくすっと笑って、つい聞きに行きたくなる

■ 仕上がりのイメージ
少し切なく、かわいいお店・商品の紹介。60秒。言葉が弾みながら現れて、切り抜いた紙がぺたぺた重なる。バネのように行き過ぎて戻り、文字がスッと幕の向こうから現れる。最後に「みずやんさん × おけもん」が主役で止まる。

■ 使ってほしい演出（これは出発点です。もっと良い見せ方を思いついたら、そちらを選んでかまいません）
1. キネティック・タイポグラフィ（Kinetic Typography）：画面に出す言葉を主役にして、文字ごとに登場と退場の動きをつける
2. カットアウト・アニメーション（Cutout Animation）：紙を切り抜いたような形が重なり、影つきで貼られたり剥がれたりする
3. マスクリビール（Mask Reveal）：マスク（見えない窓）で文字や形を少しずつ見せる
4. オーバーシュート（Overshoot）：目標の位置を少し行き過ぎてから戻る、バネの動き
5. スクワッシュ＆ストレッチ（Squash and Stretch）：着地でつぶれ、飛ぶ時に伸びる。体積は保つ
6. テクスチャオーバーレイ（Texture Overlay）：紙の繊維やうっすらした粒子を画面にのせて、手ざわりを出す
7. ビートシンク（Beat Sync）：テンポを1つ決め、場面の切り替えや大事な動きを拍に合わせる。効果音も動きと同じ瞬間に鳴らす

■ 条件
- 長さ：60秒　画面：横長 16:9（1920×1080）
- 形式：HTMLファイル1枚（HTML・CSS・JavaScriptをすべてこの中にまとめる）。今いる作業フォルダに motion.html として保存し（同じ名前があれば motion-2.html のように番号をつける）、できたらブラウザで開く（Mac なら open コマンド）
- 再生：最後まで行ったら「もう一度見る」ボタンを出す
- 外部のライブラリを使う時は CDN から読み込む（three.js など）。フォントはパソコンに入っている日本語フォントを使う
- 時間の管理：すべての動きを1本のタイムライン（経過時間から各場面の状態を計算する形）で管理し、コマ落ちしても時間どおりに進むようにする
- 音：Web Audio API で、BGM（テンポ 98BPM 前後）と効果音をコードだけで作る。ブラウザの決まりで最初は音が出ないので、最初の画面に大きな「▶ 音つきで再生」ボタンを置き、押したら映像と音を同時に始める。大事な動きと効果音は同じ瞬間に
- 画面に出す言葉：「ゆるっと水曜AIラジオ」「毎週水曜 夜9時」「リベシティで」「みずやんさん × おけもん」（どれも一字一句そのまま使う）
- 色：夕焼けのオレンジから、夜の紫へのグラデーション（かわいさを少し）（例：#2B1B3D #FF7E5F #FEB47B #F7E6D4）
- 文字：日本語は読みやすい太さのフォントで。小さすぎる文字は使わない

■ いちばん大事なこと
- いちばん大事なのは「作りたいもの（本人の言葉）」。上の『仕上がりのイメージ』『使ってほしい演出』『色』が本人の言葉と食い違うところは、本人の言葉を優先する
- 「すごい」は派手さのことではない。静かな作品なら、静けさと美しさで「すごい」と言わせる
- 演出を並べるだけにしない。ひとつの芯のアイデア（たとえば最初に出た形が最後まで姿を変え続ける）で、全部の場面をつなぐ
- その芯は、説明がなくても画面を見るだけで伝わるようにする
- 場面の切れ目はパッと切らず、前の場面の形を次の場面へ受け渡してつなぐ
- 動きは等速にしない。加速・減速（イージング）と、止める瞬間（間）をつける
- キャラクターや動物の絵をコードで描かない。図形・文字・模様・光・3Dの形で表現する（写真やイラストのファイルを渡された時だけ、それを使う）

作り始める前に、芯のアイデアと場面の流れを3行で書き出してから作ってください。
完成したら、使った演出と、芯のアイデアを1行ずつ教えてください。

HTMLファイル1枚で、下のお店のホームページを作ってください。
下のお手本から、組み立て（順番と比率）・余白・一手の考え方を借りて、中身はお店に合わせて書きます。

■ 作りたいお店（架空）
神戸・西区の家事代行「みつばの手」（架空）

■ お店カード（5行）
- 誰が：子育てを終えた3人のスタッフ
- 何を：2時間からの家事代行（掃除・作り置き・片付け）
- どこで：神戸市西区と明石市の一部
- 本当らしい具体1つ：同じスタッフが毎回うかがう。鍵の預かりはしない
- 見た人にしてほしい1つ：困っている家事を選んで、無料の見積もりを頼む

■ お手本：トイロスタジオ（https://toirostudio.com/）
- このサイトらしさ（一手）：1画面目の見出しが、読者の心の声（セリフ2行）から始まる。
- 上からの組み立て（この順番と比率を借りる）：
  - 1画面目：橙のロゴと右にナビ、薄いグレーの背景に短い前置き、大見出し（橙と黒）、橙と灰のボタン2つ（縦積み）
  - 2つ目：取引先ロゴの横流れの帯（画面の8分の1の高さ）
  - 3つ目：小見出し＋見出し＋悩みのカード6枚（3列×2行）
  - 4つ目：見出し＋サービスのアイコン付き紹介が4列＋5列の2段
  - 5つ目：制作実績の見出し＋サムネ付きカード3列×2行
  - 6つ目：お知らせとコラムの2列一覧（各3件＋一覧ボタン）
  - 最後：写真を薄く敷いた相談の呼びかけ（ボタン2つ）、リンクのフッター
- 余白：段の間は広めで、小見出しと見出しを左揃えで置き、内側の幅を狭く（画面の8割ほど）取る。カードの間隔は詰め気味。1画面目は文字が左に寄り、右は背景だけ。
- 色：#d05010 #ffffff #f0f0ef #333333
- 書体の雰囲気：Noto Sans JP（日本語は Google Fonts から近い物を選ぶ）

■ 使う技法（お手本の一手とぶつかる所は、お手本を優先）
- 1画面目の見出しは、お店の紹介ではなく、来てくれるお客さんの困りごとか、欲しいものから書き始めてください。
- 「〇〇年」「〇〇人」など本当の数字を3つ、大きな数字と短い説明で横1列に並べてください。数字は私が渡した物だけを使い、無い物は作らないでください。
- 1画面目のすぐ下に「こんなお悩みはありませんか？」として、お客さんの困りごとを具体的に4〜6個並べ、その下に「〇〇にお任せください」とつないでください。
- 色は、地と文字の色のほかに、メイン1色（〇〇）とアクセント1色（〇〇）だけにしてください。紫から青のグラデーションや虹色は使わないでください。

■ 条件
- HTMLファイル1枚（CSSとJavaScriptも中に）。写真が要る所は、手元にある画像を使うか、無ければ同じ大きさの色面とCSSの模様で仮置きして、あとで差し替えられる形にする
- お手本の文章・ロゴ・イラスト・写真は借りない。色・書体・写真の題材・文章のうち2つ以上は変える。一手は別の題材で描き直す
- スマホ（幅375px）でもPC（幅1280px）でも崩れない。横スクロールを出さない
- 見出しの途中で変な所で改行しない。文字は小さくしすぎない（本文16px以上）
- 絵文字をアイコンに使わない。影とグラデーションを盛らない。中央揃えで同じ高さのカードを3つ並べるだけの形にしない
- 動きは見せ場を1つに絞る。JavaScriptが止まっても本文は全部読める。prefers-reduced-motion の時は動きを止める
- 1画面目だけでなく、2画面目・3画面目まで同じ手間で作る
- <meta name="robots" content="noindex"> を入れる（練習用）

作り始める前に、お手本から借りる所（組み立て・余白・一手）と、変える所（色・書体・写真の題材・文章のどれか）を3行で書き出してから作ってください。

  Create an image, 3:2 landscape photograph. A quiet Japanese-style bedroom in daytime, seen from a seated eye-level, camera perfectly horizontal. On the right third of the frame: a low futon with a folded white gauze blanket and a small analog table clock by the pillow. The left two thirds: a plain pale wall and tatami floor lit by soft light through a shoji screen, kept completely empty and evenly lit (space for a headline). Soft morning side light, 35mm lens, warm 4500K tones, muted indigo and wheat accents. No people's faces, no text, no logos, no signboards, no brand names, no watermark.

  Create an image, 3:2 landscape photograph. Close view of a baby bathing practice station on a low wooden stand: a shallow baby bath basin, a stack of folded white towels, a floating bath thermometer, and only a pair of adult hands resting on the basin edge (no face, no body above the wrists). Soft morning side light, 35mm lens, warm 4500K tones, muted indigo and wheat accents. No people's faces, no text, no logos, no signboards, no brand names, no watermark.

あなたが今できる最高のモーショングラフィックで、見た人が思わず「すごい」と声に出す1本を作ってください。
いま世界中で話題の「AIが本気で作るモーショングラフィック」です。あなたの腕前を、出し惜しみせず全力で証明してください。

■ 作りたいもの（本人の言葉）
架空の町の小さな図書館の「好きなものを1つ教えて」ポストの告知：夜の窓辺から紙飛行機が飛び、点線を引いて町の上を渡って図書館の屋根へ。本・音楽・海・パン・雨・星が0.5秒ずつクレヨン調で並び、最後にハートに集まって「すきなものを、1つ教えてください」。人やキャラは描かず、窓の明かりと紙飛行機で話を運ぶ

■ お手本（この1本のテンポ・文字・切り替えに寄せる）
- お手本：紙飛行機で「好きなものは？」と聞く、クレヨン絵本のようなアニメ（全コマを JavaScript で描いた）（Kevin Ngo） https://x.com/kevin_t_ngo/status/2102437977435893771
- 特徴：クレヨンの塗りと、ちぎった紙のふちの手ざわり／ノートに手書きの字が1語ずつ書かれていく／紙飛行機が点線を引いて、場面から場面へ話を運ぶ／好きなものを0.5秒ずつ、背景の色を替えて次々に
- 動画が見られなくても大丈夫。上の特徴に寄せて作る。お手本の色・ロゴ・言葉・キャラはそのまま使わず、「作りたいもの」に置きかえる
- 作業フォルダにお手本のスクリーンショットがあれば、それも見て寄せる

■ 仕上がりのイメージ
かわいく、あたたかい告知。15秒。夜の静けさの中で、光の粒が集まっては弾けて、切り抜いた紙がぺたぺた重なる。ぽよんとつぶれて伸び、前の場面の形が、そのまま次の場面になる。最後にタイトルと日付がはっきり読める形で止まる。

■ 使ってほしい演出（これは出発点です。もっと良い見せ方を思いついたら、そちらを選んでかまいません）
1. パーティクル（Particle Animation）：小さな粒（光・紙吹雪・星）が集まって形になり、また散る
2. カットアウト・アニメーション（Cutout Animation）：紙を切り抜いたような形が重なり、影つきで貼られたり剥がれたりする
3. ハンドライティング・アニメーション（Handwriting Animation）：墨の筆が書き順どおりに漢字や言葉を書く。入りと払いの太さの変化、かすれも表現する
4. マッチカット（Match Cut）：場面の切り替えでカットせず、前の場面の形を次の場面の部品へ受け渡す
5. スクワッシュ＆ストレッチ（Squash and Stretch）：着地でつぶれ、飛ぶ時に伸びる。体積は保つ
6. オーバーシュート（Overshoot）：目標の位置を少し行き過ぎてから戻る、バネの動き
7. テクスチャオーバーレイ（Texture Overlay）：紙の繊維やうっすらした粒子を画面にのせて、手ざわりを出す
8. アンビエントサウンド（Ambient Sound Design）：BGMは静かなパッドやオルゴールのような音にして、効果音は大事な瞬間だけ小さく鳴らす

■ 条件
- 長さ：15秒　画面：正方形 1:1（1080×1080）
- 形式：HTMLファイル1枚（HTML・CSS・JavaScriptをすべてこの中にまとめる）。今いる作業フォルダに motion.html として保存し（同じ名前があれば motion-2.html のように番号をつける）、できたらブラウザで開く（Mac なら open コマンド）
- 再生：最後まで行ったら「もう一度見る」ボタンを出す
- 外部のライブラリを使う時は CDN から読み込む（three.js など）。フォントはパソコンに入っている日本語フォントを使う
- 時間の管理：すべての動きを1本のタイムライン（経過時間から各場面の状態を計算する形）で管理し、コマ落ちしても時間どおりに進むようにする
- 音：Web Audio API で、BGM（テンポ 97BPM 前後の静かな曲）と効果音をコードだけで作る。ブラウザの決まりで最初は音が出ないので、最初の画面に大きな「▶ 音つきで再生」ボタンを置き、押したら映像と音を同時に始める。大事な動きと効果音は同じ瞬間に（効果音は控えめに）
- 画面に出す言葉：「好きなものを1つ教えて」「すきなものを、1つ教えてください」（どれも一字一句そのまま使う）
- 色：夜の藍色に、月明かりのクリーム色と淡い青（かわいさを少し）（例：#0B1026 #1E2A5A #F6E7B0 #8FB8DE #E9ECF5）
- 文字：日本語は読みやすい太さのフォントで。小さすぎる文字は使わない

■ いちばん大事なこと
- いちばん大事なのは「作りたいもの（本人の言葉）」。上の『仕上がりのイメージ』『使ってほしい演出』『色』が本人の言葉と食い違うところは、本人の言葉を優先する
- 「すごい」は派手さのことではない。静かな作品なら、静けさと美しさで「すごい」と言わせる
- 演出を並べるだけにしない。ひとつの芯のアイデア（たとえば最初に出た形が最後まで姿を変え続ける）で、全部の場面をつなぐ
- その芯は、説明がなくても画面を見るだけで伝わるようにする
- 場面の切れ目はパッと切らず、前の場面の形を次の場面へ受け渡してつなぐ
- 動きは等速にしない。加速・減速（イージング）と、止める瞬間（間）をつける
- キャラクターや動物の絵をコードで描かない。図形・文字・模様・光・3Dの形で表現する（写真やイラストのファイルを渡された時だけ、それを使う）

作り始める前に、芯のアイデアと場面の流れを3行で書き出してから作ってください。
完成したら、使った演出と、芯のアイデアを1行ずつ教えてください。

あなたが今できる最高のモーショングラフィックで、見た人が思わず「すごい」と声に出す1本を作ってください。
いま世界中で話題の「AIが本気で作るモーショングラフィック」です。あなたの腕前を、出し惜しみせず全力で証明してください。

■ 作りたいもの（本人の言葉）
架空のパン屋さんの予約アプリ「こねこね」の、押すと気持ちいいボタン集：人数の増減・受け取り日のカレンダー・焼き加減のつまみ・お気に入りのハート。押すたびに次の色が丸く広がり、部品が次の部品に変わる

■ お手本（この1本のテンポ・文字・切り替えに寄せる）
- お手本：押すと気持ちいいボタン集（押した所から、次の色が丸く広がる）（Tommy D. Rossi） https://x.com/__morse/status/2103485566570369333
- 特徴：無地の鮮やかな背景に、大きな半透明の丸と角／押した場所から、次の色が丸く広がって場面が替わる／星が1つずつ灯り、選んだ絵文字がぽんと弾む／部品の形がそのまま次の部品に変わる・ポップな音
- 動画が見られなくても大丈夫。上の特徴に寄せて作る。お手本の色・ロゴ・言葉・キャラはそのまま使わず、「作りたいもの」に置きかえる
- 作業フォルダにお手本のスクリーンショットがあれば、それも見て寄せる

■ 仕上がりのイメージ
にぎやかに、元気いっぱいのお店・商品の紹介。15秒。アプリの画面が動いて使い方を見せ、言葉が弾みながら現れる。バネのように行き過ぎて戻り、色の面がシャッと画面を入れ替える。最後に「こねこね」が主役で止まる。

■ 使ってほしい演出（これは出発点です。もっと良い見せ方を思いついたら、そちらを選んでかまいません）
1. UIアニメーション（UI Animation）：架空のスマホやPCの画面を作り、ボタンやカードが動いて操作の流れを見せる
2. キネティック・タイポグラフィ（Kinetic Typography）：画面に出す言葉を主役にして、文字ごとに登場と退場の動きをつける
3. カラーワイプ（Color Wipe）：大きな色の面が画面を横切り、背景の色ごと場面を切り替える
4. オーバーシュート（Overshoot）：目標の位置を少し行き過ぎてから戻る、バネの動き
5. スタッガー（Stagger）：複数の要素をほんの少しずつ時間差で動かし、波のような流れを作る
6. ライトスイープ（Light Sweep）：光の筋が表面を横切ってきらっと輝く。光のにじみ（グロー）も少し
7. ビートシンク（Beat Sync）：テンポを1つ決め、場面の切り替えや大事な動きを拍に合わせる。効果音も動きと同じ瞬間に鳴らす

■ 条件
- 長さ：15秒　画面：正方形 1:1（1080×1080）
- 形式：HTMLファイル1枚（HTML・CSS・JavaScriptをすべてこの中にまとめる）。今いる作業フォルダに motion.html として保存し（同じ名前があれば motion-2.html のように番号をつける）、できたらブラウザで開く（Mac なら open コマンド）
- 再生：最後まで行ったら「もう一度見る」ボタンを出す
- 外部のライブラリを使う時は CDN から読み込む（three.js など）。フォントはパソコンに入っている日本語フォントを使う
- 時間の管理：すべての動きを1本のタイムライン（経過時間から各場面の状態を計算する形）で管理し、コマ落ちしても時間どおりに進むようにする
- 音：Web Audio API で、BGM（テンポ 131BPM 前後）と効果音をコードだけで作る。ブラウザの決まりで最初は音が出ないので、最初の画面に大きな「▶ 音つきで再生」ボタンを置き、押したら映像と音を同時に始める。大事な動きと効果音は同じ瞬間に
- 画面に出す言葉：「こねこね」（どれも一字一句そのまま使う）
- 色：白地に、ビビッドな赤・黄・ミントをはっきり（元気さを少し）（例：#FFFFFF #FF3E6C #FFD23F #3BCEAC #2D2D2D）
- 文字：日本語は読みやすい太さのフォントで。小さすぎる文字は使わない

■ いちばん大事なこと
- いちばん大事なのは「作りたいもの（本人の言葉）」。上の『仕上がりのイメージ』『使ってほしい演出』『色』が本人の言葉と食い違うところは、本人の言葉を優先する
- 演出を並べるだけにしない。ひとつの芯のアイデア（たとえば最初に出た形が最後まで姿を変え続ける）で、全部の場面をつなぐ
- その芯は、説明がなくても画面を見るだけで伝わるようにする
- 場面の切れ目はパッと切らず、前の場面の形を次の場面へ受け渡してつなぐ
- 動きは等速にしない。加速・減速（イージング）と、止める瞬間（間）をつける
- キャラクターや動物の絵をコードで描かない。図形・文字・模様・光・3Dの形で表現する（写真やイラストのファイルを渡された時だけ、それを使う）

作り始める前に、芯のアイデアと場面の流れを3行で書き出してから作ってください。
完成したら、使った演出と、芯のアイデアを1行ずつ教えてください。

HTMLファイル1枚で、下のお店のホームページを作ってください。
下のお手本から、組み立て（順番と比率）・余白・一手の考え方を借りて、中身はお店に合わせて書きます。

■ 作りたいお店（架空）
神戸・塩屋の、金曜だけの弁当屋「きんようび弁当」（架空）

■ お店カード（5行）
- 誰が：昼は別の仕事をしている料理好きの2人
- 何を：毎週金曜だけの、野菜のおかず6品の弁当（30食まで）
- どこで：神戸・塩屋の駅前の間借りの台所
- 本当らしい具体1つ：おかずの中身は水曜の夜に決めて、木曜の朝に知らせる
- 見た人にしてほしい1つ：今週の弁当を1つ取り置きしてもらう

■ お手本：Alma（Premium）（https://www.alma.food/premium）
- このサイトらしさ（一手）：角丸の色タイル2×6に、食べ物のイラストを1つずつ入れて並べる。
- 上からの組み立て（この順番と比率を借りる）：
  - 1画面目：中央寄せ。上にナビ、角丸の料理タイル2行×6列、見出し1行、説明、緑のピル型ボタン
  - 2つ目：小見出し＋カード4枚（2列×2行、アイコン・見出し・説明）
  - 3つ目：淡い黄緑の霞の背景に、見出し＋小さなカード5枚（3列＋2列）
  - 4つ目：研究の裏付けの説明文＋引用の吹き出し＋人物名
  - 最後：短い呼びかけ＋同じ緑のボタン、小さな文字のリンク列
- 余白：全体が中央寄せで細く、段の間は広めに空ける。1画面目は上下に余白があり、見出しと本文は狭い幅に絞る。ページは短く、白に近い生成りの一色で通す。
- 色：#f95f30 #f1d471 #84240c #958b57 #a9d4ce
- 書体の雰囲気：GT Alpina Condensed・HAL Four Grotesk（日本語は Google Fonts から近い物を選ぶ）

■ 使う技法（お手本の一手とぶつかる所は、お手本を優先）
- こだわりは、中央揃えで同じ高さのカード3枚にせず、左に番号・右に説明を置いた一覧にして、間を細い罫線で区切ってください。
- 1画面目は写真を使わず、「〇〇」の1文を大きく置き、周りは余白にしてください。ボタンは1つだけ、その下に置いてください。
- 影は 0 2px 6px rgba(0,0,0,.05) まで、角丸は2〜4px、グラデーションは写真の上で字を読ませる所だけにしてください。

■ 条件
- HTMLファイル1枚（CSSとJavaScriptも中に）。写真は1ページに2〜3枚まで（1画面目1・中の段1・小物0〜1。技法の指示より、この上限を優先）。ほかは字・図形・CSSで立たせる。写真の所は、手元にある画像を使うか、無ければ同じ大きさの色面で仮置きして、あとで差し替えられる形にする
- お手本の文章・ロゴ・イラスト・写真は借りない。色・書体・写真の題材・文章のうち2つ以上は変える。一手は別の題材で描き直す
- スマホ（幅375px）でもPC（幅1280px）でも崩れない。横スクロールを出さない
- 見出しの途中で変な所で改行しない。文字は小さくしすぎない（本文16px以上）
- 絵文字をアイコンに使わない。影とグラデーションを盛らない。中央揃えで同じ高さのカードを3つ並べるだけの形にしない
- 動きは見せ場を1つに絞る。JavaScriptが止まっても本文は全部読める。prefers-reduced-motion の時は動きを止める
- 1画面目だけでなく、2画面目・3画面目まで同じ手間で作る
- <meta name="robots" content="noindex"> を入れる（練習用）

作り始める前に、お手本から借りる所（組み立て・余白・一手）と、変える所（色・書体・写真の題材・文章のどれか）を3行で書き出してから作ってください。

公開済みnote記事の体裁修正の公開前確認です。新しい事実や内容は追加していません。読者用note標準目次を導入の直後に挿入し、大見出し5つと小見出し7つを保持、作り方の小見出しに1〜3を追加、基本の2行をquoteからnote標準コードブロックにしました。本文画像6枚、YouTube埋め込みとリンク7本は保持。ユーザーの要望は見出し・目次・コピーしやすいプロンプト。本文を簡潔に校正し、体裁の改善が読みやすさにつながるか、重大な不整合があれば指摘してください。見えていないライブ画面の挙動を断定しないでください。新規調査は不要。

# AIでつくったモーショングラフィック28本🤣 作品集と、約110文字で試した作り方

これ全部、AIに作ってもらったモーショングラフィックです🤣

かわいいのも、かっこいいのも、昭和のCM風まで。Claude Code × Opus 5.5で作っていたら、気づけば28本になっていました。

せっかくなので、曲に合わせて1本ずつ流れる、約1分の作品集にまとめました。まずは映像をどうぞ🎞

{{YOUTUBE}}

モーショングラフィックは、文字や図形が動く映像のこと。広告で文字が音に合わせて飛び出したり、ひとつの形が別の形に変わったりする、あの動きです。

今回まとめた作品は、墨の一滴、自己紹介、架空のお店の告知、ことばの教材など、題材もいろいろ。曲は私の自作曲で、映像を音に合わせて切り替えています。

「自分でも作ってみたい！」という方へ、実際に試した基本のプロンプトと作り方、好きな雰囲気を探せる見本集を紹介します。AIって難しい……を、AIっておもろい！に変えるきっかけになったらうれしいです😊

{{NOTE_TOC}}

## 約110文字だけで、音つきの42秒に

基本のプロンプトだけを送って試したときにできたのが、「FROM NOTHING／無から」という作品です。使ったのは、この2行。そのままコピーして使えます。

```text
あなたが今できる最高のモーショングラフィックで、見た人が思わず「すごい」と声に出す1本を作ってください。
いま世界中で話題の「AIが本気で作るモーショングラフィック」です。あなたの腕前を、出し惜しみせず全力で証明してください。
```

{{IMAGE:lead_basic2lines_poster.jpg}}

光の点が金属の玉になり、回廊、光る街へと姿を変えていく42秒。音楽も効果音も、Opus 5.5が作りました。

この試験では途中の質問なしで、ブラウザで動くHTMLと、動画のMP4まで書き出してくれました。できあがるまで約46分。これは私の環境で試したときの結果です。

動いているところは、[見本集の「FROM NOTHING」](https://okemonogatari-hash.github.io/html-share-box/motion-recipe/#gallery)で見られます。作品集では一瞬だった映像も、1本ずつ見ると印象が変わりますよ。

## 自分で作るなら、基本の2行から｜3ステップ

### 1．Claude Codeを開いて、モデルを選ぶ

今回使ったのは、Claude CodeのOpus 5.5です。Claude Codeは、個人向けならClaudeのPro・Maxプランに含まれています。[プランの案内](https://claude.com/pricing)はこちら。

Claudeのデスクトップアプリでは「コード（Code）」タブを開き、「ローカル（Local）」から、作品用の空のフォルダを選びます。モデルの一覧でOpus 5.5になっていることを確認すれば準備OKです。初めての方は、[公式の開始手順](https://code.claude.com/docs/en/desktop-quickstart)も参考にしてください。

{{IMAGE:fig02_three_steps.jpg}}

図の「/model opus」は、コマンドを入力する画面（ターミナル）でモデルを選ぶときのコマンドです。デスクトップアプリなら、画面のモデル一覧から選べます。

### 2．貼って送る。目的があれば、一言足す

あとは、先ほどの2行を貼って送ります。作りたいものが決まっていたら、プロンプトの最後に一言添えてもOKです。

「30秒くらいの自己紹介にしたい」
「仕事の紹介に使いたい」
「見た人に面白いと思ってもらいたい」

時間や使う目的を伝えると、作りたい方向が伝わりやすくなります。動きの専門用語を最初からそろえようとしなくても、ふだんの言葉で大丈夫です。

できあがったHTMLが開かなかったら、「ブラウザで開いて」と送ってみてください。途中で「ファイルを作っていい？」と聞かれたら、内容を読んで大丈夫そうなら許可します。

### 3．気になるところは、話しかけて直す

完成したものを見て、「もっとかわいく」「ゆっくりめにして」「最後に私の名前を出して」のように、直したいところを伝えます。

自分の写真やロゴを使いたいときは、AIに読んでほしいフォルダに画像を入れて「この画像を使って」でOK。最初の1回で全部を決めなくても、実物を見ながら、次のお願いを足していけます。

なお、同じプロンプトを送っても、必ず同じ作品ができるわけではありません。パソコンの環境、それまでの作業、AIが参照できる素材や情報によって仕上がりは変わります。約46分という時間も、毎回の所要時間を約束するものではありません。

## かわいいのも、研究記録風も。見本集の28本

プロンプトをこねくり回すより、お手本を見せるほうが早いです。「こんなの作りたい」が見つかるように、[おけもんの見本集](https://okemonogatari-hash.github.io/html-share-box/motion-recipe/#gallery)に28本を並べました。ここでは、その中から少し紹介します。

### 一滴（ひとしずく）｜15秒

墨の一滴が、文字・波・千本鳥居・判子へと形を変え続ける作品です。和風の文字や模様が好きな方は、この1本から見てみてください。

「墨の一滴が形を変えていく感じで」と、基本のプロンプトの後ろに一言足すときの見本にもなります。

### カピパラ酒 発表ティザー｜20秒

{{IMAGE:gallery_kapipara-teaser_poster.jpg}}

架空のお酒を、大真面目な研究記録に見立てた20秒。方眼紙や判子の雰囲気の中で、曲の山に「カピパラ酒」の文字がドンと着地します。

「方眼紙と判子で、研究記録みたいに」と頼むときは、こんな見せ方。名前も中身も架空ですが、発表だけは大真面目です🤣

### おけもん自己紹介・キネティックタイポ版｜32秒

{{IMAGE:gallery_kinetic-intro_poster.jpg}}

文字と図形と音楽だけで作った自己紹介です。キネティックタイポは、文字を動かして見せる表現のこと。音の拍に合わせてぴたっと止まるところが見どころです。

写真をたくさん用意しなくても、言葉の大きさや色、出てくるタイミングで、自己紹介の見せ方が変わります。

### おけもん自己紹介・文字PV｜30秒

{{IMAGE:gallery_jizura-intro.jpg}}

こちらは、踊る文字にカピバラとインコの絵を重ねた自己紹介。同じ「自分を紹介する」映像でも、文字と図形だけの作品とはまた違う雰囲気になりました。

ほかにも、昭和のテレビCM風の60秒作品、架空のジェラート店の新作告知、言葉の意味どおりに文字が動く「オノマトペ図鑑」などがあります。1本ずつじっくり見るなら、[YouTubeの再生リスト](https://www.youtube.com/playlist?list=PLPHp7Ptm7_l8)へどうぞ🎞

## お手本から頼みたいときは「モーションレシピ」

「好きな雰囲気は分かったけど、どう頼んだらいいの？」というときのために、無料・登録なしのアプリ[「モーションレシピ」](https://okemonogatari-hash.github.io/html-share-box/motion-recipe/)も作りました。

見本集で「これをお手本に作る」を押すと、その作品を参考にした注文書を作れます。作りたいものを、ふだんの言葉で入力してもOK。アプリが合う演出を選んで、AIに渡せる形にまとめてくれます。

{{IMAGE:fig04_app_screen.jpg}}

あとは、その注文書をコピーしてClaude Codeに貼るだけ。「やさしくて、ちょっとワクワクする自己紹介」「新メニューを、おしゃれでかっこよく知らせたい」など、見てほしい人や雰囲気を言葉にしてみてください。

もっと動きにこだわりたくなったら、[技法集](https://okemonogatari-hash.github.io/html-share-box/motion-recipe/techniques.html)もあります。動く見本と正式名称を見られるので、「この動きが好き」をAIに伝える手がかりになります。

## 「AIって難しい」から「おもろい！」へ

私はこんなふうに、日々「AIって面白い😆」を発信しています。AIを難しく感じている人にも、できあがった作品を見て、少し身近に感じてもらえたらうれしいです。

まずは作品を眺めるだけでも。作ってみたくなったら、上の2行をコピーして、AIと遊ぶつもりで1本頼んでみてください😊

28本の中で、どれが気になりましたか？ 「自分ならこんなのを作りたい」も、よかったらコメントで教えてください。

カピバラの絵：あや＠ロロカデザインさん

（prompt.txt を参照。長いのでここには写さない）

あなたが今できる最高のモーショングラフィックで、見た人が思わず「すごい」と声に出す1本を作ってください。
いま世界中で話題の「AIが本気で作るモーショングラフィック」です。あなたの腕前を、出し惜しみせず全力で証明してください。

■ 作りたいもの（本人の言葉）
インスタライブ風の縦長30秒「AIライブ」。AIの女の子の動く動画を配信の画面に入れて、LIVEの札と視聴者数、下から流れてくるコメントと、ふわっと上がるハート。コメントで「カピバラ出して！」と頼まれた物が、その場でモーショングラフィックになって画面に飛び出す。かわいくて、にぎやかで、見た人が思わずコメントしたくなる

■ 仕上がりのイメージ
かわいく、近未来の告知。30秒。数字やグラフが気持ちよく伸びて、言葉が弾みながら現れる。バネのように行き過ぎて戻り、色の面がシャッと画面を入れ替える。最後にタイトルと日付がはっきり読める形で止まる。

■ 使ってほしい演出（これは出発点です。もっと良い見せ方を思いついたら、そちらを選んでかまいません）
1. インフォグラフィック・アニメーション（Animated Infographics）：数字のカウントアップ、グラフが伸びる動きで、情報を気持ちよく見せる
2. キネティック・タイポグラフィ（Kinetic Typography）：画面に出す言葉を主役にして、文字ごとに登場と退場の動きをつける
3. カラーワイプ（Color Wipe）：大きな色の面が画面を横切り、背景の色ごと場面を切り替える
4. オーバーシュート（Overshoot）：目標の位置を少し行き過ぎてから戻る、バネの動き
5. スタッガー（Stagger）：複数の要素をほんの少しずつ時間差で動かし、波のような流れを作る
6. ライトスイープ（Light Sweep）：光の筋が表面を横切ってきらっと輝く。光のにじみ（グロー）も少し
7. ビートシンク（Beat Sync）：テンポを1つ決め、場面の切り替えや大事な動きを拍に合わせる。効果音も動きと同じ瞬間に鳴らす

■ 条件
- 長さ：30秒　画面：縦長 9:16（1080×1920）
- 縦長なので、ブラウザの真ん中に 9:16 の枠を高さいっぱいに置き、枠の外は黒にする（画面収録で切り取りやすいように）
- 形式：HTMLファイル1枚（HTML・CSS・JavaScriptをすべてこの中にまとめる）。今いる作業フォルダに motion.html として保存し（同じ名前があれば motion-2.html のように番号をつける）、できたらブラウザで開く（Mac なら open コマンド）
- 再生：最後まで行ったら「もう一度見る」ボタンを出す
- 外部のライブラリを使う時は CDN から読み込む（three.js など）。フォントはパソコンに入っている日本語フォントを使う
- 時間の管理：すべての動きを1本のタイムライン（経過時間から各場面の状態を計算する形）で管理し、コマ落ちしても時間どおりに進むようにする
- 音：Web Audio API で、BGM（テンポ 116BPM 前後）と効果音をコードだけで作る。ブラウザの決まりで最初は音が出ないので、最初の画面に大きな「▶ 音つきで再生」ボタンを置き、押したら映像と音を同時に始める。大事な動きと効果音は同じ瞬間に
- 画面に出す言葉：「AIライブ」「カピバラ出して！」（どれも一字一句そのまま使う）
- 色：ミルクのような白、ピーチピンク、はちみつ色、ミントを少し（近未来っぽさを少し）（例：#FFF6EE #FF8FA3 #FFC75F #7FD8BE #4A4458）
- 文字：日本語は読みやすい太さのフォントで。小さすぎる文字は使わない

■ いちばん大事なこと
- いちばん大事なのは「作りたいもの（本人の言葉）」。上の『仕上がりのイメージ』『使ってほしい演出』『色』が本人の言葉と食い違うところは、本人の言葉を優先する
- 演出を並べるだけにしない。ひとつの芯のアイデア（たとえば最初に出た形が最後まで姿を変え続ける）で、全部の場面をつなぐ
- その芯は、説明がなくても画面を見るだけで伝わるようにする
- 場面の切れ目はパッと切らず、前の場面の形を次の場面へ受け渡してつなぐ
- 動きは等速にしない。加速・減速（イージング）と、止める瞬間（間）をつける
- キャラクターや動物の絵をコードで描かない。図形・文字・模様・光・3Dの形で表現する（写真やイラストのファイルを渡された時だけ、それを使う）

作り始める前に、芯のアイデアと場面の流れを3行で書き出してから作ってください。
完成したら、使った演出と、芯のアイデアを1行ずつ教えてください。

あなたが今できる最高のモーショングラフィックで、見た人が思わず「すごい」と声に出す1本を作ってください。
いま世界中で話題の「AIが本気で作るモーショングラフィック」です。あなたの腕前を、出し惜しみせず全力で証明してください。

■ 作りたいもの（本人の言葉）
TikTok風の縦長15秒。はるかの動く動画に、大きな字幕が1語ずつ弾んで出て、右に縦に並ぶボタン、下に曲名が流れる帯と進み具合のバー。「3秒でわかる、AIでモーショングラフィック」の型で、テンポよく、かわいく、最後まで見たくなる

■ 仕上がりのイメージ
かわいく、近未来のSNS動画。15秒。アプリの画面が動いて使い方を見せ、数字やグラフが気持ちよく伸びる。ぽよんとつぶれて伸び、色の面がシャッと画面を入れ替える。最初の1秒で目を止め、最後にもう一度見たくなる一瞬で終わる。

■ 使ってほしい演出（これは出発点です。もっと良い見せ方を思いついたら、そちらを選んでかまいません）
1. UIアニメーション（UI Animation）：架空のスマホやPCの画面を作り、ボタンやカードが動いて操作の流れを見せる
2. インフォグラフィック・アニメーション（Animated Infographics）：数字のカウントアップ、グラフが伸びる動きで、情報を気持ちよく見せる
3. カラーワイプ（Color Wipe）：大きな色の面が画面を横切り、背景の色ごと場面を切り替える
4. スクワッシュ＆ストレッチ（Squash and Stretch）：着地でつぶれ、飛ぶ時に伸びる。体積は保つ
5. オーバーシュート（Overshoot）：目標の位置を少し行き過ぎてから戻る、バネの動き
6. グリッチ（Glitch）：場面の切り替えで一瞬だけ色ずれやノイズを入れる（多用しない）
7. ビートシンク（Beat Sync）：テンポを1つ決め、場面の切り替えや大事な動きを拍に合わせる。効果音も動きと同じ瞬間に鳴らす

■ 条件
- 長さ：15秒　画面：縦長 9:16（1080×1920）
- 縦長なので、ブラウザの真ん中に 9:16 の枠を高さいっぱいに置き、枠の外は黒にする（画面収録で切り取りやすいように）
- 形式：HTMLファイル1枚（HTML・CSS・JavaScriptをすべてこの中にまとめる）。今いる作業フォルダに motion.html として保存し（同じ名前があれば motion-2.html のように番号をつける）、できたらブラウザで開く（Mac なら open コマンド）
- 再生：最後まで行ったら「もう一度見る」ボタンを出す
- 外部のライブラリを使う時は CDN から読み込む（three.js など）。フォントはパソコンに入っている日本語フォントを使う
- 時間の管理：すべての動きを1本のタイムライン（経過時間から各場面の状態を計算する形）で管理し、コマ落ちしても時間どおりに進むようにする
- 音：Web Audio API で、BGM（テンポ 116BPM 前後）と効果音をコードだけで作る。ブラウザの決まりで最初は音が出ないので、最初の画面に大きな「▶ 音つきで再生」ボタンを置き、押したら映像と音を同時に始める。大事な動きと効果音は同じ瞬間に
- 画面に出す言葉：「3秒でわかる、AIでモーショングラフィック」（どれも一字一句そのまま使う）
- 色：ミルクのような白、ピーチピンク、はちみつ色、ミントを少し（近未来っぽさを少し）（例：#FFF6EE #FF8FA3 #FFC75F #7FD8BE #4A4458）
- 文字：日本語は読みやすい太さのフォントで。小さすぎる文字は使わない

■ いちばん大事なこと
- いちばん大事なのは「作りたいもの（本人の言葉）」。上の『仕上がりのイメージ』『使ってほしい演出』『色』が本人の言葉と食い違うところは、本人の言葉を優先する
- 演出を並べるだけにしない。ひとつの芯のアイデア（たとえば最初に出た形が最後まで姿を変え続ける）で、全部の場面をつなぐ
- その芯は、説明がなくても画面を見るだけで伝わるようにする
- 場面の切れ目はパッと切らず、前の場面の形を次の場面へ受け渡してつなぐ
- 動きは等速にしない。加速・減速（イージング）と、止める瞬間（間）をつける
- キャラクターや動物の絵をコードで描かない。図形・文字・模様・光・3Dの形で表現する（写真やイラストのファイルを渡された時だけ、それを使う）

作り始める前に、芯のアイデアと場面の流れを3行で書き出してから作ってください。
完成したら、使った演出と、芯のアイデアを1行ずつ教えてください。

あなたが今できる最高のモーショングラフィックで、見た人が思わず「すごい」と声に出す1本を作ってください。
いま世界中で話題の「AIが本気で作るモーショングラフィック」です。あなたの腕前を、出し惜しみせず全力で証明してください。

■ 作りたいもの（本人の言葉）
光の粒が自分で集まって、細胞や六角形や星の形になり、最後に「おけ森」の形になってまた散る

■ お手本（この1本のテンポ・文字・切り替えに寄せる）
- お手本：Fluoddity（光の粒が自分で集まって、細胞や星の形になる）（oops_all_paperclips さん） https://x.com/OA_paperclips/status/2093445516919279867
- 特徴：黒地に光の粒だけ／粒が自分で集まって形をつくる／細胞→六角形→放射→星と姿を変える／最後は画面いっぱいに散らばる
- 動画が見られなくても大丈夫。上の特徴に寄せて作る。お手本の色・ロゴ・言葉・キャラはそのまま使わず、「作りたいもの」に置きかえる
- 作業フォルダにお手本のスクリーンショットがあれば、それも見て寄せる

■ 仕上がりのイメージ
神秘的に、近未来の短い映像作品。15秒。光の粒が集まっては弾けて、模様が波のように広がる。呼吸するようにゆっくりふくらんで、前の場面の形が、そのまま次の場面になる。最後に「おけ森」がはっきり残って終わる。

■ 使ってほしい演出（これは出発点です。もっと良い見せ方を思いついたら、そちらを選んでかまいません）
1. パーティクル（Particle Animation）：小さな粒（光・紙吹雪・星）が集まって形になり、また散る
2. ジェネラティブアート（Generative Art）：模様（和柄・タイル・グリッド）がコードで生まれ、波のように広がってうねる
3. マッチカット（Match Cut）：場面の切り替えでカットせず、前の場面の形を次の場面の部品へ受け渡す
4. ブリージング（Breathing Animation）：光や形が、呼吸のようにゆっくりふくらんでしぼむ（ループ作品なら、切れ目なくつなぐ）
5. スタッガー（Stagger）：複数の要素をほんの少しずつ時間差で動かし、波のような流れを作る
6. ライトスイープ（Light Sweep）：光の筋が表面を横切ってきらっと輝く。光のにじみ（グロー）も少し
7. アンビエントサウンド（Ambient Sound Design）：BGMは静かなパッドやオルゴールのような音にして、効果音は大事な瞬間だけ小さく鳴らす

■ 条件
- 長さ：15秒　画面：横長 16:9（1920×1080）
- 形式：HTMLファイル1枚（HTML・CSS・JavaScriptをすべてこの中にまとめる）。今いる作業フォルダに motion.html として保存し（同じ名前があれば motion-2.html のように番号をつける）、できたらブラウザで開く（Mac なら open コマンド）
- 再生：最後まで行ったら「もう一度見る」ボタンを出す
- 外部のライブラリを使う時は CDN から読み込む（three.js など）。フォントはパソコンに入っている日本語フォントを使う
- 時間の管理：すべての動きを1本のタイムライン（経過時間から各場面の状態を計算する形）で管理し、コマ落ちしても時間どおりに進むようにする
- 音：Web Audio API で、BGM（テンポ 95BPM 前後の静かな曲）と効果音をコードだけで作る。ブラウザの決まりで最初は音が出ないので、最初の画面に大きな「▶ 音つきで再生」ボタンを置き、押したら映像と音を同時に始める。大事な動きと効果音は同じ瞬間に（効果音は控えめに）
- 画面に出す言葉：「おけ森」（どれも一字一句そのまま使う）
- 色：夜の藍色に、藤色の光と月の黄色（近未来っぽさを少し）（例：#0B0A1F #3A2E7A #C9B6FF #FFE9A8）
- 文字：日本語は読みやすい太さのフォントで。小さすぎる文字は使わない

■ いちばん大事なこと
- いちばん大事なのは「作りたいもの（本人の言葉）」。上の『仕上がりのイメージ』『使ってほしい演出』『色』が本人の言葉と食い違うところは、本人の言葉を優先する
- 「すごい」は派手さのことではない。静かな作品なら、静けさと美しさで「すごい」と言わせる
- 演出を並べるだけにしない。ひとつの芯のアイデア（たとえば最初に出た形が最後まで姿を変え続ける）で、全部の場面をつなぐ
- その芯は、説明がなくても画面を見るだけで伝わるようにする
- 場面の切れ目はパッと切らず、前の場面の形を次の場面へ受け渡してつなぐ
- 動きは等速にしない。加速・減速（イージング）と、止める瞬間（間）をつける
- キャラクターや動物の絵をコードで描かない。図形・文字・模様・光・3Dの形で表現する（写真やイラストのファイルを渡された時だけ、それを使う）

作り始める前に、芯のアイデアと場面の流れを3行で書き出してから作ってください。
完成したら、使った演出と、芯のアイデアを1行ずつ教えてください。

あなたが今できる最高のモーショングラフィックで、見た人が思わず「すごい」と声に出す1本を作ってください。
いま世界中で話題の「AIが本気で作るモーショングラフィック」です。あなたの腕前を、出し惜しみせず全力で証明してください。

■ 作りたいもの（本人の言葉）
解説「種から花が咲くまで、5つの手順」（正方形）：暗い地に光る線で、先に咲いた姿を見せてから、種→根→芽→茎→花と育ち、画面の下に手順の名前が1つずつ出る

■ お手本（この1本のテンポ・文字・切り替えに寄せる）
- お手本：手順どおりに育つ、光る曲線（Blender のジオメトリーノード）（Cartesian_C（3DxDEV さんの紹介）） https://x.com/3DxDEV7/status/2058812912194531833
- 特徴：暗い灰色の3D空間に、オレンジに光る細い曲線だけ／点→根→束→うねりと、手順ごとに形が育つ／画面の下に手順の名前（英語）が1つずつ出る／最初に完成形、それから作り方（カットなし・音なし）
- 動画が見られなくても大丈夫。上の特徴に寄せて作る。お手本の色・ロゴ・言葉・キャラはそのまま使わず、「作りたいもの」に置きかえる
- 作業フォルダにお手本のスクリーンショットがあれば、それも見て寄せる

■ 仕上がりのイメージ
神秘的に、近未来の解説。15秒。一本の線が走って形を描き、模様が波のように広がる。少しずつ時間差で順番に動き、前の場面の形が、そのまま次の場面になる。最後に要点がひと目でわかる形で止まる。

■ 使ってほしい演出（これは出発点です。もっと良い見せ方を思いついたら、そちらを選んでかまいません）
1. ラインアニメーション（Line Animation）：線が描かれていく動きで、図・ロゴ・文字の輪郭を見せる
2. ジェネラティブアート（Generative Art）：模様（和柄・タイル・グリッド）がコードで生まれ、波のように広がってうねる
3. マッチカット（Match Cut）：場面の切り替えでカットせず、前の場面の形を次の場面の部品へ受け渡す
4. スタッガー（Stagger）：複数の要素をほんの少しずつ時間差で動かし、波のような流れを作る
5. ブリージング（Breathing Animation）：光や形が、呼吸のようにゆっくりふくらんでしぼむ（ループ作品なら、切れ目なくつなぐ）
6. ライトスイープ（Light Sweep）：光の筋が表面を横切ってきらっと輝く。光のにじみ（グロー）も少し

■ 条件
- 長さ：15秒　画面：正方形 1:1（1080×1080）
- 形式：HTMLファイル1枚（HTML・CSS・JavaScriptをすべてこの中にまとめる）。今いる作業フォルダに motion.html として保存し（同じ名前があれば motion-2.html のように番号をつける）、できたらブラウザで開く（Mac なら open コマンド）
- 再生：開いたらすぐ再生し、最後まで行ったら「もう一度見る」ボタンを出す
- 外部のライブラリを使う時は CDN から読み込む（three.js など）。フォントはパソコンに入っている日本語フォントを使う
- 時間の管理：すべての動きを1本のタイムライン（経過時間から各場面の状態を計算する形）で管理し、コマ落ちしても時間どおりに進むようにする
- 音：なし（映像だけで気持ちよく見せる）
- 画面に出す言葉：「種から花が咲くまで、5つの手順」（どれも一字一句そのまま使う）
- 色：夜の藍色に、藤色の光と月の黄色（近未来っぽさを少し）（例：#0B0A1F #3A2E7A #C9B6FF #FFE9A8）
- 文字：日本語は読みやすい太さのフォントで。小さすぎる文字は使わない

■ いちばん大事なこと
- いちばん大事なのは「作りたいもの（本人の言葉）」。上の『仕上がりのイメージ』『使ってほしい演出』『色』が本人の言葉と食い違うところは、本人の言葉を優先する
- 「すごい」は派手さのことではない。静かな作品なら、静けさと美しさで「すごい」と言わせる
- 演出を並べるだけにしない。ひとつの芯のアイデア（たとえば最初に出た形が最後まで姿を変え続ける）で、全部の場面をつなぐ
- その芯は、説明がなくても画面を見るだけで伝わるようにする
- 場面の切れ目はパッと切らず、前の場面の形を次の場面へ受け渡してつなぐ
- 動きは等速にしない。加速・減速（イージング）と、止める瞬間（間）をつける
- キャラクターや動物の絵をコードで描かない。図形・文字・模様・光・3Dの形で表現する（写真やイラストのファイルを渡された時だけ、それを使う）

作り始める前に、芯のアイデアと場面の流れを3行で書き出してから作ってください。
完成したら、使った演出と、芯のアイデアを1行ずつ教えてください。

あなたが今できる最高のモーショングラフィックで、見た人が思わず「すごい」と声に出す1本を作ってください。
いま世界中で話題の「AIが本気で作るモーショングラフィック」です。あなたの腕前を、出し惜しみせず全力で証明してください。

■ 作りたいもの（本人の言葉）
架空のジェラート店の秋限定フレーバー発売告知：栗・ほうじ茶・さつまいもの色がとろけ合う上に、横に広い大きな文字「秋の新作」、カーソルが発売日を打ち込む

■ お手本（この1本のテンポ・文字・切り替えに寄せる）
- お手本：Wonder のデザインチャレンジ告知（とろけるパステルの上に、大きな文字と賞金）（Wonder） https://x.com/usewonder/status/2071641597402284078
- 特徴：ピンク・水色・桃色がとろけ合うグラデーションが流れる／横に広い黒い大文字が、ぼかしからくっきり現れて止まる／紫のカーソルが入力欄に一言を打ち、枠が広がる／明るい電子音（約100BPM）、最後は黒地にロゴ2つ
- 動画が見られなくても大丈夫。上の特徴に寄せて作る。お手本の色・ロゴ・言葉・キャラはそのまま使わず、「作りたいもの」に置きかえる
- 作業フォルダにお手本のスクリーンショットがあれば、それも見て寄せる

■ 仕上がりのイメージ
かわいく、上品なお店・商品の紹介。15秒。秋の実りの中で、色がインクのようににじみ広がって、言葉が弾みながら現れる。大事なところでピタッと止まり、文字がスッと幕の向こうから現れる。最後に「秋の新作」が主役で止まる。

■ 使ってほしい演出（これは出発点です。もっと良い見せ方を思いついたら、そちらを選んでかまいません）
1. リキッドモーション（Liquid Motion）：インクがにじむ、しずくが落ちて広がる、液体のように形がとろける
2. キネティック・タイポグラフィ（Kinetic Typography）：画面に出す言葉を主役にして、文字ごとに登場と退場の動きをつける
3. マスクリビール（Mask Reveal）：マスク（見えない窓）で文字や形を少しずつ見せる
4. ホールド（Hold）：見せたい瞬間は動きをピタッと止めて、一拍しっかり見せる
5. オーバーシュート（Overshoot）：目標の位置を少し行き過ぎてから戻る、バネの動き
6. ライトスイープ（Light Sweep）：光の筋が表面を横切ってきらっと輝く。光のにじみ（グロー）も少し
7. ビートシンク（Beat Sync）：テンポを1つ決め、場面の切り替えや大事な動きを拍に合わせる。効果音も動きと同じ瞬間に鳴らす

■ 条件
- 長さ：15秒　画面：横長 16:9（1920×1080）
- 形式：HTMLファイル1枚（HTML・CSS・JavaScriptをすべてこの中にまとめる）。今いる作業フォルダに motion.html として保存し（同じ名前があれば motion-2.html のように番号をつける）、できたらブラウザで開く（Mac なら open コマンド）
- 再生：最後まで行ったら「もう一度見る」ボタンを出す
- 外部のライブラリを使う時は CDN から読み込む（three.js など）。フォントはパソコンに入っている日本語フォントを使う
- 時間の管理：すべての動きを1本のタイムライン（経過時間から各場面の状態を計算する形）で管理し、コマ落ちしても時間どおりに進むようにする
- 音：Web Audio API で、BGM（テンポ 102BPM 前後）と効果音をコードだけで作る。ブラウザの決まりで最初は音が出ないので、最初の画面に大きな「▶ 音つきで再生」ボタンを置き、押したら映像と音を同時に始める。大事な動きと効果音は同じ瞬間に
- 画面に出す言葉：「秋の新作」（どれも一字一句そのまま使う）
- 色：秋の実りのクリーム色、栗色、かぼちゃのオレンジ（かわいさを少し）（例：#FFF4E6 #D9822B #8C3B1E #F2C14E #4A2C1A）
- 文字：日本語は読みやすい太さのフォントで。小さすぎる文字は使わない

■ いちばん大事なこと
- いちばん大事なのは「作りたいもの（本人の言葉）」。上の『仕上がりのイメージ』『使ってほしい演出』『色』が本人の言葉と食い違うところは、本人の言葉を優先する
- 演出を並べるだけにしない。ひとつの芯のアイデア（たとえば最初に出た形が最後まで姿を変え続ける）で、全部の場面をつなぐ
- その芯は、説明がなくても画面を見るだけで伝わるようにする
- 場面の切れ目はパッと切らず、前の場面の形を次の場面へ受け渡してつなぐ
- 動きは等速にしない。加速・減速（イージング）と、止める瞬間（間）をつける
- キャラクターや動物の絵をコードで描かない。図形・文字・模様・光・3Dの形で表現する（写真やイラストのファイルを渡された時だけ、それを使う）

作り始める前に、芯のアイデアと場面の流れを3行で書き出してから作ってください。
完成したら、使った演出と、芯のアイデアを1行ずつ教えてください。

あなたが今できる最高のモーショングラフィックで、見た人が思わず「すごい」と声に出す1本を作ってください。
いま世界中で話題の「AIが本気で作るモーショングラフィック」です。あなたの腕前を、出し惜しみせず全力で証明してください。

■ 作りたいもの（本人の言葉）
季節のあいさつ「秋の夜長に」：篆書の「秋」が筆で今の「秋」に書き変わり、墨が粒にほどけて稲穂・すすき・月の線画に組み直り、最後に「秋の夜長を、どうぞゆっくり。」

■ お手本（この1本のテンポ・文字・切り替えに寄せる）
- お手本：Kimi K3 の予告映像（筆の「道」が墨の粒にほどけ、月と古い線画になる）（Kimi.ai（Moonshot AI）） https://x.com/Kimi_Moonshot/status/2081757327146045450
- 特徴：生成りの紙に墨一色（差し色なし）／昔の書体の字が、筆で今の「道」に書き変わる／墨が粒にほどけ、柱→アーチ→球→月と組み直る／低い電子音が約2秒ごとにふくらむ・カットなし
- 動画が見られなくても大丈夫。上の特徴に寄せて作る。お手本の色・ロゴ・言葉・キャラはそのまま使わず、「作りたいもの」に置きかえる
- 作業フォルダにお手本のスクリーンショットがあれば、それも見て寄せる

■ 仕上がりのイメージ
和の風情たっぷりに、神秘的な短い映像作品。15秒。夜の静けさの中で、光の粒が集まっては弾けて、筆が書き順どおりに文字を書く。大事なところでピタッと止まり、前の場面の形が、そのまま次の場面になる。最後に「秋の夜長を、どうぞゆっくり。」がはっきり残って終わる。

■ 使ってほしい演出（これは出発点です。もっと良い見せ方を思いついたら、そちらを選んでかまいません）
1. パーティクル（Particle Animation）：小さな粒（光・紙吹雪・星）が集まって形になり、また散る
2. ハンドライティング・アニメーション（Handwriting Animation）：墨の筆が書き順どおりに漢字や言葉を書く。入りと払いの太さの変化、かすれも表現する
3. ラインアニメーション（Line Animation）：線が描かれていく動きで、図・ロゴ・文字の輪郭を見せる
4. マッチカット（Match Cut）：場面の切り替えでカットせず、前の場面の形を次の場面の部品へ受け渡す
5. ホールド（Hold）：見せたい瞬間は動きをピタッと止めて、一拍しっかり見せる
6. ブリージング（Breathing Animation）：光や形が、呼吸のようにゆっくりふくらんでしぼむ（ループ作品なら、切れ目なくつなぐ）
7. テクスチャオーバーレイ（Texture Overlay）：紙の繊維やうっすらした粒子を画面にのせて、手ざわりを出す
8. アンビエントサウンド（Ambient Sound Design）：BGMは静かなパッドやオルゴールのような音にして、効果音は大事な瞬間だけ小さく鳴らす

■ 条件
- 長さ：15秒　画面：横長 16:9（1920×1080）
- 形式：HTMLファイル1枚（HTML・CSS・JavaScriptをすべてこの中にまとめる）。今いる作業フォルダに motion.html として保存し（同じ名前があれば motion-2.html のように番号をつける）、できたらブラウザで開く（Mac なら open コマンド）
- 再生：最後まで行ったら「もう一度見る」ボタンを出す
- 外部のライブラリを使う時は CDN から読み込む（three.js など）。フォントはパソコンに入っている日本語フォントを使う
- 時間の管理：すべての動きを1本のタイムライン（経過時間から各場面の状態を計算する形）で管理し、コマ落ちしても時間どおりに進むようにする
- 音：Web Audio API で、BGM（テンポ 83BPM 前後の静かな曲）と効果音をコードだけで作る。ブラウザの決まりで最初は音が出ないので、最初の画面に大きな「▶ 音つきで再生」ボタンを置き、押したら映像と音を同時に始める。大事な動きと効果音は同じ瞬間に（効果音は控えめに）
- 画面に出す言葉：「秋の夜長に」「秋」「秋の夜長を、どうぞゆっくり。」（どれも一字一句そのまま使う）
- 色：夜の藍色に、月明かりのクリーム色と淡い青（和の風情を少し）（例：#0B1026 #1E2A5A #F6E7B0 #8FB8DE #E9ECF5）
- 文字：日本語は読みやすい太さのフォントで。小さすぎる文字は使わない

■ いちばん大事なこと
- いちばん大事なのは「作りたいもの（本人の言葉）」。上の『仕上がりのイメージ』『使ってほしい演出』『色』が本人の言葉と食い違うところは、本人の言葉を優先する
- 「すごい」は派手さのことではない。静かな作品なら、静けさと美しさで「すごい」と言わせる
- 演出を並べるだけにしない。ひとつの芯のアイデア（たとえば最初に出た形が最後まで姿を変え続ける）で、全部の場面をつなぐ
- その芯は、説明がなくても画面を見るだけで伝わるようにする
- 場面の切れ目はパッと切らず、前の場面の形を次の場面へ受け渡してつなぐ
- 動きは等速にしない。加速・減速（イージング）と、止める瞬間（間）をつける
- キャラクターや動物の絵をコードで描かない。図形・文字・模様・光・3Dの形で表現する（写真やイラストのファイルを渡された時だけ、それを使う）

作り始める前に、芯のアイデアと場面の流れを3行で書き出してから作ってください。
完成したら、使った演出と、芯のアイデアを1行ずつ教えてください。

あなたが今できる最高のモーショングラフィックで、見た人が思わず「すごい」と声に出す1本を作ってください。
いま世界中で話題の「AIが本気で作るモーショングラフィック」です。あなたの腕前を、出し惜しみせず全力で証明してください。

■ 作りたいもの（本人の言葉）
架空の商店街の「秋のフリーマーケット」出店者募集：方眼の地に、色をなくした「いらなくなった」品物（ラジカセ・古本・マグ・植木鉢）が1つずつ置かれる。「それは だれかの」で、品物が1つずつ紙のようにくるっと裏返ると、だれかの手の中で色を取り戻した「たからもの」に変わる。みんなの手がたからものを掲げ、「秋のフリーマーケット 出店者さん募集中」、日時と申し込みで締める（絵は ChatGPT の画像で：品物だけの写真と、同じ品物をだれかの両手が持っている写真）

■ お手本（この1本のテンポ・文字・切り替えに寄せる）
- お手本：ElevenLabs「Reception」の紹介（切り抜いた物と言葉が散らばる、電話受付のAI）（ElevenLabs） https://x.com/ElevenLabs/status/2100262886916358361
- 特徴：方眼の白い地に、1語ずつばらばらの位置に置かれる言葉／切り抜いた物の写真（ハサミ・コーン・椅子など）が散らばる／四角いモザイクの青緑、光る丸、ぼけた緑へと場面が変わる／語りの声に合わせて言葉が出る・電話のベルの音
- 動画が見られなくても大丈夫。上の特徴に寄せて作る。お手本の色・ロゴ・言葉・キャラはそのまま使わず、「作りたいもの」に置きかえる
- 作業フォルダにお手本のスクリーンショットがあれば、それも見て寄せる

■ 仕上がりのイメージ
あたたかく、やさしいお店・商品の紹介。15秒。秋の実りの中で、切り抜いた紙がぺたぺた重なって、言葉が弾みながら現れる。少しずつ時間差で順番に動き、カメラが静かに寄っていく。最後に「たからもの」が主役で止まる。

■ 使ってほしい演出（これは出発点です。もっと良い見せ方を思いついたら、そちらを選んでかまいません）
1. カットアウト・アニメーション（Cutout Animation）：紙を切り抜いたような形が重なり、影つきで貼られたり剥がれたりする
2. キネティック・タイポグラフィ（Kinetic Typography）：画面に出す言葉を主役にして、文字ごとに登場と退場の動きをつける
3. プッシュイン（Push-in）：カメラがゆっくり寄っていく（途中で止めず、なめらかに）
4. スタッガー（Stagger）：複数の要素をほんの少しずつ時間差で動かし、波のような流れを作る
5. ブリージング（Breathing Animation）：光や形が、呼吸のようにゆっくりふくらんでしぼむ（ループ作品なら、切れ目なくつなぐ）
6. テクスチャオーバーレイ（Texture Overlay）：紙の繊維やうっすらした粒子を画面にのせて、手ざわりを出す
7. アンビエントサウンド（Ambient Sound Design）：BGMは静かなパッドやオルゴールのような音にして、効果音は大事な瞬間だけ小さく鳴らす

■ 条件
- 長さ：15秒　画面：横長 16:9（1920×1080）
- 形式：HTMLファイル1枚（HTML・CSS・JavaScriptをすべてこの中にまとめる）。今いる作業フォルダに motion.html として保存し（同じ名前があれば motion-2.html のように番号をつける）、できたらブラウザで開く（Mac なら open コマンド）
- 再生：最後まで行ったら「もう一度見る」ボタンを出す
- 外部のライブラリを使う時は CDN から読み込む（three.js など）。フォントはパソコンに入っている日本語フォントを使う
- 時間の管理：すべての動きを1本のタイムライン（経過時間から各場面の状態を計算する形）で管理し、コマ落ちしても時間どおりに進むようにする
- 音：Web Audio API で、BGM（テンポ 85BPM 前後の静かな曲）と効果音をコードだけで作る。ブラウザの決まりで最初は音が出ないので、最初の画面に大きな「▶ 音つきで再生」ボタンを置き、押したら映像と音を同時に始める。大事な動きと効果音は同じ瞬間に（効果音は控えめに）
- 画面に出す言葉：「秋のフリーマーケット」「いらなくなった」「だれかの」「たからもの」（どれも一字一句そのまま使う）
- 色：秋の実りのクリーム色、栗色、かぼちゃのオレンジ（あたたかさを少し）（例：#FFF4E6 #D9822B #8C3B1E #F2C14E #4A2C1A）
- 文字：日本語は読みやすい太さのフォントで。小さすぎる文字は使わない

■ いちばん大事なこと
- いちばん大事なのは「作りたいもの（本人の言葉）」。上の『仕上がりのイメージ』『使ってほしい演出』『色』が本人の言葉と食い違うところは、本人の言葉を優先する
- 「すごい」は派手さのことではない。静かな作品なら、静けさと美しさで「すごい」と言わせる
- 演出を並べるだけにしない。ひとつの芯のアイデア（たとえば最初に出た形が最後まで姿を変え続ける）で、全部の場面をつなぐ
- その芯は、説明がなくても画面を見るだけで伝わるようにする
- 場面の切れ目はパッと切らず、前の場面の形を次の場面へ受け渡してつなぐ
- 動きは等速にしない。加速・減速（イージング）と、止める瞬間（間）をつける
- キャラクターや動物の絵をコードで描かない。図形・文字・模様・光・3Dの形で表現する（写真やイラストのファイルを渡された時だけ、それを使う）

作り始める前に、芯のアイデアと場面の流れを3行で書き出してから作ってください。
完成したら、使った演出と、芯のアイデアを1行ずつ教えてください。

あなたが今できる最高のモーショングラフィックで、見た人が思わず「すごい」と声に出す1本を作ってください。
いま世界中で話題の「AIが本気で作るモーショングラフィック」です。あなたの腕前を、出し惜しみせず全力で証明してください。

■ 作りたいもの（本人の言葉）
架空の時計修理工房の紹介：古い腕時計が、写真→青焼きの設計図→X線→歯車の透視図と同じ位置のまま入れ替わり、最後に「直して、次の100年へ。」

■ お手本（この1本のテンポ・文字・切り替えに寄せる）
- お手本：Founders Inc「次の iPod をつくるのは誰？」（写真・設計図・X線が、同じ形のまま入れ替わる）（Founders Inc） https://x.com/fdotinc/status/2092780175176175804
- 特徴：鮮やかな青の地に、白い線の設計図とざらつき／同じ形・同じ位置のまま、写真→設計図→X線→擬似カラー／強い電子音（約103BPM）、切り替えは0.4秒前後／最後は特許の図面と、飾り文字の1語で止まる
- 動画が見られなくても大丈夫。上の特徴に寄せて作る。お手本の色・ロゴ・言葉・キャラはそのまま使わず、「作りたいもの」に置きかえる
- 作業フォルダにお手本のスクリーンショットがあれば、それも見て寄せる

■ 仕上がりのイメージ
少し切なく、かっこいい短い映像作品。15秒。一本の線が走って形を描き、言葉が弾みながら現れる。大事なところでピタッと止まり、前の場面の形が、そのまま次の場面になる。最後に「直して、次の100年へ。」がはっきり残って終わる。

■ 使ってほしい演出（これは出発点です。もっと良い見せ方を思いついたら、そちらを選んでかまいません）
1. ラインアニメーション（Line Animation）：線が描かれていく動きで、図・ロゴ・文字の輪郭を見せる
2. キネティック・タイポグラフィ（Kinetic Typography）：画面に出す言葉を主役にして、文字ごとに登場と退場の動きをつける
3. マッチカット（Match Cut）：場面の切り替えでカットせず、前の場面の形を次の場面の部品へ受け渡す
4. ホールド（Hold）：見せたい瞬間は動きをピタッと止めて、一拍しっかり見せる
5. スタッガー（Stagger）：複数の要素をほんの少しずつ時間差で動かし、波のような流れを作る
6. テクスチャオーバーレイ（Texture Overlay）：紙の繊維やうっすらした粒子を画面にのせて、手ざわりを出す
7. アンビエントサウンド（Ambient Sound Design）：BGMは静かなパッドやオルゴールのような音にして、効果音は大事な瞬間だけ小さく鳴らす

■ 条件
- 長さ：15秒　画面：横長 16:9（1920×1080）
- 形式：HTMLファイル1枚（HTML・CSS・JavaScriptをすべてこの中にまとめる）。今いる作業フォルダに motion.html として保存し（同じ名前があれば motion-2.html のように番号をつける）、できたらブラウザで開く（Mac なら open コマンド）
- 再生：最後まで行ったら「もう一度見る」ボタンを出す
- 外部のライブラリを使う時は CDN から読み込む（three.js など）。フォントはパソコンに入っている日本語フォントを使う
- 時間の管理：すべての動きを1本のタイムライン（経過時間から各場面の状態を計算する形）で管理し、コマ落ちしても時間どおりに進むようにする
- 音：Web Audio API で、BGM（テンポ 103BPM 前後の静かな曲）と効果音をコードだけで作る。ブラウザの決まりで最初は音が出ないので、最初の画面に大きな「▶ 音つきで再生」ボタンを置き、押したら映像と音を同時に始める。大事な動きと効果音は同じ瞬間に（効果音は控えめに）
- 画面に出す言葉：「直して、次の100年へ。」（どれも一字一句そのまま使う）
- 色：夕焼けのオレンジから、夜の紫へのグラデーション（かっこよさを少し）（例：#2B1B3D #FF7E5F #FEB47B #F7E6D4）
- 文字：日本語は読みやすい太さのフォントで。小さすぎる文字は使わない

■ いちばん大事なこと
- いちばん大事なのは「作りたいもの（本人の言葉）」。上の『仕上がりのイメージ』『使ってほしい演出』『色』が本人の言葉と食い違うところは、本人の言葉を優先する
- 「すごい」は派手さのことではない。静かな作品なら、静けさと美しさで「すごい」と言わせる
- 演出を並べるだけにしない。ひとつの芯のアイデア（たとえば最初に出た形が最後まで姿を変え続ける）で、全部の場面をつなぐ
- その芯は、説明がなくても画面を見るだけで伝わるようにする
- 場面の切れ目はパッと切らず、前の場面の形を次の場面へ受け渡してつなぐ
- 動きは等速にしない。加速・減速（イージング）と、止める瞬間（間）をつける
- キャラクターや動物の絵をコードで描かない。図形・文字・模様・光・3Dの形で表現する（写真やイラストのファイルを渡された時だけ、それを使う）

作り始める前に、芯のアイデアと場面の流れを3行で書き出してから作ってください。
完成したら、使った演出と、芯のアイデアを1行ずつ教えてください。

あなたが今できる最高のモーショングラフィックで、見た人が思わず「すごい」と声に出す1本を作ってください。
いま世界中で話題の「AIが本気で作るモーショングラフィック」です。あなたの腕前を、出し惜しみせず全力で証明してください。

■ 作りたいもの（本人の言葉）
AIと妄想する時の気持ち図鑑。丸い窓の形が次々に変わって、中のカピバラの表情も変わる。文字なし

■ お手本（この1本のテンポ・文字・切り替えに寄せる）
- お手本：Grok のアイコンを、コードだけで全部の表情に動かした（Benji Taylor） https://x.com/benjitaylor/status/2087227155076046995
- 特徴：白地に黒い丸1つだけ（文字・音なし）／丸→…→！→卵→六角形→三角と切らずに変身／1つの形を1〜2秒見せ、0.5秒でぽよんと次へ／途中で虹色の細い線が周りをくるくる回る
- 動画が見られなくても大丈夫。上の特徴に寄せて作る。お手本の色・ロゴ・言葉・キャラはそのまま使わず、「作りたいもの」に置きかえる
- 作業フォルダにお手本のスクリーンショットがあれば、それも見て寄せる

■ 仕上がりのイメージ
かっこよく、かわいい短い映像作品。15秒。丸や三角がリズムよく並び替わり、ひとつの形が次々に変身する。ぽよんとつぶれて伸び、前の場面の形が、そのまま次の場面になる。最後に、いちばん伝えたいものがはっきり残って終わる。

■ 使ってほしい演出（これは出発点です。もっと良い見せ方を思いついたら、そちらを選んでかまいません）
1. シェイプアニメーション（Shape Animation）：丸・三角・四角などの図形がリズムよく並び、回り、組み替わる
2. モーフィング（Morphing）：ひとつの形が別の形へなめらかに変身していく（丸→ロゴ→文字、など）
3. マッチカット（Match Cut）：場面の切り替えでカットせず、前の場面の形を次の場面の部品へ受け渡す
4. スクワッシュ＆ストレッチ（Squash and Stretch）：着地でつぶれ、飛ぶ時に伸びる。体積は保つ
5. オーバーシュート（Overshoot）：目標の位置を少し行き過ぎてから戻る、バネの動き
6. グリッチ（Glitch）：場面の切り替えで一瞬だけ色ずれやノイズを入れる（多用しない）

■ 条件
- 長さ：15秒　画面：正方形 1:1（1080×1080）
- 形式：HTMLファイル1枚（HTML・CSS・JavaScriptをすべてこの中にまとめる）。今いる作業フォルダに motion.html として保存し（同じ名前があれば motion-2.html のように番号をつける）、できたらブラウザで開く（Mac なら open コマンド）
- 再生：開いたらすぐ再生し、最後まで行ったら「もう一度見る」ボタンを出す
- 外部のライブラリを使う時は CDN から読み込む（three.js など）。フォントはパソコンに入っている日本語フォントを使う
- 時間の管理：すべての動きを1本のタイムライン（経過時間から各場面の状態を計算する形）で管理し、コマ落ちしても時間どおりに進むようにする
- 音：なし（映像だけで気持ちよく見せる）
- 画面に出す言葉：上の「作りたいもの」から、短くて強い言葉をあなたが選ぶ（多くても1場面1〜2語）
- 色：黒と白を基本に、差し色に蛍光イエローを1色だけ（かわいさを少し）（例：#0E0E10 #F4F4EF #E8FF3A #6B6B70）
- 文字：日本語は読みやすい太さのフォントで。小さすぎる文字は使わない

■ いちばん大事なこと
- いちばん大事なのは「作りたいもの（本人の言葉）」。上の『仕上がりのイメージ』『使ってほしい演出』『色』が本人の言葉と食い違うところは、本人の言葉を優先する
- 演出を並べるだけにしない。ひとつの芯のアイデア（たとえば最初に出た形が最後まで姿を変え続ける）で、全部の場面をつなぐ
- その芯は、説明がなくても画面を見るだけで伝わるようにする
- 場面の切れ目はパッと切らず、前の場面の形を次の場面へ受け渡してつなぐ
- 動きは等速にしない。加速・減速（イージング）と、止める瞬間（間）をつける
- キャラクターや動物の絵をコードで描かない。図形・文字・模様・光・3Dの形で表現する（写真やイラストのファイルを渡された時だけ、それを使う）

作り始める前に、芯のアイデアと場面の流れを3行で書き出してから作ってください。
完成したら、使った演出と、芯のアイデアを1行ずつ教えてください。

あなたが今できる最高のモーショングラフィックで、見た人が思わず「すごい」と声に出す1本を作ってください。
いま世界中で話題の「AIが本気で作るモーショングラフィック」です。あなたの腕前を、出し惜しみせず全力で証明してください。

■ 作りたいもの（本人の言葉）
「妄想→語る→作る→見せる→叶う」の5つの言葉で進む、おけもんのAIとの毎日。最後は「おけもん」の名前で締める

■ お手本（この1本のテンポ・文字・切り替えに寄せる）
- お手本：Linear のローンチ映像「アイデア→計画→そろえる→集中→出す」（Bhaskar Jyoti Borah） https://x.com/BhaskarVisuals/status/2092251902385807543
- 特徴：5つの言葉の順に進む／3Dの動き／動きに反応する効果音
- 動画が見られなくても大丈夫。上の特徴に寄せて作る。お手本の色・ロゴ・言葉・キャラはそのまま使わず、「作りたいもの」に置きかえる
- 作業フォルダにお手本のスクリーンショットがあれば、それも見て寄せる

■ 仕上がりのイメージ
かっこよく、近未来の短い映像作品。30秒。カメラが3Dの奥へ飛び込み、言葉が弾みながら現れる。少しずつ時間差で順番に動き、前の場面の形が、そのまま次の場面になる。最後に「おけもん」がはっきり残って終わる。

■ 使ってほしい演出（これは出発点です。もっと良い見せ方を思いついたら、そちらを選んでかまいません）
1. 3Dカメラ移動：three.js などで奥行きのある空間を作り、カメラが中を進んでいく
2. キネティック・タイポグラフィ：画面に出す言葉を主役にして、文字ごとに登場と退場の動きをつける
3. マッチトランジション：場面の切り替えでカットせず、前の場面の形を次の場面の部品へ受け渡す
4. スタッガー：複数の要素をほんの少しずつ時間差で動かし、波のような流れを作る
5. 間（ホールド）：見せたい瞬間は動きをピタッと止めて、一拍しっかり見せる
6. 控えめなグリッチ：場面の切り替えで一瞬だけ色ずれやノイズを入れる（多用しない）
7. ビートシンク：テンポを1つ決め、場面の切り替えや大事な動きを拍に合わせる。効果音も動きと同じ瞬間に鳴らす

■ 条件
- 長さ：30秒　画面：横長 16:9（1920×1080）
- 形式：HTMLファイル1枚（HTML・CSS・JavaScriptをすべてこの中にまとめる）。今いる作業フォルダに motion.html として保存し（同じ名前があれば motion-2.html のように番号をつける）、できたらブラウザで開く（Mac なら open コマンド）
- 再生：最後まで行ったら「もう一度見る」ボタンを出す
- 外部のライブラリを使う時は CDN から読み込む（three.js など）。フォントはパソコンに入っている日本語フォントを使う
- 時間の管理：すべての動きを1本のタイムライン（経過時間から各場面の状態を計算する形）で管理し、コマ落ちしても時間どおりに進むようにする
- 音：Web Audio API で、BGM（テンポ 127BPM 前後）と効果音をコードだけで作る。ブラウザの決まりで最初は音が出ないので、最初の画面に大きな「▶ 音つきで再生」ボタンを置き、押したら映像と音を同時に始める。大事な動きと効果音は同じ瞬間に
- 画面に出す言葉：「妄想」「語る」「作る」「見せる」「叶う」「おけもん」「妄想→語る→作る→見せる→叶う」（どれも一字一句そのまま使う）
- 色：黒と白を基本に、差し色に蛍光イエローを1色だけ（近未来っぽさを少し）（例：#0E0E10 #F4F4EF #E8FF3A #6B6B70）
- 文字：日本語は読みやすい太さのフォントで。小さすぎる文字は使わない

■ いちばん大事なこと
- いちばん大事なのは「作りたいもの（本人の言葉）」。上の『仕上がりのイメージ』『使ってほしい演出』『色』が本人の言葉と食い違うところは、本人の言葉を優先する
- 演出を並べるだけにしない。ひとつの芯のアイデア（たとえば最初に出た形が最後まで姿を変え続ける）で、全部の場面をつなぐ
- その芯は、説明がなくても画面を見るだけで伝わるようにする
- 場面の切れ目はパッと切らず、前の場面の形を次の場面へ受け渡してつなぐ
- 動きは等速にしない。加速・減速（イージング）と、止める瞬間（間）をつける
- キャラクターや動物の絵をコードで描かない。図形・文字・模様・光・3Dの形で表現する（写真やイラストのファイルを渡された時だけ、それを使う）

作り始める前に、芯のアイデアと場面の流れを3行で書き出してから作ってください。
完成したら、使った演出と、芯のアイデアを1行ずつ教えてください。

あなたが今できる最高のモーショングラフィックで、見た人が思わず「すごい」と声に出す1本を作ってください。
いま世界中で話題の「AIが本気で作るモーショングラフィック」です。あなたの腕前を、出し惜しみせず全力で証明してください。

■ 作りたいもの（本人の言葉）
「ワクワクが心の羅針盤」を7つの場面で見せる15秒。最後は「ワクワクが心の羅針盤」とおけもんの名前でピタッと止まる

■ お手本（この1本のテンポ・文字・切り替えに寄せる）
- お手本：Opus 5.5 に「履歴書用のショーリールを全力で」と頼んだ15秒（Stephan Livera） https://x.com/stephanlivera/status/2103315922098470926
- 特徴：7場面を約2秒ずつ、場面番号つき／小節の頭（128BPM）で切り替え、文字は0.23秒ごとに1語／前の場面の形を残したまま背景色を替え、次の主役にする／四隅に細い枠と小さな等幅文字、最後は名前で静止
- 動画が見られなくても大丈夫。上の特徴に寄せて作る。お手本の色・ロゴ・言葉・キャラはそのまま使わず、「作りたいもの」に置きかえる
- 作業フォルダにお手本のスクリーンショットがあれば、それも見て寄せる

■ 仕上がりのイメージ
かっこよく、ワクワクする短い映像作品。15秒。言葉が弾みながら現れて、ひとつの形が次々に変身する。大事なところでピタッと止まり、前の場面の形が、そのまま次の場面になる。最後に「ワクワクが心の羅針盤」がはっきり残って終わる。

■ 使ってほしい演出（これは出発点です。もっと良い見せ方を思いついたら、そちらを選んでかまいません）
1. キネティック・タイポグラフィ（Kinetic Typography）：画面に出す言葉を主役にして、文字ごとに登場と退場の動きをつける
2. モーフィング（Morphing）：ひとつの形が別の形へなめらかに変身していく（丸→ロゴ→文字、など）
3. マッチカット（Match Cut）：場面の切り替えでカットせず、前の場面の形を次の場面の部品へ受け渡す
4. ホールド（Hold）：見せたい瞬間は動きをピタッと止めて、一拍しっかり見せる
5. アンティシペーション（Anticipation）：大きく動く前に、いったん反対にためる
6. ライトスイープ（Light Sweep）：光の筋が表面を横切ってきらっと輝く。光のにじみ（グロー）も少し
7. ビートシンク（Beat Sync）：テンポを1つ決め、場面の切り替えや大事な動きを拍に合わせる。効果音も動きと同じ瞬間に鳴らす

■ 条件
- 長さ：15秒　画面：横長 16:9（1920×1080）
- 形式：HTMLファイル1枚（HTML・CSS・JavaScriptをすべてこの中にまとめる）。今いる作業フォルダに motion.html として保存し（同じ名前があれば motion-2.html のように番号をつける）、できたらブラウザで開く（Mac なら open コマンド）
- 再生：最後まで行ったら「もう一度見る」ボタンを出す
- 外部のライブラリを使う時は CDN から読み込む（three.js など）。フォントはパソコンに入っている日本語フォントを使う
- 時間の管理：すべての動きを1本のタイムライン（経過時間から各場面の状態を計算する形）で管理し、コマ落ちしても時間どおりに進むようにする
- 音：Web Audio API で、BGM（テンポ 127BPM 前後）と効果音をコードだけで作る。ブラウザの決まりで最初は音が出ないので、最初の画面に大きな「▶ 音つきで再生」ボタンを置き、押したら映像と音を同時に始める。大事な動きと効果音は同じ瞬間に
- 画面に出す言葉：「ワクワクが心の羅針盤」「おけもん」（どれも一字一句そのまま使う）
- 色：黒と白を基本に、差し色に蛍光イエローを1色だけ（ワクワク感を少し）（例：#0E0E10 #F4F4EF #E8FF3A #6B6B70）
- 文字：日本語は読みやすい太さのフォントで。小さすぎる文字は使わない

■ いちばん大事なこと
- いちばん大事なのは「作りたいもの（本人の言葉）」。上の『仕上がりのイメージ』『使ってほしい演出』『色』が本人の言葉と食い違うところは、本人の言葉を優先する
- 演出を並べるだけにしない。ひとつの芯のアイデア（たとえば最初に出た形が最後まで姿を変え続ける）で、全部の場面をつなぐ
- その芯は、説明がなくても画面を見るだけで伝わるようにする
- 場面の切れ目はパッと切らず、前の場面の形を次の場面へ受け渡してつなぐ
- 動きは等速にしない。加速・減速（イージング）と、止める瞬間（間）をつける
- キャラクターや動物の絵をコードで描かない。図形・文字・模様・光・3Dの形で表現する（写真やイラストのファイルを渡された時だけ、それを使う）

作り始める前に、芯のアイデアと場面の流れを3行で書き出してから作ってください。
完成したら、使った演出と、芯のアイデアを1行ずつ教えてください。

あなたが今できる最高のモーショングラフィックで、見た人が思わず「すごい」と声に出す1本を作ってください。
いま世界中で話題の「AIが本気で作るモーショングラフィック」です。あなたの腕前を、出し惜しみせず全力で証明してください。

■ 作りたいもの（本人の言葉）
架空のボルダリングジムの6周年を数字で：黒×黄で「登った回数」「最年少の会員」などの数字がスロットのように回って止まり、黄色い四角が広がって次の数字へ

■ お手本（この1本のテンポ・文字・切り替えに寄せる）
- お手本：BNB Chain の6周年（黒と黄色、値段の数字がスロットのように回る）（BNB Chain） https://x.com/BNBCHAIN/status/2094757311080444274
- 特徴：黒と黄色の2色、背景に画面からはみ出す巨大な文字／値段の数字がスロットのように縦に回って入れ替わる／アイコンが1個ずつ並び、増減の％が横に流れ続ける／黄色い四角が広がって場面が替わる・語りの声つき
- 動画が見られなくても大丈夫。上の特徴に寄せて作る。お手本の色・ロゴ・言葉・キャラはそのまま使わず、「作りたいもの」に置きかえる
- 作業フォルダにお手本のスクリーンショットがあれば、それも見て寄せる

■ 仕上がりのイメージ
ワクワクするように、元気いっぱいのお祝い。15秒。丸や三角がリズムよく並び替わり、数字やグラフが気持ちよく伸びる。少しずつ時間差で順番に動き、色の面がシャッと画面を入れ替える。最後に「最年少の会員」が大きく残る。

■ 使ってほしい演出（これは出発点です。もっと良い見せ方を思いついたら、そちらを選んでかまいません）
1. シェイプアニメーション（Shape Animation）：丸・三角・四角などの図形がリズムよく並び、回り、組み替わる
2. インフォグラフィック・アニメーション（Animated Infographics）：数字のカウントアップ、グラフが伸びる動きで、情報を気持ちよく見せる
3. キネティック・タイポグラフィ（Kinetic Typography）：画面に出す言葉を主役にして、文字ごとに登場と退場の動きをつける
4. カラーワイプ（Color Wipe）：大きな色の面が画面を横切り、背景の色ごと場面を切り替える
5. スタッガー（Stagger）：複数の要素をほんの少しずつ時間差で動かし、波のような流れを作る
6. オーバーシュート（Overshoot）：目標の位置を少し行き過ぎてから戻る、バネの動き
7. ライトスイープ（Light Sweep）：光の筋が表面を横切ってきらっと輝く。光のにじみ（グロー）も少し
8. ビートシンク（Beat Sync）：テンポを1つ決め、場面の切り替えや大事な動きを拍に合わせる。効果音も動きと同じ瞬間に鳴らす

■ 条件
- 長さ：15秒　画面：横長 16:9（1920×1080）
- 形式：HTMLファイル1枚（HTML・CSS・JavaScriptをすべてこの中にまとめる）。今いる作業フォルダに motion.html として保存し（同じ名前があれば motion-2.html のように番号をつける）、できたらブラウザで開く（Mac なら open コマンド）
- 再生：最後まで行ったら「もう一度見る」ボタンを出す
- 外部のライブラリを使う時は CDN から読み込む（three.js など）。フォントはパソコンに入っている日本語フォントを使う
- 時間の管理：すべての動きを1本のタイムライン（経過時間から各場面の状態を計算する形）で管理し、コマ落ちしても時間どおりに進むようにする
- 音：Web Audio API で、BGM（テンポ 125BPM 前後）と効果音をコードだけで作る。ブラウザの決まりで最初は音が出ないので、最初の画面に大きな「▶ 音つきで再生」ボタンを置き、押したら映像と音を同時に始める。大事な動きと効果音は同じ瞬間に
- 画面に出す言葉：「登った回数」「最年少の会員」（どれも一字一句そのまま使う）
- 色：明るい白に、朱赤と紺、ひとさじの黄色（元気さを少し）（例：#FFF8F0 #FF5A36 #1E2A78 #FFC93C）
- 文字：日本語は読みやすい太さのフォントで。小さすぎる文字は使わない

■ いちばん大事なこと
- いちばん大事なのは「作りたいもの（本人の言葉）」。上の『仕上がりのイメージ』『使ってほしい演出』『色』が本人の言葉と食い違うところは、本人の言葉を優先する
- 演出を並べるだけにしない。ひとつの芯のアイデア（たとえば最初に出た形が最後まで姿を変え続ける）で、全部の場面をつなぐ
- その芯は、説明がなくても画面を見るだけで伝わるようにする
- 場面の切れ目はパッと切らず、前の場面の形を次の場面へ受け渡してつなぐ
- 動きは等速にしない。加速・減速（イージング）と、止める瞬間（間）をつける
- キャラクターや動物の絵をコードで描かない。図形・文字・模様・光・3Dの形で表現する（写真やイラストのファイルを渡された時だけ、それを使う）

作り始める前に、芯のアイデアと場面の流れを3行で書き出してから作ってください。
完成したら、使った演出と、芯のアイデアを1行ずつ教えてください。

あなたが今できる最高のモーショングラフィックで、見た人が思わず「すごい」と声に出す1本を作ってください。
いま世界中で話題の「AIが本気で作るモーショングラフィック」です。あなたの腕前を、出し惜しみせず全力で証明してください。

■ 作りたいもの（本人の言葉）
架空のレトロゲーム「ドット森の冒険」の発売告知。古いパソコンの画面の中へ入ると、文字化けしていた見出しがゲームの題名に整う

■ お手本（この1本のテンポ・文字・切り替えに寄せる）
- お手本：Databricks の開発者サイトのブランド映像（Pixel Point） https://x.com/alex_barashkov/status/2084313374393835699
- 特徴：赤と黒、ドット絵のような角ばった大きな文字／3Dの古いパソコンの画面の中へカメラが入る／見出しが一瞬文字化けしてから決まる／拍のはっきりした電子音楽（約130BPM）
- 動画が見られなくても大丈夫。上の特徴に寄せて作る。お手本の色・ロゴ・言葉・キャラはそのまま使わず、「作りたいもの」に置きかえる
- 作業フォルダにお手本のスクリーンショットがあれば、それも見て寄せる

■ 仕上がりのイメージ
かっこよく、近未来の告知。15秒。カメラが3Dの奥へ飛び込み、言葉が弾みながら現れる。少しずつ時間差で順番に動き、前の場面の形が、そのまま次の場面になる。最後にタイトルと日付がはっきり読める形で止まる。

■ 使ってほしい演出（これは出発点です。もっと良い見せ方を思いついたら、そちらを選んでかまいません）
1. 3Dカメラワーク（3D Camera Move）：three.js などで奥行きのある空間を作り、カメラが中を進んでいく
2. キネティック・タイポグラフィ（Kinetic Typography）：画面に出す言葉を主役にして、文字ごとに登場と退場の動きをつける
3. マッチカット（Match Cut）：場面の切り替えでカットせず、前の場面の形を次の場面の部品へ受け渡す
4. スタッガー（Stagger）：複数の要素をほんの少しずつ時間差で動かし、波のような流れを作る
5. アンティシペーション（Anticipation）：大きく動く前に、いったん反対にためる
6. テクスチャオーバーレイ（Texture Overlay）：紙の繊維やうっすらした粒子を画面にのせて、手ざわりを出す
7. ビートシンク（Beat Sync）：テンポを1つ決め、場面の切り替えや大事な動きを拍に合わせる。効果音も動きと同じ瞬間に鳴らす

■ 条件
- 長さ：15秒　画面：横長 16:9（1920×1080）
- 形式：HTMLファイル1枚（HTML・CSS・JavaScriptをすべてこの中にまとめる）。今いる作業フォルダに motion.html として保存し（同じ名前があれば motion-2.html のように番号をつける）、できたらブラウザで開く（Mac なら open コマンド）
- 再生：最後まで行ったら「もう一度見る」ボタンを出す
- 外部のライブラリを使う時は CDN から読み込む（three.js など）。フォントはパソコンに入っている日本語フォントを使う
- 時間の管理：すべての動きを1本のタイムライン（経過時間から各場面の状態を計算する形）で管理し、コマ落ちしても時間どおりに進むようにする
- 音：Web Audio API で、BGM（テンポ 127BPM 前後）と効果音をコードだけで作る。ブラウザの決まりで最初は音が出ないので、最初の画面に大きな「▶ 音つきで再生」ボタンを置き、押したら映像と音を同時に始める。大事な動きと効果音は同じ瞬間に
- 画面に出す言葉：「ドット森の冒険」「10月発売」（どれも一字一句そのまま使う）
- 色：黒と白を基本に、差し色に蛍光イエローを1色だけ（近未来っぽさを少し）（例：#0E0E10 #F4F4EF #E8FF3A #6B6B70）
- 文字：日本語は読みやすい太さのフォントで。小さすぎる文字は使わない

■ いちばん大事なこと
- いちばん大事なのは「作りたいもの（本人の言葉）」。上の『仕上がりのイメージ』『使ってほしい演出』『色』が本人の言葉と食い違うところは、本人の言葉を優先する
- 演出を並べるだけにしない。ひとつの芯のアイデア（たとえば最初に出た形が最後まで姿を変え続ける）で、全部の場面をつなぐ
- その芯は、説明がなくても画面を見るだけで伝わるようにする
- 場面の切れ目はパッと切らず、前の場面の形を次の場面へ受け渡してつなぐ
- 動きは等速にしない。加速・減速（イージング）と、止める瞬間（間）をつける
- キャラクターや動物の絵をコードで描かない。図形・文字・模様・光・3Dの形で表現する（写真やイラストのファイルを渡された時だけ、それを使う）

作り始める前に、芯のアイデアと場面の流れを3行で書き出してから作ってください。
完成したら、使った演出と、芯のアイデアを1行ずつ教えてください。

あなたが今できる最高のモーショングラフィックで、見た人が思わず「すごい」と声に出す1本を作ってください。
いま世界中で話題の「AIが本気で作るモーショングラフィック」です。あなたの腕前を、出し惜しみせず全力で証明してください。

■ 作りたいもの（本人の言葉）
オノマトペ図鑑（ことばの教材）：色の面がパッと替わるたびに「ふわっ」「どすん」「ころころ」「ぴたっ」、後半は6マスで同時に、どの言葉も意味どおりに動く

■ お手本（この1本のテンポ・文字・切り替えに寄せる）
- お手本：文字アニメの見本帳 animate-text（色の面が切り替わり、言葉が意味どおりに動く）（Pixel Point） https://x.com/alex_barashkov/status/2055276192106774738
- 特徴：画面いっぱいの色（白・青・緑・黒）が約0.8秒ごとに切り替わる／言葉は1〜3語だけ、1語ずつ・1字ずつ出て消える／6つのマスで、別々の文字の動きが時間差で流れる／言葉がその意味どおりに動く（左へ押す・上から積む）
- 動画が見られなくても大丈夫。上の特徴に寄せて作る。お手本の色・ロゴ・言葉・キャラはそのまま使わず、「作りたいもの」に置きかえる
- 作業フォルダにお手本のスクリーンショットがあれば、それも見て寄せる

■ 仕上がりのイメージ
にぎやかに、かっこいい短い映像作品。15秒。言葉が自分の意味どおりに動いて、言葉が弾みながら現れる。少しずつ時間差で順番に動き、色の面がシャッと画面を入れ替える。最後に「ぴたっ」がはっきり残って終わる。

■ 使ってほしい演出（これは出発点です。もっと良い見せ方を思いついたら、そちらを選んでかまいません）
1. エクスプレッシブ・タイポグラフィ（Expressive Typography）：言葉の意味をそのまま動きにする（例：「ゆっくり」はゆっくり、「ぴたっ」で完全に止める）
2. キネティック・タイポグラフィ（Kinetic Typography）：画面に出す言葉を主役にして、文字ごとに登場と退場の動きをつける
3. カラーワイプ（Color Wipe）：大きな色の面が画面を横切り、背景の色ごと場面を切り替える
4. マスクリビール（Mask Reveal）：マスク（見えない窓）で文字や形を少しずつ見せる
5. スタッガー（Stagger）：複数の要素をほんの少しずつ時間差で動かし、波のような流れを作る
6. オーバーシュート（Overshoot）：目標の位置を少し行き過ぎてから戻る、バネの動き
7. ライトスイープ（Light Sweep）：光の筋が表面を横切ってきらっと輝く。光のにじみ（グロー）も少し
8. ビートシンク（Beat Sync）：テンポを1つ決め、場面の切り替えや大事な動きを拍に合わせる。効果音も動きと同じ瞬間に鳴らす

■ 条件
- 長さ：15秒　画面：横長 16:9（1920×1080）
- 形式：HTMLファイル1枚（HTML・CSS・JavaScriptをすべてこの中にまとめる）。今いる作業フォルダに motion.html として保存し（同じ名前があれば motion-2.html のように番号をつける）、できたらブラウザで開く（Mac なら open コマンド）
- 再生：最後まで行ったら「もう一度見る」ボタンを出す
- 外部のライブラリを使う時は CDN から読み込む（three.js など）。フォントはパソコンに入っている日本語フォントを使う
- 時間の管理：すべての動きを1本のタイムライン（経過時間から各場面の状態を計算する形）で管理し、コマ落ちしても時間どおりに進むようにする
- 音：Web Audio API で、BGM（テンポ 131BPM 前後）と効果音をコードだけで作る。ブラウザの決まりで最初は音が出ないので、最初の画面に大きな「▶ 音つきで再生」ボタンを置き、押したら映像と音を同時に始める。大事な動きと効果音は同じ瞬間に
- 画面に出す言葉：「ふわっ」「どすん」「ころころ」「ぴたっ」（どれも一字一句そのまま使う）
- 色：白地に、ビビッドな赤・黄・ミントをはっきり（かっこよさを少し）（例：#FFFFFF #FF3E6C #FFD23F #3BCEAC #2D2D2D）
- 文字：日本語は読みやすい太さのフォントで。小さすぎる文字は使わない

■ いちばん大事なこと
- いちばん大事なのは「作りたいもの（本人の言葉）」。上の『仕上がりのイメージ』『使ってほしい演出』『色』が本人の言葉と食い違うところは、本人の言葉を優先する
- 演出を並べるだけにしない。ひとつの芯のアイデア（たとえば最初に出た形が最後まで姿を変え続ける）で、全部の場面をつなぐ
- その芯は、説明がなくても画面を見るだけで伝わるようにする
- 場面の切れ目はパッと切らず、前の場面の形を次の場面へ受け渡してつなぐ
- 動きは等速にしない。加速・減速（イージング）と、止める瞬間（間）をつける
- キャラクターや動物の絵をコードで描かない。図形・文字・模様・光・3Dの形で表現する（写真やイラストのファイルを渡された時だけ、それを使う）

作り始める前に、芯のアイデアと場面の流れを3行で書き出してから作ってください。
完成したら、使った演出と、芯のアイデアを1行ずつ教えてください。

あなたが今できる最高のモーショングラフィックで、見た人が思わず「すごい」と声に出す1本を作ってください。
いま世界中で話題の「AIが本気で作るモーショングラフィック」です。あなたの腕前を、出し惜しみせず全力で証明してください。

■ 作りたいもの（本人の言葉）
ゆるっと水曜AIラジオの紹介：実物のような質感の3Dのラジオで、つまみを回すと周波数が「水曜」に合い、番組名が灯る

■ お手本（この1本のテンポ・文字・切り替えに寄せる）
- お手本：キーボード「KNOB」の3D映像（実物のような質感を、接写でなめる）（Isaev Workshop（Mark Vassilevskiy さんの紹介）） https://x.com/MarkKnd/status/2078185821279224163
- 特徴：白・灰・朱色のキーボードを、実物のような質感の3Dで／カメラがキーや画面に接写で寄り、ゆっくりなめる／桃色の地に浮かぶ本体と、まわりを回る半透明のリボン／カットは7回だけ、最後は白地にロゴ（音なし）
- 動画が見られなくても大丈夫。上の特徴に寄せて作る。お手本の色・ロゴ・言葉・キャラはそのまま使わず、「作りたいもの」に置きかえる
- 作業フォルダにお手本のスクリーンショットがあれば、それも見て寄せる

■ 仕上がりのイメージ
上品に、あたたかい短い映像作品。15秒。カメラが3Dの奥へ飛び込み、一本の線が走って形を描く。大事なところでピタッと止まり、カメラが静かに寄っていく。最後に「水曜」がはっきり残って終わる。

■ 使ってほしい演出（これは出発点です。もっと良い見せ方を思いついたら、そちらを選んでかまいません）
1. 3Dカメラワーク（3D Camera Move）：three.js などで奥行きのある空間を作り、カメラが中を進んでいく
2. ラインアニメーション（Line Animation）：線が描かれていく動きで、図・ロゴ・文字の輪郭を見せる
3. プッシュイン（Push-in）：カメラがゆっくり寄っていく（途中で止めず、なめらかに）
4. ホールド（Hold）：見せたい瞬間は動きをピタッと止めて、一拍しっかり見せる
5. スタッガー（Stagger）：複数の要素をほんの少しずつ時間差で動かし、波のような流れを作る
6. ライトスイープ（Light Sweep）：光の筋が表面を横切ってきらっと輝く。光のにじみ（グロー）も少し

■ 条件
- 長さ：15秒　画面：横長 16:9（1920×1080）
- 形式：HTMLファイル1枚（HTML・CSS・JavaScriptをすべてこの中にまとめる）。今いる作業フォルダに motion.html として保存し（同じ名前があれば motion-2.html のように番号をつける）、できたらブラウザで開く（Mac なら open コマンド）
- 再生：開いたらすぐ再生し、最後まで行ったら「もう一度見る」ボタンを出す
- 外部のライブラリを使う時は CDN から読み込む（three.js など）。フォントはパソコンに入っている日本語フォントを使う
- 時間の管理：すべての動きを1本のタイムライン（経過時間から各場面の状態を計算する形）で管理し、コマ落ちしても時間どおりに進むようにする
- 音：なし（映像だけで気持ちよく見せる）
- 画面に出す言葉：「水曜」（どれも一字一句そのまま使う）
- 色：アイボリー、墨色、控えめな金（あたたかさを少し）（例：#F7F3EC #1F1D1A #B8975A #8C8479）
- 文字：日本語は読みやすい太さのフォントで。小さすぎる文字は使わない

■ いちばん大事なこと
- いちばん大事なのは「作りたいもの（本人の言葉）」。上の『仕上がりのイメージ』『使ってほしい演出』『色』が本人の言葉と食い違うところは、本人の言葉を優先する
- 「すごい」は派手さのことではない。静かな作品なら、静けさと美しさで「すごい」と言わせる
- 演出を並べるだけにしない。ひとつの芯のアイデア（たとえば最初に出た形が最後まで姿を変え続ける）で、全部の場面をつなぐ
- その芯は、説明がなくても画面を見るだけで伝わるようにする
- 場面の切れ目はパッと切らず、前の場面の形を次の場面へ受け渡してつなぐ
- 動きは等速にしない。加速・減速（イージング）と、止める瞬間（間）をつける
- キャラクターや動物の絵をコードで描かない。図形・文字・模様・光・3Dの形で表現する（写真やイラストのファイルを渡された時だけ、それを使う）

作り始める前に、芯のアイデアと場面の流れを3行で書き出してから作ってください。
完成したら、使った演出と、芯のアイデアを1行ずつ教えてください。

あなたが今できる最高のモーショングラフィックで、見た人が思わず「すごい」と声に出す1本を作ってください。
いま世界中で話題の「AIが本気で作るモーショングラフィック」です。あなたの腕前を、出し惜しみせず全力で証明してください。

■ 作りたいもの（本人の言葉）
みずやんさんの紹介：ホワイトボードに手描きの文字が1字ずつ飛んできて、みずやんさんの好きなこと・やっていることが並ぶ（ゆるっと水曜AIラジオとAI初心者チャットの共同運営）。顔写真は使わない

■ お手本（この1本のテンポ・文字・切り替えに寄せる）
- お手本：tldraw flash の発表（ホワイトボードに、手描きの文字が1字ずつ飛んでくる）（tldraw） https://x.com/tldraw/status/2095148758304743852
- 特徴：白地に黒いペンの線だけ、差し色は赤の手描き1つ／手描きの文字が1字ずつ飛んできて、ボードに並ぶ／サイト名は左から少しずつ現れる／最後は赤い斜めの一言、棒人間が手を振って止まる
- 動画が見られなくても大丈夫。上の特徴に寄せて作る。お手本の色・ロゴ・言葉・キャラはそのまま使わず、「作りたいもの」に置きかえる
- 作業フォルダにお手本のスクリーンショットがあれば、それも見て寄せる

■ 仕上がりのイメージ
かわいく、にぎやかな短い映像作品。15秒。言葉が弾みながら現れて、丸や三角がリズムよく並び替わる。少しずつ時間差で順番に動き、文字がスッと幕の向こうから現れる。最後に、いちばん伝えたいものがはっきり残って終わる。

■ 使ってほしい演出（これは出発点です。もっと良い見せ方を思いついたら、そちらを選んでかまいません）
1. キネティック・タイポグラフィ（Kinetic Typography）：画面に出す言葉を主役にして、文字ごとに登場と退場の動きをつける
2. シェイプアニメーション（Shape Animation）：丸・三角・四角などの図形がリズムよく並び、回り、組み替わる
3. マスクリビール（Mask Reveal）：マスク（見えない窓）で文字や形を少しずつ見せる
4. スタッガー（Stagger）：複数の要素をほんの少しずつ時間差で動かし、波のような流れを作る
5. ホールド（Hold）：見せたい瞬間は動きをピタッと止めて、一拍しっかり見せる
6. ライトスイープ（Light Sweep）：光の筋が表面を横切ってきらっと輝く。光のにじみ（グロー）も少し

■ 条件
- 長さ：15秒　画面：横長 16:9（1920×1080）
- 形式：HTMLファイル1枚（HTML・CSS・JavaScriptをすべてこの中にまとめる）。今いる作業フォルダに motion.html として保存し（同じ名前があれば motion-2.html のように番号をつける）、できたらブラウザで開く（Mac なら open コマンド）
- 再生：開いたらすぐ再生し、最後まで行ったら「もう一度見る」ボタンを出す
- 外部のライブラリを使う時は CDN から読み込む（three.js など）。フォントはパソコンに入っている日本語フォントを使う
- 時間の管理：すべての動きを1本のタイムライン（経過時間から各場面の状態を計算する形）で管理し、コマ落ちしても時間どおりに進むようにする
- 音：なし（映像だけで気持ちよく見せる）
- 画面に出す言葉：上の「作りたいもの」から、短くて強い言葉をあなたが選ぶ（多くても1場面1〜2語）
- 色：ミルクのような白、ピーチピンク、はちみつ色、ミントを少し（にぎやかさを少し）（例：#FFF6EE #FF8FA3 #FFC75F #7FD8BE #4A4458）
- 文字：日本語は読みやすい太さのフォントで。小さすぎる文字は使わない

■ いちばん大事なこと
- いちばん大事なのは「作りたいもの（本人の言葉）」。上の『仕上がりのイメージ』『使ってほしい演出』『色』が本人の言葉と食い違うところは、本人の言葉を優先する
- 演出を並べるだけにしない。ひとつの芯のアイデア（たとえば最初に出た形が最後まで姿を変え続ける）で、全部の場面をつなぐ
- その芯は、説明がなくても画面を見るだけで伝わるようにする
- 場面の切れ目はパッと切らず、前の場面の形を次の場面へ受け渡してつなぐ
- 動きは等速にしない。加速・減速（イージング）と、止める瞬間（間）をつける
- キャラクターや動物の絵をコードで描かない。図形・文字・模様・光・3Dの形で表現する（写真やイラストのファイルを渡された時だけ、それを使う）

作り始める前に、芯のアイデアと場面の流れを3行で書き出してから作ってください。
完成したら、使った演出と、芯のアイデアを1行ずつ教えてください。

あなたが今できる最高のモーショングラフィックで、見た人が思わず「すごい」と声に出す1本を作ってください。
いま世界中で話題の「AIが本気で作るモーショングラフィック」です。あなたの腕前を、出し惜しみせず全力で証明してください。

■ 作りたいもの（本人の言葉）
ライブ配信の待機画面ループ。横長 16:9・30秒・切れ目なくループする。黒地にひらがな・カタカナ・記号のマス目が雲のように流れ、真ん中の「まもなく はじまります」だけは動かない。音なし（配信側のBGMを邪魔しない）

■ お手本（この1本のテンポ・文字・切り替えに寄せる）
- お手本：jina-ocr-v1 の発表（英字と漢字のマス目が、雲のように流れる）（Jina AI） https://x.com/JinaAI_/status/2100617174985638364
- 特徴：黒地に、灰色の小さな英字・記号・漢字のマス目／文字のまとまりが雲のように形を変えながら流れる／真ん中の白い太字の名前は、最後まで動かない／カットなし・音なしで、同じ調子のまま流れ続ける
- 動画が見られなくても大丈夫。上の特徴に寄せて作る。お手本の色・ロゴ・言葉・キャラはそのまま使わず、「作りたいもの」に置きかえる
- 作業フォルダにお手本のスクリーンショットがあれば、それも見て寄せる

■ 仕上がりのイメージ
やさしく、近未来の動くポスター。30秒。模様が波のように広がって、一本の線が走って形を描く。呼吸するようにゆっくりふくらんで、手前と奥が違う速さで流れる。「まもなく はじまります」がいちばん長く見えるようにして、最初へなめらかにつながるループにする。

■ 使ってほしい演出（これは出発点です。もっと良い見せ方を思いついたら、そちらを選んでかまいません）
1. ジェネラティブアート（Generative Art）：模様（和柄・タイル・グリッド）がコードで生まれ、波のように広がってうねる
2. ラインアニメーション（Line Animation）：線が描かれていく動きで、図・ロゴ・文字の輪郭を見せる
3. パララックス（Parallax）：手前・中・奥の層を違う速さで動かして奥行きを出す
4. ブリージング（Breathing Animation）：光や形が、呼吸のようにゆっくりふくらんでしぼむ（ループ作品なら、切れ目なくつなぐ）
5. ホールド（Hold）：見せたい瞬間は動きをピタッと止めて、一拍しっかり見せる
6. テクスチャオーバーレイ（Texture Overlay）：紙の繊維やうっすらした粒子を画面にのせて、手ざわりを出す

■ 条件
- 長さ：30秒　画面：横長 16:9（1920×1080）
- 形式：HTMLファイル1枚（HTML・CSS・JavaScriptをすべてこの中にまとめる）。今いる作業フォルダに motion.html として保存し（同じ名前があれば motion-2.html のように番号をつける）、できたらブラウザで開く（Mac なら open コマンド）
- 再生：開いたらすぐ再生し、最後まで行ったら切れ目なく最初に戻って、ずっとループする
- 外部のライブラリを使う時は CDN から読み込む（three.js など）。フォントはパソコンに入っている日本語フォントを使う
- 時間の管理：すべての動きを1本のタイムライン（経過時間から各場面の状態を計算する形）で管理し、コマ落ちしても時間どおりに進むようにする
- 音：なし（映像だけで気持ちよく見せる）
- 画面に出す言葉：「まもなく はじまります」（どれも一字一句そのまま使う）
- 色：生成り、セージグリーン、淡い水色（近未来っぽさを少し）（例：#F3F5EF #A8C5B5 #6E9FB5 #F2E3C4 #3E4A46）
- 文字：日本語は読みやすい太さのフォントで。小さすぎる文字は使わない

■ いちばん大事なこと
- いちばん大事なのは「作りたいもの（本人の言葉）」。上の『仕上がりのイメージ』『使ってほしい演出』『色』が本人の言葉と食い違うところは、本人の言葉を優先する
- 「すごい」は派手さのことではない。静かな作品なら、静けさと美しさで「すごい」と言わせる
- 演出を並べるだけにしない。ひとつの芯のアイデア（たとえば最初に出た形が最後まで姿を変え続ける）で、全部の場面をつなぐ
- その芯は、説明がなくても画面を見るだけで伝わるようにする
- 場面の切れ目はパッと切らず、前の場面の形を次の場面へ受け渡してつなぐ
- 動きは等速にしない。加速・減速（イージング）と、止める瞬間（間）をつける
- キャラクターや動物の絵をコードで描かない。図形・文字・模様・光・3Dの形で表現する（写真やイラストのファイルを渡された時だけ、それを使う）

作り始める前に、芯のアイデアと場面の流れを3行で書き出してから作ってください。
完成したら、使った演出と、芯のアイデアを1行ずつ教えてください。

あなたが今できる最高のモーショングラフィックで、見た人が思わず「すごい」と声に出す1本を作ってください。
いま世界中で話題の「AIが本気で作るモーショングラフィック」です。あなたの腕前を、出し惜しみせず全力で証明してください。

■ 作りたいもの（本人の言葉）
質感の違う地平線の弧が次々に入れ替わり、同じ弧の上に「まだ」「見たことのない」「景色へ」が1語ずつ出て、最後に「おけもん」で締める

■ お手本（この1本のテンポ・文字・切り替えに寄せる）
- お手本：Anthropic「Claude Opus 5.5」発表映像（地平線の弧と質感が次々に入れ替わる）（Anthropic（@claudeai）） https://x.com/claudeai/status/2102435511222890900
- 特徴：どの場面も同じ地平線の弧／質感だけが約0.5秒ごとに入れ替わる／弧の上に細い明朝の言葉が1語ずつ／暗い地平線の光で始まり、同じ光で終わる
- 動画が見られなくても大丈夫。上の特徴に寄せて作る。お手本の色・ロゴ・言葉・キャラはそのまま使わず、「作りたいもの」に置きかえる
- 作業フォルダにお手本のスクリーンショットがあれば、それも見て寄せる

■ 仕上がりのイメージ
上品に、神秘的な短い映像作品。15秒。一本の線が走って形を描き、ひとつの形が次々に変身する。大事なところでピタッと止まり、前の場面の形が、そのまま次の場面になる。最後に「おけもん」がはっきり残って終わる。

■ 使ってほしい演出（これは出発点です。もっと良い見せ方を思いついたら、そちらを選んでかまいません）
1. ラインアニメーション（Line Animation）：線が描かれていく動きで、図・ロゴ・文字の輪郭を見せる
2. モーフィング（Morphing）：ひとつの形が別の形へなめらかに変身していく（丸→ロゴ→文字、など）
3. マッチカット（Match Cut）：場面の切り替えでカットせず、前の場面の形を次の場面の部品へ受け渡す
4. ホールド（Hold）：見せたい瞬間は動きをピタッと止めて、一拍しっかり見せる
5. ブリージング（Breathing Animation）：光や形が、呼吸のようにゆっくりふくらんでしぼむ（ループ作品なら、切れ目なくつなぐ）
6. ライトスイープ（Light Sweep）：光の筋が表面を横切ってきらっと輝く。光のにじみ（グロー）も少し
7. アンビエントサウンド（Ambient Sound Design）：BGMは静かなパッドやオルゴールのような音にして、効果音は大事な瞬間だけ小さく鳴らす

■ 条件
- 長さ：15秒　画面：横長 16:9（1920×1080）
- 形式：HTMLファイル1枚（HTML・CSS・JavaScriptをすべてこの中にまとめる）。今いる作業フォルダに motion.html として保存し（同じ名前があれば motion-2.html のように番号をつける）、できたらブラウザで開く（Mac なら open コマンド）
- 再生：最後まで行ったら「もう一度見る」ボタンを出す
- 外部のライブラリを使う時は CDN から読み込む（three.js など）。フォントはパソコンに入っている日本語フォントを使う
- 時間の管理：すべての動きを1本のタイムライン（経過時間から各場面の状態を計算する形）で管理し、コマ落ちしても時間どおりに進むようにする
- 音：Web Audio API で、BGM（テンポ 83BPM 前後の静かな曲）と効果音をコードだけで作る。ブラウザの決まりで最初は音が出ないので、最初の画面に大きな「▶ 音つきで再生」ボタンを置き、押したら映像と音を同時に始める。大事な動きと効果音は同じ瞬間に（効果音は控えめに）
- 画面に出す言葉：「まだ」「見たことのない」「景色へ」「おけもん」（どれも一字一句そのまま使う）
- 色：アイボリー、墨色、控えめな金（神秘的な空気を少し）（例：#F7F3EC #1F1D1A #B8975A #8C8479）
- 文字：日本語は読みやすい太さのフォントで。小さすぎる文字は使わない

■ いちばん大事なこと
- いちばん大事なのは「作りたいもの（本人の言葉）」。上の『仕上がりのイメージ』『使ってほしい演出』『色』が本人の言葉と食い違うところは、本人の言葉を優先する
- 「すごい」は派手さのことではない。静かな作品なら、静けさと美しさで「すごい」と言わせる
- 演出を並べるだけにしない。ひとつの芯のアイデア（たとえば最初に出た形が最後まで姿を変え続ける）で、全部の場面をつなぐ
- その芯は、説明がなくても画面を見るだけで伝わるようにする
- 場面の切れ目はパッと切らず、前の場面の形を次の場面へ受け渡してつなぐ
- 動きは等速にしない。加速・減速（イージング）と、止める瞬間（間）をつける
- キャラクターや動物の絵をコードで描かない。図形・文字・模様・光・3Dの形で表現する（写真やイラストのファイルを渡された時だけ、それを使う）

作り始める前に、芯のアイデアと場面の流れを3行で書き出してから作ってください。
完成したら、使った演出と、芯のアイデアを1行ずつ教えてください。

あなたが今できる最高のモーショングラフィックで、見た人が思わず「すごい」と声に出す1本を作ってください。
いま世界中で話題の「AIが本気で作るモーショングラフィック」です。あなたの腕前を、出し惜しみせず全力で証明してください。

■ 作りたいもの（本人の言葉）
「なぜ私はAIと遊ぶのか」を、似た形でつながっていく写真と、やさしい語りで見せる40秒

■ お手本（この1本のテンポ・文字・切り替えに寄せる）
- お手本：AIの映画づくりの道具で作った短編「Spectrum」（ARQ Studios × CapCut） https://x.com/starks_arq/status/2095531141105340890
- 特徴：黒の中の小さな光がはじけて始まる／似た形でつなぐ（川の筋→血管→指紋→年輪）／語りの声と1行字幕で進む・1カット約1.7秒／拍のない静かな音楽、最後は黒地に細い題名
- 動画が見られなくても大丈夫。上の特徴に寄せて作る。お手本の色・ロゴ・言葉・キャラはそのまま使わず、「作りたいもの」に置きかえる
- 作業フォルダにお手本のスクリーンショットがあれば、それも見て寄せる

■ 仕上がりのイメージ
少し切なく、神秘的な短い映像作品。40秒。光の粒が集まっては弾けて、色がインクのようににじみ広がる。大事なところでピタッと止まり、前の場面の形が、そのまま次の場面になる。最後に「なぜ私はAIと遊ぶのか」がはっきり残って終わる。

■ 使ってほしい演出（これは出発点です。もっと良い見せ方を思いついたら、そちらを選んでかまいません）
1. パーティクル（Particle Animation）：小さな粒（光・紙吹雪・星）が集まって形になり、また散る
2. リキッドモーション（Liquid Motion）：インクがにじむ、しずくが落ちて広がる、液体のように形がとろける
3. マッチカット（Match Cut）：場面の切り替えでカットせず、前の場面の形を次の場面の部品へ受け渡す
4. ホールド（Hold）：見せたい瞬間は動きをピタッと止めて、一拍しっかり見せる
5. ブリージング（Breathing Animation）：光や形が、呼吸のようにゆっくりふくらんでしぼむ（ループ作品なら、切れ目なくつなぐ）
6. テクスチャオーバーレイ（Texture Overlay）：紙の繊維やうっすらした粒子を画面にのせて、手ざわりを出す
7. アンビエントサウンド（Ambient Sound Design）：BGMは静かなパッドやオルゴールのような音にして、効果音は大事な瞬間だけ小さく鳴らす

■ 条件
- 長さ：40秒　画面：横長 16:9（1920×1080）
- 形式：HTMLファイル1枚（HTML・CSS・JavaScriptをすべてこの中にまとめる）。今いる作業フォルダに motion.html として保存し（同じ名前があれば motion-2.html のように番号をつける）、できたらブラウザで開く（Mac なら open コマンド）
- 再生：最後まで行ったら「もう一度見る」ボタンを出す
- 外部のライブラリを使う時は CDN から読み込む（three.js など）。フォントはパソコンに入っている日本語フォントを使う
- 時間の管理：すべての動きを1本のタイムライン（経過時間から各場面の状態を計算する形）で管理し、コマ落ちしても時間どおりに進むようにする
- 音：Web Audio API で、BGM（テンポ 87BPM 前後の静かな曲）と効果音をコードだけで作る。ブラウザの決まりで最初は音が出ないので、最初の画面に大きな「▶ 音つきで再生」ボタンを置き、押したら映像と音を同時に始める。大事な動きと効果音は同じ瞬間に（効果音は控えめに）
- 画面に出す言葉：「なぜ私はAIと遊ぶのか」（どれも一字一句そのまま使う）
- 色：夕焼けのオレンジから、夜の紫へのグラデーション（神秘的な空気を少し）（例：#2B1B3D #FF7E5F #FEB47B #F7E6D4）
- 文字：日本語は読みやすい太さのフォントで。小さすぎる文字は使わない

■ いちばん大事なこと
- いちばん大事なのは「作りたいもの（本人の言葉）」。上の『仕上がりのイメージ』『使ってほしい演出』『色』が本人の言葉と食い違うところは、本人の言葉を優先する
- 「すごい」は派手さのことではない。静かな作品なら、静けさと美しさで「すごい」と言わせる
- 演出を並べるだけにしない。ひとつの芯のアイデア（たとえば最初に出た形が最後まで姿を変え続ける）で、全部の場面をつなぐ
- その芯は、説明がなくても画面を見るだけで伝わるようにする
- 場面の切れ目はパッと切らず、前の場面の形を次の場面へ受け渡してつなぐ
- 動きは等速にしない。加速・減速（イージング）と、止める瞬間（間）をつける
- キャラクターや動物の絵をコードで描かない。図形・文字・模様・光・3Dの形で表現する（写真やイラストのファイルを渡された時だけ、それを使う）

作り始める前に、芯のアイデアと場面の流れを3行で書き出してから作ってください。
完成したら、使った演出と、芯のアイデアを1行ずつ教えてください。

あなたが今できる最高のモーショングラフィックで、見た人が思わず「すごい」と声に出す1本を作ってください。
いま世界中で話題の「AIが本気で作るモーショングラフィック」です。あなたの腕前を、出し惜しみせず全力で証明してください。

■ 作りたいもの（本人の言葉）
架空の子ども絵画教室の生徒募集：真ん中のカードに「えのぐ」「クレヨン」「ねんど」と打たれるたび、まわりの虹色の枠が脈打って色が替わり、最後に虹の柱と器が組み合わさって教室の名前

■ お手本（この1本のテンポ・文字・切り替えに寄せる）
- お手本：Lottielab「Burp」の発表（虹色の枠が脈打ち、虹の柱がロゴになる）（Lottielab） https://x.com/LottielabHQ/status/1970480133854171408
- 特徴：白地に、虹色（赤・橙・黄・緑・青・紫）のしま模様だけが強い色／入力欄のまわりで、虹色の四角い枠が脈打つようにふくらむ／作例が約0.6秒ずつ、音に合わせて切り替わる／最後は黒い弧の器と虹の柱が組み合わさってロゴになる
- 動画が見られなくても大丈夫。上の特徴に寄せて作る。お手本の色・ロゴ・言葉・キャラはそのまま使わず、「作りたいもの」に置きかえる
- 作業フォルダにお手本のスクリーンショットがあれば、それも見て寄せる

■ 仕上がりのイメージ
にぎやかに、元気いっぱいの告知。15秒。丸や三角がリズムよく並び替わり、アプリの画面が動いて使い方を見せる。呼吸するようにゆっくりふくらんで、色の面がシャッと画面を入れ替える。最後にタイトルと日付がはっきり読める形で止まる。

■ 使ってほしい演出（これは出発点です。もっと良い見せ方を思いついたら、そちらを選んでかまいません）
1. シェイプアニメーション（Shape Animation）：丸・三角・四角などの図形がリズムよく並び、回り、組み替わる
2. UIアニメーション（UI Animation）：架空のスマホやPCの画面を作り、ボタンやカードが動いて操作の流れを見せる
3. カラーワイプ（Color Wipe）：大きな色の面が画面を横切り、背景の色ごと場面を切り替える
4. ブリージング（Breathing Animation）：光や形が、呼吸のようにゆっくりふくらんでしぼむ（ループ作品なら、切れ目なくつなぐ）
5. オーバーシュート（Overshoot）：目標の位置を少し行き過ぎてから戻る、バネの動き
6. ビートシンク（Beat Sync）：テンポを1つ決め、場面の切り替えや大事な動きを拍に合わせる。効果音も動きと同じ瞬間に鳴らす

■ 条件
- 長さ：15秒　画面：横長 16:9（1920×1080）
- 形式：HTMLファイル1枚（HTML・CSS・JavaScriptをすべてこの中にまとめる）。今いる作業フォルダに motion.html として保存し（同じ名前があれば motion-2.html のように番号をつける）、できたらブラウザで開く（Mac なら open コマンド）
- 再生：最後まで行ったら「もう一度見る」ボタンを出す
- 外部のライブラリを使う時は CDN から読み込む（three.js など）。フォントはパソコンに入っている日本語フォントを使う
- 時間の管理：すべての動きを1本のタイムライン（経過時間から各場面の状態を計算する形）で管理し、コマ落ちしても時間どおりに進むようにする
- 音：Web Audio API で、BGM（テンポ 131BPM 前後）と効果音をコードだけで作る。ブラウザの決まりで最初は音が出ないので、最初の画面に大きな「▶ 音つきで再生」ボタンを置き、押したら映像と音を同時に始める。大事な動きと効果音は同じ瞬間に
- 画面に出す言葉：「えのぐ」「クレヨン」「ねんど」（どれも一字一句そのまま使う）
- 色：白地に、ビビッドな赤・黄・ミントをはっきり（元気さを少し）（例：#FFFFFF #FF3E6C #FFD23F #3BCEAC #2D2D2D）
- 文字：日本語は読みやすい太さのフォントで。小さすぎる文字は使わない

■ いちばん大事なこと
- いちばん大事なのは「作りたいもの（本人の言葉）」。上の『仕上がりのイメージ』『使ってほしい演出』『色』が本人の言葉と食い違うところは、本人の言葉を優先する
- 演出を並べるだけにしない。ひとつの芯のアイデア（たとえば最初に出た形が最後まで姿を変え続ける）で、全部の場面をつなぐ
- その芯は、説明がなくても画面を見るだけで伝わるようにする
- 場面の切れ目はパッと切らず、前の場面の形を次の場面へ受け渡してつなぐ
- 動きは等速にしない。加速・減速（イージング）と、止める瞬間（間）をつける
- キャラクターや動物の絵をコードで描かない。図形・文字・模様・光・3Dの形で表現する（写真やイラストのファイルを渡された時だけ、それを使う）

作り始める前に、芯のアイデアと場面の流れを3行で書き出してから作ってください。
完成したら、使った演出と、芯のアイデアを1行ずつ教えてください。

あなたが今できる最高のモーショングラフィックで、見た人が思わず「すごい」と声に出す1本を作ってください。
いま世界中で話題の「AIが本気で作るモーショングラフィック」です。あなたの腕前を、出し惜しみせず全力で証明してください。

■ 作りたいもの（本人の言葉）
モーションレシピ自身の紹介デモ。ことばを1行書くと、アプリが演出を選んで、Claude Code に貼れる注文書になるまでを、画面の動きで見せる

■ お手本（この1本のテンポ・文字・切り替えに寄せる）
- お手本：Claude Code と Remotion で、デモ動画のモーションを全部作った（Tim Kochjar） https://x.com/timkochjar/status/2092278549679886507
- 特徴：小さな字が1語ずつ出て、決めの語だけ大きく青い下地／傾けたアプリ画面にカメラが寄り、カーソルで操作／カットせず、ぼかし＋ズームでつなぐ／低音の電子音楽に、ヒュッ・ポッの効果音
- 動画が見られなくても大丈夫。上の特徴に寄せて作る。お手本の色・ロゴ・言葉・キャラはそのまま使わず、「作りたいもの」に置きかえる
- 作業フォルダにお手本のスクリーンショットがあれば、それも見て寄せる

■ 仕上がりのイメージ
やさしく、近未来の短い映像作品。15秒。アプリの画面が動いて使い方を見せ、言葉が弾みながら現れる。少しずつ時間差で順番に動き、カメラが静かに寄っていく。最後に「ことばを1行、Opus 5.5 への注文書に」がはっきり残って終わる。

■ 使ってほしい演出（これは出発点です。もっと良い見せ方を思いついたら、そちらを選んでかまいません）
1. UIアニメーション（UI Animation）：架空のスマホやPCの画面を作り、ボタンやカードが動いて操作の流れを見せる
2. キネティック・タイポグラフィ（Kinetic Typography）：画面に出す言葉を主役にして、文字ごとに登場と退場の動きをつける
3. プッシュイン（Push-in）：カメラがゆっくり寄っていく（途中で止めず、なめらかに）
4. スタッガー（Stagger）：複数の要素をほんの少しずつ時間差で動かし、波のような流れを作る
5. ブリージング（Breathing Animation）：光や形が、呼吸のようにゆっくりふくらんでしぼむ（ループ作品なら、切れ目なくつなぐ）
6. ライトスイープ（Light Sweep）：光の筋が表面を横切ってきらっと輝く。光のにじみ（グロー）も少し
7. アンビエントサウンド（Ambient Sound Design）：BGMは静かなパッドやオルゴールのような音にして、効果音は大事な瞬間だけ小さく鳴らす

■ 条件
- 長さ：15秒　画面：横長 16:9（1920×1080）
- 形式：HTMLファイル1枚（HTML・CSS・JavaScriptをすべてこの中にまとめる）。今いる作業フォルダに motion.html として保存し（同じ名前があれば motion-2.html のように番号をつける）、できたらブラウザで開く（Mac なら open コマンド）
- 再生：最後まで行ったら「もう一度見る」ボタンを出す
- 外部のライブラリを使う時は CDN から読み込む（three.js など）。フォントはパソコンに入っている日本語フォントを使う
- 時間の管理：すべての動きを1本のタイムライン（経過時間から各場面の状態を計算する形）で管理し、コマ落ちしても時間どおりに進むようにする
- 音：Web Audio API で、BGM（テンポ 90BPM 前後の静かな曲）と効果音をコードだけで作る。ブラウザの決まりで最初は音が出ないので、最初の画面に大きな「▶ 音つきで再生」ボタンを置き、押したら映像と音を同時に始める。大事な動きと効果音は同じ瞬間に（効果音は控えめに）
- 画面に出す言葉：「ことばを1行、Opus 5.5 への注文書に」（どれも一字一句そのまま使う）
- 色：生成り、セージグリーン、淡い水色（近未来っぽさを少し）（例：#F3F5EF #A8C5B5 #6E9FB5 #F2E3C4 #3E4A46）
- 文字：日本語は読みやすい太さのフォントで。小さすぎる文字は使わない

■ いちばん大事なこと
- いちばん大事なのは「作りたいもの（本人の言葉）」。上の『仕上がりのイメージ』『使ってほしい演出』『色』が本人の言葉と食い違うところは、本人の言葉を優先する
- 「すごい」は派手さのことではない。静かな作品なら、静けさと美しさで「すごい」と言わせる
- 演出を並べるだけにしない。ひとつの芯のアイデア（たとえば最初に出た形が最後まで姿を変え続ける）で、全部の場面をつなぐ
- その芯は、説明がなくても画面を見るだけで伝わるようにする
- 場面の切れ目はパッと切らず、前の場面の形を次の場面へ受け渡してつなぐ
- 動きは等速にしない。加速・減速（イージング）と、止める瞬間（間）をつける
- キャラクターや動物の絵をコードで描かない。図形・文字・模様・光・3Dの形で表現する（写真やイラストのファイルを渡された時だけ、それを使う）

作り始める前に、芯のアイデアと場面の流れを3行で書き出してから作ってください。
完成したら、使った演出と、芯のアイデアを1行ずつ教えてください。```

注文書は「HTMLファイル1枚 motion.html」「音は Web Audio でコードだけ」だが、棚には動画が要るので HyperFrames で作って MP4 に書き出した（あおいからの指示）。音は「おけもんの曲 → なければフリー音源」の指示で、おけもんの曲を敷き、効果音だけコードで作った。長さ・画面・色・言葉・芯・1本のタイムラインは注文書のまま。

注文書のお手本の特徴は投稿文から書いた仮のもので、実物（95秒）は「白に近い地と、青い絹のようなひだの背景」「小さな字が1語ずつ出て、新しい語だけ青く、最後に行ごと大きくなって薄い青の下地」「傾けたアプリの画面にカメラが寄り、入力欄に文字が打たれ、カーソルで押す」「表の行が Thinking… から順に埋まる（時間差）」「つなぎはぼかし＋ズーム、動きの速い所は流れるぼけ」だった（手元の mp4 を1秒1コマと、0.1秒刻みの連続コマで確かめた）。

## 芯（作る前に書いた3行）

1. 芯：画面の主役は「1行」。入力欄で打った1行に淡い水色の帯がかかり、その帯が「レシピを作る」で7つの演出ボタンに分かれ、ボタンから注文書の行へ飛んで行を書き、「コピーする」でまた1本の帯に戻って「ことばを1行、Opus 5.5 への注文書に」を乗せて終わる。帯は最初から最後まで一度も消えない
2. 流れ：傾いたアプリがぼかしの奥から現れる → 入力欄へ寄りながら「モーションレシピ自身の紹介デモ。」を打つ → 帯がかかる → カーソルで「レシピを作る」→ 帯が下へ流れて7つの演出に時間差で分かれる → 正式名称が注文書の自分の行へ飛び、行が上から順に埋まる → 「コピーする」→ 行がたたまれて1本の帯に戻り、カメラがアプリを突き抜ける → 帯の上に言葉が1語ずつ弾んで現れ、大きくなり、光が1回走って止まる
3. 拍：おけもんの曲「Little Stars in the Morning」（89.1 BPM）の拍に合わせる。「レシピを作る」4.89秒・演出のボタンが並び始める6.25秒・注文書が埋まり始める8.27秒（ベースが入る）・「コピーする」10.96秒（曲が満ちる頭）・最後の言葉11.64〜12.65秒・大きくなる12.99秒・光13.67秒・止まる14.34秒

（評価役の指摘のあとの版では、最初に作品集から「これをお手本に作る」を押す2.2秒が入り、拍の位置は「レシピを作る」5.57秒・演出が並び始める6.91秒・注文書が書き始める7.45秒・「コピーする」10.96秒に変わった）

芯を画面だけで伝えるためにしたこと：

- 帯の色（セージから水色へのグラデーション）は1種類だけ。打った1行の下地・演出ボタンへ分かれるかけら・注文書の行を書く下地・たたまれた1本・最後の言葉の下地が、全部同じ帯
- 最初の1行と最後の1行が同じ形（1行の文字＋その下地）。途中で7つ→23行に増えて、また1本に戻る。評価役の指摘のあと、最後の下地は決めの語「注文書」だけに敷いた（1本の帯が「注文書」になる）
- 出てきた演出が、その場で画面に起きている：「ゆっくり寄っていく（プッシュイン）」の間ずっとカメラが寄り、「少しずつ時間差で（スタッガー）」はボタン自身が時間差で並び、「きらっと光が走る（ライトスイープ）」はボタンの上を光が走り、「呼吸するように動く（ブリージング）」は背景の光が8拍でふくらむ
- 打った1行とお手本の組み合わせは、実際のアプリ（手元の app/）で試して、この7つの演出と同じ注文書が出ることを確かめてから使った（「。」まで打つと7つがそろう。「。」なしだとライトスイープの代わりにグリッチが出る）

## お手本から借りた物・おけもんの物

| 借りた物（お手本） | おけもんの物 |
|---|---|
| 白に近い地と、絹のひだのような背景 | 生成りの地に、セージと淡い水色のガラスの帯（注文書の色）。光は8拍で呼吸する |
| 傾けたアプリの画面にカメラが寄る・カーソルで押す・入力欄に文字が打たれる | 中身はモーションレシピの実物（入力欄・お手本の札・「レシピを作る」・演出のボタン・注文書・「コピーする」）を HTML で組み直した物。スクリーンショットではないので文字がくっきり |
| 表の行が時間差で埋まる（Thinking… → 数字） | 演出のボタンが時間差で並び、正式名称が注文書の自分の行へ飛んで、行が上から順に書かれる |
| 小さな字が1語ずつ、新しい語だけ青い → 決めの語だけ大きく、薄い青の下地 | 「ことばを」「1行、」「Opus 5.5 への」「注文書に」。決めの語「注文書」だけが1.45倍になり、ずっと画面にいた帯がその下地になる |
| つなぎはカットせず、ぼかし＋ズーム | カメラは最初から最後まで寄り続け、最後はアプリを突き抜けて言葉だけ残る |
| 低音の電子音楽に、ヒュッ・ポッ | おけもんの曲（やさしい朝のインスト）に、キーの音・カチッ・ポッ・ヒュッ・きらっ・鈴をコードで重ねた |

借りなかった物：お手本の製品名・ロゴ・画面・英語の言葉・青い色。

## 画面の流れ（15秒）

| 秒 | 場面 | 何が起きるか |
|---|---|---|
| 0.0–0.8 | 作品集 | 傾いたアプリの画面が、ぼかしの奥から寄ってくる。「おけもんが作った」の棚に作品が3つ並ぶ（奥の光とガラスの帯は呼吸している） |
| 0.84 | 世界のお手本 | カーソルが「世界のお手本」を押す。作品が消え、お手本のカードが時間差で並ぶ |
| 1.52 | これをお手本に作る | Tim Kochjar さんのカードの「これをお手本に作る」を押す（カチッ・ポッ） |
| 1.55–2.19 | 札が飛ぶ | お手本の札が、カードから入力欄の上へ弧を描いて飛び、収まる（ヒュッ・ポッ）。入力欄が選ばれて枠が朱に |
| 2.35–3.97 | 1行を打つ | 「モーションレシピ自身の紹介デモ。」を1文字ずつ（キーの音）。カメラは寄り続け、傾きが少しずつ戻る |
| 4.22 | 帯 | 打った1行に淡い水色の帯がかかる（きらっ） |
| 4.5–5.57 | 押す | カーソルが「レシピを作る」へ。5.57秒で押す（カチッ・ポッ・低いドン） |
| 5.6–6.6 | 流れる | 結果のカードが下から上がり、帯が1行から離れて下へ流れ、演出の欄で1本の線になる（ヒュッ）。注文書の空の枠は見せない |
| 6.6–7.4 | 7つの演出 | カメラが演出の欄に寄ったまま、線が7つに分かれて、時間差で演出のボタン（名前と正式名称）になる（鈴が上がっていく） |
| 7.45–8.8 | 注文書 | ボタンがそろった瞬間から、注文書が上の行から順に帯で書かれる。窓は書いた所まで伸び、あふれたらスクロール。行はアプリと同じく折り返す |
| 7.59–8.2 | 光 | 光の筋がボタンの上を走る |
| 8.6–9.9 | 正式名称が落ちる | 演出の正式名称が1つずつ、見出しの行の下をくぐって注文書の「1.〜7.」の行へまっすぐ落ち、その行を書き始める |
| 9.95–10.96 | コピー | カーソルが「コピーする」へ。10.96秒で押す |
| 11.0–11.45 | 1本に戻る | 見えている行が真ん中へたたまれ、1本の帯になる。カメラの傾きがゼロに |
| 11.45–12.1 | 突き抜ける | アプリがぼけながら手前へ飛び去り、帯だけが残って細い線になる |
| 11.6–12.9 | 言葉 | 線の上に「ことばを」「1行、」「Opus 5.5 への」「注文書に」が1語ずつ弾んで現れる（新しい語だけ水色） |
| 13.0–13.7 | 決めの語 | 言葉が大きくなり、「注文書」だけがさらに大きくなる。線が「注文書」の下に集まって下地になる。下にアプリの名前 |
| 13.7–14.3 | 光 | 光が1回だけ「注文書」の上を走る |
| 14.3–15.0 | 間 | 言葉とカメラは止まる。曲は消えていく |

## 使った演出（1行ずつ）

- UIアニメーション：アプリの実物を HTML で組み直し、タブの切り替え・お手本のカードを押す・札が入力欄へ飛ぶ・1文字ずつの入力・ボタンの押し込み・カードが上がる・ボタンが並ぶ・注文書が書かれて伸びる・コピー、の操作の流れを見せた
- プッシュイン：カメラは0秒から11.45秒まで一度も止まらずに寄り続け（倍率0.64→1.05、傾き14°→0°）、最後はアプリを突き抜ける
- スタッガー：お手本のカード3枚（0.07秒おき）、演出のボタン7つ（0.085秒おき）、注文書の行（0.07秒おき）、正式名称が落ちる（0.1秒おき）、行がたたまれる（外側から）
- キネティック・タイポグラフィ：最後の言葉を1語ずつ、弾みながら（ぼかし→くっきり・下から・少し大きく行き過ぎて戻る）。中央ぞろえのまま行が伸び、決めの語「注文書」だけが大きくなる
- ブリージング：背景の光が8拍（5.39秒）でふくらんでしぼむ
- ライトスイープ：演出のボタンの上と、最後の「注文書」の上を光が1回ずつ走る
- アンビエントサウンド：おけもんのやさしい曲に、操作の音と鈴を、動きと同じ瞬間に小さく重ねた

## 流れ（2026-09-27）

| 時刻 | 誰 | 何をしたか |
|---|---|---|
| 18:24 | あおい | 注文書（prompt.txt）と作業フォルダを用意し、手足に発注（見本集20本の #3） |
| 18:28 | 手足 | 共通メモと兄弟作品（apple・linear）の置き方を読む。お手本 mp4（95秒）を1秒1コマ・要所は0.1秒刻みで読む（新しい語だけ青い・行ごと大きくなって薄い青の下地・表の行が時間差で埋まる・ぼかし＋ズームでつなぐ） |
| 18:45 | 手足 | 公開中のアプリを手元の app/ から開き、入力→レシピ→注文書の実物をヘッドレスの Chrome で撮る |
| 18:55 | 手足 | 曲の棚から候補を測る（Little Stars in the Morning 89.1 BPM・はるか 96 BPM・Afterglow 123 BPM ほか）。注文書の「90BPM前後・オルゴールのような音」とやさしさで Little Stars に決める。Suno の枠を使う曲（森の机 など）は選ばない |
| 19:00 | 手足 | アプリで「どの1行を打てば、この注文書と同じ7つの演出になるか」を試す（お手本つきで「モーションレシピ自身の紹介デモ。」が一致） |
| 19:01 | 手足 | BRIEF.md に芯と流れの3行を書いてから着工 |
| 19:11 | 手足 | 1本目（v0）を書く（通信が1回切れて、手足の作業が一時止まる） |
| 19:40 | 手足 | v0 を静止画で確認：カメラが遠い、行がたたまれる所で帯が重なって黒ずむ、ページの下が切れる → 直す |
| 19:50 | 手足 | 正式名称が演出のボタンから注文書の行へ飛ぶ動きを足す（最初は高い弧で文字の上を横切って散らかった → 低い弧に） |
| 19:58 | 手足 | 音を合成（曲＋効果音）。効果音が曲に埋もれた所を上げて、-17.0 LUFS に合わせる。2回作ってバイト一致 |
| 20:28 | 手足 | `hyperframes check` 合格（傾いた紙の上で隣の行の外接四角が重なるだけの所に、重なり許可の印をつけた） |
| 20:30 | あおい | 書き出しの色の共有（MP4 直出しは緑に寄る → 連番PNG → ffmpeg で BT.709） |
| 20:32 | 手足 | 連番PNGで書き出すと、背景の生成りが透明になって、光の色がそのまま濃く出た（連番PNGは #root の背景色を塗らない）→ 全面に生成りの地の層を置いて書き出し直し |
| 20:37 | 手足 | 連番PNG（450コマ・約2分）→ ffmpeg で BT.709 の本番と720p版、サムネ、1秒1コマの一覧。音の大きさ・ずれ・止まり・黒・色を測る |
| 20:40 | 手足 | 最後の `hyperframes check` 合格。連番PNGを消し、PROCESS.md と README.md を書く（ここまでが v2＝評価役に見せた版） |
| 20:55 | 評価役 | v2 を見て、直す所を3つ（下の「評価役の指摘と直したこと」） |
| 21:00 | 手足 | 実物のアプリで「画面に出したい言葉」を空にした時の結果を取り直す（7つの演出は同じ。方向の一文と注文書の「仕上がり」の行が変わる） |
| 21:05 | 手足 | 作品集（おけもんが作った → 世界のお手本 → これをお手本に作る）と、札が入力欄へ飛ぶ所を足す。注文書は、空の枠を見せず、書いた所まで伸びる窓に。正式名称は見出しの下をくぐって「1.〜7.」の行へまっすぐ落とす。行は折り返す。最後は「注文書」だけ大きく下地を敷く |
| 21:10 | 手足 | 音に、タブ・カード・札が飛んで収まる音を足して作り直す（−17.0 LUFS・2回作ってバイト一致）。`hyperframes check` 合格 → 書き出し |

## 音

使った曲：おけもんの曲「Little Stars in the Morning」（2026-07-19 Suno・歌詞なし・水やん他己紹介ムービーのBGM）の頭から15秒。在りか：`はるかCEO/PJ_AIショート動画妄想事業/水やんムービー素材/BGM_Little_Stars_in_the_Morning.mp3`（→Drive。曲の棚 `outputs/okemon-music-shelf/README.md` の「紹介動画・作品のBGM」の行）。
効果音：すべてコードで合成（`audio/synth.py`。キーの音・マウスのカチッ・ポッ・低いドン・ヒュッ・きらっ・鈴）。時刻は `index.html` の cues から読むので、絵と同じ瞬間に鳴る。

- 選んだ理由：注文書は「90BPM前後の静かな曲・オルゴールのような音」。棚でその場で取れる曲を測ると、Little Stars が 89.1 BPM・明るい高音の粒（オルゴールや鉄琴のような音）・やさしい朝のインストで、いちばん近かった。曲の頭（0〜10.7秒）は静かで、10.96秒で曲が満ちるので、そこに「コピーする」を置いた
- 見た候補：「はるか」（96 BPM・フェルトピアノとナイロンギター。散歩の温度で近未来から遠い）、「Afterglow」「Night Drive」（EDM。#1 と #7 が同じミックスの EDM を使うので音が被る）、「森の机（転調続編）」「窓辺のコーヒー」（92・90 BPM で合うが、Suno から取ると本人のダウンロード枠を1回使うので選ばなかった）
- 効果音の大きさ：曲より 6〜15 dB 小さく（押す音とボタンが並ぶ鈴がいちばん前、行が埋まる音はいちばん小さい）。キーの音は1文字ずつ、鈴はト長調のペンタトニック（ボタンは上がっていく・名前が行に収まる時は下がっていく）
- 評価役の指摘のあと、作品集の音（タブを押す・カードが並ぶ・「これをお手本に作る」・札が飛んで入力欄の上に収まる「ヒュッ・ポッ」）を足した。ほかの音は同じ時刻表から新しい時刻で鳴らしている
- 仕上げ：曲を -4 dB、全体を +1.9 dB。14.9秒から効果音を、13.55秒から曲を消していく
- 曲の棚の索引（`outputs/okemon-music-shelf/README.md`・`songs.json`）の Little Stars の行に、この作品と測った BPM（89）を足した

## 道具とモデル

| 役 | 道具・モデル | 実測 |
|---|---|---|
| 企画・映像・音・検証 | Claude Code、Claude Opus 5.5（あおいの手足・サブエージェント） | — |
| 動画 | HyperFrames 0.8.79（general-video）、GSAP 3.14.2（止まったタイムライン1本。全部の形は時刻から計算） | 連番PNGの書き出し約2分（1ワーカー・GPU・screenshot 撮影） |
| アプリの画面 | HTML/CSS で組み直し（実物の `outputs/motion-recipe-2026-09-26/app/` の文言・色・形を写した）。3Dは CSS の perspective と rotateX/Y/Z | — |
| 文字 | Zen Maru Gothic Medium/Bold/Black（アプリと同じ書体・OFL。Drive の実体へのリンク） | — |
| 音 | Python 3 + numpy + scipy（`audio/synth.py`）、曲の読み込みは ffmpeg | 合成数秒・2回作ってバイト一致 |
| 仕上げ | ffmpeg 8（連番PNG → BT.709 の H.264、音は AAC 256k） | — |
| 下見 | Playwright のヘッドレス Chrome（静止画）、`hyperframes snapshot` | — |
| 費用 | 追加0円（外部の生成AI・有料APIは使っていない） | — |

## 確かめたこと

評価役の指摘を直した版（v3）で測った数字。

- 長さと形：完成MP4は 15.000秒・450フレーム（1920×1080・30fps・H.264 High・yuv420p・BT.709）＋AAC 48kHz、faststart。共有用は 1280×720・450フレーム・4,134,183バイト・faststart
- `hyperframes check`：lint エラー0・runtime 0・layout 0・contrast 86/86 合格。lint の警告3（ファイルが長い／入れ子／「タイムラインの呼び出しが形の測定に届く」）。3つ目は、測るのは組み上げの時の1回だけで（`measure()`）、毎コマの描画は測った数字と時刻だけから計算しているので、見た目への影響はない（書き出した連番PNGと下見の静止画が一致）。傾いた紙の上の行や、飛んでいる札が重なる所には重なり許可の印をつけた（見た目は重ならない）
- 画面に出す言葉：「ことばを」「1行、」「Opus 5.5 への」「注文書」「に」をつなぐと、prompt.txt の「ことばを1行、Opus 5.5 への注文書に」と1字ずつ一致（機械で照合）。レシピの札から「文字「ことばを1行…」」は外れている
- アプリの中身：方向の一文・札・7つの演出・注文書の23行は、実物のアプリで「お手本：Claude Code と Remotion…」＋「モーションレシピ自身の紹介デモ。」（画面に出したい言葉は空）とした時の結果そのもの
- 音：完成MP4で −17.0 LUFS・真のピーク −1.9 dBTP（共有用 −17.1 LUFS・−1.9 dBTP）。合成は2回作ってバイト一致。完成MP4の音は合成マスターとずれ0サンプル。単独で鳴る音（押す音・最後の言葉のポッ）は、解析でも立ち上がりが時刻の +2〜+9ms（`audio/qa/check.py`。1コマ＝33ms。鈴が重なる所は解析のぶれで ±25〜50ms と出るが、置いた位置は時刻表どおり）
- 止まり・黒：隣り合うコマで同じ絵は0（最後の0.7秒も背景の光がゆっくり呼吸している。最小の差 0.058）。黒いコマ0（blackdetect）
- 色：連番PNGはすべて不透明（RGB）。v2 で下見（snapshot）と完成MP4の同じ時刻のコマを比べて平均の差 2.2〜2.4（圧縮と紙の粒の分）。v3 も同じ手順
- 実時間：ffmpeg の実時間デコードで共有用をエラー0で再生
- 目で見た所：`qa/contact.jpg`（1秒1コマ・0〜14秒）。作品集 → 世界のお手本 → 札が入る → 1行 → 帯 → 押す → 7つの演出 → 注文書が伸びながら書かれる → 名前が落ちる → たたむ → 最後の1行（「注文書」だけ大きく下地）の順に並んでいる

## 作り直し方

あなたが今できる最高のモーショングラフィックで、見た人が思わず「すごい」と声に出す1本を作ってください。
いま世界中で話題の「AIが本気で作るモーショングラフィック」です。あなたの腕前を、出し惜しみせず全力で証明してください。

■ 作りたいもの（本人の言葉）
おけもん実験室（作品棚）の紹介。作品のサムネイルが線でつながり、タイルに敷き詰まって「おけもん実験室」の文字になる

■ お手本（この1本のテンポ・文字・切り替えに寄せる）
- お手本：Pixel Frame のローンチ映像「Cosmos」（Pixel Frame） https://x.com/Varcyyyy/status/2090184114083447165
- 特徴：実写の人物＋左右に1語ずつの問いかけ／キャンバスの周りに写真カードが線でつながる／黒地に作品画像をタイル状に敷き詰めてロゴ／一瞬ちらつく切り替え、最後はロゴで3秒静止
- 動画が見られなくても大丈夫。上の特徴に寄せて作る。お手本の色・ロゴ・言葉・キャラはそのまま使わず、「作りたいもの」に置きかえる
- 作業フォルダにお手本のスクリーンショットがあれば、それも見て寄せる

■ 仕上がりのイメージ
かっこよく、上品な短い映像作品。15秒。一本の線が走って形を描き、模様が波のように広がる。少しずつ時間差で順番に動き、前の場面の形が、そのまま次の場面になる。最後に「おけもん実験室」がはっきり残って終わる。

■ 使ってほしい演出（これは出発点です。もっと良い見せ方を思いついたら、そちらを選んでかまいません）
1. ラインアニメーション（Line Animation）：線が描かれていく動きで、図・ロゴ・文字の輪郭を見せる
2. ジェネラティブアート（Generative Art）：模様（和柄・タイル・グリッド）がコードで生まれ、波のように広がってうねる
3. マッチカット（Match Cut）：場面の切り替えでカットせず、前の場面の形を次の場面の部品へ受け渡す
4. スタッガー（Stagger）：複数の要素をほんの少しずつ時間差で動かし、波のような流れを作る
5. ホールド（Hold）：見せたい瞬間は動きをピタッと止めて、一拍しっかり見せる
6. グリッチ（Glitch）：場面の切り替えで一瞬だけ色ずれやノイズを入れる（多用しない）
7. ビートシンク（Beat Sync）：テンポを1つ決め、場面の切り替えや大事な動きを拍に合わせる。効果音も動きと同じ瞬間に鳴らす

■ 条件
- 長さ：15秒　画面：横長 16:9（1920×1080）
- 形式：HTMLファイル1枚（HTML・CSS・JavaScriptをすべてこの中にまとめる）。今いる作業フォルダに motion.html として保存し（同じ名前があれば motion-2.html のように番号をつける）、できたらブラウザで開く（Mac なら open コマンド）
- 再生：最後まで行ったら「もう一度見る」ボタンを出す
- 外部のライブラリを使う時は CDN から読み込む（three.js など）。フォントはパソコンに入っている日本語フォントを使う
- 時間の管理：すべての動きを1本のタイムライン（経過時間から各場面の状態を計算する形）で管理し、コマ落ちしても時間どおりに進むようにする
- 音：Web Audio API で、BGM（テンポ 113BPM 前後）と効果音をコードだけで作る。ブラウザの決まりで最初は音が出ないので、最初の画面に大きな「▶ 音つきで再生」ボタンを置き、押したら映像と音を同時に始める。大事な動きと効果音は同じ瞬間に
- 画面に出す言葉：「おけもん実験室」（どれも一字一句そのまま使う）
- 色：黒と白を基本に、差し色に蛍光イエローを1色だけ（上品さを少し）（例：#0E0E10 #F4F4EF #E8FF3A #6B6B70）
- 文字：日本語は読みやすい太さのフォントで。小さすぎる文字は使わない

■ いちばん大事なこと
- いちばん大事なのは「作りたいもの（本人の言葉）」。上の『仕上がりのイメージ』『使ってほしい演出』『色』が本人の言葉と食い違うところは、本人の言葉を優先する
- 演出を並べるだけにしない。ひとつの芯のアイデア（たとえば最初に出た形が最後まで姿を変え続ける）で、全部の場面をつなぐ
- その芯は、説明がなくても画面を見るだけで伝わるようにする
- 場面の切れ目はパッと切らず、前の場面の形を次の場面へ受け渡してつなぐ
- 動きは等速にしない。加速・減速（イージング）と、止める瞬間（間）をつける
- キャラクターや動物の絵をコードで描かない。図形・文字・模様・光・3Dの形で表現する（写真やイラストのファイルを渡された時だけ、それを使う）

作り始める前に、芯のアイデアと場面の流れを3行で書き出してから作ってください。
完成したら、使った演出と、芯のアイデアを1行ずつ教えてください。

あなたが今できる最高のモーショングラフィックで、見た人が思わず「すごい」と声に出す1本を作ってください。
いま世界中で話題の「AIが本気で作るモーショングラフィック」です。あなたの腕前を、出し惜しみせず全力で証明してください。

■ 作りたいもの（本人の言葉）
架空の古着屋の秋セール告知（縦長 9:16）：灰色の地に極太の斜体「AUTUMN SALE」「最大50%OFF」が1語ずつ組み上がり、まわりに服や小物の写真（人の顔は入れない）がはじけ、0.5秒ずつ拍で切り替わる。架空と分かる店名・注記を入れる

■ お手本（この1本のテンポ・文字・切り替えに寄せる）
- お手本：Recraft V4.1 の発表（極太の斜体の見出しと、音に合わせて切り替わる作例）（Recraft） https://x.com/recraftai/status/2054948927124693416
- 特徴：灰色の地に黒い極太の斜体、見出しは1語ずつ組み上がる／見出しのまわりに、小さな画像がはじけるように散らばる／作例が約0.5秒ずつ、低音の強い音に合わせて切り替わる／最後は縦に引き伸ばした巨大な1語で締める
- 動画が見られなくても大丈夫。上の特徴に寄せて作る。お手本の色・ロゴ・言葉・キャラはそのまま使わず、「作りたいもの」に置きかえる
- 作業フォルダにお手本のスクリーンショットがあれば、それも見て寄せる

■ 仕上がりのイメージ
ワクワクするように、かっこいいお店・商品の紹介。15秒。秋の実りの中で、数字やグラフが気持ちよく伸びて、言葉が弾みながら現れる。大事なところでピタッと止まり、色の面がシャッと画面を入れ替える。最後に「最大50%OFF」が主役で止まる。

■ 使ってほしい演出（これは出発点です。もっと良い見せ方を思いついたら、そちらを選んでかまいません）
1. インフォグラフィック・アニメーション（Animated Infographics）：数字のカウントアップ、グラフが伸びる動きで、情報を気持ちよく見せる
2. キネティック・タイポグラフィ（Kinetic Typography）：画面に出す言葉を主役にして、文字ごとに登場と退場の動きをつける
3. カットアウト・アニメーション（Cutout Animation）：紙を切り抜いたような形が重なり、影つきで貼られたり剥がれたりする
4. カラーワイプ（Color Wipe）：大きな色の面が画面を横切り、背景の色ごと場面を切り替える
5. ホールド（Hold）：見せたい瞬間は動きをピタッと止めて、一拍しっかり見せる
6. アンティシペーション（Anticipation）：大きく動く前に、いったん反対にためる
7. ライトスイープ（Light Sweep）：光の筋が表面を横切ってきらっと輝く。光のにじみ（グロー）も少し
8. ビートシンク（Beat Sync）：テンポを1つ決め、場面の切り替えや大事な動きを拍に合わせる。効果音も動きと同じ瞬間に鳴らす

■ 条件
- 長さ：15秒　画面：縦長 9:16（1080×1920）
- 縦長なので、ブラウザの真ん中に 9:16 の枠を高さいっぱいに置き、枠の外は黒にする（画面収録で切り取りやすいように）
- 形式：HTMLファイル1枚（HTML・CSS・JavaScriptをすべてこの中にまとめる）。今いる作業フォルダに motion.html として保存し（同じ名前があれば motion-2.html のように番号をつける）、できたらブラウザで開く（Mac なら open コマンド）
- 再生：最後まで行ったら「もう一度見る」ボタンを出す
- 外部のライブラリを使う時は CDN から読み込む（three.js など）。フォントはパソコンに入っている日本語フォントを使う
- 時間の管理：すべての動きを1本のタイムライン（経過時間から各場面の状態を計算する形）で管理し、コマ落ちしても時間どおりに進むようにする
- 音：Web Audio API で、BGM（テンポ 125BPM 前後）と効果音をコードだけで作る。ブラウザの決まりで最初は音が出ないので、最初の画面に大きな「▶ 音つきで再生」ボタンを置き、押したら映像と音を同時に始める。大事な動きと効果音は同じ瞬間に
- 画面に出す言葉：「AUTUMN SALE」「最大50%OFF」（どれも一字一句そのまま使う）
- 色：秋の実りのクリーム色、栗色、かぼちゃのオレンジ（ワクワク感を少し）（例：#FFF4E6 #D9822B #8C3B1E #F2C14E #4A2C1A）
- 文字：日本語は読みやすい太さのフォントで。小さすぎる文字は使わない

■ いちばん大事なこと
- いちばん大事なのは「作りたいもの（本人の言葉）」。上の『仕上がりのイメージ』『使ってほしい演出』『色』が本人の言葉と食い違うところは、本人の言葉を優先する
- 演出を並べるだけにしない。ひとつの芯のアイデア（たとえば最初に出た形が最後まで姿を変え続ける）で、全部の場面をつなぐ
- その芯は、説明がなくても画面を見るだけで伝わるようにする
- 場面の切れ目はパッと切らず、前の場面の形を次の場面へ受け渡してつなぐ
- 動きは等速にしない。加速・減速（イージング）と、止める瞬間（間）をつける
- キャラクターや動物の絵をコードで描かない。図形・文字・模様・光・3Dの形で表現する（写真やイラストのファイルを渡された時だけ、それを使う）

作り始める前に、芯のアイデアと場面の流れを3行で書き出してから作ってください。
完成したら、使った演出と、芯のアイデアを1行ずつ教えてください。

あなたが今できる最高のモーショングラフィックで、見た人が思わず「すごい」と声に出す1本を作ってください。
いま世界中で話題の「AIが本気で作るモーショングラフィック」です。あなたの腕前を、出し惜しみせず全力で証明してください。

■ 作りたいもの（本人の言葉）
AI活用シェアオフ会（梅田・10月）の告知。申し込みページを斜めに大きく映して、ボタンが立体で浮かぶ

■ お手本（この1本のテンポ・文字・切り替えに寄せる）
- お手本：Blissful のショーリール（Zingage）（Blissful） https://x.com/stevelauda_/status/2101855047412031533
- 特徴：オレンジ・生成り・白の3色だけ／サイト画面を斜めに大きく、ボタンが立体で浮く／決めの語だけオレンジの斜体、ロゴ形の窓に写真／明るい電子音楽（約108BPM）がずっと同じ音量
- 動画が見られなくても大丈夫。上の特徴に寄せて作る。お手本の色・ロゴ・言葉・キャラはそのまま使わず、「作りたいもの」に置きかえる
- 作業フォルダにお手本のスクリーンショットがあれば、それも見て寄せる

■ 仕上がりのイメージ
元気いっぱいに、あたたかい告知。15秒。カメラが3Dの奥へ飛び込み、アプリの画面が動いて使い方を見せる。少しずつ時間差で順番に動き、手前と奥が違う速さで流れる。最後にタイトルと日付がはっきり読める形で止まる。

■ 使ってほしい演出（これは出発点です。もっと良い見せ方を思いついたら、そちらを選んでかまいません）
1. 3Dカメラワーク（3D Camera Move）：three.js などで奥行きのある空間を作り、カメラが中を進んでいく
2. UIアニメーション（UI Animation）：架空のスマホやPCの画面を作り、ボタンやカードが動いて操作の流れを見せる
3. パララックス（Parallax）：手前・中・奥の層を違う速さで動かして奥行きを出す
4. スタッガー（Stagger）：複数の要素をほんの少しずつ時間差で動かし、波のような流れを作る
5. オーバーシュート（Overshoot）：目標の位置を少し行き過ぎてから戻る、バネの動き
6. テクスチャオーバーレイ（Texture Overlay）：紙の繊維やうっすらした粒子を画面にのせて、手ざわりを出す
7. ビートシンク（Beat Sync）：テンポを1つ決め、場面の切り替えや大事な動きを拍に合わせる。効果音も動きと同じ瞬間に鳴らす

■ 条件
- 長さ：15秒　画面：横長 16:9（1920×1080）
- 形式：HTMLファイル1枚（HTML・CSS・JavaScriptをすべてこの中にまとめる）。今いる作業フォルダに motion.html として保存し（同じ名前があれば motion-2.html のように番号をつける）、できたらブラウザで開く（Mac なら open コマンド）
- 再生：最後まで行ったら「もう一度見る」ボタンを出す
- 外部のライブラリを使う時は CDN から読み込む（three.js など）。フォントはパソコンに入っている日本語フォントを使う
- 時間の管理：すべての動きを1本のタイムライン（経過時間から各場面の状態を計算する形）で管理し、コマ落ちしても時間どおりに進むようにする
- 音：Web Audio API で、BGM（テンポ 115BPM 前後）と効果音をコードだけで作る。ブラウザの決まりで最初は音が出ないので、最初の画面に大きな「▶ 音つきで再生」ボタンを置き、押したら映像と音を同時に始める。大事な動きと効果音は同じ瞬間に
- 画面に出す言葉：「AI活用シェアオフ会」「梅田」（どれも一字一句そのまま使う）
- 色：朝日の黄色とオレンジに、ターコイズをひとさじ（あたたかさを少し）（例：#FFFBEA #FFB400 #FF6B35 #2EC4B6 #1B263B）
- 文字：日本語は読みやすい太さのフォントで。小さすぎる文字は使わない

■ いちばん大事なこと
- いちばん大事なのは「作りたいもの（本人の言葉）」。上の『仕上がりのイメージ』『使ってほしい演出』『色』が本人の言葉と食い違うところは、本人の言葉を優先する
- 演出を並べるだけにしない。ひとつの芯のアイデア（たとえば最初に出た形が最後まで姿を変え続ける）で、全部の場面をつなぐ
- その芯は、説明がなくても画面を見るだけで伝わるようにする
- 場面の切れ目はパッと切らず、前の場面の形を次の場面へ受け渡してつなぐ
- 動きは等速にしない。加速・減速（イージング）と、止める瞬間（間）をつける
- キャラクターや動物の絵をコードで描かない。図形・文字・模様・光・3Dの形で表現する（写真やイラストのファイルを渡された時だけ、それを使う）

作り始める前に、芯のアイデアと場面の流れを3行で書き出してから作ってください。
完成したら、使った演出と、芯のアイデアを1行ずつ教えてください。

あなたが今できる最高のモーショングラフィックで、見た人が思わず「すごい」と声に出す1本を作ってください。
いま世界中で話題の「AIが本気で作るモーショングラフィック」です。あなたの腕前を、出し惜しみせず全力で証明してください。

■ 作りたいもの（本人の言葉）
AIを、みんなの遊び道具に。静かで上品に、輪と文字だけで見せたい

■ お手本（この1本のテンポ・文字・切り替えに寄せる）
- お手本：Apple のモーション映像「Give people wonderful tools」（Apple（Ilya Miskov さんの紹介）） https://x.com/ilyamiskov/status/2095655279820001767
- 特徴：精密な輪と文字だけ／余白が多く静か／最後の一言で締める
- 動画が見られなくても大丈夫。上の特徴に寄せて作る。お手本の色・ロゴ・言葉・キャラはそのまま使わず、「作りたいもの」に置きかえる
- 作業フォルダにお手本のスクリーンショットがあれば、それも見て寄せる

■ 仕上がりのイメージ
上品に、かっこいい短い映像作品。30秒。一本の線が走って形を描き、言葉が弾みながら現れる。大事なところでピタッと止まり、文字がスッと幕の向こうから現れる。最後に「AIを、みんなの遊び道具に。」がはっきり残って終わる。

■ 使ってほしい演出（これは出発点です。もっと良い見せ方を思いついたら、そちらを選んでかまいません）
1. ラインアニメーション：線が描かれていく動きで、図・ロゴ・文字の輪郭を見せる
2. キネティック・タイポグラフィ：画面に出す言葉を主役にして、文字ごとに登場と退場の動きをつける
3. マスク・リビール：マスク（見えない窓）で文字や形を少しずつ見せる
4. 間（ホールド）：見せたい瞬間は動きをピタッと止めて、一拍しっかり見せる
5. スタッガー：複数の要素をほんの少しずつ時間差で動かし、波のような流れを作る
6. ライトスイープ：光の筋が表面を横切ってきらっと輝く。光のにじみ（グロー）も少し
7. やさしい音づくり：BGMは静かなパッドやオルゴールのような音にして、効果音は大事な瞬間だけ小さく鳴らす

■ 条件
- 長さ：30秒　画面：横長 16:9（1920×1080）
- 形式：HTMLファイル1枚（HTML・CSS・JavaScriptをすべてこの中にまとめる）。今いる作業フォルダに motion.html として保存し（同じ名前があれば motion-2.html のように番号をつける）、できたらブラウザで開く（Mac なら open コマンド）
- 再生：最後まで行ったら「もう一度見る」ボタンを出す
- 外部のライブラリを使う時は CDN から読み込む（three.js など）。フォントはパソコンに入っている日本語フォントを使う
- 時間の管理：すべての動きを1本のタイムライン（経過時間から各場面の状態を計算する形）で管理し、コマ落ちしても時間どおりに進むようにする
- 音：Web Audio API で、BGM（テンポ 99BPM 前後の静かな曲）と効果音をコードだけで作る。ブラウザの決まりで最初は音が出ないので、最初の画面に大きな「▶ 音つきで再生」ボタンを置き、押したら映像と音を同時に始める。大事な動きと効果音は同じ瞬間に（効果音は控えめに）
- 画面に出す言葉：「AIを、みんなの遊び道具に。」（どれも一字一句そのまま使う）
- 色：アイボリー、墨色、控えめな金（かっこよさを少し）（例：#F7F3EC #1F1D1A #B8975A #8C8479）
- 文字：日本語は読みやすい太さのフォントで。小さすぎる文字は使わない

■ いちばん大事なこと
- いちばん大事なのは「作りたいもの（本人の言葉）」。上の『仕上がりのイメージ』『使ってほしい演出』『色』が本人の言葉と食い違うところは、本人の言葉を優先する
- 「すごい」は派手さのことではない。静かな作品なら、静けさと美しさで「すごい」と言わせる
- 演出を並べるだけにしない。ひとつの芯のアイデア（たとえば最初に出た形が最後まで姿を変え続ける）で、全部の場面をつなぐ
- その芯は、説明がなくても画面を見るだけで伝わるようにする
- 場面の切れ目はパッと切らず、前の場面の形を次の場面へ受け渡してつなぐ
- 動きは等速にしない。加速・減速（イージング）と、止める瞬間（間）をつける
- キャラクターや動物の絵をコードで描かない。図形・文字・模様・光・3Dの形で表現する（写真やイラストのファイルを渡された時だけ、それを使う）

作り始める前に、芯のアイデアと場面の流れを3行で書き出してから作ってください。
完成したら、使った演出と、芯のアイデアを1行ずつ教えてください。

あなたが今できる最高のモーショングラフィックで、見た人が思わず「すごい」と声に出す1本を作ってください。
いま世界中で話題の「AIが本気で作るモーショングラフィック」です。あなたの腕前を、出し惜しみせず全力で証明してください。

■ 作りたいもの（本人の言葉）
色とりどりの立体の文字「AIであそぼ」が、記号の模様の上ではずみ、機械に食べられ、渦に吸い込まれて星になる

■ お手本（この1本のテンポ・文字・切り替えに寄せる）
- お手本：Glyph（色とりどりの立体の文字が、はずんで・食べられて・吸い込まれる）（Poimandres（@pmndrs）） https://x.com/pmndrs/status/2100980802091708818
- 特徴：記号の模様を敷き詰めた生成りの地／色とりどりの立体の文字がはずむ／機械が文字を食べ、ブラックホールが吸い込む／最後は黒地に星
- 動画が見られなくても大丈夫。上の特徴に寄せて作る。お手本の色・ロゴ・言葉・キャラはそのまま使わず、「作りたいもの」に置きかえる
- 作業フォルダにお手本のスクリーンショットがあれば、それも見て寄せる

■ 仕上がりのイメージ
にぎやかに、ワクワクする短い映像作品。15秒。光の粒が集まっては弾けて、カメラが3Dの奥へ飛び込む。バネのように行き過ぎて戻り、色の面がシャッと画面を入れ替える。最後に「AIであそぼ」がはっきり残って終わる。

■ 使ってほしい演出（これは出発点です。もっと良い見せ方を思いついたら、そちらを選んでかまいません）
1. パーティクル（Particle Animation）：小さな粒（光・紙吹雪・星）が集まって形になり、また散る
2. 3Dカメラワーク（3D Camera Move）：three.js などで奥行きのある空間を作り、カメラが中を進んでいく
3. ジェネラティブアート（Generative Art）：模様（和柄・タイル・グリッド）がコードで生まれ、波のように広がってうねる
4. カラーワイプ（Color Wipe）：大きな色の面が画面を横切り、背景の色ごと場面を切り替える
5. オーバーシュート（Overshoot）：目標の位置を少し行き過ぎてから戻る、バネの動き
6. スタッガー（Stagger）：複数の要素をほんの少しずつ時間差で動かし、波のような流れを作る
7. ライトスイープ（Light Sweep）：光の筋が表面を横切ってきらっと輝く。光のにじみ（グロー）も少し
8. ビートシンク（Beat Sync）：テンポを1つ決め、場面の切り替えや大事な動きを拍に合わせる。効果音も動きと同じ瞬間に鳴らす

■ 条件
- 長さ：15秒　画面：横長 16:9（1920×1080）
- 形式：HTMLファイル1枚（HTML・CSS・JavaScriptをすべてこの中にまとめる）。今いる作業フォルダに motion.html として保存し（同じ名前があれば motion-2.html のように番号をつける）、できたらブラウザで開く（Mac なら open コマンド）
- 再生：最後まで行ったら「もう一度見る」ボタンを出す
- 外部のライブラリを使う時は CDN から読み込む（three.js など）。フォントはパソコンに入っている日本語フォントを使う
- 時間の管理：すべての動きを1本のタイムライン（経過時間から各場面の状態を計算する形）で管理し、コマ落ちしても時間どおりに進むようにする
- 音：Web Audio API で、BGM（テンポ 129BPM 前後）と効果音をコードだけで作る。ブラウザの決まりで最初は音が出ないので、最初の画面に大きな「▶ 音つきで再生」ボタンを置き、押したら映像と音を同時に始める。大事な動きと効果音は同じ瞬間に
- 画面に出す言葉：「AIであそぼ」（どれも一字一句そのまま使う）
- 色：白地に、ビビッドな赤・黄・ミントをはっきり（ワクワク感を少し）（例：#FFFFFF #FF3E6C #FFD23F #3BCEAC #2D2D2D）
- 文字：日本語は読みやすい太さのフォントで。小さすぎる文字は使わない

■ いちばん大事なこと
- いちばん大事なのは「作りたいもの（本人の言葉）」。上の『仕上がりのイメージ』『使ってほしい演出』『色』が本人の言葉と食い違うところは、本人の言葉を優先する
- 演出を並べるだけにしない。ひとつの芯のアイデア（たとえば最初に出た形が最後まで姿を変え続ける）で、全部の場面をつなぐ
- その芯は、説明がなくても画面を見るだけで伝わるようにする
- 場面の切れ目はパッと切らず、前の場面の形を次の場面へ受け渡してつなぐ
- 動きは等速にしない。加速・減速（イージング）と、止める瞬間（間）をつける
- キャラクターや動物の絵をコードで描かない。図形・文字・模様・光・3Dの形で表現する（写真やイラストのファイルを渡された時だけ、それを使う）

作り始める前に、芯のアイデアと場面の流れを3行で書き出してから作ってください。
完成したら、使った演出と、芯のアイデアを1行ずつ教えてください。

明日のイヒローさんとのオフ会に向けて資料完成させたいなぁ🤔 何があればあすのオフ会が良いものになるだろう・・🤔
とりあえずストファイを目標設定に活かしていくためにってしてんだよね🤔 ただ目標を立てるだけじゃなくって自分の特性を理解して目標を立てるって考え方と、立てた目標に対してストファイをどう活用していくのかっていう2つの視点があるなぁと思って🤔

あなたが今できる最高のモーショングラフィックで、見た人が思わず「すごい」と声に出す1本を作ってください。
いま世界中で話題の「AIが本気で作るモーショングラフィック」です。あなたの腕前を、出し惜しみせず全力で証明してください。

■ 作りたいもの（本人の言葉）
画面を4つに分けて、おけもんの4つの顔を同時に流す。1本ずつは静かに、言葉は1〜2語

■ お手本（この1本のテンポ・文字・切り替えに寄せる）
- お手本：4本の発表動画を、4分割で同時に流すリール（Benji Taylor） https://x.com/benjitaylor/status/2082515001949221152
- 特徴：画面を4分割して4本を同時に流す／白黒に細い文字1〜2語、差し色はオレンジ少し／言葉が1字ずつ打たれ、同じ場所で入れ替わる／黒いボタンを光が横切る・音なし
- 動画が見られなくても大丈夫。上の特徴に寄せて作る。お手本の色・ロゴ・言葉・キャラはそのまま使わず、「作りたいもの」に置きかえる
- 作業フォルダにお手本のスクリーンショットがあれば、それも見て寄せる

■ 仕上がりのイメージ
かっこよく、上品な短い映像作品。15秒。言葉が弾みながら現れて、アプリの画面が動いて使い方を見せる。大事なところでピタッと止まり、文字がスッと幕の向こうから現れる。最後に、いちばん伝えたいものがはっきり残って終わる。

■ 使ってほしい演出（これは出発点です。もっと良い見せ方を思いついたら、そちらを選んでかまいません）
1. キネティック・タイポグラフィ（Kinetic Typography）：画面に出す言葉を主役にして、文字ごとに登場と退場の動きをつける
2. UIアニメーション（UI Animation）：架空のスマホやPCの画面を作り、ボタンやカードが動いて操作の流れを見せる
3. マスクリビール（Mask Reveal）：マスク（見えない窓）で文字や形を少しずつ見せる
4. ホールド（Hold）：見せたい瞬間は動きをピタッと止めて、一拍しっかり見せる
5. スタッガー（Stagger）：複数の要素をほんの少しずつ時間差で動かし、波のような流れを作る
6. ライトスイープ（Light Sweep）：光の筋が表面を横切ってきらっと輝く。光のにじみ（グロー）も少し

■ 条件
- 長さ：15秒　画面：横長 16:9（1920×1080）
- 形式：HTMLファイル1枚（HTML・CSS・JavaScriptをすべてこの中にまとめる）。今いる作業フォルダに motion.html として保存し（同じ名前があれば motion-2.html のように番号をつける）、できたらブラウザで開く（Mac なら open コマンド）
- 再生：開いたらすぐ再生し、最後まで行ったら「もう一度見る」ボタンを出す
- 外部のライブラリを使う時は CDN から読み込む（three.js など）。フォントはパソコンに入っている日本語フォントを使う
- 時間の管理：すべての動きを1本のタイムライン（経過時間から各場面の状態を計算する形）で管理し、コマ落ちしても時間どおりに進むようにする
- 音：なし（映像だけで気持ちよく見せる）
- 画面に出す言葉：上の「作りたいもの」から、短くて強い言葉をあなたが選ぶ（多くても1場面1〜2語）
- 色：黒と白を基本に、差し色に蛍光イエローを1色だけ（上品さを少し）（例：#0E0E10 #F4F4EF #E8FF3A #6B6B70）
- 文字：日本語は読みやすい太さのフォントで。小さすぎる文字は使わない

■ いちばん大事なこと
- いちばん大事なのは「作りたいもの（本人の言葉）」。上の『仕上がりのイメージ』『使ってほしい演出』『色』が本人の言葉と食い違うところは、本人の言葉を優先する
- 演出を並べるだけにしない。ひとつの芯のアイデア（たとえば最初に出た形が最後まで姿を変え続ける）で、全部の場面をつなぐ
- その芯は、説明がなくても画面を見るだけで伝わるようにする
- 場面の切れ目はパッと切らず、前の場面の形を次の場面へ受け渡してつなぐ
- 動きは等速にしない。加速・減速（イージング）と、止める瞬間（間）をつける
- キャラクターや動物の絵をコードで描かない。図形・文字・模様・光・3Dの形で表現する（写真やイラストのファイルを渡された時だけ、それを使う）

作り始める前に、芯のアイデアと場面の流れを3行で書き出してから作ってください。
完成したら、使った演出と、芯のアイデアを1行ずつ教えてください。

OpenAI Physics museumのThe Glass Alembicを参考に、ガラス展示1つをローカルで触れる作品にして。卵型の貯留槽、透明ならせん、真鍮の支柱、石台、左右2つの採集器を自前ジオメトリで作り、暖かい光と薄いガラスの縁を大事にする。120粒をはなす、左右を切り替える、ゆっくり見る、初期化する操作を用意し、実際の重力と粒同士の衝突を計算する。流路を拘束した近似モデルでもよいが、その範囲を正直に記録する。PCと幅390pxで粒と操作が読みやすいこと。左右の回収数・脱落・境界の誤差・リセットをテストし、ブラウザで見て仕上げる。APIや音声は使わず、127.0.0.1で開く。元の依頼、道具、素材、再現手順を残す。

make a dynamic 15-second motion graphics video that shows what an incredible motion designer you are, like it's your showreel for a résumé. go all out.

あなたが今できる最高のモーショングラフィックで、見た人が思わず「すごい」と声に出す1本を作ってください。
いま世界中で話題の「AIが本気で作るモーショングラフィック」です。あなたの腕前を、出し惜しみせず全力で証明してください。

あなたが今できる最高のモーショングラフィックで、見た人が思わず「すごい」と声に出す1本を作ってください。
いま世界中で話題の「AIが本気で作るモーショングラフィック」です。あなたの腕前を、出し惜しみせず全力で証明してください。

■ 作りたいもの（本人の言葉）
夜の図書館で、ひらいた本から文字がこぼれて、蛍みたいにふわふわ舞い上がる。最後にその光が集まって「おやすみ」の一言になる。静かで、やさしくて、少しだけ切ない感じ

■ 仕上がりのイメージ
やさしく、少し切ないショーリール。15秒。色がインクのようににじみ広がって、光の粒が集まっては弾ける。呼吸するようにゆっくりふくらんで、手前と奥が違う速さで流れる。最後に作り手の名前が署名のように止まる。

■ 使ってほしい演出（これは出発点です。もっと良い見せ方を思いついたら、そちらを選んでかまいません）
1. リキッド表現：インクがにじむ、しずくが落ちて広がる、液体のように形がとろける
2. パーティクル：小さな粒（光・紙吹雪・星）が集まって形になり、また散る
3. パララックス（2.5D）：手前・中・奥の層を違う速さで動かして奥行きを出す
4. ブリージング・ループ：ゆっくりふくらんでしぼむ動きで、切れ目なくループさせる
5. 間（ホールド）：見せたい瞬間は動きをピタッと止めて、一拍しっかり見せる
6. テクスチャ：紙の繊維やうっすらした粒子を画面にのせて、手ざわりを出す
7. ビートシンク：テンポを1つ決め、場面の切り替えや大事な動きを拍に合わせる。効果音も動きと同じ瞬間に鳴らす

■ 条件
- 長さ：15秒　画面：横長 16:9（1920×1080）
- 形式：HTMLファイル1枚（HTML・CSS・JavaScriptをすべてこの中にまとめる）。今いる作業フォルダに motion.html として保存し（同じ名前があれば motion-2.html のように番号をつける）、できたらブラウザで開く（Mac なら open コマンド）
- 再生：最後まで行ったら「もう一度見る」ボタンを出す
- 外部のライブラリを使う時は CDN から読み込む（three.js など）。フォントはパソコンに入っている日本語フォントを使う
- 時間の管理：すべての動きを1本のタイムライン（経過時間から各場面の状態を計算する形）で管理し、コマ落ちしても時間どおりに進むようにする
- 音：Web Audio API で、BGM（テンポ 78BPM 前後）と効果音をコードだけで作る。ブラウザの決まりで最初は音が出ないので、最初の画面に大きな「▶ 音つきで再生」ボタンを置き、押したら映像と音を同時に始める。大事な動きと効果音は同じ瞬間に
- 画面に出す言葉：「おやすみ」（この言葉は一字一句そのまま使う）
- 色：朝の光のような生成り、セージグリーン、淡い水色（エモいらしさを少し）（例：#F3F5EF #A8C5B5 #6E9FB5 #F2E3C4 #3E4A46）
- 文字：日本語は読みやすい太さのフォントで。小さすぎる文字は使わない

■ いちばん大事なこと
- 演出を並べるだけにしない。ひとつの芯のアイデア（たとえば最初に出た形が最後まで姿を変え続ける）で、全部の場面をつなぐ
- その芯は、説明がなくても画面を見るだけで伝わるようにする
- 場面の切れ目はパッと切らず、前の場面の形を次の場面へ受け渡してつなぐ
- 動きは等速にしない。加速・減速（イージング）と、止める瞬間（間）をつける
- キャラクターや動物の絵をコードで描かない。図形・文字・模様・光・3Dの形で表現する（写真やイラストのファイルを渡された時だけ、それを使う）

作り始める前に、芯のアイデアと場面の流れを3行で書き出してから作ってください。
完成したら、使った演出と、芯のアイデアを1行ずつ教えてください。

深夜のドキュメンタリー番組のナレーション。低く落ち着いた声で、淡々と、ゆっくり。

おけもん。 <long pause>
道には、三秒で迷う。<short pause> 傘は、一期一会。 <long pause>
だが、自分に迷った人の道案内は、得意だ。 <long pause>
気づけば、千人以上の背中を押してきた。 <long pause>
いま、AIと妄想を語り、かたちにする毎日。 <long pause>
ワクワクが、心の羅針盤。

Need actual full volumetric 3D Blender figurine keychains based on original icons. Soft matte chibi collectible toy 2–2.5 heads tall with full rounded head, hair, torso, arms, legs/shoes; dog rounded body/ears/legs held by girl's hands. No disks, plaques, billboards, extruded raster or texture-mapped badge allowed. Original identity/readability is paramount. Backside and unseen lower body can be reasonable inferred design; document. Smooth shape transitions. Body ~56mm. Printable solid via voxel merge can be separate from visual semantically separated geometry; add hole after remesh. Need .blend, GLB, STL mm, beauty transparent render + front/side/back QA with actual volumes.

Need actual full volumetric 3D Blender figurine keychains based on original icons. Soft matte chibi collectible toy 2–2.5 heads tall with full rounded head, hair, torso, arms, legs/shoes; dog rounded body/ears/legs held by girl's hands. No disks, plaques, billboards, extruded raster or texture-mapped badge allowed. Original identity/readability is paramount. Backside and unseen lower body can be reasonable inferred design; document. Smooth shape transitions. Body ~56mm. Printable solid via voxel merge can be separate from visual semantically separated geometry; add hole after remesh. Need .blend, GLB, STL mm, beauty transparent render + front/side/back QA with actual volumes.

添付した4枚のアイコンを、本当に厚みのある3Dフィギュア型キーホルダーへ立体化するための、三面図の設計画像を作成してください。あなたは画像生成担当です。説明文だけではなく、画像生成を実行してください。 1枚の高解像度の縦長シート、4行×3列。各行に同じキャラの正面 FRONT・真横 SIDE・真後ろ BACKを、同じ縮尺・同じ高さ・同じポーズで並べてください。正投影に近いカメラ、白背景、薄い接地影、柔らかなスタジオ照明。テキストは英語の短い見出しだけ。 行1 WANKO: 赤い服の女の子が、濃い灰色の垂れ耳の犬を抱いている。元の茶色のボブ、シンプルな黒い目、ほほえみ、赤い服、犬をぎゅっと抱く位置関係を残す。 行2 OYAKO: 茶色ショートボブで紺色の服の母と、その前に緑色Tシャツでピースしている男の子。2人を1つのまとまった親子フィギュアにする。元の笑顔と髪型・服色を保つ。 行3 HAKUI: ふわっとした黒髪、白衣、黄色の襟元、両手をあげたごきげんな人物。元絵らしい大きい頭と可愛い顔。白衣の下は紺のパンツと白い靴で自然に補完。 行4 ANBATA: あんバターの丸パン。丸く膨らんだ上のパンと下のパン、厚みのある濃いあんこ、分厚い淡黄色のバターを挟む。これは食べ物型のミニチュア。元絵の上の文字は造形にしない。 【最重要】円盤、平たい板、缶バッジ、アクリルスタンド、レリーフ、写真を貼った平面にはしない。全方向から丸い体積がある、手のひらサイズのソフビ・ポリレジン風コレクタブルフィギュアにする。横から見た頭は球体に近い十分な奥行き、後頭部に髪、胴体も腕も丸い。人物は2〜2.5頭身で足まである完成した体。元絵にない下半身と背面は、元の雰囲気に合う簡潔な形で補完する。 3Dプリンターでの試作に向けて、細すぎる指や宙に浮いた小物は避け、握りこぶしやピースは太く可愛く、手足と犬は胴につながる。頭頂などに小さな一体型の吊り穴を付けるが、大きな金属リングは三面図では省いて形状を見やすくする。マットで少しつやのある塗装、滑らかな曲面、色は元絵に忠実。 画像として、立体の構造が一目で分かる魅力的な三面図にしてください。

あなたが今できる最高のモーショングラフィックで、見た人が思わず「すごい」と声に出す1本を作ってください。
いま世界中で話題の「AIが本気で作るモーショングラフィック」です。あなたの腕前を、出し惜しみせず全力で証明してください。

クラブペンギン、ただしカピバラで。日本版。
（本家のページとコードは見ずに、独自実装で）

instrumental, no vocals. progressive electro house, 128 BPM, soaring melodic lead, energetic pluck riff, tight driving bassline, crisp claps, long tension buildup into a bright sky-high drop, hopeful and powerful, motivating running energy, clean modern production

台本：みずのさんの自己紹介アニメも！インコと一緒に、サウナ、たまごサンド、夢のみずの城まで30秒で。
送信：みずのさんの自己紹介アニメも！インコと一緒に、サウナ、たまごサンド、夢のみずのしろまで30秒で。

台本：水曜AIラジオのオープニングも、秋バージョンに衣替え！森のブースで、カピバラのおけもんが放送中！
送信：水曜AIラジオのオープニングも、秋バージョンにころもがえ！森のブースで、カピバラのおけもんが放送中！

Create one independent 16:9 landscape candid photograph, NOT a collage. The two references are the same fictional ADULT Japanese woman Haruka, facial anatomy guidance only. Reconstruct her face in the requested NEW rotation and expression, do not paste her reference face. Natural dark eyes, wispy bangs, dark hair loosely tied back, soft oval face, subtle chin mole, no makeup look and real unretouched skin. Ivory light cardigan, white top, navy skirt. The camera is held by her unseen partner; no visible partner. Ordinary personal travel snapshot with neutral color, environmental detail and imperfect framing, not advertising, not a glamorous beauty shoot. No text/logos. Each photo depicts a different action and facial-muscle state; execute the action rather than default smiling at camera. Wide shot from slightly BEHIND her aisle-side shoulder in a Japanese N700 Green Car at sunrise, brown fabric roomy seat and white headrest. She is on right side of frame, her body and head turned a full 90 degrees LEFT toward the large window, only ONE eye and the side contour of her nose visible. Completely relaxed closed mouth, eyebrows at rest, quietly absorbed in sunlit countryside. Her hands rest on her lap. Window dominates left half. No turn back, no visible teeth, no leaning the ear toward a shoulder. It should feel like catching her unaware as she watches scenery.

この内容をもとに、水野さんのシロハラインコとおけもんのカピバラとセキセイインコが楽しそうに飛び跳ねているドット絵を作ってください！✨

自由に飛んだり動く感じにしてね！🐥🐹🐦

A single unedited handheld smartphone home video of this same adult Japanese woman with her boyfriend who is holding the phone across the izakaya table. Preserve her face and ordinary restaurant from the starting image but let her face genuinely move. 8 seconds at real-life speed. She is absorbed in gently blowing on her hot gyoza, lowers the chopsticks and bowl safely onto the table, then suddenly notices the phone. Her eyes look up from the food into the lens, eyebrows briefly lift, and she says softly in casual Japanese, 「え、撮ってたの？」. A little embarrassed, she looks down to the side and begins a spontaneous small laugh, shoulders moving; do not freeze a posed smile. Tiny irregular handheld drift from the seated boyfriend, a brief slight focus adjustment from the dumpling to her eyes, ordinary phone auto-exposure, neutral colors, real skin, restaurant ambience and plates clinking. Her voice sounds close, conversational and unperformed. No music, no captions, no cinematic camera move, no slow motion, no beauty filter. End in ongoing movement as she is starting to laugh, so the same moment can continue.

本人「今の版は残しつつ、カピバラが動物たちへ」
→ おけもん＝丸みのある横広の頭・茶色の鼻先・緑のエプロン・頭に黄色と黄緑の相棒インコ・木製トレイと4杯
→ 住人8種：リスのクルミ、うさぎのミミ、きつねのコハク、くまのポン、カワウソのスイ、しかのハル、ハリネズミのマロン、インコのピノ（耳・しっぽ・服・個別の返事を持たせる）

Create one high quality transparent-background character asset for an interactive personal digital business card. The supplied image is the authorized original icon of Okemon, a friendly capybara with a small green and yellow budgerigar on its head. Preserve their distinctive identity: tan capybara with large dark brown divided oval muzzle, small rounded ears, friendly squinting smiling eyes, one raised paw greeting, tiny yellow-headed green budgie perched securely on the top of the head. Transform the flat icon into a delightful softly modeled squishy vinyl / soft clay mascot, rounded organic forms with subtle tactile matte texture and warm natural lighting. Capybara seated, full compact body and tiny feet visible, three-quarter front very slightly turned, centered; one raised paw on viewer's right, other paw resting. Cheerful kind expression, not toothy, not sad. Bird should remain visually distinct and recognizable, small but clear. No hoodie, no extra objects, no text, no logos, no ring or badge, no background scene, no floor, no baked ground shadow. Transparent RGBA background, square 1024x1024 composition, enough padding around all limbs for rotation in a UI. Character fills about 80 percent of square. Refined charming handcrafted product render appropriate for a Japanese playful personal introduction. Only the two characters, clean cutout edges.

Animate the supplied desktop image as a funny polished 10-second 2D cartoon, one continuous locked-off wide shot. Preserve the exact original golden-brown capybara with long broad muzzle and the tiny yellow and lime-green budgerigar, their hand-drawn outlines and proportions. The desktop itself is their playground. 0-2s: capybara lowers its waving paw, looks toward the app icons on the left with a mischievous smile; the bird tilts its head curiously. 2-5s: capybara takes two short bouncy steps to the left, physically reaches and plucks the red YouTube icon out of its grid slot, then tosses it gently upward into the open center of the desktop. The icon visibly detaches and spins once, with a satisfying cartoon pop. 5-8s: the bird flutters off its head, chases the flying red icon in a small arc and nudges it back toward the capybara with its beak. Capybara follows it with its eyes and catches it with both paws, a delighted little body bounce. 8-10s: capybara places the icon back into the empty slot and bird lands on its head; both smile proudly toward viewer. Both animals stay visible in the SAME frame throughout. Gentle elastic anticipation and follow-through, lively wing flaps and readable physical contact with the icon. All other desktop icons, labels, menu bar, dock and landscape remain completely stable and unchanged. Camera absolutely static, no zoom, no cuts, no screen recording cursor, no apps opening. No new animals, no duplicate bird, no morphing, no long tail, no 3D or photorealistic style. Playful soft pop and whoosh effects, tiny bird chirps, no human speech, no narration, no music.

添付4枚を参照して、成人女性はるかと恋人の私（撮影者・写らない）の、サウナ帰りの夕方を写した自然で高精細な写真を「独立した5枚」生成してください。私的な想像のアルバム用です。5コマを1枚に詰めたコラージュではなく、1枚ずつ別の写真として出してください。

参照の役割：
- 1枚目（部屋で乾杯する夜）と3・4枚目（生成りニットの顔）は、はるかの顔の基準。輪郭の丸み、やや細めのアーモンド形の目、笑った時に目尻まで柔らかく動くこと、頬の丸み、20代後半の年齢感、薄く軽い前髪と低めのゆるいまとめ髪を受け継ぐ。
- 2枚目（WOMBAT・屋外）は屋外の自然光での顔と雰囲気の参考。
- 4枚とも、写っている服・場所・ポーズ・室内メイクは引き継がない。顔を貼り付けたり、古い画像の粗さや同じ笑顔をコピーしない。

共通の場面：9月の夕方、街のサウナ施設から出てきた直後。外の空気が気持ちいい時間。頬はサウナ上がりでほんのり赤く、肌はすっぴん寄りで少ししっとり、後れ毛が少し湿っている。服は淡いグレーのゆるいTシャツにベージュのワイドパンツ、小さな黒いショルダーバッグ、足元は白いスニーカー。5枚とも同じ服。彼氏目線で、はるかはカメラのすぐそばにいる恋人と過ごしている。写真内の文字入れ・コラージュ・他の人物の顔は入れない。

5枚（顔の向き・視線・口・腕と肩・撮影距離をセットで変える）：
1. 施設の出口を出たところ。ガラス扉を背に、夕方の風を受けて目を閉じ、胸いっぱいに息を吸っている横顔。胸から上、やや近い距離。口は軽く閉じ、頬が赤い。
2. 自販機の前でしゃがんで飲み物を選んでいる。視線は自販機、顔は斜め下の横顔。全身に近い距離、画面左寄りに人物、右に余白。
3. 帰り道の歩道。半歩先を歩きながら肩越しに振り返り、「次どこ行く？」と言いかけて口が開いている途中。夕方の斜めの光、腰から上。
4. ベンチに座って、瓶の牛乳を片手に持ち、こっちを見て「ととのった〜」と眉を下げてゆるく笑っている。歯は見えるか見えないかくらい。近い距離、胸から上。
5. 隣に座った状態で、眠そうな目でこっちを見上げてふふっと笑いかける至近距離。顔は少し傾き、片方の頬が寄る。夕焼けの暖かい光が顔の片側に。

写真表現：自然な夕方の光、影側からの撮影、落ち着いた色、浅すぎない被写界深度、微細なフィルムグレイン。広告の完璧な美人写真ではなく、恋人が撮った私的な写真。

10秒間の実写ショートムービー。添付した9コマのフォトストーリーボードを、人物、顔、髪型、体格、衣装、旅館、料理、光、色調、構図の基準として使用する。

テーマは「はるかと本当に一泊の温泉旅行へ行った、ふたりだけの記憶」。高級旅館の広告ではなく、彼氏の一人称カメラで撮った親密な旅行映画として描く。カメラ側の彼氏の顔や全身は映さず、必要な場面だけ片手や肩の気配を見せる。

9コマは左上から右へ進み、上段・中段・下段の順番で時系列化する。完成動画内にストーリーボード、分割画面、白線、番号、説明文は映さない。各コマを独立した全画面の実写ショットとして再構築する。

（タイムライン0.0〜10.0秒の詳細指示は [PROMPT_GEMINI_VIDEO.md](PROMPT_GEMINI_VIDEO.md) に全文あり。9場面：到着→ロビー→和菓子→障子を開ける→廊下→露天風呂→夕食乾杯→縁側→翌朝の窓辺、の順で1カット1画面。）

## 避けるもの
顔の同一性の崩れ、衣装の変化、別人、全カット同じ微笑み、過度に芝居がかった表情、余分な人物、余分な腕や指、不自然な手指、裸、性的な描写、強いオレンジ色、派手なレンズフレア、アニメ調、CG的な旅館、過剰なスローモーション、突然のカメラ回転、液体モーフィング、分割画面、グリッド、白線、番号、文字、透かし、指定外のロゴ。

完璧です！このフィギュア・背景・照明・粘土の質感をそのまま使って、同じシリーズのコマを続けて作ります。次の4枚を、それぞれ別々の画像として順番に生成してください。すべて横長（3:2）、リンゴマークやロゴなし。

1) 実写の人間の手が、このカピバラのフィギュアを白い床の中央にそっと置いている瞬間。手は画面の左側から伸びる。カメラは少し引きで少し上から。
2) カピバラの頭のアップ(少し見上げる角度)。上から実写の人間の指が、白文字で「AI」とだけ印字された小さな正方形の青いチップをつまんで、頭の真上にかざしている。インコはチップを見上げている(文字はチップの「AI」だけ)。
3) カピバラの体の横から、肌色(黄土色)の粘土でできた人間みたいなムキムキの太い腕が1本ニョキッと生えて、画面の外へ向かって力強くパンチしている。表情はぬぼーっとしたまま。斜め横からのカメラ。
4) カピバラから同じムキムキ粘土の腕が左右に生えて、床で腕立て伏せをしている(腕を曲げて体が床に近い瞬間)。斜め前からのカメラ。

Use case: stylized-concept. Make ONE triptych concept sheet (three equal side-by-side views) for a technically achievable browser 3D cozy city simulation, viewed isometrically at 45 degrees from above. LEFT empty broad flat square grassy land floating on pale blue void, tiny voxel oak trees around perimeter, faint square planning grid. MIDDLE same land with a small thriving town: varied cream/pastel compact gabled houses red teal navy tiled roofs, brick corner shops striped awnings, small workspaces and parks, pedestrians and tiny colored cars. Group one to three buildings into continuous shared land blocks with asphalt roads ONLY around outer block edges, no interior roads. RIGHT same thriving town at night with soft blue ambient shadows, gently glowing golden windows and warm diffuse streetlamps. Simple stylized 3D geometry, crisp pixel-art-flavored silhouettes, pleasing model railway diorama scale, clean materials, no photorealism, no UI chrome, no text, no logo. This is a visual construction guide for implementing real 3D meshes, not a background pretending to be a game.

Animate this exact supplied anime first frame as one continuous 5-second shot. Warm autumn lakeside wooden radio booth, clean detailed 2D cel animation. LOCKED OFF tripod camera: no zoom, no pan, no tilt, no cut. Preserve the laptop screen as a completely blank uniform pale light-blue rectangle with its existing black bezel and four clearly visible corners. Keep screen position, screen angle, laptop geometry and background composition fixed. No text, icons, glare, moving reflections or objects on the screen: readable UI will be composited later. The bob-haired adult woman in a cream cardigan makes ONE very small natural trackpad tap with her already resting hand in the first second, then her hand rests below the screen for the rest of the shot. The adult short-black-haired man in a royal-blue hoodie at right gently leans a tiny bit closer and smiles at the display, never obstructing it. His one yellow/orange-headed, white-bellied green-winged short-tailed caique remains on his shoulder and subtly tilts its head. Preserve the exact two humans and one bird visible in the image, no additional people or birds. Minimal natural breathing, gentle lantern flicker and distant lake shimmer. Keep all motion outside the blank display. Do not turn the laptop around.

A single continuous cinematic live-action shot. Preserve precisely the adult woman Haruka from the input image: same rounded eyes, cheek and mouth shape, natural age, hair and facial marks throughout all angles. Natural small physical movements, anatomically stable fingers and objects. Only the offscreen boyfriend is the camera viewpoint; never show a man. No cuts, no on-screen text or subtitles, no logos, no music. Native room/ambient sound and Japanese speech only. A warm, intimate adult Japanese female voice, late twenties, medium-high pitch, clear gentle Tokyo Japanese pronunciation, slightly breathy and playful, speaking naturally to her boyfriend nearby, never an announcer or exaggerated anime voice. In a spacious Japanese Green Car train, Haruka looks through the wide window at passing countryside, then gives her boyfriend a relaxed sideways glance. Gentle train motion. Her Japanese OFFSCREEN voiceover says exactly 「力、抜いて。いっしょに、いい波に乗ろう。」, finishing by 5.0 seconds. Her visible lips stay naturally relaxed. Begin the dialogue naturally within the first 0.4 seconds. Do not add extra words. After the line, keep moving and breathing naturally, not a freeze frame.

Create a cinematic photorealistic 16:9 landscape still for a personal Japanese travel memory movie. Use the supplied image ONLY as identity reference for Haruka: the same adult Japanese woman, facial structure, warm brown eyes, brown hair in a loosely tied ponytail with bangs, natural skin and cream lightweight lace cardigan. New scene: a quiet provincial Japanese roadside bus stop very late at night, after a long day of rail travel, waiting for the overnight bus for an hour and a half. We are enjoying this unexpected mishap together rather than distressed. Seated close together on a simple bus-stop bench, first-person POV of her traveling companion sitting beside her. Haruka is turned toward the companion, leaning a little forward, head upright with a small backward movement from spontaneous laughter, eyes crinkled and mouth naturally open in a joyful laugh. One hand holds a small unopened tea bottle on her lap, the other makes a relaxed open-palmed 'can you believe this?' gesture. Show only the companion's natural adult hand/forearm holding a matching bottle near the lower edge, not an invented face. Her recognizable face remains clearly visible; avoid the reference pose of cheek on hand or fixed sideways head tilt. A modest bus stop pole and blurred timetable, deserted road with warm amber street lamps, dark blue night, backpack beside the bench. Small-town everyday atmosphere, not airport/luxury lounge, no bus has arrived yet. Warm lamplight illuminates her face gently; deep-night surroundings but the face is not underexposed. Medium-wide, intimate candid snapshot with visible bus-stop context. Leave lower-left area relatively uncluttered for later Japanese caption overlay. No text, logo, timestamp or readable invented place name inside the image. Anatomically correct hands, natural proportions, no collaged panels. The scene is an imagined companion scene for a real travel memory, not a reconstruction of the exact bus-stop architecture.

integrated_multimodal_description:
Maintain the exact comical 2D cel-animation style and character identity of the input. Mizuno has short spiky side-swept BLACK hair, large dark eyes, royal BLUE hoodie and dark trousers. His ONE white-bellied caique has a yellow-orange head, white chest, green wings, pink feet and a VERY SHORT GREEN stubby tail, not a long-tailed parrot. Keep adult characters, faces, clothes and object identities stable. All other people are fictional designs from the input. Use expressive body acting with anticipation and follow-through, no frozen-image panning. Clean anatomy. No added text, captions, logos or music. No intelligible dialogue: a separate narration track will be edited later.
[Shot 1] The input is the exact first frame, medium two-shot at the wooden desk. The lavender-bob woman in a mustard sweatshirt hesitates at her laptop. The visible panel is the plain metal BACK of the lid, not a screen; the real screen faces the woman. Mizuno gently slides the empty chair alongside hers and begins to sit, lowering his raised greeting hand. The bird tilts its head toward the laptop. Natural clear wrist and elbow motion; maintain plausible chair geometry.
[Shot 2] At 00:02.500, cut to a medium close-up of Mizuno from the learner's eye level as he settles into the chair. He smiles gently, nods once and gives a small open-palmed 'let's try' gesture toward the laptop. His eyes look at the learner, not down on her. The bird bobs once on his shoulder, its tiny green tail unchanged.
[Shot 3] At 00:04.700, cut back to the two-shot from the same side of the desk with both faces visible. The learner moves her hand and clicks her own trackpad. Mizuno points briefly toward the actual screen, then withdraws his hand to let her act. Her uncertain expression changes into pleasantly surprised delight, eyebrows lift and shoulders relax. She turns to Mizuno; he smiles back with a small pleased nod. Let the reaction develop over the remaining seconds. Keep the computer oriented physically correctly; no interface appears on its back, no floating holograms. Each cut is clean and motivated, not a dissolve or morph. End on a warm shared reaction.

overall_soundscape:
Soft room ambience, chair movement, a trackpad click, a quiet cheerful chirp. No words or synthesized conversation.

non_diegetic_music:
N/A

One continuous 15-second vertical photoreal phone video in this exact ordinary room. Fixed low camera, no cuts, no camera motion, same daylight. A hip-hop DANCE BATTLE between a real adult capybara (left) and a real white-bellied caique parrot (right). Battle rule: they take turns. Whoever is not dancing stops completely, turns its whole body toward the other, watches, and visibly reacts. Every move is huge, explosive and sharp, with a hard freeze on the last beat, like a human breakdancer in a cypher. Never soft swaying, never gentle bouncing.

[0.0-1.5s] The capybara plods slowly on all fours toward the caique with a sleepy blank face. The caique stands still, stares at it unimpressed, one slow head tilt.
[1.5-2.5s] On a loud beat drop the capybara snaps upright onto its hind legs in one fast motion and plants both feet wide. The caique jerks its head back, startled.
[2.5-6.0s] CAPYBARA'S TURN: high-knee stomps, each knee driven up to chest height and slammed down on the beat; two big lunging side steps that carry its whole body across the floor; one fast full 360-degree spin on its hind feet; then a hard freeze, leaning down at the caique with a smug blank stare. The caique watches every move, hops back once, then narrows its eyes.
[6.0-9.5s] CAIQUE'S TURN: it explodes into a caique hop-dance, bouncing high on both feet with wings snapping open and shut on every beat; a rapid headbang; one fast spin; a moonwalk-style slide backward; then a hard freeze with wings flared wide and one foot raised, glaring up at the capybara. The capybara recoils one step with its jaw dropping, then nods slowly as if accepting the challenge.
[9.5-12.5s] RAPID CALL AND RESPONSE, one move each, direct eye contact, hard freeze between replies: capybara big stomp, caique answers with one high hop; capybara shakes its big rump side to side, caique answers with two wing pumps; capybara quick half-spin, caique answers with a full spin.
[12.5-15.0s] FINAL: both hit two synchronized stomps together, turn to face each other and land exactly in the ending-image pose: the capybara leans forward pointing one short forepaw at the caique as if saying your move; the caique spreads its wings wide, lifts one foot and stares back. Hold the standoff while fur and feathers settle.

Preserve real animal anatomy and photoreal texture throughout: capybara with long blunt muzzle, tiny eyes, heavy barrel body, coarse tan-brown fur, short forepaws, short hind legs, almost no tail; caique with orange head, white belly, green wings, two bird feet. Audio: hard-hitting original 128 BPM boom-bap hip-hop beat with a DJ scratch at each turn change, heavy floor thuds for the capybara, light claw taps and feather whooshes for the caique, a quiet room; no speech, no recognizable melody. No phone, no props, no text, no extra animals, no human limbs, no long tail, no split screen, no cuts, no slow motion, no soft swaying, no dancer standing still during its own turn.

112BPM。明るくあたたかいインディーポップ。マリンバ、ピチカート、アコースティックギター、ピアノ、クラリネット、軽いドラム。歌唱なし。

明日のこのオフ会でちょうど30人とか結構大人数のオフ会になるから、また席替えアプリを作っていこうかなと思ってます！😊

前にちょうど7月くらいに使った席決めアプリを流用しようかなと思ってるんだよね。まずちょっとその辺の情報を取ってきてください。✨

Read-only code audit. Workdir /Users/monoke/Okemori/games/kapipara-musou-3d. User asks Astra opinion and local improvements on screen direction, character pipeline, smooth movement. Read design/briefs/astra_consult_2026-09-28.md then audit src/55-plush3d.js, src/62-actors3d.js, src/40-game.js and relevant VAT/frame timing functions. Identify 3-6 concrete current causes of puppet-like movement/weapon looks tail, with actual path+line and focused integration advice. Check if VAT interpolates frames, whether hand sword attachment exists, gait movement pace, heading smoothing dt dependence, hit timing animation synchronization. No modifications, no browser, no external sends. Not alone: Claude edits src concurrently; root builds independent lab. Return concise verified findings and caveats; do not claim fps from code. Avoid assumptions from old notes.

Parent viewed live localhost:8842 title and qa/hero_views.jpg + z_play_night.jpg: huge jagged gold geometry attached behind/right hero, spans body several times. Please investigate whether weapon vertices/winding/scale or handTip local conversion bug; avoid attributing all to art direction. Need specific cause if supported.

添付した画像のうち、カピバラとインコが写っている方の画像を見てください。そのカピバラとインコを、まったく同じキャラクター・まったく同じ画風(丸い顔・くりっとした丸い目・やわらかい手描きの線・色鉛筆と水彩のタッチ)で使います。もう1つの、文字がたくさん書かれたカードが写っている方の画像は、文字の並べ方(1項目1行・大きな文字)の見本として見てください。今回は、この2枚を組み合わせて、新しい1枚の絵を描いてください。今回のメインは「開いたノートのページ」です。画面のおよそ8割を、大きく開いたノートのページが占めていて、そのノートのページの上に直接、日記の文字が大きく書かれています(紙のカードではなく、ノートのページそのものに書かれている感じにしてください)。カピバラとインコは今回は脇役で、小さめのサイズで、ノートの下の左右の角を、下から支えている・持ち上げているような構図にしてください(カピバラが左下の角、インコが右下の角を支えるイメージです)。小さくても、2匹の顔と手・足ははっきり見えるようにしてください。背景は、朝の窓辺の雰囲気をほんの少しだけ、隅に感じられる程度にしてください(背景は主役にしないでください)。ノートに書く文字は、大きく、1項目を1行にして、次の内容を一字一句そのまま使ってください(変えないでください)。見出し「朝6:30のジャーナリング 1日目」。できたこと、の下に3行で「飲み会に遅れず行けた」「洗濯・ゴミ出し」「体にいいもの食べた」。うれしかったこと、の下に2行で「朝晩の風が気持ちいい」「仲良い人たちの飲み会でめっちゃ笑った」。今朝の気持ち「すっきり」。今日は「このままスッキリ1日を過ごしたい」。日記の内容以外の文字(英語の飾り文字やロゴのようなもの)は一切入れないでください。サイズは正方形1:1(1024×1024)、文字は画像の端から6%以上内側に収めてください。日本語の文字が一字一句正確に表示されるよう、特に注意してください。

Use case: ads-marketing
Asset type: 16:9 landscape thumbnail for three October AI sharing meetups in Umeda
Primary request: Create one warm, polished meetup thumbnail that brings together the two supplied hosts as friendly illustrated characters around a laptop, sharing practical AI work ideas.
Input images: Image 1 is Tai's profile illustration, a young Japanese man with dark wavy hair and a cream shirt; use him as one host and preserve his recognizable face, hair, and gentle style. Image 2 is Oke's official capybara-and-green-parrot icon; use that capybara and parrot together as the other host, preserving their recognizable design.
Scene/backdrop: A bright, welcoming Umeda office meetup table, with one open laptop showing abstract, non-text AI interface shapes.
Composition/framing: Wide 16:9 banner, both hosts clearly visible at thumbnail size, balanced left/right, laptop between them, enough clean negative space around the figures.
Style/medium: Soft, cheerful hand-drawn Japanese character illustration consistent with both supplied icons; cohesive line weight and gentle colors.
Lighting/mood: Friendly, relaxed, collaborative, approachable for a casual business meetup.
Constraints: Include only Tai and Oke's capybara/parrot as characters. No date, no extra words, no readable text, no logos, no watermark.