じんわりと現れるホバーエフェクトの質感は唯一無二！ デジタルデザインスタジオ Kokopako のウェブサイト
２つの世界を行き来する
今回ご紹介するのは、Kokopako というデジタル・デザインスタジオのウェブサイトです。
活動拠点はロンドンのようで、事例を見てみるとこれまでに WebGL を使ったインタラクティブなコンテンツの制作実績などもあるようです。
２つの世界を行き来するような、空間的な広がりの他にも次元的な広がりを感じられる実装となっています。
リンク：
ギミックにもこだわりが感じられる一品
今回のサイトでは、表の世界と裏の世界、といったような雰囲気の２つの世界が 3D で表現されています。
表の世界には、どこか抽象的な雰囲気の、ジオメトリのエッジがラインで描画されるオブジェクトが登場します。なんとなく、現実感の薄いデジタルな空間のようなテイストです。
トップページの冒頭部分の他、そのままスクロール操作することでシームレスに閲覧できる Works のページが、まさにデジタルっぽい感じの空間になっています。
ジオメトリの形状やマテリアルを見ても、いかにもデジタル空間という感じですよね。
このとき、並べられている各事例の文字の部分にカーソルをホバーさせると、ふわっとサムネイルが浮き上がってきます。
このサムネイルが現れるホバーエフェクト、ノイズを上手に利用していて他ではあまり見たことがない独特な雰囲気に仕上げられています。
ものすごく丁寧に作られている感じがあり、触り心地が非常に素晴らしいです。
さらに、画面の中央にずっと固定された状態でおかれている黒い枠か、もしくは画面の上のほうにある About のリンクをクリックすると、世界が一気に暗転します。
About ページのほうは背景が黒になり、いままでどこか抽象的だった 3D オブジェクトが、より本物っぽい質感の石や岩に変化します。
先程まではすごくデジタル空間っぽい感じの印象でしたが、一気に現実感の強いオブジェクトが画面全体を埋め尽くしたような形になり、すごくメリハリのある絵作りになっています。
今回のサイトでは 3D 表現に複数のパターンがあり、それぞれがすごくコンセプトのはっきりしたビジュアルになっているので、コンテキストが切り替わったことがより明確に伝わるようになっています。
いかにもデジタルといった雰囲気と、逆にアナログなものを感じさせる雰囲気とが両方用意されているのは、なにか深い意味や意図があってのことなのでしょうね。
それぞれの絵作りにも妥協がなく、各種インターフェースのトランジションなどもなめらかで美しいウェブサイトだと思います。
ぜひチェックしてみてください。
