ウェブ体験を快適にする参考にしたいUIインタラクション、アニメーション37個まとめ

 

この記事では、ウェブデザイン制作で活用したい最新UIインタラクション、アニメーションをまとめてご紹介します。Webやスマホアプリのデザイン参考アイデアとして活用したい、ユニークで素敵なアニメーションを中心に揃えています。

 

最新ウェブデザインも一緒に確認しておけば、デザイントレンドや人気の動向をうまく掴むことができるでしょう。

Webデザイン独学の参考アイデアに!話題の最新ウェブサイト46個まとめ

 

 

ウェブ体験を快適にする参考にしたいUIインタラクション、アニメーションまとめ

 

Generative interface Natural AI

自分の気分を音声入力するだけで、もっともふさわしい提案をしてくれるスマホアプリ。まさに未来の世界がもうすぐそこまで来ています。

 

 

 

Mixed Reality in Kitchen

ハーブの収穫時期を教えてくれたり、出前サービスの待ち時間、食事のカロリー計算なども行ってくれる仮想現実のキッチン。

 

 

 

MR Helps With Any Decision

リビングの一角に一日のプランをVRのように表示する未来のコンセプトデザイン。

 

 

 

Landing page concept with zoom-in transition

画面中央に向かってズームインするようなエフェクトが印象的だったスライダーメニュー。

 

 

 

Cargo Logistics Website Navigation

グリッドで三分割された画面レイアウトを活用し、フルスクリーン動画表示したり、各ブロッグごとにさらに分割するなど、使い勝手にもこだわったヒーローヘッダー。

 

 

 

Ancient Art Museum Landing Page

美術館に展示されている彫像を、視点を変えながら立体的にぐるりと一周。それに合わせて補足情報などの文字テキストがなめらかに表示されます。

 

 

 

Ringba Telecom Website Product Page Scroll

ページスクロールに合わせて、SFサイエンスのようなアニメーションが動き出すランディングページ。

 

 

 

Horse Riding Club Website Interactions

 

 

 

Photographer Portfolio

画像や映像をたくさん見せる、フォトグラファー向けポートフォリオのコンセプトデザイン。

 

 

 

Introducing Brews & Grooves

アルコールと音楽を組み合わせたプロジェクトを紹介する、次世代のチラシ、フライヤー広告のようなブランディング。

 

 

 

Header slider concept

画像が時計回りで回転しながら切り替わるスライダーのコンセプトデザイン。次に表示されるサムネイルをぼかして表示し、切り替えの無限ループに誘います。

 

 

 

Tourism Plans

ツアープランを切り替えることで、グラフィックが飛び出るように表示されるアニメーション、今後ますます増えてくきそうなテクニック。

 

 

 

Fast Nav-compressed

右側に固定されたナビメニューにカーソルを合わせれば、コンテンツを立体的にすスライドさせることができる仕掛けが。

 

 

 

Archives® Experimental Animation

コンテンツの切り替わりにグリッチエフェクトを採用した、2020年デザイントレンドの代表例。

 

 

 

Data planet

まるでスクリーンに吸い込まれるような没入感を演出した3Dアニメーション。ヘッダーに利用することで、一度見たら一度で覚えられるインパクトに。

 

 

 

Rainbow Squishies

まるで生物のように無機質なオブジェクトが動き出すアニメーション。ウェブサイトのヘッダーデザインとして活用すれば効果絶大。

 

 

 

New Brand & Website

新しくなったウェブサイトを魅力的に紹介するブランディングムービー。

 

 

 

Volt — a Prototyping Starter Kit for Framer

 

 

 

Warehouse – forklift header

ウェブサイトでこれまで使われていた静止画に代わり、ほんの少しのアニメーションを加えるだけで、ダイナミックかつ魅力的な仕上がりに。

 

 

 

Parallax swipe interaction

商品の切り替えに合わせてスニーカーを動かすことで、奥行き感のあるデザインを演出したカルーセルスライダー。

 

 

 

Social app concept

 

 

 

Send money – 3D animation

送金を分かりやすいアニメーションで視覚的に伝えるマイクロインタラクション。

 

 

 

POW App – Energy Insights

電気やガスの消費量を分かりやすい色とアニメーションで表示するアプリデザイン。

 

 

 

Nike Spray

メールアドレスを登録すると、スプレーが勢いよくスクリーン画面全体に降りかかるユニークな仕掛けが。

 

 

 

Main Page Dasshboard Mav.Farm

 

 

 

Quan – MVP

ページやコンテンツの遷移に合わせて、スマホ自体にも動きを加えることで躍動感がアップするサンプル例。

 

 

 

Quan landing page

上記サンプルのデスクトップ版ランディングページ。ブランドイメージが統一された書体や配色、デザインパーツを利用しています。

 

 

 

Onboarding Screen Animation

スマホアプリのサービス内容を伝えるオンボーディング画面で、画面を引っ張るようなナチュラルな動きに注目。

 

 

 

Onboarding for banking – Mobile App

ステップ順にシームレスなユーザー体験を実現したスクリーン画面。イラストに細かいアニメーションを加えることで、ストーリー性がぐっと広がります。

 

 

 

Puppies App

犬好きのためのスマホアプリで、どんなサービスを展開しているのかイラスト付きで紹介しています。鼻がヒクヒクしたり、尻尾を振るなどの控えめなアニメーションを追加することで、オリジナル性の高いデザインに。

 

 

 

Welcome to Swiggy

フードデリバリサービスをシンプルなイラストとアニメーションで紹介したスマホアプリ向けUIデザイン。

 

 

 

Animated 3D UI – with Freebies

立体的な3Dアニメーションを動画を見ながら作成できます。サンプル用AEファイルも無料ダウンロード可能なので、これからUIアニメーションをはじめたいというひとにオススメです。

 

 

 

US Landmarks

最近のUIデザインの魅せ方として、カード型コンポーネントからオブジェクトがはみ出すことで、立体感をうまく表現することができるテクニックが人気。

 

 

 

Dashboard Switch to mobile

デスクトップ版ダッシュボードからモバイル版への切り替わりを表現したアニメーションで、シームレスな遷移が特長。

 

 

 

Tinies lll

リアクションをかわいい星型キャラクターにすることで、オリジナル性のあるデザインを演出できます。

 

 

 

Car Call Seinfeld

車の運転中にダッシュボードパネル上で曲を変更したり、電話を受けたりすることができるUIデザイン。

 

 

 

Augmented Credit Card

手に持ったクレジットカードに合わせて、残高や支払い履歴などが魔法のように表示されたコンセプトデザイン。現実となる日もそう遠くないかもしれません。

 

 

これまでに紹介したUIアニメーションも一緒に確認しておくと良いでしょう。

動きが気持ちいい!Web制作の参考UIインタラクション、アニメーション60個まとめ

動きが新感覚!Web制作で参考にしたいUIインタラクション、アニメーション36個まとめ

動きが新感覚!Web制作で参考にしたいUIインタラクション、アニメーション36個まとめ

&nbspp