Advertisement

water-engineering-1

 

この記事では、ウェブデザイン制作で活用したい最新UIインタラクション、アニメーションをまとめてご紹介します。Webやモバイルアプリの参考アイデアとして取り入れたい、ユニークで素敵なアニメーションを中心に揃えています。

 

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

この記事では、Webデザインのアイデアがつまった、注目したい最新Webサイトデザイン35個をまとめてご紹介します。 トレンドが目まぐるしく変化するWe
この記事では、今後のWeb制作で参考にしたい最新Webサイトデザイン50個をまとめてご紹介します。 世界中の優れた実例サンプルを実際に見ることで、印象
この記事では、デザイン制作のインスピレーションや参考にしたい、2020年に入って注目を集めている最新ウェブサイトデザイン37個をまとめています。 20
当サイトでは、定期的に新しく公開された最新Webサイトデザインをまとめていますが、今回はいつもとは異なり、2019年のベストWebデザイン50個を厳選、ピックアップ

 

 

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

#blacklivesmatter

世界中でムーブメントを巻き起こしている、黒人に対する暴力や構造的な人種差別の撤廃を訴える Black Lives Matter。

 

 

Luxroom | Animation

メインページ用に作成されたアニメーションは、エレガントで高級感のあるブランドイメージをうまく表現しています。

 

 

The writing experience – Nerdoo

記事投稿画面をイメージした、インタラクティブなアニメーションが特長。

 

 

Nerdoo – Journal Keeping App

日々の出来事を記録する日記ジャーナル向けアプリで、まるでノートを見開いたようなユニークなデザイン。

 

 

Viewing Camera Modes

下から立体的なスライドパネルを表示することで、各種設定アイコンを並べたレイアウト。

 

 

Splash screen

ネオンライトエフェクトとスキューモーフィズムといった、2020年を代表するデザイントレンドを採用したスプラッシュ画面。

 

 

iOS app / Animation

コンテンツが展開するたびに、ユニークで遊び心あふれるアニメーションを多用したアプリデザイン。

 

 

Ecotourism Website Home Page

エコツーリズム向けのウェブサイトデザインは、パララックスエフェクトで圧倒的な奥行き感を演出した体験型サイト。

 

 

App onboarding design

アプリのサービスやツール紹介向けに作成されたオンボーディング・ページ。

 

 

Flow Builder

ワークフローなどのフローチャートを直感的に作成できるツールのコンセプトデザイン。

 

 

Radio Player App 🎛 | Neumorphic concept

ニューモーフィズム・スタイルで再現されたラジオアプリ。

 

 

MIX

スルスルとページが流れるように進むレイアウトデザイン。

 

 

Format web site design interaction

ページをスクロールすると、新しいコンテンツがポップアップで表示され、こちらもスムーズなアニメーションが魅力。

 

 

NY City guide landing page motion design

各コンテンツの移動に合わせて、イラストの一部分にアニメーションを加えることで、ユーザーの視線を自然と注目してほしいポイントに集めます。

via Gfycat

 

 

Online Museums

新型コロナウイルスの影響で世界中で自宅自粛が増えたことで、新しく注目されるようになったオンライン型ミュージアム。

 

 

C19 – 002. (Slow) Motion Exploration.

各種スポーツの躍動的な瞬間を見事に切り取り、ページコンテンツとしてうまく利用したサンプル例。

 

 

MOBIUS RIING C4D ANIMATION

エンドレスに形が変化し続ける不思議なアニメーション。

 

 

2℃ Reading

くるりと回転するように展開するナビメニューが面白いモバイル向けアプリ。

 

 

Havana – Animation

使用するイラストにちょっとした動きを加えることで、クリエイティブな魅せ方が可能に。

 

 

GlobeKit Website Refresh – FAQs Transition

スライドメニューの背景をうまく利用することで、ヒーローイメージをより強調できるアニメーション。

 

 

Francesco Interactions

画像やテキストがゆらゆらと揺れるようなリップルエフェクトを実装したサイトデザインで、カスタムメニューやシームレスなページ遷移も素敵。

 

 

Furniture Ecommerce Website

画面全体に無造作に並べられた画像を、マウスにあわせてグリグリ動かすことができるイントロ・アニメーション。

 

 

The Secret Project — 001

コンテンツをクリックしたときの立体的なページ遷移アニメーションなど、マイクロインタラクションを大事にしたリッチなデザイン。

 

Webサイトにおいて状況を伝えるシステムステータスの可視性(英: Visibility)は、ウェブサイトのユーザビリティ研究の第一人者ヤコブ・ニールセン(Jakob

 

Insidemind Motion Concept

立体的で複雑な光の屈折を、透明のクリスタルガラス風オブジェクトで表現した、目を奪われる圧倒的なエフェクト。

 

 

Kati Forner Featured Projects Animation

コンテンツの移動に合わせて、下からふわりと表示される文字テキスト用アニメーションがマッチした作品。パステルカラーの控えめでおしゃれな配色も◎。

 

 

Kalli – Responsive HTML Templates II

スニーカー販売向けショッピングサイトでは、まるで靴を放り投げたようなユニークなアニメーションが目を引きます。

 

 

PanPan – Dog Treats UI

犬用おやつの商品ページでは、含まれている食材や期待できる効果など、ユーザーが気になる点をわかりやすいイラストとアニメーションで示しています。

 

 

Octane Material

画面中央に、ガラスでできた透明の三角立方体がくるくると回転することで、背景の文字テキストや画像が歪んで見える仕組み。

 

 

Virtual Run | Landing Page

各コンテンツ、カテゴリーに応じて色分けし、それを3Dアニメーションに見事に反映したランディングページ。

 

 

Starlink Website Design

世界中に広がるネットワークを、立体的な地球イラストで表現しながら、コンテンツごとにコロコロと転がりながら展開します。

 

 

FILMPRODUCTION

カルーセルの動き似合わせて文字サイズが変化するだけでなく、各リンクなどにマウスホバーすることで、背景の画像がズームアップされる仕掛けも。

 

 

Mors Architects

ページスクロールに合わせて画像をアニメーション表示する、今では定番となったレイアウトスタイルのひとつ。

 

 

Fashion Website

画像がリキッド状に変化させながら、文字テキストにもアニメーションを追加しています。

 

 

Lumen Museum Webpage Animation

ページをスクロールしようとすると、表示されている一眼レフカメラが爆発したようにパーツごとに分解されます。

 

 

Nana Online Magazine Interaction

ブログマガジン全体にマイクロインタラクションを実装した、体験型ウェブサイトのサンプル例。

 

 

Water Engineering Website

水に関するビジネスらしい、水面の波紋など水に関連するエフェクトをふんだんに詰め込んだサイト。