WebGallery

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

*

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

   

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

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

 

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

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

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

青柳総本家 公式サイト

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

 

えるマネージメント

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

 

TAPUKO THE GAMA(タプコザガマ)

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

 

まとめ

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

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

 - 動きで表現

  関連記事

タイトル部分に動きをつけて目立たせる

愛知県名古屋市にある和菓子屋「一朶」のホームページです。 縦長のシングルページの …

スラッシュの角度で区切られたデザインが気持ちいい「EN/PIRE」

大阪府大阪市にある植物の販売からディスプレイデザイン等も行っている会社「EN/P …

【閲覧注意!】池袋で開催される「もうどく展2」のサイトが思った以上に毒々しい!!

2017年3月16日の木曜日から6月25日の日曜日までサンシャイン水族館で開催さ …

情報を中央に寄せることで、まとまりを

大阪にある専門学校のホームページです。全体的にフラットデザインでまとめてあり、ア …

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

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

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

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

「Golden」にかけた黄金のアニメーションがとても幻想的!フェレロ ロシェのキャンペーン公式サイト

「Ferrero Rocher(フェレロ ロシェ)」のキャンペーン公式サイトです …

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

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

アリのマークを用いて様々な仕掛けを作る

東京都にある株式会社「Alfanet(アルファネット)」のホームページです。 ま …

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

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