しかけ絵本(ポップアップブック)を、紙ではなくブラウザの上で作りました。 見開きの中央からページが立ち上がり、作品の頁をめくると別の世界があらわれます。 飛び出すものは、どれも作品そのものから作っています。物語はゲームの背景と登場人物のカード、 音楽の宇宙は 19,810 組の星図、AI 能力アトラスは 326 の仕事の地図、ひとり歓迎マップは 40,615 施設の日本地図、 一人旅は旅先で撮った写真、動画づくりの頁は公開前の検査の帳面と、公開中の動画 137 本の音量の図です。 作品の頁をめくると、画面全体の景色と光の色も、その作品の世界に変わります。
押さなくても、飛び出しは眺めているうちに作品の中身を見せます。キューブは縦・横・奥の一列がそろうたびに光り、 音楽の宇宙では星のひとつに歌い手の名前がともって、似ている歌い手の星へ線がのびます。 AI 能力アトラスは「議事録の作成」のような身近な仕事が年ごとにどこまで AI にできるかを示し、 ひとり歓迎マップのピンからは、実在のお店や施設の公式サイトにある「ひとりで大丈夫」の一文が浮かびます。 森の小屋のカードは、ときどき小屋の中の 360° の部屋に切り替わります。 動画づくりの頁では、頼んだ 1 段落から作った縦の動画が、読み違い・字幕の位置・音の大きさの検査で止まっては直り、「公開してよい」まで進みます。
飛び出したものを押すと、作品ごとのしかけが動きます。道筋を駆けのぼる光、「嘘」と「真」の判、歌う銀河、 ばらけて解けるキューブ、裏返る旅の写真、雷と停電の小屋……。 それぞれの世界は、このサイトで時間をかけて作った作品の入口です。「この世界に入る」を押すと、そのままその作品がひらきます。 絵本を読み進めると、サウンドノベルにも、パズルにも、音楽の地図にも、旅の記録にもたどり着きます。
それぞれの世界から、そのまま作品に入れます。絵本を先に読んでも、ここから直接行っても構いません。
10 匹のいきものが、どこかのページに隠れています。オオカミのこども、イボイノシシ、 ジェンツーペンギン、ビントロング、ユキヒョウ、ケナガイタチ、ライオンのこども、 ジムグリガエル、オサガメ、ディンゴ。 どの子がどのページにいるかは決まっていて、ページの中で立つ場所が日替わりで変わります。 見つけた子は図鑑に記録され、同じブラウザなら次に開いたときも残っています。
パソコンでもスマートフォンでも読めます。WebGL が動くブラウザ(Chrome・Safari・Edge・Firefox の 最近の版)が必要です。 通信環境が細いときは、世界を開くたびに少し読み込みの時間がかかります。
3D の描画は Three.js です。飛び出すカードは各作品の絵から、星図・アトラス・日本地図は作品のデータから組み立て、 浮遊島は Blender で組んだ glTF の模型を使っています。ページがめくれる動きも、紙の反りまで含めて Three.js で動かしています。 サーバー側の処理はなく、HTML とアセットだけで動きます。
制作の工程と、つまずいた所は記事にしています。うまくいった手順よりも、 詰まった所とそこの抜け方を中心に書いています。