WebGallery

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

*

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

   

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

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

 

ZABO DESIGN

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

 

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

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

 

まとめ

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

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

 - 動きで表現

  関連記事

記事の下まで行くと右側のコンテンツもぴったり止まる

福岡のライフマガジン「AFRO FUKUOKA」のホームページです。 全体のレイ …

商品を色々な角度から見ることができる

  シチズン時計株式会社の特設サイトです。まず最初のオープニングアート …

五円玉のようなコインが印象的な「goen゜」

森本千絵さんを主宰としたデザイン事務所「goen゜」のホームページです。 ファー …

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

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

想像するだけでワクワクが止まらない「ハンズの夏準備」

「ハンズの夏準備」という東急ハンズの特設サイトです。 サイトのトップには、キャッ …

折り紙の発想から生まれたオフィスチェア「FLIP FLAP」の特設サイトが、オフィスチェアのデザインを使ったレイアウトでカッコいい!

折り紙の発想から生まれたオフィスチェア「FLIP FLAP」の特設サイトです。 …

フラットデザインで見やすい

  大阪経済法科大学のサイト。フラットデザインのイラストがとてもおしゃ …

ロゴマークにマウスをホバーさせるとアニメーションになる仕組み

東京都台東区にあるランドセル工業会が運営している「ランドセルくらぶ」のホームペー …

コントラストの強い配色で高級感のある雰囲気を演出したサイト

フランスのファッションデザイナー「pierre cardin」の日本公式サイトで …

各コンテンツに飛ぶボタンを作り、読む側に優しいデザイン

  東京都にある留学サポートを行っている会社です。全体的に色をあまり使 …