Neta
ExploreWorksWorldsToolsGuides
ExploreToolsGuides
スクロールサイトを作る
スクロールアニメーションサイトビルダー

スクロールアニメーションサイトビルダー

ひとつのプロンプトで、スクロールがカメラになるサイトができます。シーンに潜り、抜けて、次へ着地。カットはありません。

Katagiri High — The Last Light。Horimiya の世界で、このページのために作りました。枠の中でスクロールしてください。3シーン、継ぎ目2か所、ひと続きの飛行です。

Katagiri High — The Last Light。Horimiya の世界で、このページのために作りました。枠の中でスクロールしてください。3シーン、継ぎ目2か所、ひと続きの飛行です。

フライトをスクロール↗
The Descent — 水晶の橋が深淵をらせん状に下る。画面にシーンの文章とナビThe Hollow Star — 通路の奥に玉座の間。シーン名は The Hollow CenterOdyssey — 洞窟を埋めるサイクロプス。シーン名は The Cyclops巨物巻 — 島ほどの大きさの鯨が小舟の下に浮かぶ。水墨画のタッチ
✦スクロールサイト
スクロールアニメーションサイトを作る：雨の港の夜市
SENGOKU — 陣営の夜明け — 全3幕の第1幕。スクロールでカメラが旗の間を抜けてテントの列へ降ります。画面には SCROLL TO DESCEND、その通りの動きです。SENGOKU
陣営の夜明け — 全3幕の第1幕。スクロールでカメラが旗の間を抜けてテントの列へ降ります。画面には SCROLL TO DESCEND、その通りの動きです。
SENGOKU — 万刃の平原 — 第2幕。戦場へカットせず、同じカメラが赤い橋を渡ります。槍と太鼓が周りから迫ってきます。SENGOKU
万刃の平原 — 第2幕。戦場へカットせず、同じカメラが赤い橋を渡ります。槍と太鼓が周りから迫ってきます。
SENGOKU — 白い城 — 第3幕。飛行は天守で終わり、「もう一度飛ぶ」を差し出します。3シーン、継ぎ目2つ、フェードはゼロ。SENGOKU
白い城 — 第3幕。飛行は天守で終わり、「もう一度飛ぶ」を差し出します。3シーン、継ぎ目2つ、フェードはゼロ。
Five Realms — 月下の山門 — 五つの境地のひとつ目。ダイブは門の外から始まり、そのまま門をくぐります。門はカメラが実際に通る場所です。Five Realms
月下の山門 — 五つの境地のひとつ目。ダイブは門の外から始まり、そのまま門をくぐります。門はカメラが実際に通る場所です。
Five Realms — 竹林の小道 — ふたつ目。つなぎのクリップが門を背後に残します。次の静止画へ溶かすのではなく。Five Realms
竹林の小道 — ふたつ目。つなぎのクリップが門を背後に残します。次の静止画へ溶かすのではなく。
Five Realms — 雲海の上の崖 — みっつ目。カメラが雲を登る間も、文章とデータは読めます。Five Realms
雲海の上の崖 — みっつ目。カメラが雲を登る間も、文章とデータは読めます。
Homer’s Odyssey — イタケー：出港 — 9シーンすべてが1枚のマスター画像から。港も船も光も同じ世界のものです。Homer’s Odyssey
イタケー：出港 — 9シーンすべてが1枚のマスター画像から。港も船も光も同じ世界のものです。
Homer’s Odyssey — トロイ：木馬 — 第2シーン。港からのつなぎは生成されたクリップで、クロスフェードではありません。火が先に来て、あとから場面が変わったと気づきます。Homer’s Odyssey
トロイ：木馬 — 第2シーン。港からのつなぎは生成されたクリップで、クロスフェードではありません。火が先に来て、あとから場面が変わったと気づきます。
Homer’s Odyssey — ワイン色の海 — 第3シーン。ナビの点はシーンを飛びますが、ホイールは間の1フレームずつを擦ります。Homer’s Odyssey
ワイン色の海 — 第3シーン。ナビの点はシーンを飛びますが、ホイールは間の1フレームずつを擦ります。
LIVE PROOF

実際に開いてみる。

作品を開いて、ここで使えます。

実際に開いてみる。新しいタブで開く
自分用も作る？スクロールサイトを作る

スクロールサイトは飛行で、スライドショーではありません。

Studio が世界を作り、シーンごとに16:9の静止画を1枚、その間を運ぶカメラのクリップを生成します。書き出されるのは素のHTMLとバニラJavaScript。スクロール位置が動画の時間を決めるので、スマホでも動き、フレームワークも要らず、短い動画3本ほどの重さです。

  • カットではなく継ぎ目 — つなぎは前のクリップの最終フレームと次の最初のフレームから生成します。だから接合部は同一フレームで、クロスフェードではありません。
  • 全シーンでひとつの質感 — 各シーンの静止画は1枚のマスターから派生します。第1シーンの港は、第3シーンでも同じ港です。
  • 動画ではなくページ — 開いて、forkして、送れる公開URLが手に入ります。シーン名も見出しもデータ行もナビも、そのまま編集できるHTMLです。

作り始める前によく聞かれること。

スクロールアニメーションサイトとは何ですか？

スクロールがページを動かすだけでなく、カメラを動かすページです。スクロール位置が動画の1フレームになるので、訪問者は動画を見るのではなく、自分の速さでシーンを飛び抜けます。

GSAPやThree.jsは必要ですか？

要りません。エンジンは素のJavaScriptで、書き出したクリップをスクロール位置で擦るだけです。GSAPやNext.jsのサイトに載せることもできますが、どちらも必須ではありません。

最初はシーンいくつがいいですか？

3つです。16:9で動画はおよそ25MB、読み込みが速く、それでもう旅として読めます。1シーン増えるごとにクリップが2本、約9MB増えます。

スマホでも動きますか？

動きます。小さい画面には640×360の版を出し、擦りはタッチスクロールに追従します。重いデスクトップ用のクリップは読み込まれません。

1回の制作で何を生成しますか？

静止画3枚、ダイブ3本、つなぎ2本の計8点です。始める前にStudioへクリップ数とモデルを確認してください。遅くて費用がかかるのは動画の部分です。

作ったあと文章は変えられますか？

変えられます。シーン名、見出し、データ行、ナビの文字は公開ページの普通のHTMLです。1フレームも再レンダリングせずに直せます。

生成が失敗したらどうなりますか？

ビルドは止まり、どのクリップが失敗したかを教えます。仮の絵で穴を埋めることはしません。偽のシーンは継ぎ目を壊し、錯覚ごと壊すからです。

既存のIPや自分の絵は使えますか？

使えます。シーンは参照画像から派生できますし、このページの世界も既存のIPワールドの中で作ったものです。見た目を合わせたいなら、キャラクターシートかキービジュアルを用意してください。

ひとつの場所に、立ち寄り先を3つ。

Studioがシーン、ダイブ、継ぎ目を生成し、スクロールして送れるページとして公開します。下の港から始めても、自分の場所を書いてもかまいません。

璃月の夜市サイトを作る
×