日本人の好みにはちょっと合わないかも……クリスマス商戦に展開されるキャラクターのサイト

doxas : 2017-11-16 14:01:07

正直に言うとちょっと紹介するか迷いました(笑)

今回ご紹介するのは、イギリスの大手百貨店である、ジョン・ルイスが展開する子供向け製品のクリスマス商戦に関連したサイトです。

ジョン・ルイスは日本ではあまり知名度はありませんが、イギリスでは王室ご用達の指定を受けるような、歴史ある百貨店です。日本で言えば、三越とか高島屋とか、そういった百貨店に近いイメージなのかな?

そんなジョン・ルイスが今年のクリスマスに子供向けのキャラクターとして独自に展開するのが、今回のサイトに登場する「Moz Monster」というキャラクター。Moz というキーワードがついてるからてっきり Mozilla のことかと思ったら全然関係なかった……

あとは見た目が、ちょっと日本人向けではない感じもするので紹介するか迷ったのですが、ファーの実装など、技術的には結構面白いことがいろいろ試みられているので、せっかくですからご紹介します。

ファーの実装は WebGL としては軽快な動作

今回のサイトは、Moz Monster Maker という名前からもわかるとおり、このキャラクターを独自にカスタマイズできることがウリのサイトとなっています。

子供向けのサイト、ということになるのかと思いますが、WebGL を利用してかなりリッチに仕上がっています。

ページがロードされるとおもむろに Moz Monster が現れるのですが、イギリスの子供たちはこの見た目のキャラクターが突然現れても怖くないのだろうか……

ちょっと不安になります……

ただ、ポーズ変化などの大きなアクションを伴う動きや、逆に細かい部分の表情の変化など、かなり滑らかに、そして多彩に変化するのは本当にすごいですね。

今回のサイトはキャラクターをメイキングできることがウリになっているので、CREATE と書かれた部分をクリックして順番に手順を踏んでいくと、独自の外観のオリジナルの Moz Monster を生み出すことができます。

これがそのままぬいぐるみなどでオーダーできるとか、そういう企画ではないようですが、自分のオリジナルデザインが作れるというのは、子供にとってはとても面白いんじゃないかなと思います。

体格や腕の長さなどを自由に設定したり、色を変えたり、体にペタペタとペイントしたり……結構いろんなことができるようになっています。

インターフェースは、子供向けということもあってか、かなり直感的なので迷うこと無く操作ができると思います。

技術的な面では、純粋にその滑らかなモーションや表情の表現などの素晴らしさが挙げられると思います。

若干、デザインが日本のキャラクターとは違う方向性なのかなと思うので、なかなか評価が難しいのですが、それでもすごく自然なフェイスアニメーションなどはとても見事ですね。

また、全身を覆っているファーの表現が WebGL 界隈ではあまり見られない面白い質感を実現していると思います。ファーは基本的に重くなりやすい傾向があるので、WebGL ではそもそもファーの表現を取り入れているケースそのものが珍しいと言っていいと思います。

今回のファーの実装は、テクスチャを利用して擬似的に毛のように見せるタイプのやつかなと思います。と言われてもなかなかイメージしにくいと思いますが、要はドットが散りばめられたホワイトノイズのようなテクスチャを用意し、それを複数層重ねることによって、まるで毛があるかのように立体的に見せるやり方です。

アップになったときとかに、よーく観察してみると、わかるんじゃないかな?

毛なんだけど、つぶつぶしてます。

百貨店が独自にこういったキャラクターを製品化するっていうのは、結構すごいことなんじゃないかなと思うのですが、今回の場合はなにぶん文化の違いを感じる面が多いのでなんとも言えません……

今回のサイトはどちらかというとリアリティを求めるタイプの演出が中心になっていますが、同時に展開されている商品などを見ると、もう少し砕けた感じの絵本風のイラストで描かれている Moz Monster などもあるようなので、キャラクター製品としては様々なタイプがあるようです。

コンセプトムービーのようなものも公開されているのですが、そのムービーに登場する Moz Monster はまさに今回のサイトのような感じの見た目をしています……マジでイギリスの子供たちは怖くないのかな……

ちなみに、今回のサイトで使われているファーの実装は、Pocol さん(@ProjectAsura)のサイトにある「☆PROJECT ASURA☆ [OpenGL] 『エフェクト(15) 毛皮』」が参考になると思います。

ファーの実装やスムーズなモーションなど、かなり技術的には見応えのある WebGL 実装例になっています。気になる方はぜひチェックしてみてください。

リンク:

Home | John Lewis Monster Maker

Moz The Monster | John Lewis

share

follow us in feedly

search

search

monthly

sponsor

social