【2020年版】参考サイトまとめ【WebGL（3Dアニメーション）】編

• Web Create
• 2020.03.31

こんにちは、みつです。
今回は2020年のwebデザイントレンドの筆頭である、WebGLを使ったサイトをご紹介していきます。

以前から人気のWebGLを使ったサイトですが、今年に入ってさらに多く見かけるようになりました。
VRの普及や本格的な5Gの普及(ぜひTRYM Laboratoryの5Gの記事をご覧ください。とてもわかりやすくまとまっています→迫りくる5G時代にWeb制作会社はどうあるべきか)に向けて、このトレンドは継続しそうです。

立体的な表現を用いることで表現の幅はますます広がり、短時間でより多くの情報を発信できるようになります。
インパクトのあるサイトづくりができれば、ユーザーをよりコンテンツに引き込むことができるでしょう。

早速ご紹介していきます！

MaxMara Bearing Gift

https://maxmara-bearinggifts.betteringbrands.com/

看板商品のテディベアコートにちなんでテディベアたちがたくさん出てくるWebサイトです。
ブランドの世界観や、商品のイメージがよくわかります。
この他にも、ファッションサイトでは3Dグラフィックを用いて商品のディテールを紹介するサイトがよくあります。
店頭に行かずとも商品の雰囲気がわかるので、より一層ECサイトでのお買い物が便利になりますね。

RIMOWA UNIQUE

https://www.rimowa.com/fr/en/unique/customize?PID=97253004#/

RIMOWAのトップページにもアニメーションや動画が用いられていてとても面白いのですが、中でも印象的だったページがこちらです。
タグやハンドル、ホイールに好きな色を当てはめて、カスタマイズが一瞬でできるページです。
店頭で見るよりももっと簡単に、いくつものパターンを試せます。
もはやお店よりもサイト上で選んだ方が想像通りのスーツケースが購入できるでしょう。

RINGO アイスバー

https://ringo-applepie.com/lp/icebar/

商品を写真で見せるのではなく、立体的に表現することで自ら手に取っていることが簡単に想像できます。
購入に繋がるこの過程をうまく表現したデザインです。
ブライトトーンでまとめられたカラフルな色使いや、大きなタイポグラフィなど今年っぽさ満載です。

Throwbacks Music

https://throwbacks-music.com/

Spotifyによる「過去の名曲を辿る旅へ」というテーマのサイトです。
アニメーションや音楽を用いて名曲とアーティストを紹介しています。
現代的なインタラクションデザインをふんだんに使いながらもレトロな世界観に、音楽好きはかなり引き込まれるサイトです！
ずーっと見ちゃいます。

日経社 2021年度 採用サイト

https://www.nks.co.jp/recruitsite/index.html

新卒社員の採用サイトです。凝ってます。
2021年度に新卒社員になるお若い方々が見ても郷愁に駆られそうな、レトロな雰囲気が可愛いです。
いろんなところをクリックしたくなるので、ユーザーは楽しみながら自然と必要な情報を確認できます。
就活中のストレスも緩和しそうです。

__🚗__________________

https://bruno-simon.com/

クリエイティブディベロッパーの方のサイトです。
すごいの一言なので、みなさんぜひ訪れて楽しんでください！
 

平面的なサイトとはやはり没入感や滞在時間が違ったのではないでしょうか。
皆様もこれからワクワクできるサイトを作っていきましょう!