PAGE TOP

公開日:

ロゴアニメーションや動きが素敵なサイト5選

デザイン

Tags
animation
まとめ
Nice Animation Website

この記事の目次(クリックで項目へジャンプします)

初めまして、デザイナーのmotokiです。

今回は個人的にアニメーションや動きが素敵なサイトをまとめてみました。僕はアニメーションやwebの動きが好きで、特徴的なアニメーションやすごいなと思ったアニメーションを見ると保存して、メモにまとめたりなどしています。
特徴的なアニメーションのサイトは結構印象に残っていることが多いです。
その中から特に印象的だったサイトをご紹介いたします。

Kern

https://kern.inc

Kern incさんのコーポレートサイトです。
ミニマルでシンプルなデザインで、筆記体で書かれたようなロゴが
実際に書かれているようなロゴアニメーションが素敵です!
他にも細かいアニメーションや、ABOUTのページでは
ロゴが真ん中に残っていたり、スクロールの早さによって文字の傾きが変わっていたりする効果も面白いですね。

LARGO

https://largo.studio

店舗設計や内装デザインなどを行なっている会社のようです。
こちらもグレーや黒を基調としたシンプルなデザインになっていて、画面を大きく使ったロゴアニメーションがとてもスタイリッシュで雰囲気を出してます。ページ遷移のアニメーションもロゴのパーツを大胆に使用していてとても素敵です !

domaso

https://doma.solutions

どまそさんというデザイナー・アニメーターのポートフォリオサイトです。
オープニングアニメーションでメンダコをモチーフにしたキャラクターとともにロゴが表示される一連のアニメーションが気持ちよくて何回も見てしまいます。フッターでキャラクターが動いているのも可愛いですね!

SUPERCROWDS

https://supercrowds.co

ウェブ制作を主に行なっているデザイン会社のコーポレートサイトです。
MVのオープニングアニメーションから、アイコンなどの細かい動きページ遷移のアニメーションまで細部まで凝っていて、とてもUI的にも見やすいサイトなのではないでしょうか。

SHIFTBRAIN

https://www.shiftbrain.com

SHIFTBRAINという会社でブランディングやウェブサイトまで幅広くいろいろなことをやっている会社です。
上記で紹介したLARGOのサイトもこちらが作っているようです。
Sをモチーフにしたロゴアニメーションがローディングの際に使われていてタイトルなどのアニメーションの表現も面白いです。
背景はパーティクルのようなものも使われています。

まとめ

いかがでしたでしょうか。
アニメーションを効果的に使うことでサイトの集客率も上がりページの滞在時間も増え、印象的なサイトづくりができると思います。
次回はこのようなアニメーションをwebで表示させる方法を紹介したいと思います。

monomodeではアニメーションや映像製作もできるデザイナーを募集しています!詳しくはこちら→
monomodeリクルートサイト
AD JOURNAL