アニメーションで魅せる!Web制作の参考UIインタラクション40個まとめ

 

これまで平面的に捉えられていたウェブサイトやアプリに、吸い込まれるような没入感を演出するクリエイティブなアニメーションが、いま注目を集めています。

 

この記事では、ウェブデザイン制作で活用したい最新UIインタラクション、アニメーションをまとめてご紹介します。

 

Webサイトやスマホアプリのアニメーション実装参考アイデアに役立てみてはいかがでしょう。

 

 

アニメーションで魅せる!Web制作の参考UIインタラクション40個まとめ

 

Juice Brand Website Menu

フレッシュなフルーツジュースを選択する、フルスクリーン画面で展開するナビゲーションメニュー。ぼかしをつかい、遠近感をうまく表現したプロダクト紹介ページは参考に。

 

 

 

Perfume Ecommerce Website Design

花が満開に咲くまでを美しいGIFアニメーションで表現した、フレグランス紹介用のランディングページ。

 

 

 

Car Website Animation

くるくると回転しながらスポーツカーを選択できる、クリエイティブなカルーセルデザインで、奥行き感をうまく演出した事例サンプル。

 

 

 

Car Commercial Site Scrolling

視点を回転させるのに合わせて車のボンネットなどが開くアニメーション、ゲームUIのような世界観を見事に表現しています。

 

 

 

Car Specs – Transition

こちらも車が回転するのと同時に、ドアやエンジン、タイヤなどの詳細をアニメーションと一緒に表示します。

 

 

 

#21 Speaker Control – Change Lights Theme

手元のスマートフォンをつかって、ムードに合わせて自由にライティングを直感的に変更できる、スマホアプリ向けUIインターフェース。

 

 

 

Glide Web Interaction

ページスクロールに合わせて、イラストで描かれた家に明かりが灯るなど、コンテンツ表示アニメーションにワンスパイス加えることで、ユーザーの視線を釘付けにします。

 

 

 

#26 Shoes Ordering

オンラインショップでの靴の購入プロセスをアニメーション化したアプリ向けデザイン。

 

 

 

The store Skin care Issue 81

 

 

 

Four Seasons. Main Page

スクロールに合わせて流れるようにコンテンツが表示される、エレガントさや高級感を感じるホテル向けホームページ。

 

 

 

Four Seasons. Bora-Bora

ページを縦半分に分割し、それぞれの画像にスクロールエフェクトを追加したアニメーション。

 

 

 

Automotive website

ダーク系のデザインと輝くネオンライトエフェクトを立体的に組み合わせた、水平方向に展開する画像カルーセル。

 

 

 

Gaming Landing Page Interaction

 

 

 

Flora

美しい花束が画面いっぱいに切り替わる立体的な画像カルーセル。

 

 

 

Blob Mixer

七色に変化しながら、お好みの立体的な球体をデザインできるブロブ・ミキサー。実際にサイトで公開されています。

 

 

 

Recipes Slide

スマホアプリのUIインターフェースだけでなく、背景の円形グラデーションにもアニメーションを加えることで、より没入感のある作品に仕上がります。

 

 

 

Annual Awwwards 2020- Menu Interactions

フルスクリーンで展開するナビゲーションメニューは、ユーザーを待たせないシームレスなコンテンツ遷移が魅力的。

 

 

 

Confidence

スクリーン画面が乱れるようなグリッチエフェクトを画像の切り替えに採用したサンプル例。

 

 

 

Crypto Investment Wallet – Animation

仮想通貨のオンライン取引をビジュアル化したモバイル向けアプリ。

 

 

 

Smart Home app motion

カラフルなカラーホイールを指で回転させながら気温を設定できる、スマートホームデバイス向けアプリ。

 

 

 

Product Experience

ヘッドフォン紹介用のランディンうページ。スクロールに応じて各機能がアニメーション表示され、思わずページしたまでスクロールしたくなってしまいます。

 

 

 

ShopBLK – Design for Mobile App

アプリで使われているコンポーネントをまとめて表示することで、使ってみたくなるストレスのないスムーズな動きが素敵。

 

 

 

Web Editorial- Generation Page Interactions

画像や引用文などをストーリーテリング手法で魅せる、今後ますます増えそうなマイクロインタラクション。

 

 

 

#25 Train Seat Reservation Concept

行き先を音声コマンドで探し、目的の電車の座席チケットを分かりやすく購入できるモバイルアプリ。

 

 

 

Diving Landing Page

ダイビング専門のトラベルサイトは、まさに深海に潜っていくようなページスクロール効果が見事に演出されています。

 

 

 

Primitive – Landing
雑誌を見ている感覚で、アパレル商品のコレクション閲覧から購入まで行うことができるオンラインショップ。

 

 

 

Ideom – Web App for online education

オンライン教育システムのログインまでの流れを紹介したGIFアニメーションで、フレンドリーな雰囲気のイラストkyラクターが目を引きます。

 

 

 

Animation Landing Page- Quillow

ランディングページの各コンポーネントに、控えめながら印象に残るマイクロインタラクションを実装したサンプル例。

 

 

 

Up. – Design for Mobile App

モバイルアプリの購入プロセスをアニメーション化した作品で、フレームからオブジェクトを少しだけはみ出すことで、遠近感のあるデザインに。

 

 

 

Mohonk- wild skincare branding, menu interaction

オーガニックなシェイプやパステルカラーを基調とした控えめな配色、美しいサンセリフ書体など、ポートフォリオ作成の参考になりそうなサンプル例。

 

 

 

3D Interaction

絶滅に瀕している野生動物、サイについてストーリーテリング手法で詳しく紹介したプロジェクト。ページの切り替わりに応じて、視点を変えながらサイを立体的に鑑賞できます。

 

 

 

SilverAndGold v1

 

 

 

glasses

メガネやサングラスを浮遊感たっぷりに表現した画像スライダーで、ショッピングサイトを想定したデザイン。

 

 

 

Motion effect of VIP card activation interface

グラデーションカラーが美しいカードのアクティベート用インターフェース画面。

 

 

 

Memory Alexander McQueen

縦横無尽にレイアウトが切り替わりながら、コンテンツを読み進めることができる新しいコンテンツの見せ方。

 

 

 

Fluid Card in UI [Trailer]

 

 

 

Folio 2021 — 01

直感的に作品を選ぶことができるアニメーションスライダーは、ポートフォリオの制作実績ページに活用されています。

 

 

 

trashtalk® Interior Studio animation

マウスホバーでサムネイルが表示され、ゆらゆら揺れながらフルスクリーンでコンテンツがシームレスに展開する、トレンド性の高いレイアウト。

 

 

 

Tangan

マッサージセラピー向けランディングページで、ダーク系にまとめセリフ書体、白黒写真で統一することで、スタイリッシュで高級感のあるデザインに。

 

 

 

Barch – Web design & 3D logo

圧倒的な立体感で表現されたアニメーションロゴが印象的な、ウェブサイトのサインアップ画面。

 

 

アニメーションの実装には、基本ルールを活用してみましょう。より一貫性のあるアニメーションを作成できるでしょう。

【保存版】ユーザーを魅了する!UXデザインの正しいアニメーション完全ガイド

 

前回のUIインタラクション、アニメーションのまとめも一緒にいかがでしょう。

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