MENUCLOSE
twitter ツイッターfeedlyRSS

オンスタでは、オンラインで学習するために役立つコンテンツを掲載しています。そのほか、UdemyをはじめとしたEラーニングサービスの紹介も行っています。

オンスタ | オンラインで学習するための近道になるサイト
現役デザイナーが選ぶ、本当に使えるオシャレなアニメーションまとめ

現役デザイナーが選ぶ、本当に使えるオシャレなアニメーションまとめ

公開日:2020年07月13日
最終更新日:2020年07月13日
オンスタ運営
デザイン
ホーム > 全記事一覧 > お知らせ > 現役デザイナーが選ぶ、本当に使えるオシャレなアニメーションまとめ
このエントリーをはてなブックマークに追加
現役デザイナーが選ぶ、本当に使えるオシャレなアニメーションまとめ
【PR】Udemyならスマホでもタブレットでも、いつでも気軽に学べます。

お久しぶりです、Grow Groupデザイナーのさとおです!


今回は、Webデザインをするときに知っておくと便利な、CSSアニメーションやJavaScriptを使ったアニメーションサンプルをご紹介いたします!


たくさんのサンプルコードが出回る中、現役デザイナーである私が実際に利用させていただいていて「これは使える…!」と感じたものを厳選してご紹介しようと思いますのでお役に立てば幸いです。


ではさっそくいってみましょう!

ボタン編

シンプルなボタンホバー効果

Hover.css

リンクボタンのホバー効果のコレクションです。
どれもシンプルなので、どんなサイトデザインにも合わせることができるCSSアニメーションが揃っています。
英語サイトですが、Google翻訳で日本語にしてしまえば問題なしです!

 

ちょっと変わったボタンホバー効果

Just Some More Button Hover Effects

Webサイトをちょっとオシャレに魅せられるホバー効果コレクションです。
普通とは少し違う変わったCSSアニメーションを使うことで、Webデザインのポイントとしてさりげなく個性を出すことができます。

 

ゴーストボタンのホバー効果

Colorful CSS Buttons

ラインのボタンだけにホバー効果を持たせたい時に、いわゆるゴーストボタンに適用できるコレクションです。
それぞれカラーバリエーションもあるので、イメージしやすくていいですね!

 

グラデーションボタンのホバー効果

Animated gradient button

最近よく見るグラデーションを用いたボタンへのホバー効果です。
シンプルだけど、グラデーションカラーがじわっと流れてスタイリッシュなボタンに見せることができます。

 

文字だけのリンクボタンに

ちょっとしたリンクボタンなどに用いる、ボックス状でない文字だけのリンクにもオシャレなホバー効果はないか?と探し当てたコレクションです。
シンプルなものから少し個性的なものまで12パターン揃っています。
実際に使うときの注意点として、ホバーしないとボタンだと気づかない可能性もありますので、矢印とセットにしてあげるとユーザビリティも向上すると思います!

 

画像編

シンプルな画像ホバー効果

CSS Image Hover Effects

画像自体をリンクボタンとするときに使える、シンプルなCSSアニメーションのコレクションです。
よく見るズームアップするものから、キランと光ったように見せられるアニメーションまで一覧で見ることができるので探すのも楽で便利です。

 

画像の中に文字がある時のホバー効果

Hover Effect Ideas

画像の中に文字が入っている場合に使いたい、オシャレなCSSアニメーションです。
サンプルそれぞれのフォントやラインにもこだわりを感じるので、丸ごと参考にできそうなコレクションです。

 

スクロール編

AOS(スクロールライブラリのアニメーション)

AOS

オシャレなWebデザインには必ずといっていいほど使われているスクロール時のアニメーション。
フェードやズームはもちろん、「下からスッと出てきて、ちょこんっと台に乗るような可愛らしさを出したい」などといった感覚的な調整も、設定例があるので可能でアレンジもしやすい万能コレクションです。
以下の記事で詳しく解説しているので、導入方法はこちらをご覧ください。

 

固定ヘッダーの自動非表示

Auto-Hide Sticky Header

スクロールしてもヘッダーだけが固定されて追尾してくるWebデザインは、最近よく見かけます。
ですが、ヘッダーが固定されている分、見える画面サイズが狭くなり時として邪魔になる場合もあります。
そんなユーザビリティの欠点を解消する方法が、固定ヘッダーの自動非表示!
下へスクロールすると消えていき、逆に上へスクロールすると現れるJavaScriptを使ったアニメーションです。
機能的にもとても優れていると思うので、ぜひ使っていただきたいアニメーションです!

 

ヒーロー型メインビジュアルからのスクロールアイデア

Hero idea

こちらは、スクロール時に以下の動きと機能がうまく融合したJavaScriptアニメーションです。

  • 画像が固定されたままズームアップ
  • 画像内のテキストがフェードアウト
  • ヘッダーに背景色がフェードイン

世界観のある素敵なアニメーションなので、これを搭載してあげるだけでかなりクオリティの高いWebデザインになること間違いなし!

 

ローディング編

PACE

ローディング中やエンターページなど、ページの読み込みに時間のかかるWebサイトや、ページ遷移に遊びを持たせたい場合に使えるアニメーションです。
進行状況インジケーターのパーセンテージも自動で表示され、ユーザーの離脱軽減対策にも活用できる優れものです!

 

テキスト編

https://snackthis.co/create/

テキストにもインパクトのあるアニメーションをつけたい時におすすめのコレクションです。
好きなテキストを入力して見ることができるので、実際のテキストとアニメーションの相性を検証できるのも利点です!

 

さいごに

いかがでしたでしょうか?
弊社の制作したWebサイトでも、ホバー エフェクトやアニメーションを使用したデザインがたくさんあります。
こちらもぜひ参考に覗いてみてくださいね。

制作実績はこちら

 


【PR】Udemyならスマホでもタブレットでも、いつでも気軽に学べます。

Udemyを実際に体験した方の感想記事もぜひご覧ください♪

関連コンテンツ

Shopify (ショッピファイ)とは?サービスの概要から制作フローを知る記事をまとめました。
Shopify
デザイン
公開日: 2020年05月29日
最終更新日: 2020年05月29日
Shopify (ショッピファイ)とは?サービスの概要から制作フローを知る記事をまとめました。
オンスタ運営
【ペルソナマーケティング】と【ホームページ制作の関係性】
ビジネス
マーケティング
デザイン
コンサルティング
公開日: 2017年01月18日
最終更新日: 2017年01月18日
【ペルソナマーケティング】と【ホームページ制作の関係性】
オンスタ運営
なんで?ホームページのデザインにこだわるべき理由とポイント
デザイン
デザイン
公開日: 2018年03月09日
最終更新日: 2018年03月09日
なんで?ホームページのデザインにこだわるべき理由とポイント
オンスタ運営
少しのアイデアで大きく変わる!Webデザインのコツ
デザイン
公開日: 2021年06月21日
最終更新日: 2021年06月21日
少しのアイデアで大きく変わる!Webデザインのコツ
  • # Webデザイン
  • # デザイン
h.yamaguchi
これで安心!Illustrator入稿時のチェックリスト!
デザイン
公開日: 2018年02月08日
最終更新日: 2018年02月08日
これで安心!Illustrator入稿時のチェックリスト!
オンスタ運営
色の機能と与える印象を知って、上手に配色しよう!
デザイン
デザイン
公開日: 2017年06月21日
最終更新日: 2017年06月21日
色の機能と与える印象を知って、上手に配色しよう!
オンスタ運営
これがあればデザイナーは助かる!修正を最小限に抑えるためのデザインディレクション
デザイン
Webデザイン
公開日: 2016年12月08日
最終更新日: 2022年01月17日
これがあればデザイナーは助かる!修正を最小限に抑えるためのデザインディレクション
オンスタ運営
【 Illustrator CC 】でWebデザインをする時に気をつけたいルール8選
デザイン
Webデザイン
公開日: 2016年12月27日
最終更新日: 2016年12月27日
【 Illustrator CC 】でWebデザインをする時に気をつけたいルール8選
オンスタ運営
+ノベルティの制作で成果を上げよう!
デザイン
デザイン
公開日: 2017年11月20日
最終更新日: 2017年11月20日
+ノベルティの制作で成果を上げよう!
オンスタ運営
WEBアクセシビリティとは
デザイン
公開日: 2017年09月23日
最終更新日: 2017年09月23日
WEBアクセシビリティとは
オンスタ運営
全記事一覧

web制作者にオススメのオンライン学習サイト「Udemy」

世界最大級のコースがラインナップ!電子書籍サイト「Udemy」

世界最大級のコースがラインナップ!オンライン学習サイト「Udemy」

「Udemy」ではいつでもどんなトピックでも、専門家が教える何千ものコースを用意されており、無料で学べるコースも多数あります。もうちょっと勉強したいな。スキルアップしたいな。と思ったら是非チェックしてみてください。