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

こんにちは、みつです。
今回は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/

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

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

Writer

みつ

みつ

webディレクターになりました。
美容と橋と美味しいものが好きです。

Contact

ご提案依頼、ご相談、お見積もりなど
お気軽にお問合わせください。

03-6303-9671

平日 10:00~19:00

「Web制作について」とお伝え頂ければ
担当者に取次させていただきます。

Mailform

contact@trym.jp
でも受け付けております。