フランスのエージェンシー Hands の 2017 年を振り返る「手」をテーマにしたデモがすごい
12 種類の多彩な表現
今回ご紹介するのは、フランスのデジタルエージェンシーである Hands のウェブサイトで、恐らく、昨年末から今年の始めに掛けて制作・公開されたサイトだと思います。
いわゆるポートフォリオサイトのような感じで、彼らが 2017 年に手掛けた事例などが紹介されており、それぞれの事例に沿ったテーマの「手の形をしたオブジェ」が置かれている、まるで博物館のような雰囲気が素晴らしいです。
エフェクト表現等もかなりこだわっていますし、すごく完成度の高いサイトとなっています。
質感とインタラクションの魔術
今回のサイトで何よりも驚かされるのは、その実装されている「手のオブジェの様々な質感（マテリアル）」だと思います。
あるものは木でできたような質感、あるものは石や布のような質感、というように、かなり多彩なマテリアルを実現しており、見ているだけで本当に面白いです。
サイトのロードが完了すると、まずはこの記事の冒頭にあるような、木彫りの手のオブジェが置かれたシーンが出てきます。
このような手のオブジェが全部で 12 個用意されているのですが、それぞれの手のオブジェがあるシーンでは、マウスボタンのクリック＆ホールドで、実際の事例の動画がフェードインしてくるような演出を見ることができます。
このフェードイン演出がめちゃくちゃかっこいいのですが、さらに手のオブジェが完全に消えてしまうこと無く、微妙に光学迷彩のような感じで見えているのがまた憎らしいほどかっこいいですね。
アニメーションも非常にスムーズで、とにかく細部にまで隙が無く、本当に見事です。
飾られているオブジェの質感、背景に見えている壁や床の質感、そしてフェードイン演出でのスムーズなアニメーションなどなど、いずれも高品質な仕上がりです。
ほんとにすごいです……
微妙に光学迷彩的な感じで手のシルエットが見えているのがわかるでしょうか。
それぞれの事例に合わせて、手のオブジェがどのような形や質感を持っているのかが調整されているのも、とても面白いですね。
なかには石のような感じなんだけど色が刻々と変化するようなものがあったり、金属的な表現のなかにも、銅のように見える物や鉄のように見える物があるなどかなり多彩です。
個人的にはネオンのような V サインがとても面白いと思いました。
今回のサイトは PC でも問題なく閲覧できますが、モバイルでの閲覧を考慮してか、PC で閲覧している際もスワイプするように操作することでシーンが変化するようになっています。
ホイールスクロール等を用いるのではなく、画面を横方向になぞるようにしてやると、12 種類の表情豊かな手のオブジェを見ることができます。
ここでは全てを紹介することはできませんでしたが、本当に非常によく工夫された、様々な質感が実現されておりとても見応えがあります。またフェードインアニメーションも素晴らしい出来栄えになっていて、参考にできるポイントがすごくたくさんありますね。
ぜひチェックしてみてください。
