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

About — とびだす絵本の世界

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

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

Pages
21
Worlds
16
Creatures
10
Modes
2
Price
無料

01 — Whatどんな絵本か

しかけ絵本(ポップアップブック)を、紙ではなくブラウザの上で作りました。 見開きの中央からページが立ち上がり、めくるたびに別の世界があらわれます。 絵は 2 通りの見え方を切り替えられます。「水彩」はやわらかい絵本の絵、 「3D」は同じ世界をポリゴンで組んだ立体です。同じ場所を二つの目で見る、という作りです。

それぞれの世界は、このサイトにある別の作品の入口にもなっています。 絵本を読み進めると、サウンドノベルにも、パズルにも、音楽の地図にもたどり着きます。 この本 1 冊が、このサイト全体の目次になっている、という設計です。

2 つの見え方

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

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

森の小屋焚き火と360°の静けさ。何もしないための場所。世界に入る → 正解の外側シンギュラリティの、その先の物語。全15話のサウンドノベル。世界に入る → 北の対局場将棋ぷよ「成」。駒を色に見立てた対戦パズル。世界に入る → ことつぎの星言葉をつなぐ、海辺の物語。拾った言葉を文章の欠けに継ぐ。世界に入る → 百の悪行魔王の犯行記録を、勇者が検証する。約30分の短編。世界に入る → ルーンの大聖堂異世界立体数独。宙に浮くN×N×Nのキューブ。世界に入る → 心の庭浮遊島をめぐる瞑想。9つの静かな場所。世界に入る → 小さな灯朝がつらい君への手帖。心を軽くするための小さな話。世界に入る → 時の計り手高精度ストップウォッチ。ひとりの時間を測る道具。世界に入る → ことばの書斎YouTubeで英語リスニング。英日字幕と区間リピート。世界に入る → 試練の武具庫TOEIC Part5 三十番勝負。最新ニュースから作った文法問題。世界に入る → 歌う銀河一万九千人の音楽の宇宙。知らない音楽に隣から出会う。世界に入る → 出航の港32の一人旅の記録。写真とともに。世界に入る → 地図師の机浮遊島群の地図。羊皮紙の上の島々。世界に入る → 消えない焚き火森の小屋の、ある夜の物語。世界に入る → 声を、あげる声が売り買いされる街で。この世界はまだ準備中です。準備中

もう 3 つ、行き先のない世界

Enchanted(妖精の森)、Valhalla(北欧の神々の広間)、Dark Fantasy(崩れゆく大聖堂)は、 どこにもつながっていない、ながめるだけのジオラマです。ページをめくって、ただそこに居るためのページです。

03 — How to read読み方

  1. ページをめくる — 本の左右の端を押すと、紙がめくれます。キーボードの ← → でも進みます。
  2. 見え方を変える — 左上の「水彩 / 3D」で切り替わります。重いと感じたら水彩へ。
  3. 目次をひらく — 🗺 のボタンで「世界の地図」が開き、好きなページへ飛べます。
  4. 音を鳴らす — ♪ のボタンで BGM が鳴ります。はじめは消えています。
  5. 世界に入る — 世界のページで「この世界に入る」を押すと、その作品に移ります。

いきもの図鑑

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

動く環境

パソコンでもスマートフォンでも読めます。WebGL が動くブラウザ(Chrome・Safari・Edge・Firefox の 最近の版)が必要です。3D の描画がつらい端末では「水彩」に切り替えると軽くなります。 通信環境が細いときは、世界を開くたびに少し読み込みの時間がかかります。

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

3D の描画は Three.js、それぞれの世界のジオラマは Blender で組んで glTF で書き出しています。 ページがめくれる動きは CSS の 3D 変形で、紙の厚みと影は手で調整しました。 サーバー側の処理はなく、HTML とアセットだけで動きます。

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

05 — FAQよくある質問

お金はかかりますか。登録は必要ですか。
どちらも不要です。ブラウザで開くだけで最後まで読めます。会員登録も、アプリのインストールもありません。
スマートフォンでも読めますか。
読めます。指でページの端を押すとめくれます。3D の描画が重い端末では「水彩」に切り替えると軽くなります。
読んだ場所やいきもの図鑑は保存されますか。
同じブラウザであれば保存されます。見つけたいきものは図鑑に記録され、次に開いたときも残っています。ブラウザの保存データを消すと消えます。
いきものは何匹いて、どうすれば見つかりますか。
全部で 10 匹です。どのページに隠れるかは日替わりで変わるので、日を変えてめくると別のいきものに会えます。
何で作られていますか。
3D の描画は Three.js、ジオラマは Blender で作った glTF を読み込んでいます。HTML とアセットだけで動き、サーバー側の処理はありません。
英語でも読めますか。
読めます。本の中の言語ボタンで日本語と英語を切り替えられます。

06 — Open読んでみる

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