石や鉱物を連想させるインタラクションが秀逸！ 石材などを販売する代理店 Stone & Style のウェブサイト
美しい写真も見どころ
今回ご紹介するのは、タイにある石材の販売や加工を行う代理店 Stone & Style のウェブサイトです。
サイト内には WebGL がふんだんに盛り込まれているのですが、使われている写真素材などが非常に美しいものばかりで、本当にビジュアル面の訴求力というか、メッセージ性が強いサイトになっています。
WebGL を利用したインタラクティブな演出では、どこか鉱石などを連想させる、直線を上手に活用した模様や動きが取り入れられています。
リンク：
ページ遷移や状態の変化を楽しもう
今回のサイトは、なかなか静止画ではその魅力を伝えるのが難しいタイプのサイトだと思います。
ユーザーが行うスクロール操作、マウスカーソルの移動、クリックによるページ遷移など、インタラクティブな要因に対して様々なエフェクトや演出が発生します。
それらの演出はどれも、演出の途中をスクリーンショットで静止画として撮影しても、なかなかイメージが伝わらないと思います。
ぜひ、実際にサイトに行って、動いている様子を確認してみてもらいたいサイトになっています。
スクロールを行うと、当たり前ですがページが縦方向に流れていきます。
このスクロールという基本的な操作のなかにも、意図的に仕掛けられた様々な仕掛けの片鱗を見ることができます。
ヌルっと滑るように動いたりする部分はわかりやすいかなと思うのですが、コンテンツ同士の前後関係、スクロールに反応する感度の違いなど、ちょっと見ただけでも様々な工夫が凝らされていることがわかるのではないでしょうか。
そして圧巻なのがページ遷移を伴うシーンでの、ダイナミックな遷移演出です。
黒いカーテンのようなものが画面内に滑り込んで来るのと同時に、コンテンツがクリスタルや水晶のように崩れていく様は迫力満点です。
その他、サイト内にはどこか石や鉱物を連想させるような、ちょっとゴツゴツしたような質感が登場する部分がいくつかあります。
スクロールなどのアニメーションの質感はどちらかというと滑らかな、流れるような印象のものが多いですが……
演出上の動きや表現については、反面結構エッジの効いた内容になっているように感じました。
特に Brands のページで見ることのできる石材の素材写真のアニメーションは単なるノイズのアニメーションとは違う、こだわりの演出に仕上がっていてディレイの使い方とかすごいですね……
一見すると単に画像が置いてあるだけに見えるような場面でも、それらの挙動をよく観察すると、なにかしらの発見や気付きが得られると思います。
まあ気がついたからといって、それをそのまま真似できるかどうかでいうと難しい場合が多いのですが…… それでも、フロントエンドの実装として参考にできるところがたくさんあるのではないでしょうか。
WebGL を利用することで、ビジュアルとしてのインパクトはもちろんのこと、全体としての一体感をも高めていて、非常にレベルの高いサイトだと思います。
ぜひチェックしてみてください。
