布や紙のような平面のオブジェクトを使った表現が秀逸！ハンドメイドジュエリーを扱う Floema Jewelry のウェブサイト

doxas : 2021-08-05 14:22:49

淡いカラーリングでエレガントな雰囲気

今回ご紹介するのは、すべての製品が職人によるハンドメイドで作られているというジュエリーのブランド、Floema Jewelry のウェブサイトです。

サイト全体のカラーリングが淡い色調になっていて、なんか高級感とかっていうよりは、落ち着いた雰囲気になっていますね。

まあ例によって私は宝飾品に関する予備知識はないのでそれらの製品についてはなにも説明することができないのですが、WebGL を使っている部分にフォーカスを当てつつ紹介していこうと思います。

今回のサイトには、平面を 3D 的に表現するビジュアルが多く登場します。

たとえば、今回のサイトのトップページ部分では、ローディングが終わったあとカード状のオブジェクトが画面に順番に並べられていくようなアニメーションを見ることができます。

カード状のオブジェクトが手前から奥に向かってスッと動くような感じになっていて、この最初のイントロ演出の時点で立体的な動きが取り入れられています。

さらに、画面上でスクロール操作を行うと、上向きスクロールと下向きスクロールで、それぞれ逆の形にカードが歪みます。細かいことですが、すごくおもしろいフィードバックだなと思います。

上下の２枚のスクリーンショットで、歪む方向が逆転しているのがわかるでしょうか？

さらに、トップページから Discover のボタンを押して個々の製品を見ていくと、ここでも平面的な形状のオブジェクトをあえて立体的に扱ったビジュアルが登場します。

今度は硬いカード上のオブジェクトというよりは、少し柔らかい印象の、布かあるいは紙のような雰囲気になっています。

ほんの少し波打ったようなシルエットになっていて、トップページのそれとはまた違った雰囲気です。

この紙のようなオブジェクトをクリックすると、個々の製品の詳細ページへとシーンが移動します。

SPA なのでブラウザのページ遷移は伴わずにシームレスに状況が変化するのですが、紙のようなオブジェクトがくるくると回りながらアニメーションするようになっていて、とても生き生きとした印象を与えます。

派手に素早く動くというよりは、なんというか……

ゆったりと流れるようなアニメーションという感じで……

そういった「動き」とい意味においても、やっぱり落ち着いた雰囲気になっていますね。

ウェブサイトのデザインを考えたときに、使われているテーマカラーやフォント、あるいは余白の取り方などによって、全体としての方向性がある程度決まってくると思います。

今回のサイトの場合、落ち着いたカラーリングと丸みを帯びたフォント、そして滑らかでゆったりとしたアニメーションなどの効果が相まって、なんとも言えない一体感と統一感が生まれていると感じました。

また、登場する 3D モデルも、あえて薄い紙状やカード状のオブジェクトだけに絞ることによって、シンプルながら説得力のあるビジュアルを実現していると思います。