WebGallery

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

*

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

   

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

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

 

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

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

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

青柳総本家 公式サイト

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

 

えるマネージメント

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

 

TAPUKO THE GAMA(タプコザガマ)

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

 

まとめ

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

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

 - 動きで表現

  関連記事

自分が本を選んでいるかのようなスクロール

  丸善出版株式会社とジュンク堂書店が佐賀県とコラボレートした「ほんの …

各コンテンツに飛ぶボタンを作り、読む側に優しいデザイン

  東京都にある留学サポートを行っている会社です。全体的に色をあまり使 …

おバカなジェリービーンズたち

  一時期話題になった動画のWebサイトです。現在ではアプリゲームもあ …

画面いっぱいに表示されるメニュー

愛知県にある栽培支援システム開発会社「株式会社プラントライフシステムズ」のホーム …

写真を使って島の魅力を伝える

2016年4月に「星野リゾート リゾナーレ西表島」からリオープンする「ホテル ニ …

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

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

車の世界観に合わせたデザインがグッとくる!「Make Your own RENOCA」のサイト

トヨタのランドクルーザーとハイエースの専門店を全国展開する「フレックス」が、リノ …

もうすぐバレンタイン!2019年バレンタイン特設サイトを集めました!

明日はいよいよバレンタインデーですね! 皆さんはもう誰かにチョコレートを上げまし …

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

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

ひし形のグリットを使って、授業風景などの写真を紹介している倉敷芸術科学大学のサイトがおしゃれ!

岡山県倉敷市にある大学「倉敷芸術科学大学 芸術学部」のサイトです。 ファーストビ …