こんにちは！個人開発勢のすすずです。趣味でイラスト描いてたりもします。
今回、自作の個人開発Webサービス「絵描きの絵日記」のコンセプトムービーを制作しました。
After Effectsなどの動画編集ソフトは一切使っていません。Gemini 3.8 Flash（AIペアプログラミング）と、HTML/CSS/GSAPを動画として書き出せるフレームワークHyperFramesを組み合わせ、コードと対話だけで作る方法をまとめます。
できたもの
最短で作る5つのステップ
1. まずAppleの動画を分析し、演出ルールを言語化する
いきなりコードを書くのではなく、まずGeminiでプロダクト紹介動画の分析から始めました。今回はAppleの新商品紹介のような「いい感じ」の動画を目指します。
まずは、どのようにしたら「いい感じ」になるのかを調べ、演出のルールを言語化していきました。
分析から得られたポイント：
- タイポグラフィの緩急: 文字が左右から高速で突入して中央でピタッと止まるスナップ感（Split & Snap）、見えない水平マスクから文字がスッと滑り上がる演出
- 物理法則（スプリング挙動）: 急加速して目的値で吸い付くようなイージング（power4.inOut や back.out）
- 要素の引き算: 余計なUIパーツや説明文を排除し、真っ白な背景に主役（イラスト・カレンダー）だけを美しく浮かび上がらせる
- 音楽とのシンクロ: ビートに合わせて文字や画面の切り替えタイミングをフレーム単位で合わせる
この分析をもとに、全体のシーン構成と秒数割りを設計しました。BGMの音楽もGeminiで生成し、そのテンポに合わせて全体の尺（64秒）と各シーンのタイミングを確定させました。
2. HTMLとGSAPで「Webページとして動く動画」を組む
HyperFramesは、Web技術（DOM + CSS + GSAP）で組んだページを、ヘッドレスブラウザ上で1フレームずつ決定論的にキャプチャして動画化するツールです。
動画の骨格は index.html 1枚だけです：
<div id="root" data-composition-id="main" data-duration="64" data-fps="60" data-width="1920" data-height="1080">
<audio id="bgm" src="assets/bgm.mp3" data-start="0" data-duration="64"></audio>
<!-- 各シーンのDOMレイヤー -->
<div id="scene-intro" class="scene-layer">...</div>
<div id="scene-calendar" class="scene-layer">...</div>
<div id="scene-explore" class="scene-layer">...</div>
<div id="scene-recap" class="scene-layer">...</div>
</div>
アニメーションはGSAPの timeline に秒数ベースで記述します。例えば「左右から文字が突入して激突スナップする演出」は以下のように書きます：
// 「ワンタップで、」「ショート動画に。」のスプリット＆激突演出
tl.to("#typo-scene-5", { autoAlpha: 1, duration: 0.01 }, 37.0);
tl.fromTo("#s5-split-left",
{ x: -850, opacity: 0 },
{ x: 0, opacity: 1, duration: 0.48, ease: "power4.inOut" },
37.05
);
tl.fromTo("#s5-split-right",
{ x: 850, opacity: 0 },
{ x: 0, opacity: 1, duration: 0.48, ease: "power4.inOut" },
37.05
);
// 激突時の微細な弾性バウンス
tl.fromTo("#typo-scene-5 .split-snap-container",
{ scale: 0.96 },
{ scale: 1.04, duration: 0.12, yoyo: true, repeat: 1, ease: "sine.out" },
37.53
);
3. 30種類のファインアートを調達・充填する
カレンダーの30日マスを重複のない30種類のイラストで埋めるため、風景・静物・植物などのファインアート画像を30枚揃え、正方形画像として assets/artworks/ に配置します。
// 30日分すべてユニークな絵画を1:1でマッピング
const fineArtImages = [
"art_01_oil_coastal.jpg", // Day 1
"art_08_mountain_lake.jpg", // Day 2
"art_03_gouache_stilllife.jpg", // Day 3
// ...
"art_02_forest_path.jpg", // Day 15（Scene 3の詳細モーダルと同期）
// ...
"art_30_flowering_garden.jpg" // Day 30
];
カレンダーのセル生成時に fineArtImages[dayNum - 1] を流し込むことで、30日すべてが被りなく絵画で埋まるカレンダーが完成します。
4. HyperFramesによる瞬間プレビュー ＆ 検証
動画制作で最も時間がかかる「書き出しの待ち時間」を、HyperFramesのCLIが劇的に短縮してくれます。
# 1. レイアウト崩れやGSAPの重複tween、文字コントラストを自動静的解析
npx hyperframes check
# 2. 動画全体を書き出さずに、指定した秒数だけをスクショ撮影して確認
npx hyperframes snapshot --at "15.8,20.4,33.0,38.0,41.5,58.0" --no-end
snapshot コマンドを打つと、わずか数秒でコンタクトシート（一覧画像）が生成されます。「カレンダーが綺麗に埋まっているか」「タイポグラフィの位置が中央か」「モーダルの文字が潰れていないか」を静止画で目視確認できるため、手戻りがほとんど発生しません。
ビジュアルが確定したら、動画ファイルとしてレンダリングします：
# 60fps Full HD レンダリング（約2分で完了）
npx hyperframes render --output showcase.mp4
Gemini 3.8 Flashと作ってみて分かったメリット
一番のメリットは、「Apple風に」「文字を激突させて」といった頭の中の抽象的な演出イメージを伝えるだけで、具体的なGSAPコードや秒数割りへ即座に落とし込んでくれる点でした。
動画制作で最もハードルが高いのは、「なんとなくかっこいい動き」を具体的な数値（座標、イージング曲線、ディレイ、継続時間）に変換する作業です。After Effectsであればキーフレームを打ってベジェ曲線を微調整するような試行錯誤が必要になります。
今回の制作では、Geminiに以下のように自然言語で伝えるだけで済みました：
- 「Appleの動画のように、中央でアプリアイコンが弾むように定着したあと、見えない水平マスクから文字がスッと滑り上がる演出にしたい」
→ CSSのマスク構造と、急加速して吸い付くようなイージングによるスプリングコードを即座に生成 - 「左右から文字が突入して激突スナップする演出を入れて、テンポよくしたい」
→ 左右からの高速移動と、激突した瞬間の微細な弾性バウンス（scale変化）を組み合わせた演出を提案・実装 - 「シーン4の尺を短くして、シーン5の冒頭に文字激突を入れて」
→ タイムライン全体の秒数オフセットを破綻なく自動で再計算
映像の専門知識や細かな座標計算に悩むことなく、「どんな演出でサービスを魅せたいか」というクリエイティブな構想に集中できるのが、コード生成AIとWeb動画の強力な組み合わせだと感じました。
とはいえ、専門知識を持っていた方が圧倒的に作りやすいと思います。どうやってプロンプトを書けばいいかわからず、そこそこのクオリティ止まりになってしまいました。
動画を作るときには動画の勉強からするのが良いという感想です。
「絵描きの絵日記」について
今回コンセプトムービーを制作したWebサービス「絵描きの絵日記」は、イラストレーターや絵を描く人のための創作記録プラットフォームです。
- 365日のカレンダー表示: 描いた絵がカレンダーのマス目を埋めていく達成感
- 手帳のような記録: 制作時間、画材・タグ、その日のメモを作品とともに大切に残せます
- ワンタップでショート動画化: 1ヶ月の絵日記から、TikTokやYouTube Shorts、Reels向けの縦型スライドショー動画を自動書き出し
- 安心の公開設定: 全体公開だけでなく、「承認メンバー限定」や「完全非公開」も選択可能
登録不要で試せる機能もありますので、絵を描く方はぜひ一度触ってみてください！
- サービスURL: https://www.artwork-diary.com/