ピクセルソートのような特徴的なトランジション演出が面白い! インテリアデザイナー Camilo Alvarez さんのウェブサイト
ホワイトノイズなどを活用したオシャレ演出
今回ご紹介するのは、インテリアデザイナーの Camilo Alvarez さんのポートフォリオサイトです。
フロントエンドの実装を行ったのは gusto というデザインスタジオなんですが、こちらのスタジオは WebGL 実装を過去にも行った実績のあるところなので、今回のサイトのトランジション演出などを見ても、納得のできばえです。
ちょっと変わった演出を使った、非常にオシャレなサイトになっています。
リンク:
統一感のある演出とデザイン
今回のサイトには、大きめの余白を設けたデザインや、ピクセルソート風のトランジション演出など、かなり統一感のある構成が組み込まれています。
最初のトップページ部分は、四角形の板状ポリゴンが置いてあるシンプルな構図ですが、マウスカーソルの位置に応じて微妙に傾くようになっていて、絶妙な立体感があります。
とは言え、今回のサイトの場合 3D 的な表現が行われているのはこのトップページ部分だけですね。
静止画だと、ちょっとわかりにくいかもしれませんが、本当に僅かにポリゴンが傾いているのがよーく見るとわかるのではないでしょうか。
画面の中央に置いてある比較的大きな矩形エリアと、右下のところにあるやや小さな矩形エリアがありますが、スクロール操作を行ってやると、右下に表示されている画像が中央へと移動します。(言葉で表現するとちょっと意味不明だ……)
この画像が変化する瞬間に、ピクセルソートのような、ちょっと特徴的なトランジション演出が発生します。
画像内のピクセルごとに、その色に応じてトランジションするときの動作が変化するようになっている感じですね。
どうしても、キャプチャ画像で見てしまうと微妙に半透明の画像が混ざっているだけに見えてしまうと思うのですが……
実際に動く様子を見ると、その不思議な質感に思わず目を奪われるのではないでしょうか。
GLSL の処理としてはそれほど難しいことをやっているわけではないので、シェーダの記述に慣れている人なら、その動きを見るだけでだいたいどんなシェーダが書かれているのか、想像できちゃうかもしれませんね。
ただ、印象に残りやすい独特な表現だと思うので、参考にしてみるといいかもしれません。
About ページやメニューを展開した際などにも、このトランジション演出を利用したエフェクトを見ることができます。
サイト全体に掛けられているホワイトノイズのエフェクトや、余白を大きめに取ったデザインなども含めて、少ない「演出素材」を上手に使いまわしているような印象を受けました。
たぶん、演出のバリエーションが少ないのはミニマルでシンプルな印象を持たせるための意図的なものだと想像しますが、こういうの考えられる人は本当にすごいですね……
ぜひチェックしてみてください。