ますます進化するWebデザインの世界において、アニメーションはますます欠かせないデザイン要素のひとつとなっています。
パソコンだけでなくスマホなどアニメーションに対応するデバイスが増えたことで、クリエイティブに対する重要度も高まっています。
では、実際にどのようにWebサイトにアニメーションを活用したら良いのでしょう。
この記事では、Webアニメーションの参考にしたい、魅力的な最新UIインタラクションをまとめてご紹介します。
UXデザインにおけるアニメーションの基本原則とルールも一緒に確認しておくと良いでしょう。
実例で学ぶ！美しい最新UIアニメーションまとめ
ページをスクロールすると、海面から深海へとつづくコンテンツを、アニメーションを利用することで没入感のあるデザインに仕上げています。
Royal Caribbean App – Navigation & Explore
クルーズ船を真上から見た様子をリアルに表現し、寄港地でのイベント、レストラン、ショッピングなどの情報を分かりやすく提供したモバイルアプリ。
Ordering pizza immersive experience for Natural AI
自分好みにカスタマイズしたピザをオンライン注文できるモバイルアプリのUIコンセプト。まるで本当にトッピングを追加しているようなアニメーションなど多彩。
次世代型ドローンをつかい、新しいひとの移動手段として紹介するコンセプトデザイン。
SpaceX Falcon 9 – Launch in Augmented Reality
自宅のテーブルの上で、SpaceX社のスペースロケットを打ち上げることができるARアプリ。
Tesla Cybertruck — Make it custom
イーロン・マスク率いるテスラ社の新モデルCybertruckの特設ランディングページ。パーソナライズできる体験型のウェブサイトがページスクロールをユーザーに促します。
スポーツカーの性能や機能を、未来を感じるSF系アニメーションを使って表現しています。
User Experience – Design Concept
ボトル詰めされた商品を立体的に並べた、ショッピングサイトのサンプル例。まるで本当に手で触っているような感覚にさせてくれます。
ネオン色に明るく輝きながら、ロゴが立体的に変化するコンセプトデザイン。
Nike Air Bubble Pack Motion GIF
スニーカーと重なるように、シャボン玉のように七色に輝きながら、形を変化させる3Dテクニック。
What if we take a hamburger button literally?
もしもハンバーガーメニューが、文字通りハンバーガーだったらという面白コンセプトデザイン。
Landing Page – Wendy’s Granny Chocolate
まるで実際にチョコレートを選んでいるような、立体的なスライダーが特長の商品紹介ページ、思わず購入したくなる工夫が。
既存ブランドの3Dデザインアセットを多数用いた、インタラクティブなランディングページ。
Landing page for gold jewelry website
黄金リングの3Dアニメーションエフェクトのヒーローイメージが印象的。宝石店のランディングページ。
physics 3D landing page concept
物理学を応用したシンプルな動きを、そのままウェブサイトに実装したデザイン。実際のアプリがこちら。
３Dデザインを利用した天気予報アプリで、影をつけることでより立体感をアップさせることができます。
ベッドの角度や設定をカスタマイズできる、新しいライフスタイルに向けたモバイルアプリ。
Landing page concept with parallax effect
奥行き感を演出できる、画像のズーム、パララックス効果を活用したランディングページのサンプル例。
Vibe’n to the UI (with audio) GIF
車の鍵を開けたり、ライトを付けたり、充電をしたり、車内温度の調整などを、スマートフォンから直感的に行うことができるモバイルアプリのコンセプト。
スマホによる各種決済を、カードを上下にスワイプで変更できる、インタラクティブなデザインコンセプト。
Neumorphism Test II- iOS Tabs (Animation)
話題のスタイル、「ニューモーフィズム」と美しいグラデーションを組み合わせたサンプルデモ。
The Royal Caribbean Ecosystem, Destinations Page
クルーズ船でハワイやカリビアンをめぐる旅行の行き先を、インタラクティブなアニメーションをつかって紹介したランディングページ。
Traveler 3d mobile interaction design
旅行のフライト情報や現地の気温、時間などをまとめて表示するモバイルアプリ、デモでは日本への旅行がサンプルに。
AIが食事の献立をインタラクティブに魅せる、未来の料理レシピ本のようなアプリのコンセプトデザイン。
World of Shapes Animation with 3D objects
マウスカーソルを当てる位置によって立体チューブの色が切り替わる、ウェブサイトのヒーローイメージ。
有機的で不揃いなバブル型シェイプを多用することで、柔らかい印象を与えるレイアウトに仕上げています。
スクロールに応じて次々にコンテンツが展開し、ふわりと表示されるアニメーションがエレガントなブランドイメージにうまくマッチしています。
配色の切り替えに合わせて、立体的なオブジェクトの色も変更されるアニメーション。
画像サムネイルにマウスホバーすると、水面がゆらゆらと揺れているようなエフェクトが素敵なサイト。
シンプルなグリッドレイアウトですがスクロールすると絡む全体が歪むユニークなアニメーションが。
フルスクリーン表示される動画ビデオから、コンテンツを並べたトップページへの遷移をアニメーション付きで。
よりアート性の高いストーリーテリング手法を活用したランディングページでのアニメーションの活用サンプル。
左右に分割されたレイアウトに、インタラクティブなアニメーションを活用した画像ギャリーが素敵なポートフォリオサイト。
FOMU — Fotomuseum Antwerp — Carousel
画面が歪みDistortionエフェクトをカルーセルに実装にしたアニメーション例。
ページスクロールに合わせた流れるようなアニメーションエフェクトが目を引くコンセプトデザイン。
Archy – Interior agency website
ページスクロールに合わせて流れるようなフローをページ全体に取り入れたサンプル例、思わずスクロールしたくなってしまいます。
絵本の読み聞かせアプリのコンセプトデザインで、本を選ぶと実際に本を開いたようなアニメーションエフェクトが印象的。
Arun Pandey Marvel Character Webpage UI:UX Design
Marvelの各キャラクターを紹介したページサンプル。カルーセルが左右に動くたびに、キャラクターだけが拡大ズーム表示。
日本各地の美味しいラーメンを紹介するウェブサイトのランディングページ。ラーメンに自然と目がいくUIデザイン。
選択する旅行オプションツアーの内容が、わかりやすい画像で説明したUIデザインですが、枠からはみ出ることで立体感を強調できます。
Mobile App – Weather Lock Screen
イラストで時間と天気を伝えるスマホアプリ。夕日が少しずつ沈んでいく様子をうまく描いています。
タイポグラフィを基調としたシンプルなデザインですが、アニメーションを用いることでよりリッチなウェブ体験を提供しています。
#31 Google Earth Studio GIF | 99+ Days in the Lab
世界の各地名所を上空から人工衛星などで撮影したような、Google Earth を利用したアニメーション例。
瞑想アプリのこちらは、落ち着いた控えめな配色に、わずかなイラストアニメーションが好印象。
ヌルヌルと立体的に動く布のようなオブジェクトを描いた、未来系の不思議アニメーション。
手作りされた美しい曲線をえがいた陶器をモチーフにしたランディングページ。陶器の美しさを強調できる、拡大ズームからの展開には脱帽です。
何気ない静止画のように見えますが、よく見ると鏡にうつる風景が少しずつ変化しています。配色も個人的にメモとして。
商品の写真だけでなく、あらゆる角度から見ているようなインタラクティブなサンプルデモ。
Mobile App – Onboarding with 3D
通常の平面的なイラストを立体的にすることで、奥行き感のある立体的な仕上がりを実現できます。こちらはスマホアプリ向けオンボーディング画面。
マウスの動きに合わせて追従する監視カメラをデザインしたヒーローイメージ。
画面の左右スワイプに合わせて、マウスが立体的に切り替わるいおとで、手に取るような3D閲覧することが可能に。
Day2 – The color of food – Motion Gif2
コンテンツの切り替わりと同時に、カラフルな皿も少しだけ回転するなど、より自然な動きを取り入れたアプリのサンプル例。
映画のチケット購入から、カレンダーへのスケジュール登録までのプロセスを簡略化するUIデザイン。
スムーズで迷いのない、操作性に優れたイベントチケット購入サイト。パーソナライズされた場所やジャンルによって、さまざまなイベント情報が提供されます。
背景にある植物の葉っぱが少しだけユラユラと揺れているイラストアニメーション。これだけでも十分に訴求力のある動きを演出できます。
iWatchのさまざまな動きをひとまとめにしたショーケース的UIデザイン。最近この斜めレイアウト、プレゼンなどでも増えています。
