WebGallery

Webデザインの初心者がスマートフォン対応しているWebサイトを淡々と紹介していくサイトギャラリーです。

*

今後の参考に!スタイリッシュなアニメーション効果を使ったサイトをご紹介!

   

コーディングをしているときに「どんなアニメーションをつけようか」と考えるのが1つの楽しみ…なのですが、ついつい色んな要素にアニメーションをつけすぎたり、色んな動きをさせてしまい返ってカクカクした動きになってしまいサイト自体が重くなってしまったりと、カッコよくさせるつもりが逆効果な結果になってしまうパターンに陥ることが多いです。

今回はそういった事態にならないよう、今後の勉強として「スタイリッシュにアニメーションを使っている」サイトをご紹介したいと思います!

 

ZABO DESIGN

こちらは文章をフェード、画像をスライド?という風に統一してアニメーションを使用しています。
画像と文字でアニメーションを分けても、スタイリッシュで統一感があってカッコいい雰囲気がさらに出ています!
また、ページの移動もシームレスでとてもスムーズに移動出来るようになっています。

 

株式会社ARISE analytics(アライズ アナリティクス)

こちらは文章も画像も同じアニメーションを使用しています。
タイトル部分は差別化するために、左側からラインがシュッと来るようになっています。文章や画像のアニメーションより遅く開始することで、より注目度が上がりますね!
サブページもh1に同じアニメーションを使って統一感があります。こちらもページ移動がシームレスなので、ストレスなくページを移動することができます!

 

まとめ

・ルールを決めてアニメーションをつける
・目立たせたい要素のアニメーションは、他より遅く

この2つを重視すれば、今後サイトの動きも遅くならずにスタイリッシュなサイトになりそうです!
以上、個人的にアニメーション効果の参考にしたいサイトを2つご紹介しました!

 - 動きで表現

  関連記事

パララックス効果を使ったデザインの、建設会社のサイトがカッコいい!

熊本県熊本市にある建設会社「快建設」のホームページです。 全体のレイアウトがとて …

配色をカラフルにするだけでなく、アニメーションもたくさん使ったサイトのデザインが可愛い!

熊本県熊本市にある食のテーマパーク「株式会社フードパル熊本」のホームページです。 …

行ってうっとり!夏の鳥取の魅力がつまったサイト

観光スポットやグルメ情報など、四季折々の鳥取の「美」を紹介している「ANA 鳥取 …

スラッシュの角度で区切られたデザインが気持ちいい「EN/PIRE」

大阪府大阪市にある植物の販売からディスプレイデザイン等も行っている会社「EN/P …

2020年新卒採用サイトのトレンドをチェック!おしゃれなデザインをまとめてみました!

年始早々インフルエンザにかかってしまいました…皆様もお気をつけて… 久しぶりに高 …

グローバルナビよりも目立った言語切り替えボタン

熊本県にある有限会社「球磨川ABC」のホームページです。左側に固定された言語選択 …

カーソルを乗せると動くボタン

愛知県碧南市松江町にある歯医者「あだち歯科クリニック」のホームページです。 歯を …

アリのマークを用いて様々な仕掛けを作る

東京都にある株式会社「Alfanet(アルファネット)」のホームページです。 ま …

ロゴを使ったファーストビューがインパクト大!東京都の「みるみるクリニック」

東京都江東区にある、小児科・内科・アレルギー科「みるみるクリニック」のホームペー …

水色と黒を使用し、近未来感を演出したデザイン

メルセデス・ベンツとPerfumeがコラボレーションしたメルセデス・ベンツのiP …