最先端ウェブデザインを体感する!アニメーションが美しいUIデザインまとめ

latestuianimation2016may-top3 (1)

 

ブラウザやウェブサイト体験が進化したことで、さまざまなアニメーションを実装したウェブサイトや、モバイルアプリへの注目が集まっています。今回は「気持ちの良い動き」がポイントとなった、最新UIデザインをまとめてご紹介します。

 

 

余白スペースをたっぷり利用したミニマルなレイアウトから、アニメーションを加えることでよりユーザーの注目を集めるナビメニューや、ユーザーインターフェースを中心に揃えています。なかなか言葉で説明しにくい遷移フローが分かりやすく説明できるので、うまくクライアントの要望に応えることができるかもしれません。

 

 

 

詳細は以下から。

 

 

 

最先端ウェブデザインを体感する!アニメーションが美しいUIデザインまとめ

 

Cima is Live

筆ブラシでペイントしたようなエフェクトを、各ページやコンテンツに活かした、さわやかな配色も素敵なウェブサイト用UIデザイン。

 

 

 

Birds of Paradise Encyclopedia

さまざまな鳥の種類を、インタラクティブなアニメーションと一緒に表現する、次世代のイメージスライダー機能。

 

 

 

National Geographic Redesign

コンテンツのページ遷移に合わせて、ブランドロゴに利用されている、黄色のボーダー枠をアニメーション付きで加えています。

 

 

 

Herman Miller

ストレスを感じない滑らかさが特長で、ブランドイメージともマッチした高級感のあるインターフェース。

 

 

 

What Makes You Special

ヘッダーに立体感たっぷりに描かれたチューリップが印象的で、スクロールに応じて奥行き感を演出したアニメーションの仕掛けも。

 

 

 

Leaves Motion Test

季節やシーズンに合わせて落ち葉がヒラヒラと、商品の上にリアルに重なるエフェクトが素敵です。

 

 

 

Magazine Flow

雑誌では表現のむずかしい、アニメーションを利用したコンテンツは、よりユーザーにも刺激的に見えるレイアウトが可能となります。

 

 

 

Naturale Brewing Co. Web Animation

各プロダクト商品を紹介するスライダーに、なめらかなアニメーションが加えられています。

 

 

 

Old Liquors – Picking An Item Transition

タイムラインに合わせ、スクリーン画面を二分割することで、各コンテンツの詳細と画像イメージを一緒に楽しむことができます。

 

 

 

Tubik Studio | Björn

文字テキストと画像イメージの表示に、すこしだけラグを設けることで、洗練されたアニメーションに仕上げます。

 

 

 

Supera Blog Animation

余白スペースをたっぷり確保したレイアウトは、各コンテンツをクリックすることで、フルスクリーン表示されます。

 

 

 

Knotel Hero Animation

スライダーにズームやスライドアップ・エフェクトを加えることで、よりインタラクティブな魅せ方を提案しています。

 

 

 

Tubik Studio | Ice

ナビメニューやスライダーなどをクリックするたびに、じっくり検討されたアニメーションを各要素に適用しています。

 

 

 

Floating Couture

カタログ形式で商品を閲覧でき、背景にはロゴデザインをパララックスエフェクトで適用しています。

 

 

 

Hide – Ecommerce Project Menu Interaction

ショッピングサイト向けのメガメニュー用レイアウトで、各コンテンツにわずかなアニメーションを加えることで、より高級感のあるブランディングに成功しています。

 

 

 

Royal Enfield

各コンテンツの切り替えに、下から上へのスライド・エフェクトを加えています。

 

 

 

Henderson – Handmade Toys

画面をスクロールしたときに、ほんの少しだけスライドアップ・アニメーションを加えることで、より繊細なイメージを与えることができます。

 

 

 

Modern Redesign Concept

真っ黒の背景からぼんやりと人物モデルが浮かび上がる、ユニークなコンテンツスライダー。

 

 

 

Mediscope

ふわりと浮かんだ浮遊感が絶妙で、スタイリッシュにコンテンツを切り替えます。

 

 

 

Folio Idea

画面を2分割したスプリット・エフェクトを採用したスライダーで、見出しタイトルと画像イメージがアニメーション付きで切り替わります。

 

 

 

Mossio Menu

ハンバーガーアイコンをクリックすると、画面上からナビメニューが登場し、各コンテンツへもアニメーション付きで遷移します。

 

 

 

Elastic Motion Menu

 

 

 

VIA Mixtape Flow

ミックステープを選択し、再生するまでの遷移フローを描いたアニメーションで、思わず使いたくなるインターフェースが特長。

 

 

 

Digital Walls

リビングルームの壁一面に映し出された、グラデーションが美しく、滑るようなぬるりとした動きがインパクト大。

 

 

 

Menu Animation

ナビゲーションメニューを下方向にドラッグすると、ユニークなイラストアニメーションが表示されます。

 

 

 

Health App Steps Animation

線ラインを効果的に利用することで、視線を誘導するテクニック。

 

 

 

My Project Concept

カード型レイアウトのコンテンツを、水平方向のスワイプで選択することができます。

 

 

 

Recipe Application

ボタンをクリックすることで、ページ遷移することなく料理レシピが表示される、モバイル・アプリ向けUIアニメーション。

 

 

 

ToFind Card Stream

タブをクリックすることで、入力した支払い用クレジットカードの詳細を確認できます。

 

 

 

Walkthrough for New Feature

左右にスワイプすることで、イラスト付きで解説されたコンテンツがポップアップ表示されます。

 

 

 

Dualshock4 – Sketch & Principle Freebie

Sketch と Principles 用ファイルで無料配布されているアイテムのひとつで、商品販売などに利用したいUIデザイン。

 

 

 

The UX of Fully Autonomous Cars

目的地を入力することで、インタラクティブに道を誘導してくれるマップ向けインターフェース。


 

 

 

New Concept for My Portfolio

画像イメージに画像が乱れるようなグリッチ・エフェクトが利用された、ポートフォリオのヘッダーデザイン。

 

 

 

A Brand New Look

ヘッダーにデザインされたイラストもかわいく、アイコンにアニメーションを加えたユニークなギミック。

 

 

 

Hero Banner

ロゴデザインにアニメーションを加えることで、より印象的なファーストインプレッションにつながります。