この記事では、ウェブサイトやスマホアプリ制作の参考にしたい最新アニメーションやUIインタラクションをまとめてご紹介します。
今まででは考えもつかなかったようなユニークな動きをページに実装することで、ユーザーの視線を釘付けにし、目的のコンテンツまで自然と誘導することができます。
デザインアイデアとして最新ウェブサイトも一緒に確認しておくと良いでしょう。
動きに注目！Web制作の参考用アニメーション、UIインタラクションまとめ
Boutique Florists Cursor Exploration
マウスの動きに合わせて満開のカラフルな花が咲き乱れるアニメーションエフェクト。背景の真っ白のミニマルデザインとのコントラスが素敵。
Drawer Navigation Animation Design
プルンとまるでゼリーのような柔らかさをもったサイドメニューの展開アニメーション。
立体感たっぷりにフレッシュなレモンが浮かび上がる、料理レシピサイト向けヒーローデザイン。
Recipe Website / Donuts Banner
同じシリーズでドーナツをつかったヒーローイメージ。思わずページをスクロールしてしまいたくなります。
ページのスクロールに合わせて自由にレイアウトされたアート作品にはパララックス効果が採用され、ホバーズームエフェクトと一緒に。
ウェブデザインのプロトタイプの見せ方としてアニメーションが必須になってきています。実際の動きもわかりやすく、雰囲気をつかむのにも便利。
ワインの品種に応じて背景色も変化するショッピングサイト向けアニメーション。
高級感のあるセリフ書体と筆記体をつかったローディングアニメーションにはじまり、カンバス全体をフル活用したレイアウトにこれでもかと動きが追加されています。
The founders web site design interaction
装飾デザインの図形シェイプにアニメーションを加えることで、ウェブサイト全体のアクセントとなり統一感につながります。
The House booking 3d interaction UI8 KIT
民泊サービス向けアプリの予約方法をインタラクティブな3Dで紹介するアニメーション。
フィットネスアプリ向けのUIコンセプトデザイン。
Space – the first fully digital bank in Georgia
コンテンツが進むのに合わせてクレジッドカードが回転しながら追従するアニメーションは、ストーリーテリング手法にも効果的な使い方。
Electric Vehicle 3D Website Concept
マウススクロールに合わせてアニメーション付イラストを少しずつ展開していきます。
Land Management by Drone – Website Concept
何気ないヒーローデザインにもシンプルなアニメーションを加えるだけで魅力的に仕上げることができます。
WasteTracker – 3D Landing Page
ゴミによる汚染状況を伝えるインタラクティブでSF的なマップアニメーション。
テクノロジー系デザインの参考にしたいクラウドサービスをコンセプトにしたアニメーション。
3D Print – Mobile App with 3D Buildings
コンテンツを紹介するちょっとしたアイコンデザインにも、控えめなアニメーションを加えることで圧倒的な存在感に。
スマホからピザを注文オーダーできるアプリ、ここでも使いたくなるユニークなアニメーションが。
コンテンツの内容に合わせてパララックスエフェクトを効果的に活用したサンプル例。ここでは犬用おもちゃの紹介。
Jobler – Job Search Platform Prototype
求人情報をわかりやすくまとめた求人サイト向けスマホアプリ。
Design concept – Inflight Entertainment Experience
飛行機に搭載される衛星テレビ向けUIデザインを考察したコンセプトデザイン。
Flight onboarding and take-off
乗客の搭乗状況と離陸までをまとめたUIアニメーション。
Animated character with dynamic cloth
超リアルな3Dイラストを活用したヒーローイメージ、シンプルですが印象的。
購買意欲をかきたてるダイナミックなクルマの動きをアニメーションをつかって再現。
NFTアート向けマーケットプレイス用UIデザイン。ページ全体に遠近感のある歪みを加えるなど、プレゼンの見せ方の参考にも。
ゴルフコースの魅力を最大限伝える画像を中心としたアニメーションが素敵なサイト。コンテンツ遷移の控えめなフェードインでエレガントさをプラス。
プロダクトデザインでは、立体的な回転などを加えて見せることで、実際の商品の雰囲気が伝わるのはもちろん、没入感のあるデザインを表現できます。
POSTO. B2B Restaurant Management Platform
ページから少しだけはみ出るようにデザイン要素を配置しアニメーションを追加することで、他にはないオリジナル性が生まれます。
自分好みのハンバーガーをスマホアプリで作成でき、バーガーの重なり方など細かい部分にアニメーションを加えています。
マウススクロールに合わせて建物全体を立体的に360°回転しながら紹介するヒーローイメージ。
ドローンの選択からフライトまでのコントローラー操作を表現したアニメーション。
ウェブサイトからクリックで選択したパーツの色やサイズを直感的に変更できるなど、体験型ウェブサイトは今後も注目です。
マウスでデスクスペースのレイアウトや配置を自由に変更できるアニメーション。
Netflix – New Website 2020. Genres
スライダーからのコンテンツ展開にアニメーションを加えることで、シームレスなサイト閲覧体験を実現します。
現在の状況をリアルタイムで伝えるノーティフィケーション用デザイン、完全に未来です。
Voice morphing interface – Natural
ボイスコマンドでの操作感やUIデザインをアニメーション付きで表現したコンセプト例。
スマートホームの設定をアニメーション付イラストでわかりやすく再現したデザイン。UIだけでなく、背景もプリズムを利用した超おしゃれなつくりに。
本日のスケージュールを表示するUIアプリデザインで、フレキシブルなコンテンツ伸縮アニメーションを採用しています。
航空チケットの検索から販売、詳細確認までを紹介したUIインタラクション、ポップでカラフルな印象が素敵。
Ktech landing page interaction
オーガニックなシェイプと落書きのような手描きイラスト、グラデーションカラーを効果的に活用したランディングページ。ページスクロールに応じたコンテンツ表示に注目です。
mightybuilders – Scroll animation
ページレイアウトを縦に三分割した画像スライダーの新しい見せ方の参考として。
ユーザーがまるで操作しているような浮遊感をプロダクト全体で表現したショッピングサイト。
くるくると回転する制作実績メニューリストは、マウスホバーに合わせて画像が表示されるメニューホバーエフェクトを採用。
サーフィンをコンセプトにしたデザインらしく、ユラユラとした波のような動きを随所に取り入れています。
Photographer Personal Brand Website
ユーザーの視線を自然と誘導するアニメーションによる仕掛けをつかったサンプル例。
mightybuilders – Article page animation
ページのスクロールに合わせて縦横無尽にコンテンツが表示、展開されるブログページ向けのコンセプトデザイン。
One Touch Payment – Website concept
指紋認証ひとつで購入、決済が完了する様子をアニメーションで表現、ますます日常と境目のない動きがウェブサイトやアプリにも必要になってきているようです。
アニメーションは多用しすぎると、逆に使いにくくユーザビリティを損ねてしまうことも。アニメーションの正しい使い方を知っておくと便利ですよ。
ウェブサイトやアプリでのアニメーションの実装は、Lottieが軽くて手軽でオススメです。
前回のWebアニメーションまとめもよかったら一緒にいかがでしょう。
サムネイルソース: Ethnic Maga – Xunqa Tribe / Landing Page by Ali Celebi
