ウェブサイトやモバイルアプリを魅力的にしたいときは、アニメーションを利用すると良いでしょう。
その理由は、ユーザーの注目を無意識に集め、美しさも表現できるから。
さまざまなデザイントレンドとしても、毎年選出されており、まずます需要が高まっています。
実際に、多くの最新ウェブデザインでも採用されており、アニメーションに特化したCSSライブラリも数多く公開されています。
ワンランク上のウェブデザインを作成したいクリエイターに、ぜひ参考にしてほしいアニメーションのアイデアを、まとめてご紹介します。
動くWebデザインの最新アイデアまとめ
Daily UI “Luxury Interaction Concept”
高級車の販売を行う、インタラクティブで実験的なコンセプトページで、クリックに応じたコンテンツ遷移が心地よいつくりに。
VW – website and VR configurator
フォルクスワーゲンの新しいモデル ID4 と ID5 の新しい電気自動車を紹介するために作成されたウェブサイト。
“Blue Planet” Carousel Concept
美しい惑星「地球」をテーマに、迫力のある画像を用い、フルスクリーンで展開するコンテンツは、スライダー形式で続きます。
Daily UI “Split Screen Interaction”
画面を二分割し、直感的に商品購入までユーザーを促すための、何度もクリックしたくなるアニメーションが秀悦。
サングラスをつかうバーチャルリアリティの新しい取り組みを、ストーリーテリング手法をつかって体験できるデモアニメーション。
スムーズなアニメーション付きで表示される、シャンパンを販売しているウェブサイトのコンセプトページで、高級感のある雰囲気を演出したクリーンなデザイン。
シンプルで読みやすいフォントのサイズを、アニメーション付きで変化させることで、ユーザーに注目してほしい部分を、無意識のうちに強調できるテクニック。
Daily UI “Arkiteck Interactions”
建築インテリア向けウェブサイトのコンセプトページで、各セクションへのページ遷移はもちろん、詳細の見せ方なども参考に。
Farmvest Landing Page Animation
農業のIT化を推進するサービスのランディングページで、2Dと３Dイラストを利用し、没入感の高い仕上がりとなっています。
Ocean Pollution Landing Page Animation 🐳
海の環境問題をわかりやすく伝えるランディングページで、各セクションごとに問題となっている点を、アニメーション付イラストで説明した、ストーリーテリング手法を採用しています。
Metal credit card teaser for Milkinside
メタリックな金属製のクレジットカードを紹介するティーザーアニメーションは、メタルの質感を見事に表現しています。
質感たっぷりな立体感を演出した、粘土のような質感のイラストアニメーション。
自分の夢や目標、ゴールに向かって進むための、賢いアイデアを提供してくれる、最新iOSアプリで、高揚感を高めるアニメーションが素敵。
旅行先を決めてくれたり、グループでの旅計画をアレンジしてくれるモバイルアプリ。
美しいイラストを用いたことで、誰でも使いやすい印象に。
Glass reflection CGI by Milkinside
Automotive cluster research by milkinside
まるで車が呼吸をしているようなUIインターフェースが印象的で、繊細で高級感のある仕上がりに。
Kiyoto Brawl – VR videogame website
ゲーム業界向けの新しいプロジェクトは、サイバーパンクな設定によるVRゲーム。
フルスクリーンで表示された旅行先の写真は、クリックすることで左にスライドしながら、詳細コンテンツを重ねて表示しています。
Motion Exploration for Elementary School Presentation
教育関連という、難しくなりがちなテーマを分かりやすく、イラスト付きで伝える体験型ランディングページ。
Neowell – Healthcare Landing Page
ヘルスケアを目的としたランディングページに、目を釘付けにするユニークなアニメーションを随所に散りばめています。
The Animation of the Architectural Website Design
扉が左右に開いたようなアニメーションにはじまるランディングページは、ブランドイメージともマッチし、スクロールを思わずしたくなる仕掛けが満載。
文字サイズやたっぷりの余白スペースの使い方など、ミニマルでシンプルながら、印象的でオシャレなデザインに。
マウススクロールに合わせて3Dオブジェクトがバラバラになる、何度もページを上下に移動したくなる、ユーザー参加型のウェブページ。
The Animation of the Website Concept for Cinematography
映画の詳細を伝えるために作成されたウェブサイトで、アニメーションを利用することで、多くの情報を分かりやすくまとめています。
Glass reflection CGI by Milkinside
ガラスの反射をリアルに再現した3Dデザインによるランディングページ。光の反射に合わせて、ガラスが動く繊細なつくり。
Frozeverse – Metaverse Game Website
メタバースとVRテクノロジー、NFTを盛り込んだ新しいサービスを、3Dモーションデザインで表現した、ユーザーの記憶に残るランディングページ。
世界各地の旅行先をフルスクリーンで切り替えながら表示するウェブサイト。
3D Animation of the Location Selection Interface
ゲームでロケーションを選択する、インタタクティブなアニメーションを用い、スケールの大きさを表現するために銀河を採用。
