ちょっとめずらしい「髭」をテーマにした WebGL コンテンツが面白い求人告知ページ

doxas : 2017-08-25 13:58:26

思わずニヤリとしてしまいそうなテーマ

今回ご紹介するのは、とあるデジタルエージェンシーのウェブサイトで、恐らく求人用の告知ページかなにかなのかなと思います。

サイトに置かれているコンテンツは WebGL を利用したものが中心なのですが、テーマはなんとヒゲです。こういうのは珍しいですし面白いですね。

いくつかの特徴的な文字列表現、そしてその文字によって描かれる人物名とヒゲという興味深いテーマに沿って描かれるビジュアルは、一種独特なユーモアに満ちています。

今回のサイトは、デザインという意味で非常によく考えられているなと思います。私はデザインの専門家ではないので、素人目線でしか見ることができていないとは思うのですが、非常にセンスのある、面白い外見に仕上がっています。

まず最初のローディング画面が面白いですね。

日本でもおなじみの、理髪店をイメージさせるプログレス表現は、実際にロードの進捗具合が手に取るようにわかるといったものではないのですが、最初のロードを待っているところからグッと見ている人の心をつかむ、そんなデザインだなと思いました。

ロードが終わると、このサイトの主役であるヒゲたちが登場します。

特徴的なシルエットをしたヒゲと、独特なデザインのフォントによる表記で描かれるシーンはユーモアたっぷりです。

ヒゲしか描画されてないのに、思わず人物の顔まで頭に浮かんでくるというのは実に不思議な感覚ですね……

背景の色や使われている文字やイラストなどもそうなのですが、とにかく見ていて楽しい気分になる雰囲気が素晴らしいと思いました。

ヒゲはたくさんの尖った筒状のオブジェクトで描画されるのですが、先端部分には微妙にマウスカーソルとのインタラクションが仕込まれているので、カーソルでなぞるようにすると、ヒゲがちょっとだけ動く様子も面白いです。

また、このサイトのシーン遷移も非常に凝った内容になっています。

ヒゲを剃るときに使う真っ白な泡をイメージさせる、独特なシーン遷移が使われていますね。

泡が吹き付けられてからひげそりで一気に剃り上げられていくような演出が、効果音との見事な一体感もあって非常にインパクトのある演出になっています。

今回のサイトは画面の下の部分に隠れているコンテンツをひっぱりだすと、そこに求人っぽい感じの内容のことが書いてあるだけで、あまりたくさんコンテンツが用意されているという感じではありません。

あくまでも、ヒゲを主人公にした WebGL のデモが、演出の中心といった感じの作りですね。

このサイト全体に満ちている楽しげな雰囲気はもちろんですが、一方では、WebGL を利用することで技術力もしっかりと感じさせる、そんな印象のサイトですね。

こんな面白い求人サイトがあったら、興味を持ってくれる人もたくさんいそうです。まあこのサイトだけ見て即決ってことには、ならないとは思いますが（笑）

シーン遷移のエフェクト表現なども含めて、実は結構 WebGL を使った演出面はしっかりとした技術で実現されていると思います。参考にできるところも多いと思いますので、ぜひチェックしてみてください。