ひとりぶんの棚. ひとりぶんの棚 › とびだす絵本の世界とは

About — とびだす絵本の世界

ページをめくると、
世界がとびだす。

とびだす絵本の世界は、ブラウザで読める 3D のしかけ絵本です。 紙のページをめくると、その上に作品そのものが立体でせり上がります。全 15 ページ、13 の世界。 10 匹のいきものが、どこかのページに隠れています(ページの中で立つ場所は日替わり)。 登録もインストールもいりません。スマートフォンでも無料で最後まで読めます。

Pages
14
Worlds
12
Creatures
10
Chapters
4
Price
無料

01 — Whatどんな絵本か

しかけ絵本(ポップアップブック)を、紙ではなくブラウザの上で作りました。 見開きの中央からページが立ち上がり、作品の頁をめくると別の世界があらわれます。 飛び出すものは、どれも作品そのものから作っています。物語はゲームの背景と登場人物のカード、 音楽の宇宙は 19,810 組の星図、AI 能力アトラスは 326 の仕事の地図、ひとり歓迎マップは 40,615 施設の日本地図、 一人旅は旅先で撮った写真、動画づくりの頁は公開前の検査の帳面と、公開中の動画 137 本の音量の図です。 作品の頁をめくると、画面全体の景色と光の色も、その作品の世界に変わります。

押さなくても、飛び出しは眺めているうちに作品の中身を見せます。キューブは縦・横・奥の一列がそろうたびに光り、 音楽の宇宙では星のひとつに歌い手の名前がともって、似ている歌い手の星へ線がのびます。 AI 能力アトラスは「議事録の作成」のような身近な仕事が年ごとにどこまで AI にできるかを示し、 ひとり歓迎マップのピンからは、実在のお店や施設の公式サイトにある「ひとりで大丈夫」の一文が浮かびます。 森の小屋のカードは、ときどき小屋の中の 360° の部屋に切り替わります。 動画づくりの頁では、頼んだ 1 段落から作った縦の動画が、読み違い・字幕の位置・音の大きさの検査で止まっては直り、「公開してよい」まで進みます。

飛び出したものを押すと、作品ごとのしかけが動きます。道筋を駆けのぼる光、「嘘」と「真」の判、歌う銀河、 ばらけて解けるキューブ、裏返る旅の写真、雷と停電の小屋……。 それぞれの世界は、このサイトで時間をかけて作った作品の入口です。「この世界に入る」を押すと、そのままその作品がひらきます。 絵本を読み進めると、サウンドノベルにも、パズルにも、音楽の地図にも、旅の記録にもたどり着きます。

02 — Worldsこの本に入っている 13 の世界

それぞれの世界から、そのまま作品に入れます。絵本を先に読んでも、ここから直接行っても構いません。

一筆花火線を1本ひくと導火線になる。花火が連鎖して、夜空が全部ひらくパズル。世界に入る → 正解の外側シンギュラリティの、その先の物語。全15話のサウンドノベル。世界に入る → ことつぎの星言葉をつなぐ、海辺の物語。拾った言葉を文章の欠けに継ぐ。世界に入る → 百の悪行魔王の犯行記録を、勇者が検証する。フルボイスの約30分の短編。世界に入る → 音楽の宇宙19,810組のアーティストの星図。好きな音楽の隣で、知らない音楽に出会う。世界に入る → ルーン・キューブ宙に浮かぶ異世界立体数独。縦・横・奥のどこにも同じ数を並べない。世界に入る → 将棋ぷよ「成」駒でつなぐ連鎖の対局。4つつなげて消し、隣の駒が成る。世界に入る → AI能力アトラス326の仕事で見る、AIにできること・できないこと。2022→2030年。世界に入る → 編集ソフトはいらないAIエージェントで作る動画と、公開前の検査。半年で138本、見落としは公開前に止まる。世界に入る → ひとり歓迎マップ「ひとりで入れるか」を根拠つきで。全国40,615施設。世界に入る → 一人旅32の旅と、1,607枚の写真。ひとりで歩いた記録。世界に入る → 浮遊島九つの小さな庭を、ただ歩く。雲の上の箱庭。世界に入る → 森の小屋雨音と焚き火の、360°の静けさ。何もしないための場所。世界に入る →

03 — How to read読み方

  1. ひらく — 読み込むと、1 枚目は自動でめくれます。
  2. ページをめくる — 本の左右の端を押すと、紙がめくれます。キーボードの ← → でも進みます。
  3. 目次をひらく — 🗺 のボタンで「世界の地図」が開き、好きなページへ飛べます。
  4. 音を鳴らす — はじめは鳴っていません。どこかを押すと BGM と効果音が鳴りはじめ、♪ のボタンで止められます。
  5. 眺める — 押さなくても、飛び出しはその作品の中身を少しずつ見せます(言葉を継ぐと台詞が変わる、紙飛行機が旅の写真をめぐる、灯りが九つの庭を歩く、など)。
  6. しかけを動かす — 飛び出したものを押すと(スペースキーでも)、その作品らしいしかけが数秒動きます。本のうしろの魔法使いの二人を押すと、ひとこと話します。
  7. 世界に入る — 「この世界に入る」を押すと、その作品に移ります。
  8. 戻る — 最後のページ(おしまい)から、前のページ・目次・ほかの作品へ戻れます。

いきもの図鑑

10 匹のいきものが、どこかのページに隠れています。オオカミのこども、イボイノシシ、 ジェンツーペンギン、ビントロング、ユキヒョウ、ケナガイタチ、ライオンのこども、 ジムグリガエル、オサガメ、ディンゴ。 どの子がどのページにいるかは決まっていて、ページの中で立つ場所が日替わりで変わります。 見つけた子は図鑑に記録され、同じブラウザなら次に開いたときも残っています。

動く環境

パソコンでもスマートフォンでも読めます。WebGL が動くブラウザ(Chrome・Safari・Edge・Firefox の 最近の版)が必要です。 通信環境が細いときは、世界を開くたびに少し読み込みの時間がかかります。

04 — How it's madeどうやって作ったか

3D の描画は Three.js です。飛び出すカードは各作品の絵から、星図・アトラス・日本地図は作品のデータから組み立て、 浮遊島は Blender で組んだ glTF の模型を使っています。ページがめくれる動きも、紙の反りまで含めて Three.js で動かしています。 サーバー側の処理はなく、HTML とアセットだけで動きます。

制作の工程と、つまずいた所は記事にしています。うまくいった手順よりも、 詰まった所とそこの抜け方を中心に書いています。

05 — FAQよくある質問

お金はかかりますか。登録は必要ですか。
どちらも不要です。ブラウザで開くだけで最後まで読めます。会員登録も、アプリのインストールもありません。
スマートフォンでも読めますか。
読めます。指でページの端を押すとめくれます。飛び出したものを押すと、しかけが動きます。
読んだ場所やいきもの図鑑は保存されますか。
同じブラウザであれば保存されます。見つけたいきものは図鑑に記録され、次に開いたときも残っています。ブラウザの保存データを消すと消えます。
いきものは何匹いて、どうすれば見つかりますか。
全部で 10 匹です。いきものごとに隠れているページが決まっていて、ページの中のどこに立つかが日替わりで変わります。
何で作られていますか。
3D の描画は Three.js です。飛び出すものは各作品の絵とデータから組み立てています(浮遊島だけは Blender の模型)。HTML とアセットだけで動き、サーバー側の処理はありません。
英語でも読めますか。
読めます。本の中の言語ボタンで日本語と英語を切り替えられます。

06 — Open読んでみる

ここまで読んでいただいたので、あとはめくるだけです。