ウェブサイトやモバイルアプリを魅力的にしたいときは、アニメーションを利用すると良いでしょう。
その理由は、ユーザーの注目を無意識に集め、美しさも表現できるから。
さまざまなデザイントレンドでも毎年選出されており、まずます需要が高まっています。
実際に、多くの売れるウェブデザインも採用中。Webが進化したことで以前より手軽にアニメーションが表示できるようになり、Appleも採用するCSSテクニックが増えているのも事実です。
この記事では、思わず惹きこまれる素敵Webアニメーション30選をご紹介します。
心地よい遷移アニメーションの基本ルールを知っておけば、ワンランク上のウェブデザインを作成したいときにも安心ですよ。
Athletics Platform Startup by Sam Halpert for Awsmd
スクロールするたびにほんのわずかな動きを加えるだけで、コンテンツのユーザーへの伝わり方、Web体験がまったく違うものにみえてきます。
Polaroid | e-commerce redesign by Evgeny UPROCK for UPROCK AGENCY
ページを切り替えるたびに、カラフルなブランドカラーがカーテン上に広がるローディングアニメーションを実装した例。
Skilldo Courses Platform by Awsmd
画像スライダーは画面幅いっぱい水平スクロールするだけでなく、ホバーエフェクトを追しより魅力的に。流れるようなコンテンツ遷移でユーザー体験を向上します。
Ignant Concept | Article Preview by Ivan Gorbunov
画像のスライドに合わせて、まるで小さな窓枠に画像が移動したような不思議な感覚にさせるアニメーション。
Blumarine ✽ E-commerce Redesign Concept by Evgeny UPROCK for UPROCK AGENCY
コンテンツに応じた遷移アニメーションや、2023年のデザイントレンドをうまく取り込んだ参考サンプルとして。
Online Orangerie Landing Page Design by Sasha from Zajno for Zajno
サイト全体に動きを取り入れていますが、特筆すべきがスクロールにあわせて画像が拡大するエフェクト。Appleも採用したWebレイアウトテクニックのひとつ。
BlockXpo event visual identity by Julia Dmitrievna for Geex Arts on Dribbble
日本伝統の弁当箱から生まれたBento UIデザインを採用したレイアウトで、左右非対称に画像が切り替わるなどコンテンツの整理テクニックに。
Digital Archive: Index Of Artists by Zhenya Rynzhuk on Dribbble
こちらもスクロールに合わせて画像が拡大されるアニメーションエフェクトを採用。縦にずらりとならべるだけでオシャレに見えるから不思議。
AUDO | Collections by Ivan Gorbunov for Aharmon
シンプルなレイアウトにわずかなアニメーションを追加したことで印象的に。画像が乱れるようなグリッチホバーエフェクトを採用。
Motion Design Promo for Arkham Crypto by George Finnbogason
仮想通貨の新しいツールについて紹介するモーション付デザインプロモーション。静止画に比べ分かりやすく、ユーザーを引き込む没入感を演出できます。
Smart Kitchen Website Animation by Callum Tate for Awsmd
画像とスクロールアニメーションをうまく利用した具体例として。くるくると回転するナビメニューや、写真を手でめくるようなエフェクトなど、どれも楽しいフレンドリーな雰囲気。
Digital Archive: Intro by Zhenya Rynzhuk
画像だけでなく枠フレームも一緒に伸縮させることで、まるで呼吸をしているような動きを表現し、画像にかぶって見えなかった文字が最後にちらりと見える演出も素敵。
Imagica landing page Dark Design by Gleb Kuznetsov ✈
フルスクリーンでループする動画を再生させたヒーローデザイン。一度見たら忘れない、記憶に残るウェブ体験を動きで表現した好例として。
Radiant – Pitch Deck Exploration by Bella Meillenia for Plainthing Studio
キラキラと宝石のように輝く3Dシェイプが特長のデザインで、細めのセリフ書体を使うことでエレガントで高級感のある見た目に仕上がります。
Animation for the Landing Page Concept pt.2 by Vito Burhonski for Zajno
ロボットが缶を倒すとページがスクロールされる、ユーザーの心理を突いたエフェクトが素敵。ページ全体をピン色のアクセントカラーでまとめたことで、統一感のあるデザインに。
PleaseAssistMe Website Redesign by Cuberto
上下だけでなく左右にも展開するスクロールアニメーションが、各コンテンツにそれぞれ実装されており、どれも思わずスクロールしたくなるエフェクトが満載。
Ecommerce Website for Water Brand by tubik UX for tubik
各コンテンツブロックの背景や画像に少しだけ丸みをもたせたことで、親しみやすい雰囲気になるだけでなく、トレンドのBento UIデザインが最大限生かされたスタイルになっています。
Save Video by Slava Kornilov for Geex Arts
ウェブサイト内でスマホの画面がレイヤー状に重なっていく様子は、思わず目が留まってしまうテクニックのひとつ。背景の淡いグラデーションテクスチャも素敵。
Digital design agency year in review site by Josh Kirk
高級感のあるレイアウトの中に子供の落書きのような手描きスケッチを随所でチラ見せ。ミントグリーンの美しい配色カラーパレットも参考にしたいところ。
PeakSpan — Website by Mikołaj Szymkowiak for tonik
特に山への登頂ルールをマウスの動きに合わせるアニメーションは、ユーザーが何度も見てしまう注目度の高いコンテンツ作りのポイントとして。
Educational Mobile iOS App by Desire Creative Agency
コンテンツを切り替えると、左側にあるルーレット状のナビメニューがくるくると回転する面白い仕掛け。星座占いの個別ページにいかがでしょう。
3D Animation of the Location Selection Interface by Barry for Zajno
各惑星の詳細をダイナミックなアニメーションで魅せることで、ユーザーは壮大なSF映画を見ているような没入感を体験できます。
The 3D Animation for the Biotech Startup by Barry for Zajno
架空のスタートアップ企業のホームページを紹介する3D動画アニメーションのコンセプト。
AI stock recommendation by Gleb Kuznetsov ✈
作成したモバイルアプリをショーケースするときは、背景にも動画アニメーションを追加すれば、奥行き感が増すだけでなく魅力的にもなる、というサンプル例。
アドビだからストック素材サービスも ここまでクリエイティブ。
Adobe Stockは、アドビがクリエイターのためにつくったストックサービスです。写真やイラストなど高品質な素材が約3億点。無料素材も100万点。
検索、プレビュー、ライセンスの取得をPhotoshopから直接できるので効率の良さが抜群。
たくさんのAdobe Creative Cloudユーザーに選ばれているのには理由があります。
最初のひと月は素材が10点まで無料なので、気軽に始めてみませんか。
