この記事では、ウェブサイトの印象が決まる「動き」に注目した参考Webアニメーション45個をまとめてご紹介します。
動きを取り入れることで、注目度がアップするのはもちろん、ユーザーの視線を目的のコンテンツまで自然と誘導できるなど、使いやすさの改善も期待できます。
アニメーションの基本ルールを理解しておけば、より効率的に動きを加えることができ、「次こんな動き入れてみよう」「この動き入れたら見やすいかも」など、具体的な実装アイデア出しにもオススメです。
サイトの印象は「動き」が決め手!参考にしたいWebアニメーションまとめ
Naomi Osaka Folio Website Design & Animation
完成したウェブサイトをただ見せるだけではなく、そこにアニメーションを加えることで、魅力をプラスできるお手本にしたいテクニック。
Path – Web Design with Landscape Illustrations
風景イラストの美しいグラデーションが印象的なウェブデザイン。
Delight – 3D and Animation for Smart Home
スマートホームの仕組みを立体的な3Dデザインとアニメーションで表現したコンセプトプロジェクト。
指輪の宝石の色や材質などを直感的にカスタマイズできるスマホアプリのコンセプトデザイン。
スライドの変化に応じて、モノクロだったカンバスに色が付き、立体感まで演出される不義品アニメーション。
料理レシピをまとめたスマホアプリで、枠からはみ出た美味しそうな料理の数々は、UIデザインの奥行き感を演出するのにも最適です。
Mara Camp Safari Travel website
マサイ族が住むマラキャンプへのトラベルガイドで、アフリカの魅力や過ごし方をまとめています。
カタールの良さを最大限表現した観光、トラベルガイド的なウェブサイト。
デザイン性とアニメーションが充実したデザイナー向けポートフォリオサイト。カスタムカーソルやマウスホバーで飛び出すサムネイルなど魅力的な動きが満載。
Inflight Entertainment Concept
飛行機の機内サービス用UIコンセプトデザインで、目的地までの残り時間や現地の天気などをまとめて確認できます。
飛ばしたいドローンを選択し、「FLY」ボタンをクリックすると本当にドローンが飛び出し、コントローラー画面が出現します。
レンタルサイクルを分かりやすく可視化した、モバイル向けアプリのコンセプトデザイン。
スライダーの動きに合わせて、メガネやサングラスを立体的に閲覧できる体験型サイト。
Bison Studio : Loader and Page Transition
ナビメニューより他のコンテンツに遷移する際のローディングアニメーションが特長的なサイトデザイン。
Kangol Website ✦ E-commerce. Home page
グリッドを保ちながら、自由で柔軟なレイアウトを実現したメディアサイト向けコンセプトデザイン。シームレスなショッピング体験を実現しています。
スクロールに応じて水平方向にコンテンツ展開し、サークル状の特徴的なサムネイルにくるくる回転する動きを加えることで、デザインのアクセントになっています。
フレンドリーで親しみやすい配色カラーパレットや、おしゃれなフォント選びは今後のウェブプロジェクトの参考にいかがでしょう。
自転車を自分好みにカスタマイズしながら購入までできるランディングページのコンセプトデザイン。
Landing – cooperative website Finca
スクロールに合わせて画像がズームしたり、ゆらゆら水面に映されたようなアニメーション効果など、細かい部分にこだわったイケてるデザイン。
ページごとにオリジナル性の高い手描きイラストを盛り込み、思わずスクロールしたくなるストーリーテリング手法が採用されています。
Street Food Market App – 3D Concept
さまざまな屋台が集まるイベントを想定したモバイルアプリで、食事を注文したり、待ち時間の表示などをスマホひとつで完結させています。
Geniusminds – The future of Recruiting in the Age of Automation
ウェブサイトのあらゆる部分にアニメーションが盛り込まれたコンセプトデザイン。控えめなマイクロインタラクションを活用すれば、自然のユーザーの視線を目的のコンテンツまで誘導できます。
Tiffany & Co — redesign website.
高級感のあるデザインに仕上げた宝石メーカーのコンセプトWebデザイン。婚約指輪のダイヤモンドの大きさを決めるアニメーション、素敵です。
オランダにあるゴッホ美術館のリニューアルデザインで、スクロールと同時にあらゆるゴッホの作品がカンバス全体に自由に配置されます。
コンテンツが移動しても、商品の缶ジュースがくるくると回転しながら追従するアニメーション。
フォークリフトの詳細を分かりやすいアニメーション付きイラストで紹介したコンセプトデザイン。注目して欲しいポイントを強調するのがポイント。
iOS向けのショッピングアプリを想定したコンセプトデザイン。なめらかな動きのアニメーションを採用したことで、エレガントでナチュラルな見た目を実現しています。
Brand Identity For Hops & Skips beer
新しいビール飲料のブランディング用に作成されたアニメーションで、ウェブサイトとのシームレスな連動を想定した、ストーリー性のあるデザインが魅力です。
マウススクロールに応じて画像のアニメーション表示は、最近のウェブサイトでは当たり前となってきています。
Teapoty – Landing Page Animation
よく見かけるようになった黄色のステッカー風デザインが、ウェブサイト全体のアクセントになっています。ページスクロールでステッカーが回転するなど、ここでもアニメーションが重要に。
完成したUIデザインだけでなく、スマホの周りにも超立体的な3Dパーツにアニメーションを加えることで、ますます魅力がアップ。
Phone App Concept | Dialing Interaction
スマホの通話画面のコンセプトデザインで、呼び出し中アニメーションも控えめ、分かりやすいスッキリとしたインターフェース。
k2 – Web Design for eSport Competition
吸い込まれるような没入感たっぷりなウェブサイトのヒーローイメージ。
Mitsubishi Outlander UI by milkinside
車に搭載されている機能をイラストアニメーションで分かりやすく伝えます。
この天気予報アプリは、各都市ごとの天気をかわいいいアニメーションイラストをつかって表示します。
電光掲示板のような、左から右へとスクロールするニューススティッカーも最近よく見かけるデザインのひとつ。
スマホから新車を直接購入できる、そんな夢のような話が現実になろうとしています。
ショッピングサイトのコンセプトデザインで、ここでもウェブデザインだけでなく、背景にもこだわりのアニメーションが採用されています。
配色カラーパレットや高級感のあるセリフ書体、程よいアニメーション効果など今後のウェブ制作の参考のひとつとして。
マッチに灯した火のように、ぼんやりとしたグランジ感をページ全体に織り交ぜたことで、独特のユニークさが表現されています。
アプリをインストールしてまず最初に表示される、オンボーディング画面のコンセプトデザイン。
AIが自動で日頃のスケジュール管理を行ってくれる、まるで未来のようなアプリ。
ザラッとした質感のレトロでカラフルな、アニメーション付きグラデーションがメインとなったコンセプトデザイン。
前回のWebアニメーションまとめはこちらから。