公開日:
ロゴアニメーションや動きが素敵なサイト5選
この記事の目次(クリックで項目へジャンプします)
初めまして、デザイナーのmotokiです。
今回は個人的にアニメーションや動きが素敵なサイトをまとめてみました。僕はアニメーションやwebの動きが好きで、特徴的なアニメーションやすごいなと思ったアニメーションを見ると保存して、メモにまとめたりなどしています。
特徴的なアニメーションのサイトは結構印象に残っていることが多いです。
その中から特に印象的だったサイトをご紹介いたします。
Kern
Kern incさんのコーポレートサイトです。
ミニマルでシンプルなデザインで、筆記体で書かれたようなロゴが
実際に書かれているようなロゴアニメーションが素敵です!
他にも細かいアニメーションや、ABOUTのページでは
ロゴが真ん中に残っていたり、スクロールの早さによって文字の傾きが変わっていたりする効果も面白いですね。
LARGO
店舗設計や内装デザインなどを行なっている会社のようです。
こちらもグレーや黒を基調としたシンプルなデザインになっていて、画面を大きく使ったロゴアニメーションがとてもスタイリッシュで雰囲気を出してます。ページ遷移のアニメーションもロゴのパーツを大胆に使用していてとても素敵です !
domaso
どまそさんというデザイナー・アニメーターのポートフォリオサイトです。
オープニングアニメーションでメンダコをモチーフにしたキャラクターとともにロゴが表示される一連のアニメーションが気持ちよくて何回も見てしまいます。フッターでキャラクターが動いているのも可愛いですね!
SUPERCROWDS
ウェブ制作を主に行なっているデザイン会社のコーポレートサイトです。
MVのオープニングアニメーションから、アイコンなどの細かい動きページ遷移のアニメーションまで細部まで凝っていて、とてもUI的にも見やすいサイトなのではないでしょうか。
SHIFTBRAIN
SHIFTBRAINという会社でブランディングやウェブサイトまで幅広くいろいろなことをやっている会社です。
上記で紹介したLARGOのサイトもこちらが作っているようです。
Sをモチーフにしたロゴアニメーションがローディングの際に使われていてタイトルなどのアニメーションの表現も面白いです。
背景はパーティクルのようなものも使われています。
まとめ
いかがでしたでしょうか。
アニメーションを効果的に使うことでサイトの集客率も上がりページの滞在時間も増え、印象的なサイトづくりができると思います。
次回はこのようなアニメーションをwebで表示させる方法を紹介したいと思います。