キャラクターがグリグリ動き様々な疑問に答えてくれる幼児・児童向けの教育コンテンツ L’Oeuf Kicétou がすごい!
表情豊かなキャラクターが見事
今回ご紹介するのは、フランスで公開された児童向けの教育コンテンツです。
たまごの形をしたキャラクターが登場し、世の中の様々な疑問に答えてくれるという内容で、表情豊かに生き生きとした動きを見せるキャラクターがなんとも素晴らしいです。
3D と 2D、そして動画を組み合わせて作られていて、フロントエンドの実装としてもとても完成度の高いものになっています。
インタラクティブに動くことでキャラクターが生きる
今回のサイトは、大人がそばにいなくても子供だけで楽しめるように工夫されたデザインになっていると思います。
全体的に角(カド)の立ってないデザインに統一されていることはもちろんですが、文字というよりもイラストや模様をうまく使って、サイト内のインタフェースが組まれています。
サイトの案内役となるのがたまごの形をしたキャラクターなのですが、彼の表情や動きの変化が非常に見事で、とても生き生きとしています。
マウスカーソルの位置をキャラクターの視線が追いかけるような、インタラクティブな実装もなされているおかげなのか、しっかりとキャラクターに生命が吹き込まれているような感じがしますね。
コンテンツを進めていくと、まずは大きなテーマを決めるためのページが出てきます。
ここでは画面の右側にテーマの一覧が出るようになっていて、生き物に関するもの、気候や自然現象に関するもの、人間や、気持ちに関するものなど、本当にいろいろなものが用意されています。
背景の色がぼんやりと、インクが滲んだような感じでテーマカラーで塗りつぶされるのですが、このときの滲み出すアニメーション演出なんかも非常に凝っていますね。
テーマを決めた後は、さらに具体的な質問ごとにコンテンツが別れているので、それらを選択します。
質問に対する答えは、基本的に動画として用意されています。
このサイト全体で、イラストは同じ人が描いた(あるいはデザインした)ものが使われているのだと思うのですが、動画の量とかを考えるとかなり大量のリソースが用意されている感じですね。
質問の数も相当たくさんあるので、子供でも飽きること無く、かなり熱心に閲覧できるのではないかなと思います。
今回のサイトに登場するたまごの形をしたキャラクターは、いわゆる「キンダーサプライズ」と呼ばれるチョコレートの卵のなかに玩具が入っている商品を模したものだと思います。
私はこの手の商品を購入したことがないのでよくわからなくて、ちょっと調べてみたのですが、イタリアのメーカーが製造しているもので現在日本では輸入したものを購入するしかなく、普通にスーパーなどでは市販されていないんですね。
日本でも結構根強い人気があるようで、今回のサイトも、見た瞬間にキンダーサプライズが思い浮かんだ人は実は結構いたのかもしれません。
WebGL の技術だけで考えても、多彩なモーションやインタラクティブな視線追従、ポストエフェクトを利用したインクのような表現など、見どころが多いです。その他にも、普通にフロントエンドの実装としてもかなりハイレベルな内容になっています。
ぜひチェックしてみてください。