パララックスサイトビルダー — コードなしで奥行きを
場所をひとつ書くだけで、スクロールで空・建物・手前が別々の速さで動く1ページのサイトができます。コードは不要。
コツは奥行きだけ。レイヤーはStudioが描きます。
Neta StudioはAIワールドビルダーです。一文で、場所と登場人物と天気のある世界が出てきます。パララックスページはその世界が生む成果物のひとつで、同じ場所を一度描き、層に分けるから、スクロールに分離できるものがある。同じ世界は歩くことも、遊ぶことも、撮ることもできます。このページは奥行きだけを担当します。
- 一枚の絵から層へ——空、建築、小物、前景のシルエットはすべて同じマスター画から。離れても光は揃ったままです。
- 体でわかる速度差——層ごとに速さがあり、前景は空の約八倍。これがフェードではなく奥行きに見える理由です。
- フォルダひとつ、ビルド不要——素のHTML、CSS、PNG。ローカルで開け、どのホストにも置け、世界の中で公開すればリンクになります。
よくある質問
パララックスサイトとは何ですか？
スクロールすると、違う距離にあるものが違う速さで動く1ページのサイトです。空はゆっくり流れ、建物はもう少し流れ、手前は勢いよく過ぎる。奥行きは速度差から生まれ、3Dからは生まれません。
層を切り抜くのにPhotoshopが必要ですか？
いいえ。セッションが場面ごとにマスター画を描き、層を別々のPNGで返します。前景は透明な縁つきです。フォルダはどの編集ソフトでも開けます。
スクロール動画のサイトとは何が違うのですか？
スクロール動画は、あらかじめ描き出したカメラフライトをスクラブします。こちらは固定した舞台に静止した層を重ねたもの。撮影はなく、ファイルは軽く、数字をひとつ変えれば好きな層の速さを変えられます。
自分の世界や既存のIPは使えますか？
使えます。場所と登場人物を書くか、すでに作った世界を指定してください。層はその世界の建築から描くので、場面の見た目が揃います。
最初はいくつの場面がいいですか？
三つです。一つで効果は証明でき、三つで始まり・中・終わりができます。場面ごとに層が四つ増えます。
スマートフォンでも動きますか？
動きます。タッチのスクロールが同じ速さを駆動し、舞台は画面いっぱいに広がり、縦向きではコピーが詰め直されます。prefers-reduced-motionでは層が止まり、普通の図版入り1ページになります。
あとから文章と速さを変えられますか？
変えられます。コピーは素のHTML、各層の速さはスクリプトの数字ひとつ。0.12を0.2にすれば空が速くなり、他の部分は影響を受けません。
自分でサーバーを用意する必要はありますか？
ありません。世界の中で公開すればブラウザで開けるリンクが手に入ります。フォルダはどんな静的ホストにもそのまま置けます。
場所に奥行きを。
一文、三つの場面、それぞれ四層——そして開けるリンク。