Advertisement

origin9-1

 

ますます進化するWebデザインの世界において、アニメーションはますます欠かせないデザイン要素のひとつとなっています。

 

パソコンだけでなくスマホなどアニメーションに対応するデバイスが増えたことで、クリエイティブに対する重要度も高まっています。

 

では、実際にどのようにWebサイトにアニメーションを活用したら良いのでしょう。

 

この記事では、Webアニメーションの参考にしたい、魅力的な最新UIインタラクションをまとめてご紹介します。

 

UXデザインにおけるアニメーションの基本原則とルールも一緒に確認しておくと良いでしょう。

海外サイト Medium で公開された The ultimate guide to proper use of animation in UX by Taras S

 

 

実例で学ぶ!美しい最新UIアニメーションまとめ

 

Origin

ページをスクロールすると、海面から深海へとつづくコンテンツを、アニメーションを利用することで没入感のあるデザインに仕上げています。

 

 

 

Royal Caribbean App – Navigation & Explore

クルーズ船を真上から見た様子をリアルに表現し、寄港地でのイベント、レストラン、ショッピングなどの情報を分かりやすく提供したモバイルアプリ。

 

 

 

Ordering pizza immersive experience for Natural AI

自分好みにカスタマイズしたピザをオンライン注文できるモバイルアプリのUIコンセプト。まるで本当にトッピングを追加しているようなアニメーションなど多彩。

 

 

 

Urban Air Mobility

次世代型ドローンをつかい、新しいひとの移動手段として紹介するコンセプトデザイン。

 

 

 

SpaceX Falcon 9 – Launch in Augmented Reality

自宅のテーブルの上で、SpaceX社のスペースロケットを打ち上げることができるARアプリ。

 

 

 

Tesla Cybertruck — Make it custom

イーロン?マスク率いるテスラ社の新モデルCybertruckの特設ランディングページ。パーソナライズできる体験型のウェブサイトがページスクロールをユーザーに促します。

 

 

 

Shelby FUI

スポーツカーの性能や機能を、未来を感じるSF系アニメーションを使って表現しています。

 

 

 

User Experience – Design Concept

ボトル詰めされた商品を立体的に並べた、ショッピングサイトのサンプル例。まるで本当に手で触っているような感覚にさせてくれます。

 

 

 

NIKE GLOW? TREATMENTS

ネオン色に明るく輝きながら、ロゴが立体的に変化するコンセプトデザイン。

 

 

 

Nike Air Bubble Pack Motion GIF

スニーカーと重なるように、シャボン玉のように七色に輝きながら、形を変化させる3Dテクニック。

 

 

 

What if we take a hamburger button literally?

もしもハンバーガーメニューが、文字通りハンバーガーだったらという面白コンセプトデザイン。

 

 

 

Landing Page – Wendy’s Granny Chocolate

まるで実際にチョコレートを選んでいるような、立体的なスライダーが特長の商品紹介ページ、思わず購入したくなる工夫が。

 

 

 

Letter

既存ブランドの3Dデザインアセットを多数用いた、インタラクティブなランディングページ。

 

 

 

Landing page for gold jewelry website

黄金リングの3Dアニメーションエフェクトのヒーローイメージが印象的。宝石店のランディングページ。

 

 

 

physics 3D landing page concept

物理学を応用したシンプルな動きを、そのままウェブサイトに実装したデザイン。実際のアプリがこちら

 

 

 

Weather App Visual Concept

3Dデザインを利用した天気予報アプリで、影をつけることでより立体感をアップさせることができます。

 

 

 

Sleep Number

ベッドの角度や設定をカスタマイズできる、新しいライフスタイルに向けたモバイルアプリ。

 

 

 

Landing page concept with parallax effect

奥行き感を演出できる、画像のズーム、パララックス効果を活用したランディングページのサンプル例。

 

 

 

Vibe’n to the UI (with audio) GIF

車の鍵を開けたり、ライトを付けたり、充電をしたり、車内温度の調整などを、スマートフォンから直感的に行うことができるモバイルアプリのコンセプト。

 

 

 

Card Swipe Animation

スマホによる各種決済を、カードを上下にスワイプで変更できる、インタラクティブなデザインコンセプト。

 

 

 

Neumorphism Test II- iOS Tabs (Animation)

話題のスタイル、「ニューモーフィズム」と美しいグラデーションを組み合わせたサンプルデモ。

 

Neumorphism(ニューモーフィズム)は、昨年末ごろより新しいデザイントレンドになるのではと話題となっている新しいデザイン手法です。 この記事で

 

 

The Royal Caribbean Ecosystem, Destinations Page

クルーズ船でハワイやカリビアンをめぐる旅行の行き先を、インタラクティブなアニメーションをつかって紹介したランディングページ。

 

 

 

Traveler 3d mobile interaction design

旅行のフライト情報や現地の気温、時間などをまとめて表示するモバイルアプリ、デモでは日本への旅行がサンプルに。

 

 

 

Summer and Chill

 

 

 

Smart Kitchen Assistant App

AIが食事の献立をインタラクティブに魅せる、未来の料理レシピ本のようなアプリのコンセプトデザイン。

 

 

 

World of Shapes Animation with 3D objects

マウスカーソルを当てる位置によって立体チューブの色が切り替わる、ウェブサイトのヒーローイメージ。

 

 

 

OpenColony Marketing Website

有機的で不揃いなバブル型シェイプを多用することで、柔らかい印象を与えるレイアウトに仕上げています。

 

 

 

Arch – Homepage Motion

スクロールに応じて次々にコンテンツが展開し、ふわりと表示されるアニメーションがエレガントなブランドイメージにうまくマッチしています。

 

 

 

Abstract 3D Pack Vol.1

配色の切り替えに合わせて、立体的なオブジェクトの色も変更されるアニメーション。

 

 

 

Sold&Sesy – Micro

画像サムネイルにマウスホバーすると、水面がゆらゆらと揺れているようなエフェクトが素敵なサイト。

 

 

 

Wiels Events

シンプルなグリッドレイアウトですがスクロールすると絡む全体が歪むユニークなアニメーションが。

 

 

 

Video Main

フルスクリーン表示される動画ビデオから、コンテンツを並べたトップページへの遷移をアニメーション付きで。

 

 

 

Ring Homepage

よりアート性の高いストーリーテリング手法を活用したランディングページでのアニメーションの活用サンプル。

 

 

 

Portfolio Interactions

左右に分割されたレイアウトに、インタラクティブなアニメーションを活用した画像ギャリーが素敵なポートフォリオサイト。

 

 

 

FOMU — Fotomuseum Antwerp — Carousel

画面が歪みDistortionエフェクトをカルーセルに実装にしたアニメーション例。

 

 

 

Forest Planet

ページスクロールに合わせた流れるようなアニメーションエフェクトが目を引くコンセプトデザイン。

 

 

 

Archy – Interior agency website

ページスクロールに合わせて流れるようなフローをページ全体に取り入れたサンプル例、思わずスクロールしたくなってしまいます。

 

 

 

Audiobook App Concept

絵本の読み聞かせアプリのコンセプトデザインで、本を選ぶと実際に本を開いたようなアニメーションエフェクトが印象的。

 

 

 

Arun Pandey Marvel Character Webpage UI:UX Design

Marvelの各キャラクターを紹介したページサンプル。カルーセルが左右に動くたびに、キャラクターだけが拡大ズーム表示。

 

 

 

Credit Card Insider

 

 

 

Ramenny web landing

日本各地の美味しいラーメンを紹介するウェブサイトのランディングページ。ラーメンに自然と目がいくUIデザイン。

 

 

 

tourism plans

選択する旅行オプションツアーの内容が、わかりやすい画像で説明したUIデザインですが、枠からはみ出ることで立体感を強調できます。

 

 

 

Mobile App – Weather Lock Screen

イラストで時間と天気を伝えるスマホアプリ。夕日が少しずつ沈んでいく様子をうまく描いています。

 

 

 

Hyundai Eco – Landing Page

 

 

 

Fashion Resort – Interaction

タイポグラフィを基調としたシンプルなデザインですが、アニメーションを用いることでよりリッチなウェブ体験を提供しています。

 

 

 

#31 Google Earth Studio GIF | 99+ Days in the Lab

世界の各地名所を上空から人工衛星などで撮影したような、Google Earth を利用したアニメーション例。

 

 

 

Meditation App

瞑想アプリのこちらは、落ち着いた控えめな配色に、わずかなイラストアニメーションが好印象。

 

 

 

Future Reflection

ヌルヌルと立体的に動く布のようなオブジェクトを描いた、未来系の不思議アニメーション。

 

 

 

Web site — Ason Pottery

手作りされた美しい曲線をえがいた陶器をモチーフにしたランディングページ。陶器の美しさを強調できる、拡大ズームからの展開には脱帽です。

 

 

 

Isolation Reflection?

何気ない静止画のように見えますが、よく見ると鏡にうつる風景が少しずつ変化しています。配色も個人的にメモとして。

 

 

 

Furniture Store

商品の写真だけでなく、あらゆる角度から見ているようなインタラクティブなサンプルデモ。

 

 

 

Mobile App – Onboarding with 3D

通常の平面的なイラストを立体的にすることで、奥行き感のある立体的な仕上がりを実現できます。こちらはスマホアプリ向けオンボーディング画面。

 

 

 

bg animation

マウスの動きに合わせて追従する監視カメラをデザインしたヒーローイメージ。

 

 

 

3D Product Swipe

画面の左右スワイプに合わせて、マウスが立体的に切り替わるいおとで、手に取るような3D閲覧することが可能に。

 

 

 

Day2 – The color of food – Motion Gif2

コンテンツの切り替わりと同時に、カラフルな皿も少しだけ回転するなど、より自然な動きを取り入れたアプリのサンプル例。

 

 

 

Movie ticket to calendar UI

映画のチケット購入から、カレンダーへのスケジュール登録までのプロセスを簡略化するUIデザイン。

 

 

 

Biletix Redesign – Part 1

スムーズで迷いのない、操作性に優れたイベントチケット購入サイト。パーソナライズされた場所やジャンルによって、さまざまなイベント情報が提供されます。

 

 

 

DesFriends Course

背景にある植物の葉っぱが少しだけユラユラと揺れているイラストアニメーション。これだけでも十分に訴求力のある動きを演出できます。

 

 

 

iWatch UI

iWatchのさまざまな動きをひとまとめにしたショーケース的UIデザイン。最近この斜めレイアウト、プレゼンなどでも増えています。

 

 

この記事では、申博体育平台制作の参考にしたい、刺激的な最新UIインタラクション、アニメーションをまとめてご紹介します。ユニークでクリエイティブなアイデアが満載の素
この記事では、申博体育平台制作で活用したい最新UIインタラクション、アニメーションをまとめてご紹介します。Webやモバイルアプリの参考アイデアとして取り入れたい、