サイトの印象は「動き」が決め手!参考にしたいWebアニメーション45個まとめ

 

この記事では、ウェブサイトの印象が決まる「動き」に注目した参考Webアニメーション45個をまとめてご紹介します。

 

動きを取り入れることで、注目度がアップするのはもちろん、ユーザーの視線を目的のコンテンツまで自然と誘導できるなど、使いやすさの改善も期待できます。

 

アニメーションの基本ルールを理解しておけば、より効率的に動きを加えることができ、「次こんな動き入れてみよう」「この動き入れたら見やすいかも」など、具体的な実装アイデア出しにもオススメです。

 

 

サイトの印象は「動き」が決め手!参考にしたいWebアニメーションまとめ

 

Naomi Osaka Folio Website Design & Animation

完成したウェブサイトをただ見せるだけではなく、そこにアニメーションを加えることで、魅力をプラスできるお手本にしたいテクニック。

 

 

 

Path – Web Design with Landscape Illustrations

風景イラストの美しいグラデーションが印象的なウェブデザイン。

 

 

 

Delight – 3D and Animation for Smart Home

スマートホームの仕組みを立体的な3Dデザインとアニメーションで表現したコンセプトプロジェクト。

 

 

 

Ring Customizing Interaction

指輪の宝石の色や材質などを直感的にカスタマイズできるスマホアプリのコンセプトデザイン。

 

 

 

GetFit Landing Page

スライドの変化に応じて、モノクロだったカンバスに色が付き、立体感まで演出される不義品アニメーション。

 

 

 

Food App Recipe

料理レシピをまとめたスマホアプリで、枠からはみ出た美味しそうな料理の数々は、UIデザインの奥行き感を演出するのにも最適です。

 

 

 

Mara Camp Safari Travel website

マサイ族が住むマラキャンプへのトラベルガイドで、アフリカの魅力や過ごし方をまとめています。

 

 

 

Discover Qatar Website Design

カタールの良さを最大限表現した観光、トラベルガイド的なウェブサイト。

 

 

 

Designer’s Portfolio

デザイン性とアニメーションが充実したデザイナー向けポートフォリオサイト。カスタムカーソルやマウスホバーで飛び出すサムネイルなど魅力的な動きが満載。

 

 

 

Inflight Entertainment Concept

飛行機の機内サービス用UIコンセプトデザインで、目的地までの残り時間や現地の天気などをまとめて確認できます。

 

 

 

NASA. Main

 

 

 

#27 Drone Controller

飛ばしたいドローンを選択し、「FLY」ボタンをクリックすると本当にドローンが飛び出し、コントローラー画面が出現します。

 

 

 

Rent a bike on Map

レンタルサイクルを分かりやすく可視化した、モバイル向けアプリのコンセプトデザイン。

 

 

 

Glasses

スライダーの動きに合わせて、メガネやサングラスを立体的に閲覧できる体験型サイト。

 

 

 

Bison Studio : Loader and Page Transition

ナビメニューより他のコンテンツに遷移する際のローディングアニメーションが特長的なサイトデザイン。

 

 

 

Kangol Website ✦ E-commerce. Home page

グリッドを保ちながら、自由で柔軟なレイアウトを実現したメディアサイト向けコンセプトデザイン。シームレスなショッピング体験を実現しています。

 

 

 

Canela

スクロールに応じて水平方向にコンテンツ展開し、サークル状の特徴的なサムネイルにくるくる回転する動きを加えることで、デザインのアクセントになっています。

 

 

 

Glossarie

フレンドリーで親しみやすい配色カラーパレットや、おしゃれなフォント選びは今後のウェブプロジェクトの参考にいかがでしょう。

 

 

 

Animated 3D bike landing page

自転車を自分好みにカスタマイズしながら購入までできるランディングページのコンセプトデザイン。

 

 

 

Landing – cooperative website Finca

スクロールに合わせて画像がズームしたり、ゆらゆら水面に映されたようなアニメーション効果など、細かい部分にこだわったイケてるデザイン。

 

 

 

Roxtaw – a Venture Builder

ページごとにオリジナル性の高い手描きイラストを盛り込み、思わずスクロールしたくなるストーリーテリング手法が採用されています。

 

 

 

Street Food Market App – 3D Concept

さまざまな屋台が集まるイベントを想定したモバイルアプリで、食事を注文したり、待ち時間の表示などをスマホひとつで完結させています。

 

 

 

Geniusminds – The future of Recruiting in the Age of Automation

ウェブサイトのあらゆる部分にアニメーションが盛り込まれたコンセプトデザイン。控えめなマイクロインタラクションを活用すれば、自然のユーザーの視線を目的のコンテンツまで誘導できます。

 

 

 

Tiffany & Co — redesign website.

高級感のあるデザインに仕上げた宝石メーカーのコンセプトWebデザイン。婚約指輪のダイヤモンドの大きさを決めるアニメーション、素敵です。

 

 

 

Van Gogh Museum

オランダにあるゴッホ美術館のリニューアルデザインで、スクロールと同時にあらゆるゴッホの作品がカンバス全体に自由に配置されます。

 

 

 

Mango Juice – Website Concept

コンテンツが移動しても、商品の缶ジュースがくるくると回転しながら追従するアニメーション。

 

 

 

Forklift 3D Site -Concept

フォークリフトの詳細を分かりやすいアニメーション付きイラストで紹介したコンセプトデザイン。注目して欲しいポイントを強調するのがポイント。

 

 

 

E-Commerce iOS App Animation

iOS向けのショッピングアプリを想定したコンセプトデザイン。なめらかな動きのアニメーションを採用したことで、エレガントでナチュラルな見た目を実現しています。

 

 

 

Brand Identity For Hops & Skips beer

新しいビール飲料のブランディング用に作成されたアニメーションで、ウェブサイトとのシームレスな連動を想定した、ストーリー性のあるデザインが魅力です。

 

 

 

The Met Museum. Exhibitions

マウススクロールに応じて画像のアニメーション表示は、最近のウェブサイトでは当たり前となってきています。

 

 

 

Teapoty – Landing Page Animation

よく見かけるようになった黄色のステッカー風デザインが、ウェブサイト全体のアクセントになっています。ページスクロールでステッカーが回転するなど、ここでもアニメーションが重要に。

 

 

 

Octi

完成したUIデザインだけでなく、スマホの周りにも超立体的な3Dパーツにアニメーションを加えることで、ますます魅力がアップ。

 

 

 

Phone App Concept | Dialing Interaction

スマホの通話画面のコンセプトデザインで、呼び出し中アニメーションも控えめ、分かりやすいスッキリとしたインターフェース。

 

 

 

k2 – Web Design for eSport Competition

吸い込まれるような没入感たっぷりなウェブサイトのヒーローイメージ。

 

 

 

Mitsubishi Outlander UI by milkinside

車に搭載されている機能をイラストアニメーションで分かりやすく伝えます。

 

 

 

#28 Weather App Interaction

この天気予報アプリは、各都市ごとの天気をかわいいいアニメーションイラストをつかって表示します。

 

 

 

Alef Estate v.2.1

電光掲示板のような、左から右へとスクロールするニューススティッカーも最近よく見かけるデザインのひとつ。

 

 

 

Process of buying a car

スマホから新車を直接購入できる、そんな夢のような話が現実になろうとしています。

 

 

 

Artence Magazine

 

 

 

MavFarm

ショッピングサイトのコンセプトデザインで、ここでもウェブデザインだけでなく、背景にもこだわりのアニメーションが採用されています。

 

 

 

Cringe Capture

配色カラーパレットや高級感のあるセリフ書体、程よいアニメーション効果など今後のウェブ制作の参考のひとつとして。

 

 

 

Spark

マッチに灯した火のように、ぼんやりとしたグランジ感をページ全体に織り交ぜたことで、独特のユニークさが表現されています。

 

 

 

Onboarding

アプリをインストールしてまず最初に表示される、オンボーディング画面のコンセプトデザイン。

 

 

 

Dark real time notification

AIが自動で日頃のスケジュール管理を行ってくれる、まるで未来のようなアプリ。

 

 

 

Phoney Feelings Fighter

ザラッとした質感のレトロでカラフルな、アニメーション付きグラデーションがメインとなったコンセプトデザイン。

 

 

前回のWebアニメーションまとめはこちらから。