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

lampz

 

この記事では、ウェブデザイン制作の参考にしたい、刺激的な最新UIインタラクション、アニメーションをまとめてご紹介します。ユニークでクリエイティブなアイデアが満載の素敵アニメーションが揃っており、今後のウェブデザインがますます楽しみになる、未来を感じるデザインを中心に集めています。

 

最新ウェブデザインも一緒に確認することで、デザイントレンドや動向をうまく掴むことができます。

Webアイデアの宝庫!注目したい最新ウェブデザイン35個まとめ

Web制作の参考アイデアに!いま話題の最新ウェブデザイン50個まとめ

Web制作参考アイデア集!話題の最新ウェブデザイン40個まとめ

 

前回のまとめはこちらからどうぞ。

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

 

 

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

 

GoSurf Website Hero Animation Interface Design

ベストなサーフスポットを探す目的でデザインされたサーフィン用のアニメーションコンセプト。

 

 

 

LightUp

スライダーに合わせてさまざまな照明ライトが立体的に切り替わるデザインコンセプト。

 

 

 

Universal Shaders

まるで本物の水面のように動く美しいアニメーション。

 

 

 

Extrude Interaction

背景に漢字をつかったユニークでカラフルなアニメーションは、ヒーローヘッダー向けにデザインされたコンセプト。

 

 

 

Express Explorer

選択するコンテンツに応じて、背景の景色がリアルに切り替わるコンセプトデザイン。

 

 

 

Health Check

じぶんの健康状態を分かりやすい図解したアニメーションで、美しいグラデーションカラーが目を引くデザイン。

 

 

 

Summer Vibes 2

夏のレジャースポーツをインタラクティブなスライダーで表現したデザインコンセプト。

 

 

 

Bike Shop Interaction

自転車を販売するオンラインショップ向けアニメーションコンセプト。モデルを選択すると、タイヤが少しだけくるりと回り出します。

 

 

 

ORU Office Spaces

ページの切り替えやコンテンツ遷移にふんだんなアニメーションを用いたホームページ向けデザインコンセプト。

 

 

 

The Secret Project — 002

コンテンツの切り替えに応じて、一部のみスティッキー固定表示したページレイアウトのコンセプト。

 

 

 

Wildlife Shot Animation

野生動物を撮影したさまざまな写真を、ローテーションさせながら回転するアニメーションを実装。

 

 

 

Trip mobile app interaction

旅行先を提示し、詳細情報や決済までシームレスに行うことができるモバイルアプリ。なめらかなアニメーションが使いやすさの向上にもつながっています。

 

 

 

Food Delivery App

テレワークや自宅自粛によって広がる食べもののデリバリーサービス向けアプリのコンセプト。クリック操作で注文を進める美しいUXデザインが特長。

 

 

 

Candy Tours – Interaction

画面の読み込みからページ展開まで、アニメーションをふんだんに利用した縦横無尽のレイアウト。

 

 

 

Travel company homepage

世界各国の魅力的な旅行先をレイアウトし、サムネイルやリンクホバーも強調したアニメーションが素敵。

 

 

 

Poolsides

世界中の美しいプールサイドを撮影した写真が印象的で、観葉植物のリアルなドロップシャドウを背景に利用したり、ふわりとしたトランジションなど目白押し。

 

 

 

NotePet – Pet Tracking UI

ペットの行動を追跡、トラッキングできるモバイルアプリで、立体的な3Dエフェクトをかんたんなイラストのみで実現しています。

 

 

 

Starbucks App Order UI

画像を見ながら注文でき、スワイプやクリックなどあらゆる要素にマイクロインタラクションが採用されたサンプル例。

 

 

 

Starbucks UI/UX Dashboard

なめらかでストレスフリーなスライドアニメーションが印象的だったUI/UXデザイン例。

 

 

 

Haruki Murakami – Book Author Website/UI Compilation

カラフルな配色に、躍動感のあるアニメーションを用いたUIデザインのコンセプト。題材には、海外でも人気の日本を代表する作家、村上春樹さんが。

 

 

 

Climate & Animals: Extinction Crisis Microsite

絶滅危惧動物を分かりやすく図解するイラストアニメーション。トラの模様も細かく変化しています。

 

 

 

OMAHKU – Smart Home App Design

滑らかさが目立つアニメーションで、ボタンやスライダーなどにマイクロインタラクションを採用し、より洗練された雰囲気を演出します。

 

 

 

ClickAi – Layouts

デスクトップのレイアウトにはじまり、タブレットやモバイル端末での表示も想定した変化をアニメーション付きで表現。

 

 

 

Orix Rent App Onboarding Animation

スワイプさせたイラストにも控えめなアニメーションを追加することで、より魅力的でユーザーを引き付けます。

 

 

 

Health Tracking App Concept

ヘルスチェック用アプリは、状態を分かりやすいイラストアニメーションで表現することで、より親しみやすいデザインに。

 

 

 

Blurr_ Animation

背景にぼんやりとしたぼかし要素を加え、コンテンツに応じてアニメーションエフェクトが採用されています。

 

 

 

Custom Skins

スケートボードをカスタマイズできるインタラクティブなアプリ。今後増えてきそうなUI/UXデザインのひとつ。

 

 

 

Fitness App – MVP

Apple Watchと連動したフィットネスアプリのコンセプトデザイン。カラフルな配色カラーパレットも素敵。

 

 

 

TX music MOTION

カラオケをコンセプトにしたアプリデザイン。どれだけうまく歌えているのかひと目で分かるアニメーションにも注目。

 

 

 

Parallax swipe interaction

スワイプに合わせてスニーカーに動きを加えたパララックスエフェクト付きショッピング機能。

 

 

 

Banking Dashboard

銀行の口座残など詳細をまとめて表示したダッシュボード。PCだけでなく、モバイル端末での表示にも工夫が。

 

 

 

Onboarding for coronacure

コロナウイルス予防対策として開発されたモバイルアプリで、各サービスを分かりやすいイラストレーションで表現しています。

 

 

 

The Wish Eclair scroll

美味しそうなエクレアを流れるようなアニメーションで紹介したプロジェクトデザイン。

 

 

 

Nike – rolling animation to promote App

新しいiOSアプリのプレゼンテーション向けアニメーションで、クルクルと広告が切り替わるローリングエフェクトが斬新。

 

 

 

Future Colossal: About Page

サイト全体に表示されたグラデーション付きサークルに、マウスエフェクトを追加したサービス紹介ページ。シンプルですが効果的なエフェクト。

 

 

 

Black Life Matter

世界的なムーブメントとなっているBlack Lives matterに関する個人プロジェクト。マウスカーソルの動きに合わせたアニメーションが特長。

 

 

 

Mountaineering & Trekking Web Template

マウンテニアリングとトレッキングを題材にしたプロジェクトで、高い山に登っていく様子をコンテンツの切り替えで表現しています。

 

 

 

Sports Accessories Web Template

スポーツ関連用品のオンライン販売を想定したコンセプトデザイン。モデルをつかったスタイリッシュなカテゴリ分けが秀悦。

 

 

 

Online Gardening Web Template

ガーデニングショップ向けのサイトデザインコンセプトで、観葉植物をうまく利用したスライダーが目を引きます。