ノスタルジックな雰囲気とパーティクルを使った演出が素晴らしい! Chartogne-Taillet のウェブサイト
古い本の1ページのような風合いがお見事
今回ご紹介するのは、(たぶん)ワインの生産農家さんのウェブサイトです。
日に焼けて少し色がくすんだ本のような、独特な質感の 3D シーンが非常に素晴らしい出来栄えのウェブサイトで、3D 的な見せ方も、2D 的な見せ方も、いずれもすごくよく考えられています。
一見すると、セピア調であまり色彩豊かな方向性ではないのかな~ とも感じる外見ですが、要所要所で挿入されるパーティクルエフェクトがいい意味でインパクトが強く、バランスの良い実装になっていると思います。
リンク:
ノイズを使って徐々に浮かび上がるようなエフェクトもステキ
今回のサイトでは、まず全体の雰囲気として古い本のような独特な質感が目に入ると思います。
ノイズを上手に利用して徐々に風景やイラストが浮かび上がってくるトランジションもかっこいいですし、すごく雰囲気が良いビジュアルだと思います。
フランスのブドウ農園を鳥の視点で眺めることができるのですが、なんとも壮大な、自然の持つ雄大さみたいなものが感じられるビューが展開されます。
俯瞰して広い土地全体を眺めている場合、3D シーン上にいくつかアイコンが浮かんでいるのがわかると思います。
そのアイコンを選択してフォーカスすると、この上の画像にあるように少しカメラが寄ったような状態になります。
この状態は「詳細ページの冒頭部分」となっていて、そこからさらにスクロール操作を行うことで、詳細ページのコンテンツ(文章や画像で構成された読み物)を見ることができるのですが……
この詳細コンテンツへと遷移する際の演出としてパーティクルを使ったページ遷移エフェクトが発生します。
これがものすごく迫力があり、色彩も豊かで思わず目を奪われますね。
パーティクルがほどけて散らばっていく様子は圧巻。
このパーティクルのエフェクト、色合いも、アニメーションやイージングの速度なんかも含めて全体的な質感が非常に柔らかい感じに仕上げられていて、何度見ても気持ち良いですね……
マウスカーソルを動かしてみると、パーティクルの立体的な構造がよりはっきりとわかるようになっていますし、インタラクティブなグラフィックスとして一種独特な世界観を構築していますね。
その他、3D 的に見える部分だけでなく、2D 的に見える部分も工夫が凝らされた箇所が多くあり、サイト全体としての完成度が高いなと感じました。
今回のサイト、一応公式に日本語版も用意されているようなのですが、MENU をわざわざ「メニュー」と訳していたり、なんとなくデザインとミスマッチになってしまっているのがちょっと残念…… ※もちろん、消費者に向けてわかりやすく表記したい、などの意図が働いたものだと思いますので、なにか否定的なことを言って非難したいわけではありません。
ただ、英語やフランス語で見た場合にはサイトのノスタルジックな雰囲気も相まって、すごくまとまりのよいビジュアルになっています。
3D の世界と 2D の世界を上手につなぎ、ユーザーの視点や視線、あるいは注意がしっかりとコンテンツに向けられるように UX が設計されていると思いました。
サイト全体の雰囲気がしっかり統一されていて、レベルの高い実装だと思います。
ぜひチェックしてみてください。