Advertisement

 

この記事では、ウェブサイトやスマホアプリ制作の参考にしたい最新アニメーションやUIインタラクションをまとめてご紹介します。

 

今まででは考えもつかなかったようなユニークな動きをページに実装することで、ユーザーの視線を釘付けにし、目的のコンテンツまで自然と誘導することができます。

 

デザインアイデアとして最新ウェブサイトも一緒に確認しておくと良いでしょう。

「ウェブデザインのアイデアが決まらない」「なんとなくイメージはあるけど、どう作ればいいかわからない」「打ち合わせでのサンプル見本が欲しい」 この記事で

 

 

動きに注目!Web制作の参考用アニメーション、UIインタラクションまとめ

 

Boutique Florists Cursor Exploration

マウスの動きに合わせて満開のカラフルな花が咲き乱れるアニメーションエフェクト。背景の真っ白のミニマルデザインとのコントラスが素敵。

 

 

 

Drawer Navigation Animation Design

プルンとまるでゼリーのような柔らかさをもったサイドメニューの展開アニメーション。

 

 

 

Recipe Website / Lemon Banner

立体感たっぷりにフレッシュなレモンが浮かび上がる、料理レシピサイト向けヒーローデザイン。

 

 

 

Recipe Website / Donuts Banner

同じシリーズでドーナツをつかったヒーローイメージ。思わずページをスクロールしてしまいたくなります。

 

 

 

Web Gallery Interaction

ページのスクロールに合わせて自由にレイアウトされたアート作品にはパララックス効果が採用され、ホバーズームエフェクトと一緒に。

 

 

 

CVRTON Animation

ウェブデザインのプロトタイプの見せ方としてアニメーションが必須になってきています。実際の動きもわかりやすく、雰囲気をつかむのにも便利。

 

 

 

Wine shop Just relax

ワインの品種に応じて背景色も変化するショッピングサイト向けアニメーション。

 

 

 

okaybutcolor – Interaction

高級感のあるセリフ書体と筆記体をつかったローディングアニメーションにはじまり、カンバス全体をフル活用したレイアウトにこれでもかと動きが追加されています。

 

 

 

The founders web site design interaction

装飾デザインの図形シェイプにアニメーションを加えることで、ウェブサイト全体のアクセントとなり統一感につながります。

 

 

 

The House booking 3d interaction UI8 KIT

民泊サービス向けアプリの予約方法をインタラクティブな3Dで紹介するアニメーション。

 

 

 

Presence TV

フィットネスアプリ向けの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的なマップアニメーション。

 

 

 

Cloud – Web design with 3D

テクノロジー系デザインの参考にしたいクラウドサービスをコンセプトにしたアニメーション。

 

 

 

3D Print – Mobile App with 3D Buildings

コンテンツを紹介するちょっとしたアイコンデザインにも、控えめなアニメーションを加えることで圧倒的な存在感に。

 

 

 

Pizza – Food Delivery App 🍕

スマホからピザを注文オーダーできるアプリ、ここでも使いたくなるユニークなアニメーションが。

 

 

 

Pet toys Starter Pack Website

コンテンツの内容に合わせてパララックスエフェクトを効果的に活用したサンプル例。ここでは犬用おもちゃの紹介。

 

 

 

Jobler – Job Search Platform Prototype

求人情報をわかりやすくまとめた求人サイト向けスマホアプリ。

 

 

 

Design concept – Inflight Entertainment Experience

飛行機に搭載される衛星テレビ向けUIデザインを考察したコンセプトデザイン。

 

 

 

Flight onboarding and take-off

乗客の搭乗状況と離陸までをまとめたUIアニメーション。

 

 

 

Animated character with dynamic cloth

超リアルな3Dイラストを活用したヒーローイメージ、シンプルですが印象的。

 

この記事では、デザイン制作で3Dデザインを手軽に作成、利用できる無料ツールやデザイン素材をまとめてご紹介します。 2021年の注目デザイントレンドとし

 

 

Range Rover Promo Website

購買意欲をかきたてるダイナミックなクルマの動きをアニメーションをつかって再現。

 

 

 

Cryptonium. NFT Marketplace

NFTアート向けマーケットプレイス用UIデザイン。ページ全体に遠近感のある歪みを加えるなど、プレゼンの見せ方の参考にも。

 

 

 

Copper Rock Golf Course

ゴルフコースの魅力を最大限伝える画像を中心としたアニメーションが素敵なサイト。コンテンツ遷移の控えめなフェードインでエレガントさをプラス。

 

 

 

Scooter Promo Website

プロダクトデザインでは、立体的な回転などを加えて見せることで、実際の商品の雰囲気が伝わるのはもちろん、没入感のあるデザインを表現できます。

 

 

 

POSTO. B2B Restaurant Management Platform

ページから少しだけはみ出るようにデザイン要素を配置しアニメーションを追加することで、他にはないオリジナル性が生まれます。

 

 

 

Burger Store – Motion 3D

自分好みのハンバーガーをスマホアプリで作成でき、バーガーの重なり方など細かい部分にアニメーションを加えています。

 

 

 

Delight – Web Design with 3D

マウススクロールに合わせて建物全体を立体的に360°回転しながら紹介するヒーローイメージ。

 

 

 

#27 Drone Controller

ドローンの選択からフライトまでのコントローラー操作を表現したアニメーション。

 

 

 

Bento Matte 3D: Medicine

ウェブサイトからクリックで選択したパーツの色やサイズを直感的に変更できるなど、体験型ウェブサイトは今後も注目です。

 

 

 

Cubbies v2.0

マウスでデスクスペースのレイアウトや配置を自由に変更できるアニメーション。

 

 

 

Netflix – New Website 2020. Genres

スライダーからのコンテンツ展開にアニメーションを加えることで、シームレスなサイト閲覧体験を実現します。

 

 

 

Dark real time notification

現在の状況をリアルタイムで伝えるノーティフィケーション用デザイン、完全に未来です。

 

 

 

Voice morphing interface – Natural

ボイスコマンドでの操作感やUIデザインをアニメーション付きで表現したコンセプト例。

 

 

 

Smart Home app Onboarding

スマートホームの設定をアニメーション付イラストでわかりやすく再現したデザイン。UIだけでなく、背景もプリズムを利用した超おしゃれなつくりに。

 

 

 

Day Planner iOS app

本日のスケージュールを表示するUIアプリデザインで、フレキシブルなコンテンツ伸縮アニメーションを採用しています。

 

 

 

Onward Ticket Interaction

航空チケットの検索から販売、詳細確認までを紹介したUIインタラクション、ポップでカラフルな印象が素敵。

 

 

 

Ktech landing page interaction

オーガニックなシェイプと落書きのような手描きイラスト、グラデーションカラーを効果的に活用したランディングページ。ページスクロールに応じたコンテンツ表示に注目です。

 

 

 

mightybuilders – Scroll animation

ページレイアウトを縦に三分割した画像スライダーの新しい見せ方の参考として。

 

 

 

HM002: Flokka

ユーザーがまるで操作しているような浮遊感をプロダクト全体で表現したショッピングサイト。

 

 

 

Marcus Eriksson – Index

くるくると回転する制作実績メニューリストは、マウスホバーに合わせて画像が表示されるメニューホバーエフェクトを採用。

 

 

 

Making Waves

サーフィンをコンセプトにしたデザインらしく、ユラユラとした波のような動きを随所に取り入れています。

 

 

 

Photographer Personal Brand Website

ユーザーの視線を自然と誘導するアニメーションによる仕掛けをつかったサンプル例。

 

 

 

mightybuilders – Article page animation

ページのスクロールに合わせて縦横無尽にコンテンツが表示、展開されるブログページ向けのコンセプトデザイン。

 

 

 

One Touch Payment – Website concept

指紋認証ひとつで購入、決済が完了する様子をアニメーションで表現、ますます日常と境目のない動きがウェブサイトやアプリにも必要になってきているようです。

 

 

アニメーションは多用しすぎると、逆に使いにくくユーザビリティを損ねてしまうことも。アニメーションの正しい使い方を知っておくと便利ですよ。

海外サイト Medium で公開された The ultimate guide to proper use of animation in UX by Taras S
この記事では、ディズニーによるアニメーションの基本原則を、どのようにWebサイトやUIデザインに適用できるか、具体的なサンプル例と一緒に紹介しています。

 

 

ウェブサイトやアプリでのアニメーションの実装は、Lottieが軽くて手軽でオススメです。

最近のウェブサイト制作では、アニメーションがますます重要になってきています。 この記事は、Lottieの使い方をまとめた基本ガイドです。Lottieの

 

 

前回のWebアニメーションまとめもよかったら一緒にいかがでしょう。

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

 

サムネイルソース: Ethnic Maga – Xunqa Tribe / Landing Page by Ali Celebi