動きで決まる!極上Webアニメーションアイデア30選

 

最新Webデザインでますます重要となっている「動き」やアニメーション。

 

CSSで手軽に表現できるなど、より柔軟でクリエイティブなアイデアが今後はますます必要になってくるでしょう。

 

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

 

アニメーションの基本ルールも理解しておけば、ユーザー目線で心地よいアニメーションを実現できます。

 

 

365 magazine

レトロな配色や書体選びが印象的だったウェブマガジンサイト。

 

 

Spider-man movie landing page concept

ページをスクロールすると、回転しながらスパイダーマンの全体像を確認できるインタラクティブなサイトデザイン。

 

 

Voxel NFT – available for sale

 

 

Ring Customizing Interaction

宝石の色や台座の材質など、結婚指輪のカスタマイズもスマホから簡単に行うことができるコンセプトデザイン。

 

 

Premium Fish Market – Niche eCommerce

魚まるごと一匹ずつカルーセルで回転させ、選択すると切り身の状態で購入画面に進むというユニークなUXデザイン。

 

 

Procedural Grid

大胆でダイナミックなグリッドの切り替えをたのしむ、写真を多用したポートフォリオサイト向けデザイン。

 

 

Lips Love Landing on Webflow

左側に固定されたナビメニューがコンテンツ遷移に一役買い、ポップな配色カラーも素敵なサイトデザイン。

 

 

DreamSurf – Web Design for Surfing Camp

はじめてのサーフレッスンをコンセプトしたサイトデザインで、まるで海に潜っているようなヒーローイメージからのグラデーション遷移がナイス。

 

 

Bettermotion Project

腰痛の緩和に特化したアプリのコンセプトデザインで、アイコンやイラストなどに細かいアニメーションを追加しています。

 

 

Turkish & Arabic Delivery App

デリバリーアプリのコンセプトデザインですが、コンテンツの切り替えに水滴のようなRippleエフェクトをデザイン。

 

 

Stop Motion Web Interaction

ストップモーションをつかったレシピサイト、おしゃれで分かりやすいデザイン。

 

 

ekar Dubai

車のリースをスマホから手軽に行うことができアプリで、到着時間なども地図を使って立体的に表示します。

 

 

Condominium Rental App Animation Concept

スマホアプリデザインだけでなく、周りの背景にも気を配ることで素晴らしい仕上がりに。

 

 

Light 3D interaction

照明ライトのカスタマイズを行うスマホアプリで、立体的でリアルな美しいデザインが印象的。

 

 

Four Seasons. Anguilla

利用している書体や美しい画像など、エレガントさが際立つデザインで、心地よいアニメーションが気分を高めてくれるでしょう。

 

 

Smart Home LP Animation (Dribbble)

 

 

CREATOR’S METAVERSE 02

Three.jsによる触ることができるサイトデザインが、ますます人気となっています。Three.JSの人気オンラインコースも受講可能。

 

 

Pet Store Website

 

 

Still – Store

商品をセレクトすると、立体的に回転しながらスケートボードの板が表示される仕掛け。

 

 

Primate Microsite

サルやマントヒヒなどさまざまな猿人類のイラストに変化するスライドは、思わず何度も見たくなる中毒性のあるデザインに。

 

 

Car Remote Control App V2 (Dark Mode)

車の自動運転に備え、遠隔で操縦できるスマホアプリのコンセプトデザイン。

 

 

Expo Dubai 2020 – Canada experience (Homepage)

 

 

Product Page – Cole Haan

動画と商品販売を組み合わせた、インタラクティブで実践的なショッピングサイト。

 

 

MKTLM

 

 

Refuel

充電している様子をダイナミックなビジュアルで可視化。

 

 

Portfolio- Turi Løvik Kirknes

スライドからの各コンテンツへの遷移がなめらかで美しいポートフォリオサイト、落ち着いた高級感のある配色も素敵。

 

 

Explorway Web Design

写真をランダムで配置した、ミニマルでおしゃれな印象は、エコツアーの公式ホームページとして、ブランディングともうまくマッチしています。

 

 

ICEHOTEL – Brand Indentity.

氷でできたアイスホテルの公式ホームページ。青をテーマカラーにした高級感のあるスッキリとしたデザイン。

 

 

Brasseur de Montréal website (Detail page)

商品のビール缶をマウスで立体的に回すことができるなど、インタラクティブさがより重要になっています。

 

 

The maker landing page

 

 

前回からおよそ4ヶ月ぶりとなる、魅力的なアニメーションのデザインアイデアとなりました。NFT関連やThree.jsを活用したインタラクティブな体験型サイトデザインは、今後もますます注目されていく分野でしょう。

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