シンプルにわかりやすく機能性を説明する Merrell のアウトドアシューズのスペシャルサイト

doxas : 2024-05-30 12:29:36

どこかティザー映像みたいな質感

今回ご紹介するのは、アウトドア用のランニングシューズなどを扱う Merrell のウェブサイトです。

日本でも製品を販売しているメーカーだと思うので、その名前を知っている人も多いかもしれません。

今回のサイトでは新製品をプロモーションしている感じだと思うのですが、すごくダイナミックに要素が動く視覚効果の強いウェブサイトで、シンプルにわかりやすく機能性や魅力が語られています。

今回のサイトは製品の魅力を伝え、興味を持ってもらうことを目的にしていると思うのですが、それを実現するためのさまざまな工夫が凝らされています。

サイト全体のデザインのテイストもあると思いますが、エンターテイメント性と言いますか、アクティブで元気な感じの雰囲気がすごく感じられる一方で、すごくセンスのあるかっこよさみたいなものも上手に演出されていると思います。

サイトの冒頭から、スクロールだけでどんどん閲覧していくことができるのも、シンプルで疾走感があり、かっこいいですね。

イージングの掛け方やスクロール量に対する要素の反応する感度・速度など、かなりしっかり調整してある感じがします。

また、ただ単に勢いだけで攻めてくるわけではないのが今回のサイトの良いところ。

途中、一部のセクションではシューズを構成するパーツが分解され、それぞれのパーツごとにどのような機能を持っているのか詳しく知ることができるギミックなんかも実装されています。

このシューズが分解される部分は、静止画では伝わらないと思いますがスクロールに応じてシームレスにつながっており、テンポ感が損なわれていないところがまたいいんですよね。

そのほか、画像に対してブロック状のノイズが乗ったようなトランジションエフェクトが掛かっていたり、シンプルに、ビジュアルのかっこよさも手を抜くことなく実装・追求されています。

派手すぎず、かといってシンプル過ぎず、ビジュアルには凝っているけど伝えたいことはド直球に表現している、ある意味理想的なバランスで成り立っているウェブサイトだなと感じました。

WebGL ってこだわろうと思えば無限にわちゃわちゃできると言うか……

モリモリにしようと思ったらどこまでも派手にできてしまうところがあります。

今回のサイトのように、3D 表現はあくまでもシンプルに機能性を重視して作りつつ、サイト全体のテイストを踏まえたエフェクトとトランジションで適切に装飾を行うというアプローチは、簡単そうでかなり難易度の高い取り組みだと思うのですが、今回のサイトはそれを見事に実現していますね。