WebGallery

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

*

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

   

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

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

 

ZABO DESIGN

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

 

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

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

 

まとめ

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

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

 - 動きで表現

  関連記事

遠近感のあるサイト

  動物病院のサイト。可愛いイラストを使って構成されており、親しみやす …

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

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

スライダーを使った回転寿司のデザインが面白い!高知県のお寿司屋さん

高知県須崎市にある回転寿司「回転ずしいちばん船 マルナカ須崎店」のホームページで …

下から泡を出して、見ている人が水族館にいるような気分に

大分県大分市にある水族館「大分マリーンパレス水族館 うみたまご」のホームページで …

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

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

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

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

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

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

作品の雰囲気を損なうことなく、イラストを上手く配置した「ムーミン展」のサイトがかわいい!

2019年の4月9日(火)から6月16日(日)まで、六本木ヒルズ森タワー52階に …

カラコンの色味を背景で表現したサイトがとにかくオシャレ!「PLAY / UP(プレイアップ)」

カラーコンタクト「PLAY / UP」のホームページです。 丸ドットで作られた背 …

ページの所々にアニメーションを使った「一時お預かり専用託児所 はないと」

愛知県名古屋市にある「一時お預かり専用託児所 はないと」のホームページです。 メ …