ウェブ制作で「動き」をうまく活用することで、自然と視線を注目コンテンツに集めたり、ブランドの世界観を表現できたりと、あらゆるものを魅力的に演出できます。
しかし、サイトに動きを組み合わせるアイデアは、なかなか浮かびにくいものも事実。
そんなときに活用したい、さまざまな新しい「動き」を取り入れた最新Webアニメーションアイデアをまとめてご紹介。
手軽に動きを表現できるCSSアニメーションライブラリなども参考にして、心地よい動きをウェブサイトに試してみてはいかがでしょう。
動きを思いのままに!とびきりWebアニメーションアイデア35選
浮遊感を表現したネオンカラーの未来的なヒーローセクションが目を引くアニメーションは、今後ますます需要が不要そうな3Dデザイン。
ヘルス系サプリメントのランディングページで、パステルカラーを中心とした配色に控えめなアニメーションが素敵。
スニーカーを中心としたアパレル系のショッピングサイトのコンセプト例で、商品を回転させるインタラクティブな表現に。
トレンドを感じる配色やフォント選び、レイアウトなどウェブサイト制作で参考になりそうな点多数。
Real-time 3D spaceship on mobile phone tutorial
3DデザインツールSplineをつかって、モバイルのタッチ操作に対応したイラストアニメーションのつくり方を紹介した動画チュートリアル。
NFT Skul :: Website
最近増えているNFT関連のランディングページのコンセプト例。特長としてダーク系デザインや淡いグラデーションと一緒に、スムーズなアニメーションを多用するケースが増えているようです。
キャラクターのかわいいパンダのイラストを、アニメーションと一緒にうまく活用しています。シームレスなコンテンツ遷移にも注目です。
2022年を代表するユニークなディスプレイ書体を利用したNFTのウェブサイトコンセプト。バーチャルな体験を提供する、エレガントで美しい表現が印象的です。青むらさき系のグラデーション。
ミュージックアプリのコンセプトデザイン。カバージャケットからPV動画への切り替えなど、エンターテイメント性の強いデザイン。
London 2022 :: Promo Site]
静止画の代わりに動きのある動画などのアニメーションにすることで、斬新なレイアウトがより引き立ちます。
仮想通貨や映像メディア、火星探査といったSFをテーマにした未来デザイン。
レイアウトを上下左右に移動できるアーカイブ一覧ページ。配色やフォントもおしゃれ。
預けた荷物がどのように配送されるのか、直感的でわかりやすいストーリーテリングをつかって表現、他のプロジェクトにも応用できるテクニック。
文字に重ねるように透明のワインボトルを配置し、立体的な3Dデザインを演出したヒーローイメージ。
Infinity Colony Web Landing Page with Illustration
まるでアニメでも見ているような、スクロールに応じて物語が展開するストーリーテリング。
ファッションブランドのオンラインショップの新しい見せ方を提案。ルックブックのような伝え方が特長で、無限スクロールの文字テキストが今っぽい。
Human – Web Design for Open Source Library
ルービックキューブのように立体的にくるくると変化しながら、視線を釘付けにするヒーローセクション。
かわいいイラストのマスコットをホームページ全体に活用した、遊び心たっぷりなランディングページ。思わずページをスクロールしたくなるシームレスなコンテンツ体験を参考に。
マウススクロールに合わせて空中でくるくると回る椅子と、流れるように表示される文字テキストが印象的な求人募集ページのコンセプトデザイン。
Balenciaga Ecommerce website redesign concept
高級ファッションブランドをリニューアルした、ネオンイエローがアクセントカラーのコンセプトデザイン。
ページをスクロールするにつれて、プロダクト商品の特長をわかりやすく伝えるランディングページ。
落ち着いたおしゃれで高級感のある配色が素敵なウェブサイト。コンテンツ表示に合わせてなめらかな動きを加えることで、ブランドイメージにもあった美しい表現に。
仮想現実のARメガネのコンセプトデザイン。未来はもうすぐそこまで来ています。
ホームページ全体にかわいい手書きのイラストアニメーションを使用することで、ブランド独自のイメージを見事に表現しています。
Animation for Night Hiking App
夜間ハイキングを専門としたスマホアプリのアニメーションサンプル。ダーク系デザインとむらさき色のネオンカラーが魅力的なデザイン。
ページをスクロールすると、コーヒーメーカーが分解されて内部の仕組みをわかりやすく伝えるランディングページ。
車をもっと手軽に、もっと直感的に借りることができるレンタカーのスマホアプリ。ブランド別や金額別、機能から選ぶことができます。
使いやすそうなUIデザインはもちろん、花火が打ち上がるようなスプラッシュ画面からはじまる60秒。
カーリースをスマホから完結できるコンセプトデザインで、アプリだけでなく壮大な風景が広がる背景の見せ方も、今後気になる動きのひとつ。
魅力的なアニメーションのデザインアイデアを定期的にまとめています。
@サムネイル : Сoffe onboarding for iOS by Gleb Kuznetsov✈ – Dribbble