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を実際に体験した方の感想記事もぜひご覧ください♪

関連コンテンツ


Warning: Trying to access array offset on value of type bool in /home/growgroup/online-study.jp/public_html/wp-content/plugins/wp-word-count/public/class-wpwc-public.php on line 123
よく使われるA4パンフレットの折り加工の種類
デザイン
パンフレット
公開日: 2018年08月02日
最終更新日: 2022年01月17日
よく使われるA4パンフレットの折り加工の種類
オンスタ運営

Warning: Trying to access array offset on value of type bool in /home/growgroup/online-study.jp/public_html/wp-content/plugins/wp-word-count/public/class-wpwc-public.php on line 123
デザイナーとしてのプロ意識(デザイナーがキャリアアップするための道のり-其の1)
デザイナー
デザイン
公開日: 2016年12月19日
最終更新日: 2022年01月17日
デザイナーとしてのプロ意識(デザイナーがキャリアアップするための道のり-其の1)
オンスタ運営

Warning: Trying to access array offset on value of type bool in /home/growgroup/online-study.jp/public_html/wp-content/plugins/wp-word-count/public/class-wpwc-public.php on line 123
グリットデザインを使いこなそう!
デザイン
Webデザイン
公開日: 2018年08月10日
最終更新日: 2022年01月17日
グリットデザインを使いこなそう!
オンスタ運営

Warning: Trying to access array offset on value of type bool in /home/growgroup/online-study.jp/public_html/wp-content/plugins/wp-word-count/public/class-wpwc-public.php on line 123
ロゴマークの基礎知識 その③
デザイン
ロゴ制作
公開日: 2017年09月21日
最終更新日: 2017年09月21日
ロゴマークの基礎知識 その③
オンスタ運営

Warning: Trying to access array offset on value of type bool in /home/growgroup/online-study.jp/public_html/wp-content/plugins/wp-word-count/public/class-wpwc-public.php on line 123
游ゴシックのテキストをIEで表示すると謎の余白ができる【問題検証と対策】
デザイン
マークアップ
公開日: 2019年03月30日
最終更新日: 2022年01月17日
游ゴシックのテキストをIEで表示すると謎の余白ができる【問題検証と対策】
オンスタ運営

Warning: Trying to access array offset on value of type bool in /home/growgroup/online-study.jp/public_html/wp-content/plugins/wp-word-count/public/class-wpwc-public.php on line 123
Shopify (ショッピファイ)とは?サービスの概要から制作フローを知る記事をまとめました。
Shopify
デザイン
公開日: 2020年05月29日
最終更新日: 2020年05月29日
Shopify (ショッピファイ)とは?サービスの概要から制作フローを知る記事をまとめました。
オンスタ運営

Warning: Trying to access array offset on value of type bool in /home/growgroup/online-study.jp/public_html/wp-content/plugins/wp-word-count/public/class-wpwc-public.php on line 123
デザイナーに資格は必要なの・・・!?【デザイナーが取れる資格まとめ】
デザイン
公開日: 2018年03月30日
最終更新日: 2018年03月30日
デザイナーに資格は必要なの・・・!?【デザイナーが取れる資格まとめ】
オンスタ運営

Warning: Trying to access array offset on value of type bool in /home/growgroup/online-study.jp/public_html/wp-content/plugins/wp-word-count/public/class-wpwc-public.php on line 123
ロゴマークの基礎知識 その②
デザイン
ロゴ制作
公開日: 2018年08月23日
最終更新日: 2022年01月17日
ロゴマークの基礎知識 その②
オンスタ運営

Warning: Trying to access array offset on value of type bool in /home/growgroup/online-study.jp/public_html/wp-content/plugins/wp-word-count/public/class-wpwc-public.php on line 123
【ペルソナマーケティング】と【ホームページ制作の関係性】
ビジネス
マーケティング
デザイン
コンサルティング
公開日: 2017年01月18日
最終更新日: 2017年01月18日
【ペルソナマーケティング】と【ホームページ制作の関係性】
オンスタ運営

Warning: Trying to access array offset on value of type bool in /home/growgroup/online-study.jp/public_html/wp-content/plugins/wp-word-count/public/class-wpwc-public.php on line 123
Webデザイナーがスキルアップするためのマーケティング(分析能力)基礎知識
デザイン
デザイナー
マーケティング
デザイン
Webデザイン
公開日: 2021年03月01日
最終更新日: 2021年03月01日
Webデザイナーがスキルアップするためのマーケティング(分析能力)基礎知識
オンスタ運営
全記事一覧

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

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

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

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