WebGallery

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

*

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

   

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

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

 

ZABO DESIGN

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

 

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

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

 

まとめ

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

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

 - 動きで表現

  関連記事

「伝統」と「革新」を伝える「廣榮堂 採用サイト」

岡山で160年の歴史を誇る老舗和菓子屋「廣榮堂」の採用ページです。 学生たちをタ …

背景を道に見立てたデザインの地図アプリのサイトがおしゃれ!

株式会社Strolyが制作した地図アプリ「Stroly」のホームページです。 フ …

10月から開催している「パリグラフィック」展のサイトがシンプルでおしゃれ!

2017年10月18日から2018年の1月8日まで、東京・丸の内にある三菱一号館 …

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

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

ジャンプ率の差を大きくしてタイトルを目立たせたツアーサイト

「UNISON SQUARE GARDEN」の6thアルバムツアー「Dr.Izz …

常夏の色合いがステキな「潜水屋Ti-Da」

愛知県名古屋市にあるダイビングショップ・スクール「潜水屋(もぐりや)Ti-Da」 …

子供たちへの愛情がつまった地下足袋「FUM FUM」

化粧品やサプリメントを取り扱っているゲンナイ製薬株式会社と、靴の販売をしている株 …

大豆を使った商品を取り扱っているサイトのデザインが、大豆の形を使ったデザインでおしゃれ!

岡山県岡山市に本社を構える「913  NEUF UN TROIS(ヌフアントロワ …

フルスクリーン動画が迫力ある水族館は、サメやエイに触ることも出来る!?

大阪府大阪市にある世界最大級の水族館で、平成25年の3月14日に開設された「海遊 …

アニメーションをゆっくりとした動きにし、筆のようなフォントや落ち着いた配色で重厚感を感じさせるデザイン

北海道沙流郡平取町にある「二風谷アイヌ匠の道」のホームページです。 黒・白・赤の …