WebGallery

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

*

2019年に流行しそうなwebデザイントレンド「ローディングアニメーション」を使ったサイト3選!

   

今年も1年が始まりましたね!
初詣にも行かず正に寝正月を過ごした私ですが、今年は果たしてどんな年になるのでしょうか…

新年明けての1本目は、2019年に流行りそうなwebデザインのトレンドの1つ、「ローディングアニメーションを使用したサイト」をまとめました!

 

ローディングアニメーションのメリット

去年は、ローディングアニメーションを使ったサイトがよく見られた気がします。
サイズが大きくなるにつれ、どうしても読み込みに時間がかかってしまいます。そうなった場合、ローディングアニメーションは必要不可欠です。

ストレスを与えず、たとえ読み込み時間が長かったとしても退屈させずにユーザーをとどまらせる事ができます。
やはり、ロゴマークやロゴタイプなどをアニメーションに用いたり、ブランドイメージを想起させるデザインにすることによってブランディングにも役立てることができます。

青柳総本家 公式サイト

画面を埋め尽くす葉っぱのアニメーションにビックリ!なローディングアニメーションです。
色鉛筆で描かれたような温かみのあるイラストで、親しみやすさを感じるファーストビューですね!

 

えるマネージメント

こちらは少し分かりにくいのですが、ロゴの「L」の形のローディングアニメーションを使用しています。
さり気ないアニメーションですが、それでもあるだけで印象が違いますね!

 

TAPUKO THE GAMA(タプコザガマ)

こちらのサイトはアニメーションにロゴタイプを使用しています。ローディング中は「TAPUKO」、完了すると「GAMA!」という文字に切り替わります。
ファーストビューにはとてもインパクトのある動画が…!これだけで見る人を引き込みますね!

 

まとめ

最近ではcss3でもローディングアニメーションを作ることが出来るみたいですね!
なかなか試す機会がないのですが、1度いちから自分で作ってみたいです…

以上、ローディングアニメーションを使ったサイトをご紹介しました!

 - 動きで表現

  関連記事

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

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

海の中にいるような幻想的なデザイン

大阪府吹田市にある水族館・動物園・美術館が融合した新感覚ミュージアム「ニフレル」 …

動きやフォントを工夫して高級感を表現する

明治38年から続いている特集雑誌「婦人画報」の110周年記念サイトです。 トップ …

要所で動きを使い、注目度を上げる

エステサロンクレジットカード決済導入「株式会社ジェイ・シー・エス」のホームページ …

シネマグラフを使った写真が印象的!「京都 宇治 伊藤久右衛門」のサイト

「京都 宇治 伊藤久右衛門」のホームページです。 ファーストビューのスライダーが …

遠近感のあるサイト

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

花火のアニメーションを使って、夏限定のパッケージデザインを表現したシャンドンの特設サイト

「CHANDON」の2018年夏限定サマーボトルの特設サイトです。 大きな花火や …

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

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

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

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

コンテンツ毎にスクロールボタンを配置し、移動しやすく

高知県にある「サイバラ建設株式会社」のホームページです。 まず、中央に配置された …