エフェクト・アニメーション・モーションが良きなWebサイトまとめ【2022年版】

皆さんこんにちは。アシスタントディレクターの山田です。
Webデザインや広告デザインの世界に入ってまだ2年くらいですが、流行りの移り変わりがすごいなと日々感じています。
その中でも一際目を引くのが、ぬるぬるびょんびょん動くWebサイト！
animateやafter effectを触る機会が多い私としては、「ぴえ〜しゅげ〜」となるばかりです。
今回は、Web散歩している最中に出会った「エフェクト・アニメーション・モーションが最高 of 最高」なWebサイトをご紹介します。

【カテゴリ：ビジネス】リモ活LIVE

MBSテレビが主催しているリモ活LIVEの公式サイト。
機会があれば、線画から始まるテキストモーションを作りたいなと思っているのでスピード感などが結構参考になります。
ガッツリモーションを付けたとしても、タイミングや線の太さで印象変わりますね。
https://www.remokatsu.jp/

【カテゴリ：ビジネス】みさとと。

島根県美郷町のPRサイト。
次から次へと起こるエフェクトが、平面の画面に奥行きを感じさせる素敵なサイトでした。
可愛らしいイラストがそれぞれユラユラと動く様も、和やかさが出ているサイトです。
https://www.town.shimane-misato.lg.jp/misatoto/

【カテゴリ：ビジネス】Design Scramble

DeNAが主催するデザインプロジェクト、「Design Scramble」の公式サイト。
大胆な構成とモーションですが、見やすいサイトです。
こんなにグイグイ動かしているのに、しつこくならない不思議。
https://designscramble.jp/

【カテゴリ：ファッション】yutori

東京を拠点にアジア全域での展開を目指すストリートカンパニー「yutori」の公式サイト。
「ここはSPでどう展開されるのだろう？」とついつい気になって確かめてしまいました。
カーソルが変わるのもかわいいですね。
https://yutori.tokyo/

【カテゴリ：アーティスト】菅田将暉 | COLLAGE

菅田将暉さんのアルバム「COLLAGE」の特設サイト。
美しいサイトだなと眺めていたのですが、CD紹介の部分で曲名にカーソルを置くとジャケットが出てくるエフェクトに「！」となり、Blu-rayの部分ではバックで動画が流れて「！！！」となりました。
SPではジャケットは出ず背景色が変わり、Blu-rayの部分ではタップでYouTubeが閲覧できる仕様になっていました。
淡い背景色に、パキッとした赤と青のハンバーガーメニューが良いコントラストでデザイン的にも素敵。
https://sudamasaki-music.com/collage/

【カテゴリ：アーティスト】BISH IS OVER！

WACKの代表的アイドル「BISH」の解散特設サイト。
FVを見た瞬間、「こりゃすごい‥」の一言でした。
サブスクがかなり普及したこの時代に、円盤を使って楽曲を選ぶ感じがすごくいいなと。
スクロールすると円盤をくぐって次の円盤が見れる感じもいいですよね。
あとは、ファンの方へのたくさんのありがとうが感じられるサイトだなと思ったので選びました。
https://www.bish.tokyo/BiSH_iS_OVER/

【カテゴリ：アニメ】超人的シェアハウスストーリー『カリスマ』

こちらはヒプノシスマイクなどを手掛けるEVIL LIVE RECORDSと、Dazed CO.,LTD.が手掛ける二次元キャラクタープロジェクトの公式サイト。
まず赤寄りのオレンジと黒の色合いにグッと引き込まれて、スクロールやホバーのたびにゴリゴリと動く様がたまらんです。
アニメなどのサイトはあまり力を入れていないことも多いので、なかなかに心惹かれたサイトでした。
ttps://charisma-house.com/

【カテゴリ：ポートフォリオ】Taro Yoshimura – Gravitas

よしむら たろうさんのポートフォリオサイト。
もう動く動く。スクロールしたときの「ぐにょん」というエフェクトがかなりイイ。
ttps://taroyoshimura.dev/

最後に。

いかがでしたでしょうか。
かなり独断と偏見で選択しました。
AND SPACEの公式サイトもチョコチョコ動いたりしているので、ぜひ一度見てみてくださいませ。
それではまた今度。