世界中の不思議な伝承にまつわる生き物たちと出会える幼児向けアプリのウェブサイトが面白い！
大人でも思わず笑みがこぼれる面白さ
今回ご紹介するのは、幼児向けのアプリを元にしたウェブコンテンツで、WebGL を利用して描かれる世界中の様々な土地に赴き、伝説や伝承で伝わっている生き物たちと触れ合うという内容です。
ウェブサイトの作りも、元になっているモバイルアプリと同様に、子供でも容易に操作できるようなインターフェースになっており、非常にわかりやすいですね。
可愛らしいイラストを元に、必要な部分は WebGL でリッチな表現を行っている感じで、バランス感覚も見事です。
全世界 25 箇所に散らばる不思議な空想上の生き物たち
今回のコンテンツは、先述のとおり、元はモバイルアプリであり、最終的にはこのアプリをスマートフォンなどにインストールしてもらうことを目的にしたサイトだと思います。
しかし、実際にこのサイトでも楽しい体験ができるように作られていて、まるでちょっとしたゲームのような感じで、世界中の空想上の生き物たちを見つける旅に出ることができます。
ページのロードが終わると、まずは今回のコンテンツで主人公となるふたりのキャラクターが登場します。
こういった導入部分も、やはり子供でもわかりやすい感じのデザインになっていますね。（おかげで英語が苦手な私でもわかりやすかったｗ）
世界を練り歩くシーンは WebGL による立体的な地球の上を、キャラクターがずんずん歩いていくような感じになっているのですが、効果音や BGM の効果もあって、非常に楽しい雰囲気に仕上がっています。
地球の一部分しか画面には出ないのでわかりにくいのですが、しっかりと、実際の地球と同じように球体全体に様々な国家を模した島が置かれています。なんか日本は全部陸続きの怪しげな島になってるのですが、それでも、その形から日本であることはすぐにわかります。
そしてこの地球上のいろいろな土地には、一部、目の形をしたアイコンが浮かんでいる場所があります。
このアイコンがある場所では、その土地にまつわる不思議な伝説の生き物たちに出会うことができます。
日本はごらんのとおり、かっぱがお出迎えしてくれます。
このように、3D で表現されていたワールド表現から、シームレスに二次元っぽいイラストの表現に変化するのですが、そのシーン遷移は非常にスムーズでなんとも見事です。
また、イラストをベースにした二次元的な表現とは言っても、マウスカーソルの動きに合わせて微妙にオブジェクトが上下左右に動くので、2.5D っぽい感じに表現されていますね。これはもしかしたらモバイルだとジャイロで動いたりするのかもしれないです。
また、さらにスクロールしてやれば、この生き物がどのような特徴を持っているのか、わかりやすくイラストや文章によって示されます。
まるで絵本を見ているかのような気分にさせてくれる、素晴らしいコンテンツだと思います。
また今回のサイトでは、3D 表現を中心に、基本的には three.js を利用した実装が使われているのですが、一部には、あえて Pixi.js を使っているページもありますね。
モバイルアプリのほうは AR の機能などを持つアプリのようなので、それに関する説明のシーンなどでは、AR 機能を使って遊ぶにはどのようにしたらいいのかなどの解説がされています。
AR のマーカーとして使うことができるカードの PDF ファイルが配布されていたりもするので、これを使ってすぐにでもアプリを使って遊ぶことができるようになっています。
非常に丁寧な仕事が一貫していて、素晴らしいです。
一見、ただのイラストのようだが Pixi.js を利用しておりぐいぐい動きます。
今回のコンテンツは、その主体はあくまでもモバイルアプリであり、そこに誘導するためのウェブコンテンツという感じではあるのですが……
それでも 25 体もの空想上の生物をブラウザ越しに探索しながら収集できる体験は、仮に大人であってもとても楽しい経験になると思います。
特徴的なイラストももちろんそうなのですが、ウェブサイトの作りとしても非常に丁寧かつ親切な設計になっていて、勉強になりますね。
3D 部分では特に技術的に特筆するような部分はあまりないのですが、その分、王道的な表現をしっかりと押さえた感じで抜かりがない印象でした。
純粋にコンテンツとして楽しめる内容ですので、ぜひチェックしてみてください。
