ハイエンドなグラフィックスやモダンなデザインが見事! ロシアのデザインスタジオ Chipsa Design
3D だけでなく 2D 的な表現も
今回ご紹介するのは、ロシアのデザインスタジオ Chipsa Design さんのウェブサイトです。
ロシア語のサイトと英語のサイトが用意されているのですが、とてもモダンなデザインで、アニメーションも含めてとてもカッコいい演出が多いです。
トップページのメタボール的な表現は 3D ですが、サイト内にはそれ以外にも 2D で WebGL を使っている演出も用意されています。
リンク:
細かいところまで作り込まれた精巧なサイト
今回のサイトは、WebGL 部分を差し引いてもすごく手が込んだ作りになっていて、本当に細かいところまで丁寧に作り込まれています。
おそらく、実際にサイトに行っていろいろご覧になってみていただければ自ずと伝わるとは思うのですが、インタラクティブな演出がこれでもかと詰め込まれていて、すごくこだわりの感じられるサイトになっていますね。
トップページ部分には、メタボールが宙に漂うようなデモが背景全体に描画されます。
これはレイマーチングなどではなく、ジオメトリを使って表現されているものですね。
そして、3D 以外の演出にも、注目すべき点が多くあります。
CSS を活用した DOM のアニメーションはもちろんですが、画像が切り替わる瞬間のエフェクトが見られる場面として About ページがあります。
ここでは、彼らの日常の様子を撮影した写真が置かれたエリアがあるのですが、左右のアイコンをクリックして画像を切り替えると、ピクセルソートっぽい感じのトランジション演出が掛かるようになっていますね。
キャプチャ画像ではちょっとわかりにくいですが……
その他、事例の一覧ページにも、一見するとわかりにくいですが、平面的な演出が盛り込まれた箇所があります。
下のキャプチャ画像が事例の一覧ページです。
サムネイル画像が並んでいるなかで、上段の、ちょうど真ん中の画像が波打つように歪んでいるのがわかりますでしょうか?
これはカーソルをホバーさせたときにだけ出現する演出になっています。
About ページを見てみると、彼ら自身の言葉で 3D や 2D のグラフィックスのいずれにも対応できることが記されています。
実際にサイト上の演出を見ても、平面的な演出をベースにしつつも、トップページでは大胆にメタボールの CG を全面で描画するなど、どちらにも対応できることがしっかりと伝わってきますね。
直線的でエッジの利いたデザインも、とてもかっこいいです。
ぜひチェックしてみてください。