インクがにじむようなエフェクトとモノクロ化を組み合わせた個性的な演出が光る Liron Moran Interiors のウェブサイト
必要最低限の WebGL 表現
今回ご紹介するのは、インテリアを含めたオフィスデザインを手掛けるスタジオのウェブサイトです。
全体的にシンプルで落ち着いたデザインのウェブサイトで、どちらかというとオフィスの様子を撮影した写真がメインのウェブサイトという感じでしょうか。
WebGL は最低限という感じで、どちらかというと CSS を利用した多彩な表現に驚きます。
リンク：
Office design | Liron Moran Interiors | Israel
シンプルで個性的な演出が見事
WebGL が使われている場所がかなり限定されている今回のサイト。
該当の箇所はトップページの冒頭部分、大きめの文字で書かれたキーワードの手前に画像が１枚出てくる場面でそのエフェクトを見ることができます。
カーソルを画像に重ねてやると、その重なった部分だけが一瞬モノクロに変化するという一風変わった演出です。
この上の画像を見ると、画面の中心にある写真の床の部分が、モノクロの部分とカラーの部分に分かれているのがわかるでしょうか。
このエフェクトはインクがにじむような感じでカーソル位置の部分にだけ色彩の変化が表れます。
一方でこのインクのようなにじみは、まるでアルコールを引き伸ばしたときのようにあっという間に揮発してもとに戻ってしまいます。
このような表現はあまり見たことがなかったので、すごく新鮮で個性的だと個人的には感じました。
また、冒頭にも書いたのですが今回のサイトは WebGL を使っている部分はこのトップページの部分くらいで、その他の演出は CSS によってインタラクティブな動作が実装されています。
そのどれもがすごくよくできていて、イージングの掛け方なんかも含めてかなりしっかり体験がデザインされているなと感じます。
WebGL を使える人間からすると CSS でこういう演出を行うことができるっていうのは、まずアイデアを思いつくところから言って本当にすごいと思ってしまいます。
シンプルで、すごく洗練された雰囲気のウェブサイトで、その雰囲気を壊さないちょうどいい温度感の演出の数々が見事に機能している完成度の高いサイトだと感じました。
WebGL の演出もちょっと変わった感じのもので、単調過ぎず、かといって奇をてらい過ぎているわけでもなく、バランス感覚が素晴らしいですよね。
こういうおしゃれなサイトやそのアイデアって、どういう思考回路をしていたら湧き出してくるんですかね……
ぜひチェックしてみてください。
