WebGallery

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

*

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

   

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

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

 

ZABO DESIGN

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

 

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

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

 

まとめ

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

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

 - 動きで表現

  関連記事

見る人を飽きさせず、旅の目的ごとにお勧めスポットが分かる構成

  利賀芸術公園の特設サイトです。大きく3つの写真を用いたブロックで分 …

一つのコンテンツで二つの情報が見れる

10月24日から行われるイベント「Any Tokyo 2015」のホームページで …

舌でも目でも石巻を楽しむことができる、「泳ぎ寿司 石巻」

今年の3月6日・11日に東京都にある「代々木ビレッジ code kurkku」で …

松本薫さんが開店したアイスクリーム屋さん「Darcy’s」のサイトが可愛い!

松本薫さんの引退会見、衝撃的でしたね! テレビではいつも柔道でかっこいい姿を見て …

昼間とは違う雰囲気を演出した八景島シーパラダイスの「ナイトアクアリウム」

2016年の11月19日から2017年の2月28日まで開催している「音と光と映像 …

壮大なスケールを感じさせるデザイン

  見た瞬間発狂しました。「ICO」や「ワンダと巨像」の制作を手掛けた …

ワンちゃん・ネコちゃんをメインに作られたサイトが、どれもオシャレで可愛い!

今年でうちの愛猫も2歳になるのですが、大きくなるのは早いですね… 大きくなっても …

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

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

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

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

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

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