ストーリーテリングサイトは、作れても成立しない
スクロールするごとに画面が物語のように進んでいく、ストーリーテリングサイトと呼ばれる表現があります。見かけるたびに、これは自分より上の層の仕事だと思っていました。
技術的に重く、工数がかかります。思いついたとしても、形にするのは容易ではありません。デザイナーとプログラマーが一つにならなければ実現できず、世界観を丸ごとWebサイトに落とし込める制作会社はそう多くない。制作費も、普通のサイトより一桁上がります。
それだけの表現だからこそ、取り組んでみたかった。プログラマーとWebデザイナーの両方をやってきた自分に、AIが加われば届くのではないかと考えました。
1作目はボツになった
最初に作ったのは、こだわりのコーヒー店を題材にしたサイトでした。できはしました。スクロールに合わせて映像が進み、見せるだけなら見せられます。
ただ、馴染みませんでした。「魅せる」ことだけが目的の、技術を見せるだけのサイトになっていたのです。映像は引き立て役で、本当は文字を読んでもらわなければならないのに、その両立ができていない。動きが、文章を追い出していました。
2作目も成立しなかった
原因は分かったつもりで、別の題材で作り直しました。結果は同じでした。映像は進むし、文章も置いてあるのに、サイトとして成立しない。
2本ボツにして、ようやく気づきました。足りなかったのは作り方ではなく、題材の側です。
スクロールで進む構造は、進む先に何かがあることを求めます。順番があって、場面が変わり、最後に辿り着く場所がある。それが「ストーリー」です。コーヒー店にも語れることはありますが、スクロールで追いかけたくなる順番までは持っていません。だから映像だけが進んで、文章が置き去りになる。動きの問題に見えていたものは、題材に順番がないことの現れでした。
ストーリーを持った業種でなければ、この表現は成立しない。作り方をいくら直しても、ここは越えられません。
3作目は題材から選び直した
そこで趣向を変え、普通は手を出さないジャンルを選びました。古文書や写真を修復し、撮影し、探せる形に整える、架空の文化資料アーカイブ会社。「次葉文化アーカイブ」です。
この業種には、工程そのものに順番があります。発見され、修復され、走査されて画素になり、情報として結ばれ、公開され、次の世代へ渡る。一枚の紙が辿る道筋が、そのまま7つの幕になりました。ストーリーを作ったのではなく、ストーリーを持っている題材を選んだ、という方が近いです。
作る順番も変えました。先に文章だけで、7つの幕が読める状態を作る。3Dはそのあとです。文章だけで最後まで読めるなら、その時点でサイトとしては成立していて、動きはそこに足すものになります。
3Dの側にも、決まりをひとつ置きました。各幕に「いま画面に何が映っているか」を一文で言い切る欄を持たせることです。「一枚の紙。縁が欠け、墨は褪せています」「七片が元の位置へ戻り、補修紙三枚と糸二本がかかりました」。こう書けない動きは、何か凄いものが動いているようにしか見えないので、入れません。
1作目では動きが文章を追い出しました。3作目では、文章が動きに名前を付けています。
下層もトップと同じ密度で作る
ストーリーテリングサイトは、トップページに力が集中します。トップだけ立派で、下層は適当。そういうサイトにはしたくありませんでした。トップで引き込んだ人が下層で読むものを見つけられなければ、そこで終わりだからです。
サービス、工程、技術、アーカイブの各ページは、トップと同じ密度で作り込んでいます。通常は評価の対象にならない、目立たない部分です。でも、サイトとして成立しているかどうかは、そういう場所で決まります。
3Dは描くものではなく動かすもの
冒頭で「上の層の仕事」と書いた理由のひとつが、3Dです。
2Dと違って、3Dはただ描くだけでは済みません。カメラの距離、光の強さ、紙の裂け方と戻り方。すべてがプログラムと一対になっていて、その制御が難しい。作れる人が少ない理由は、ここにあります。
今回は、この膨大なコーディングをAIエージェントに任せました。自分がやったのは、何をどう動かすかを決めることと、出てきたものが文章を追い出していないかを確かめることです。作る方の壁はAIが下げてくれました。成立させる方の壁は、2本のボツで越えるしかありませんでした。
動きが世界観そのものになる
AK²Labがやってきたのは、動きをデザインと一体にすることです。CSSアニメーション、SVGアニメーション、Three.jsといろいろ試してきましたが、3Dストーリーテリングはその究極形でした。動きが、世界観そのものになるからです。
作れる人がなかなかいない表現です。そして、作れるだけでは足りないことは2本分の遠回りで知っています。これを機に、AK²Labの柱のひとつにしていくつもりです。
ストーリーを持っている題材を選ぶこと。そして、先に文章、あとから動き。この2つを外した時点で、どれだけ動いていても、そのサイトは成立していません。