Web注目のアニメーション!表現力アップの動くデザインアイデア50個まとめ

 

最近見かける最新Webデザインでは、「動き」を効果的に活用したアニメーションテクニックが注目されています。

 

この記事では、表現力をアップする動きのあるWebアニメーションアイデア50個をまとめてご紹介します。

 

アニメーションの基本ルールを理解し、最新Webデザインにも目を通しておくことで、より自由な動きをWebサイトに実装することができます。

 

 

サイトの印象は「動き」が決め手!参考にしたいWebアニメーションまとめ

 

3D Spinner Pre-loader

超立体的なローディングアニメーション、どの作品も素敵。

 

 

 

Home Exploration Quartet Cie

トランペットやサックスフォンの長さをうまく活用し、スクロールすることで見えていない楽器の一部を表示するパララックスエフェクト。

 

 

 

Animation Sincerely Nature

ヒーローイメージから長くつながる花瓶を、スクロールすることで表示することで、視線を自然と集めることができるアニメーションテクニック。

 

 

 

Miracle – NFT website interaction

盛り上がりをみせるNFT向けウェブサイトデザイン。随所にSF未来感を感じる、グリッチや背景アニメーションなどが目を引きます。

 

 

 

AutoCloud Website

見た瞬間に記憶に残る、ネオンエフェクトのサイバー系SFヒーローデザイン。

 

 

 

AirPortr website

各セクションごとのコンテンツに、細かい控えめなマイクロインタラクションを採用することで、心地よいページスクロール体験を実現しています。

 

 

 

Yacht Hiring Service Website

ヨットのレンタルサービス向けコンセプトデザインで、横一列に並べられたヨットからお好みの1艇を選ぶと、ズームアップで詳細が表示されます。

 

 

 

NASA. Main

宇宙ロケットの発射シーンがインパクトありすぎな、NASAのヒーローデザイン。

 

 

 

Summer Vibes 2

カードレイアウトからはみ出たPNG画像は、最近よく見かけるデザインテクニック。

 

 

 

Essentialism

古いラジオのチューニングをしているような、レトロな日付選択フォーム。

 

 

 

Athlete Asta Web Design & Development

アウトラインの白抜き文字と手書きの筆記体ブラシフォントの組み合わせ、スクロールの表示に合わせたアコーディオンの開閉で、視線をうまく誘導。

 

 

 

Web Recipe – Animation Design

料理レシピサイトの装飾として利用中の手描きイラストに、ほんのわずかな動きを加えるだけで、圧倒的な表現力アップに。

 

 

 

Cosmetics Store Product Page

思わずスクロールを続けたくなるような、スムーズで心地よいアニメーションが特長。

 

 

 

Betabank – Credit Card Product Page

カードをクリックすると、申し込みフォームに遷移するアニメーションは、コンバージョン率の改善にもつながりそうなテクニック。

 

 

 

DEKO — Hotel Website Animation

画像やページの切り替わりに、特にユニークなアニメーションエフェクトを加えたことで、特別感のあるホテル向けサイト。

 

 

 

dawn.health — Landing Page

スクロールに応じたSVGシェイプの表示、淡いグラデーションメッシュを利用した背景や見出しタイトルなど、最新トレンドを採用するときの参考に。

 

 

 

Gravure website

商品サムネイルをマウス操作で360度自由に回転できるなど、販売商品であるブレスレットの特性をうまく活用したサンプル例。

 

 

 

NAPAPIJRI – Tribe collection

ブランドイメージをうまく伝えながら、商品にも注目できるストーリーテリング手法を活用した、体験型のウェブサイト。今後ますます重要となる分野のひとつ。

 

 

 

Medhouse landing page

基本的なグリッドレイアウトを採用したウェブサイトの背景に、アニメーションパーツをいくつか追加するだけで、特別感がグッとアップする真似しやすいテクニック。

 

 

 

Personal Portfolio Landing Page

ウェブサイトだけでなく、それを映し出すディスプレイや周りのインテリアなどにも気を配ることで、これまでにないプレゼン方法に。

 

 

 

BULGARI – Magnifica collection

宝石を選択すると、より詳細な情報をストーリーテリング手法で水平スクロールを用いて表示する、ブランディング向けランディングページ。

 

 

 

Rent a car booking flow

アプリでレンタカーを借りるまでの手順を紹介した紹介アニメーション。車が左から右へと移動する際、タイヤも回っているというリアル感。

 

 

 

Landing Page with 3D animated illustration – Light version

思わず画面をじっと眺めてしまいそうな、中毒性のある無限アニメーションをつかったヒーローセクション。

 

 

 

Lagunitas – Product Detail Page

ページのスクロールに合わせて、ボトルがスルスルと画面の中央を降りてくる、思わずスクロールしたくなるアニメーション。

 

 

 

MegaCity – Scrolling animation

画面中をドローンが縦横無尽に飛び回る、ゲーム性のあるUIデザインが特長のランディングページ。

 

 

 

Hero Concept no. 13 — Blackster 2021

ページを下にスクロールすると、しぼんでいた風船が一気に膨らむユニークなアニメーション。

 

 

 

Insomnia Website Interactions

不眠症をテーマにしたウェブサイトで、ぼかしエフェクトを利用することで、頭がすっきりとしない、ぼーっとした状態をうまく表現しています。

 

 

 

Deliverest Landing Page

アニメーション開始位置を交互に左右にすることで、視線でも追いやすくなりました。

 

 

 

Jameson whiskey : landscape menu

水平方向に展開するスライダーを活用した、各コンテンツへと移動できるナビゲーションメニュー。

 

 

 

Illusions Space- Home Page Design

イリュージョンというタイトル通り、まるで幻想を見ているような不思議な世界観を表現したダーク系デザイン。手書き文字テキストや、ビリビリと破いた写真など、ハンドメイドとデジタルの融合。

 

 

 

Fitness Landing Page

フィットネスクラブ向けのランディングページ、実際に運動を行なっいる女性を無限アニメーションで表示しています。

 

 

 

Cake Couch

リストアイテムがくるくると回転しながら選択、表示されるUIデザイン。画面からはみ出たアニメーションが、ダイナミックでオリジナル性にも。

 

 

 

Ebook selection #2

コンテンツを選択すると、旗のようにひらひらと揺らめくサムネイルが美しいデザイン。

 

 

 

Droplet Genomics – Web Design & Development

画面に吸い込まれるような、没入感たっぷりなスクロールエフェクトにはじまり、スラスラとコンテンツを読み進めることができる、滑らかなアニメーション。

 

 

 

МОЛОТОВА : d. studio

燃える火炎瓶からはじまるヒーローデザインをつかったポートフォリオサイト。制作を依頼したくなる仕掛けが随所に。

 

 

 

Xore 2.0

真っ白の画面から宇宙服を着た人物が登場する、驚きのアニメーション。

 

 

 

Watch Shop UI animation #2

買い物カゴに商品を追加すると、木箱に時計を入れ、紙袋でパッケージしてくれるアニメーション。

 

 

 

Wonderland Photo Collection

鏡に映ったようなプリズム効果を活用したスライダー、セリフ書体と合わせることでエレガントで高級感のある雰囲気に。

 

 

 

WOMENINMOVIES – Alternative Categories page

画像が左右に流れるように表示される、視線の動きに注目したアニメーションの実装サンプル。

 

 

 

Vinyl – Web Design for Vinyl Store

アナログレコードの盤面をそのまま活用した、くるくると回る面白スライダー。

 

 

 

SLIT – Web Design and 3D for NFT market

ページをスクロールすると、隠れていた氷山の底をコンテンツと一緒に表示、さいごにロゴデザインがくるデザインが素敵。

 

 

 

Smart Home mobile app

スマートホーム向けアプリデザインで、照明の明るさなど直感的に変更できるアニメーション。

 

 

 

Spot Sneaker Store

スニーカー販売オンラインサイト。360度立体的に回転するスニーカーを、画面全体にリピート。おしゃれな配色カラーパレットも参考に。

 

 

 

TAE – Web Design for Travel & Tourism

旅行、トラベル向けのランディングページで、グリッドを無視した自由なレイアウト、スクロールに応じたアニメーション展開など、サイトに動きを加えたいときの参考に。

 

 

 

Shake

 

 

 

Satellite Landing Page Animation

デバイス内部の構造が、ページのスクロールに合わせて分解、各パーツの詳しい説明が表示されるアニメーション。

 

 

 

Lookbook | Sol’ace Store

インテリア商品をまとめて確認できるルックブック向けのコンセプトデザイン。

 

 

 

Car Rental Website Animation

 

 

 

NIKE SB X Ben and Jerry’s

最近よく見かける水平方向の無限テキストスクロールを背景に、ふわりと浮かぶスニーカーを立体的に演出したデザイン。

 

 

 

Halloween part 3:3 – 3D Animation

すでに終わってしまいましたが、ハロウィンモードの3Dイラストレーション。

 

 

どれも視線を奪われる素敵な作品ばかり。前回のWebアニメーションまとめも一緒に確認しておくと良いでしょう。

サイトの印象は「動き」が決め手!参考にしたいWebアニメーション45個まとめ