この記事では、ウェブデザイン制作で活用したいユーザーの視線を釘付けにする最新UIインタラクション、アニメーションをまとめてご紹介します。
Webサイトやスマホアプリのデザイン作成の参考サンプルとして活用したい、ユニークで素敵なアニメーションを中心に揃えています。
アニメーションで魅せる!Web制作の参考UIインタラクション40個まとめ
商品ページが切り替わるのに合わせてボトルも一緒に回転します。
旅行日程からフライトスケジュールまでをわかりやすく予約、確認できるiOSアプリ向けコンセプトデザイン。
キラリと光るクリスタルを利用して株の各種銘柄を3Dで表現するユニークなアプリデザイン。アプリの背景デザインの作り込みもポイント。
アプリから食料品を購入し、直接届けてくれるサービスにアニメーションを加えることで、どのような状況なのかひと目で確認できます。
美しく輝くオーロラと超立体的なみどり色のクリスタルが印象的なランディングページデザイン。
ショッピングサイトのUIインタラクションには、滑らかなスクロールやアーチ状に表示される文字テキストなど、他のサイトとは異なるオリジナル性が満載。
スマホをつかったタイヤやボディの色など、自分好みに車をカスタマイズできるアプリデザイン。
車本体を並べることでより直感的に選択できるモバイル向けナビゲーションメニュー。
スキンケア用品向けのカルーセルデザイン。あらゆる要素にアニメーションが実装されており、ふわりとした浮遊感が素敵。
E-Commerce App Landing Hero Section
Eコマースアプリ向けのランディングページで、画像の切り替わりに合わせてユーザーの目を引きやすいアニメーションを実装しています。
ホームページからプロジェクトページへシームレスに移動するスムーズなアニメーション。
グラフィックデザインアプリ向けのランディングページで、スクロールに合わせた没入感たっぷりなアニメーション演出が見事な参考サンプル例。
カラフルでポップな飲料ドリンクのランディングページ。スクロール似合わせて缶が自由自在に移動するインタラクティブな動きに注目。
Weather forecast – Mobile App Deisign
美しい風景イラストアニメーションが特長の天気予報アプリデザイン。
3D AI Face Surface | Cinema 4D Tutorial
なにもないところに映像が立体的に出現する、ボイスID向けの未来系アプリ。
カラフルなウェブサイト上に高速で羽ばたくハチドリを描きます。ウェブレイアウトを無視した動きがりより立体的な見た目に。
美しいカラフルなヒレがある魚「ベタ」を紹介したページ。ウェブページの上をゆったりと泳ぐ姿がたまりません。
蝶の羽ばたきに合わせて背景のグラデーションが波紋のようにうごくアニメーション。
上映作品の検索から座席指定までストレスフリーに行う映画チケットアプリ。
Layout (006) – Kombu® Art, Design & Culture Magazine
どんどん読み進めたくなるウェブコンテンツ向けレイアウト用アニメーション。垂直だけでなく、水平スクロールを効果的に活用しています。
Crypto Art Landing Page Animation
今話題のNFT(Non-fungible token)アート作品の紹介、販売を行うWebランディングページ。
圧倒的な立体感とサイトへの没入感を表現したオンラインストア作成ツールのランディングページ。
クリックするたびに回転しながら引き込まれるようなエフェクトを、アニメーションをつかって見事に表現しています。
Si™ Design & Dev | Paris & Co Iteration 001
カード上に並べられたジャケットと背景を若干ずらしてアニメーションさせることで、立体感抜群な仕上がりに。使用されている書体もおしゃれ。
Adamant – Web Design for Agricultural insurance
雷雨やひょう、長雨など天候タブをクリックすると、背景のアニメーションが同時に切り替わリます。
DNA Test – Web Design, 3D and Motion
スライラル上のDNAをページスクロールに合わせて、ぐるぐると回転させる立体感たっぷりなウェブデザイン。
ロゴを平面的に見せるだけでなく、さまざまなグラフィックスタイルやアニメーションを加えることで、よりはっきりとしたブランドイメージを伝えることができます。
レインボーカラーのグラデーションが印象的なサイトで、スクロールに合わせたアニメーションや流線的でオーガニックなシェイプが使用されています。
Personal Portfolio Website Hero Section Interaction
まるで店内を回りながら商品を選んでいるような感覚をウェブサイトで表現したショッピングサイト。
Jobly – Job Search Platform Mobile Animation
求人向けスマホアプリ。音声コマンド入力やスライダーをつかったロケーション選びなどアニメーションを効果的に利用しています。
スライダーを動かすことで自分にあったワークアウトプログラムを提案してくれるフィットネス向けアプリ。
Underwater mobile app interaction
ダイビングやシュノーケリングのツアー予約アプリで、かわいいアニメーションイラストでわかりやすさも◎。
前回のUIアニメーションまとめ記事も参考にしてみてはいかがでしょう。