Advertisement

 

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

 

Webサイトやスマホアプリのデザイン作成の参考サンプルとして活用したい、ユニークで素敵なアニメーションを中心に揃えています。

 

 

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

 

Web Animation

商品ページが切り替わるのに合わせてボトルも一緒に回転します。

 

 

 

Airbus tripset iOS app

旅行日程からフライトスケジュールまでをわかりやすく予約、確認できるiOSアプリ向けコンセプトデザイン。

 

 

 

Crystal stock app

キラリと光るクリスタルを利用して株の各種銘柄を3Dで表現するユニークなアプリデザイン。アプリの背景デザインの作り込みもポイント。

 

 

 

Natural AI grocery shopping

アプリから食料品を購入し、直接届けてくれるサービスにアニメーションを加えることで、どのような状況なのかひと目で確認できます。

 

 

 

Aurora

美しく輝くオーロラと超立体的なみどり色のクリスタルが印象的なランディングページデザイン。

 

 

 

Weare: Interactions

ショッピングサイトのUIインタラクションには、滑らかなスクロールやアーチ状に表示される文字テキストなど、他のサイトとは異なるオリジナル性が満載。

 

 

 

#66 Configurator Mercedes

スマホをつかったタイヤやボディの色など、自分好みに車をカスタマイズできるアプリデザイン。

 

 

 

#67 Menu Mercedes

車本体を並べることでより直感的に選択できるモバイル向けナビゲーションメニュー。

 

 

 

Skin Care Animation

スキンケア用品向けのカルーセルデザイン。あらゆる要素にアニメーションが実装されており、ふわりとした浮遊感が素敵。

 

 

 

E-Commerce App Landing Hero Section

Eコマースアプリ向けのランディングページで、画像の切り替わりに合わせてユーザーの目を引きやすいアニメーションを実装しています。

 

 

 

Portfolio: Turi Løvik Kirknes

ホームページからプロジェクトページへシームレスに移動するスムーズなアニメーション。

 

 

 

Vectornator Homepage concept

グラフィックデザインアプリ向けのランディングページで、スクロールに合わせた没入感たっぷりなアニメーション演出が見事な参考サンプル例。

 

 

 

Drinks Ecommerce Website

カラフルでポップな飲料ドリンクのランディングページ。スクロール似合わせて缶が自由自在に移動するインタラクティブな動きに注目。

 

 

 

Weather forecast – Mobile App Deisign

美しい風景イラストアニメーションが特長の天気予報アプリデザイン。

 

 

 

3D Character Dancing

 

 

 

3D AI Face Surface | Cinema 4D Tutorial

 

 

 

iPhone Voice ID

なにもないところに映像が立体的に出現する、ボイスID向けの未来系アプリ。

 

 

 

Humming Bird Site

カラフルなウェブサイト上に高速で羽ばたくハチドリを描きます。ウェブレイアウトを無視した動きがりより立体的な見た目に。

 

 

 

Siamese fighting fish Story

美しいカラフルなヒレがある魚「ベタ」を紹介したページ。ウェブページの上をゆったりと泳ぐ姿がたまりません。

 

 

 

Butterfly Handbook – Concept

蝶の羽ばたきに合わせて背景のグラデーションが波紋のようにうごくアニメーション。

 

 

 

Cinema Ticket App Concept

上映作品の検索から座席指定までストレスフリーに行う映画チケットアプリ。

 

 

 

Depth

 

 

 

Layout (006) – Kombu® Art, Design & Culture Magazine

どんどん読み進めたくなるウェブコンテンツ向けレイアウト用アニメーション。垂直だけでなく、水平スクロールを効果的に活用しています。

 

 

 

Crypto Art Landing Page Animation

今話題のNFT(Non-fungible token)アート作品の紹介、販売を行うWebランディングページ。

 

 

 

GoDaddy Online Store

圧倒的な立体感とサイトへの没入感を表現したオンラインストア作成ツールのランディングページ。

 

 

 

Intergalactic Disassociation

クリックするたびに回転しながら引き込まれるようなエフェクトを、アニメーションをつかって見事に表現しています。

 

 

 

Si™ Design & Dev | Paris & Co Iteration 001

 

 

 

“Double layer interaction”

カード上に並べられたジャケットと背景を若干ずらしてアニメーションさせることで、立体感抜群な仕上がりに。使用されている書体もおしゃれ。

 

 

 

Adamant – Web Design for Agricultural insurance

雷雨やひょう、長雨など天候タブをクリックすると、背景のアニメーションが同時に切り替わリます。

 

 

 

DNA Test – Web Design, 3D and Motion

スライラル上のDNAをページスクロールに合わせて、ぐるぐると回転させる立体感たっぷりなウェブデザイン。

 

 

 

Outcrowd Logo Animation

ロゴを平面的に見せるだけでなく、さまざまなグラフィックスタイルやアニメーションを加えることで、よりはっきりとしたブランドイメージを伝えることができます。

 

 

 

Phoney Feelings Fighter

レインボーカラーのグラデーションが印象的なサイトで、スクロールに合わせたアニメーションや流線的でオーガニックなシェイプが使用されています。

 

 

 

Personal Portfolio Website Hero Section Interaction

 

 

 

V-M Store

まるで店内を回りながら商品を選んでいるような感覚をウェブサイトで表現したショッピングサイト。

 

 

 

Jobly – Job Search Platform Mobile Animation

求人向けスマホアプリ。音声コマンド入力やスライダーをつかったロケーション選びなどアニメーションを効果的に利用しています。

 

 

 

Workout Configuration

スライダーを動かすことで自分にあったワークアウトプログラムを提案してくれるフィットネス向けアプリ。

 

 

 

Underwater mobile app interaction

ダイビングやシュノーケリングのツアー予約アプリで、かわいいアニメーションイラストでわかりやすさも◎。

 

 

前回のUIアニメーションまとめ記事も参考にしてみてはいかがでしょう。

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

 

 

サムネイル@ : Butterfly Handbook – Concept by Mingg – Dribbble